/*
 * Fatal Files 2.0 — fatalfiles.css
 * Single compiled stylesheet. Includes theme, bundle picker, and cart drawer styles.
 *
 * Brand palette (defaults — overridden at runtime by Customizer via wp_head):
 *   #000814  Ink Black        — body background
 *   #001D3D  Prussian Blue    — surfaces / cards
 *   #003566  Oxford Navy      — secondary cards
 *   #FFC300  School Bus Yellow — accent / CTA
 *   #FFD60A  Gold             — hover accent
 */

/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  --color-ink:       #000814;
  --color-prussian:  #001D3D;
  --color-navy:      #003566;
  --color-yellow:    #FFC300;
  --color-gold:      #FFD60A;
  --color-white:     #ffffff;
  --color-off-white: #dde2eb;
  --color-muted:     #6b7f97;
  --color-border:    rgba(0, 53, 102, 0.35);
  --font-sans:       'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --ease-expo:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────────────────────────────────────────
   CSS RESET (Tailwind Preflight)
   ───────────────────────────────────────────────────────────── */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--color-border)}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--font-sans);scroll-behavior:smooth;overflow-x:clip}
body{margin:0;line-height:inherit;overflow-x:clip}
hr{height:0;color:inherit;border-top-width:1px}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,samp,pre{font-family:monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;background-color:transparent;background-image:none}
:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}
progress{vertical-align:baseline}
::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}
[type='search']{-webkit-appearance:textfield;outline-offset:-2px}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
summary{display:list-item}
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}
fieldset,legend{margin:0;padding:0}
ol,ul,menu{list-style:none;margin:0;padding:0}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{opacity:1;color:var(--color-muted)}
button,[role='button']{cursor:pointer}
:disabled{cursor:default}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
[hidden]{display:none}

/* ─────────────────────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────────────────────── */
body {
  background-color: var(--color-ink);
  color: var(--color-off-white);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

p { margin-top: 0; margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* Global 1px radius on all interactive form elements */
input, textarea, select, button { border-radius: 2px; }

/* ─────────────────────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────────────────────── */

/* Display */
.block        { display: block }
.inline-block { display: inline-block }
.inline       { display: inline }
.flex         { display: flex }
.inline-flex  { display: inline-flex }
.grid         { display: grid }
.contents     { display: contents }
.hidden       { display: none !important }

/* Position */
.static   { position: static }
.fixed    { position: fixed }
.absolute { position: absolute }
.relative { position: relative }
.sticky   { position: sticky }

/* Inset */
.inset-0   { inset: 0 }
.inset-x-0 { left: 0; right: 0 }
.top-0     { top: 0 }
.bottom-0  { bottom: 0 }
.bottom-8  { bottom: 2rem }
.left-0    { left: 0 }
.right-0   { right: 0 }
.left-1\/2 { left: 50% }

/* Z-index */
.z-0    { z-index: 0 }
.z-1    { z-index: 1 }
.z-2    { z-index: 2 }
.z-3    { z-index: 3 }
.z-10   { z-index: 10 }
.z-20   { z-index: 20 }
.z-50   { z-index: 50 }
.z-9999 { z-index: 9999 }

/* Width */
.w-px    { width: 1px }
.w-4     { width: 1rem }
.w-5     { width: 1.25rem }
.w-6     { width: 1.5rem }
.w-8     { width: 2rem }
.w-10    { width: 2.5rem }
.w-12    { width: 3rem }
.w-16    { width: 4rem }
.w-auto  { width: auto }
.w-full  { width: 100% }
.w-screen { width: 100vw }
.w-1\/2  { width: 50% }

/* Height */
.h-px     { height: 1px }
.h-4      { height: 1rem }
.h-5      { height: 1.25rem }
.h-6      { height: 1.5rem }
.h-8      { height: 2rem }
.h-10     { height: 2.5rem }
.h-12     { height: 3rem }
.h-auto   { height: auto }
.h-full   { height: 100% }
.h-screen { height: 100vh }
.h-svh    { height: 100svh }
.min-h-screen { min-height: 100vh }

/* Max width */
.max-w-xs  { max-width: 20rem }
.max-w-sm  { max-width: 24rem }
.max-w-md  { max-width: 28rem }
.max-w-lg  { max-width: 32rem }
.max-w-xl  { max-width: 36rem }
.max-w-2xl { max-width: 42rem }
.max-w-3xl { max-width: 48rem }
.max-w-4xl { max-width: 56rem }

/* Flex */
.flex-row      { flex-direction: row }
.flex-col      { flex-direction: column }
.flex-wrap     { flex-wrap: wrap }
.flex-1        { flex: 1 1 0% }
.flex-none     { flex: none }
.flex-shrink-0 { flex-shrink: 0 }
.flex-grow     { flex-grow: 1 }
.items-start   { align-items: flex-start }
.items-end     { align-items: flex-end }
.items-center  { align-items: center }
.items-stretch { align-items: stretch }
.justify-start   { justify-content: flex-start }
.justify-end     { justify-content: flex-end }
.justify-center  { justify-content: center }
.justify-between { justify-content: space-between }
.self-center  { align-self: center }
.self-start   { align-self: flex-start }
.self-end     { align-self: flex-end }
.self-stretch { align-self: stretch }

/* Gap */
.gap-0  { gap: 0 }
.gap-1  { gap: 0.25rem }
.gap-2  { gap: 0.5rem }
.gap-3  { gap: 0.75rem }
.gap-4  { gap: 1rem }
.gap-5  { gap: 1.25rem }
.gap-6  { gap: 1.5rem }
.gap-8  { gap: 2rem }
.gap-10 { gap: 2.5rem }
.gap-12 { gap: 3rem }
.gap-14 { gap: 3.5rem }
.gap-16 { gap: 4rem }
.gap-20 { gap: 5rem }

/* Grid */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)) }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)) }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)) }
.col-span-full { grid-column: 1 / -1 }
.place-items-center { place-items: center }

/* Margin */
.m-0     { margin: 0 }
.mx-auto { margin-inline: auto }
.ml-auto { margin-left: auto }
.mt-0  { margin-top: 0 }
.mt-2  { margin-top: 0.5rem }
.mt-3  { margin-top: 0.75rem }
.mt-4  { margin-top: 1rem }
.mt-6  { margin-top: 1.5rem }
.mt-8  { margin-top: 2rem }
.mt-10 { margin-top: 2.5rem }
.mb-0  { margin-bottom: 0 }
.mb-1  { margin-bottom: 0.25rem }
.mb-2  { margin-bottom: 0.5rem }
.mb-3  { margin-bottom: 0.75rem }
.mb-4  { margin-bottom: 1rem }
.mb-6  { margin-bottom: 1.5rem }
.mb-8  { margin-bottom: 2rem }
.mb-10 { margin-bottom: 2.5rem }
.mb-12 { margin-bottom: 3rem }
.ml-2  { margin-left: 0.5rem }
.ml-3  { margin-left: 0.75rem }
.ml-4  { margin-left: 1rem }
.mr-2  { margin-right: 0.5rem }
.mr-3  { margin-right: 0.75rem }

/* Padding */
.p-0  { padding: 0 }
.p-2  { padding: 0.5rem }
.p-3  { padding: 0.75rem }
.p-4  { padding: 1rem }
.p-6  { padding: 1.5rem }
.p-8  { padding: 2rem }
.px-3 { padding-inline: 0.75rem }
.px-4 { padding-inline: 1rem }
.px-5 { padding-inline: 1.25rem }
.px-6 { padding-inline: 1.5rem }
.px-8 { padding-inline: 2rem }
.py-1 { padding-block: 0.25rem }
.py-2 { padding-block: 0.5rem }
.py-3 { padding-block: 0.75rem }
.py-4 { padding-block: 1rem }
.py-6 { padding-block: 1.5rem }
.py-8 { padding-block: 2rem }
.py-10 { padding-block: 2.5rem }
.py-12 { padding-block: 3rem }
.py-16 { padding-block: 4rem }
.py-20 { padding-block: 5rem }
.py-24 { padding-block: 6rem }
.py-32 { padding-block: 8rem }
.pt-4  { padding-top: 1rem }
.pt-6  { padding-top: 1.5rem }
.pt-8  { padding-top: 2rem }
.pt-12 { padding-top: 3rem }
.pt-24 { padding-top: 6rem }
.pt-28 { padding-top: 7rem }
.pt-36 { padding-top: 9rem }
.pb-4  { padding-bottom: 1rem }
.pb-8  { padding-bottom: 2rem }
.pb-10 { padding-bottom: 2.5rem }
.pb-12 { padding-bottom: 3rem }

/* Typography — weight */
.font-light     { font-weight: 300 }
.font-normal    { font-weight: 400 }
.font-medium    { font-weight: 500 }
.font-semibold  { font-weight: 600 }
.font-bold      { font-weight: 700 }
.font-extrabold { font-weight: 800 }
.font-black     { font-weight: 900 }

/* Typography — size */
.text-xs   { font-size: 0.75rem;  line-height: 1rem }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem }
.text-base { font-size: 1rem;     line-height: 1.5rem }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem }

/* Typography — misc */
.text-left   { text-align: left }
.text-center { text-align: center }
.text-right  { text-align: right }
.uppercase   { text-transform: uppercase }
.italic      { font-style: italic }
.tracking-tight   { letter-spacing: -0.025em }
.tracking-normal  { letter-spacing: 0 }
.tracking-wide    { letter-spacing: 0.025em }
.tracking-wider   { letter-spacing: 0.05em }
.tracking-widest  { letter-spacing: 0.1em }
.leading-none    { line-height: 1 }
.leading-tight   { line-height: 1.25 }
.leading-normal  { line-height: 1.5 }
.leading-relaxed { line-height: 1.625 }
.truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.whitespace-nowrap { white-space: nowrap }
.no-underline    { text-decoration: none }
.underline       { text-decoration: underline }

/* Colours — text */
.text-white     { color: #ffffff }
.text-off-white { color: var(--color-off-white) }
.text-yellow    { color: var(--color-yellow) }
.text-muted     { color: var(--color-muted) }
.text-ink       { color: var(--color-ink) }
.text-prussian  { color: var(--color-prussian) }
.text-inherit   { color: inherit }

/* Colours — background */
.bg-ink         { background-color: var(--color-ink) }
.bg-prussian    { background-color: var(--color-prussian) }
.bg-navy        { background-color: var(--color-navy) }
.bg-yellow      { background-color: var(--color-yellow) }
.bg-white       { background-color: #ffffff }
.bg-transparent { background-color: transparent }

/* Colours — border */
.border-white   { border-color: #ffffff }
.border-yellow  { border-color: var(--color-yellow) }
.border-muted   { border-color: var(--color-muted) }
.border-brand   { border-color: var(--color-border) }

/* Borders */
.border    { border-width: 1px }
.border-0  { border-width: 0 }
.border-t  { border-top-width: 1px }
.border-b  { border-bottom-width: 1px }
.border-l  { border-left-width: 1px }
.border-r  { border-right-width: 1px }

/* Border radius */
.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: 2px }
.rounded-full { border-radius: 9999px }

/* Opacity */
.opacity-0  { opacity: 0 }
.opacity-50 { opacity: 0.5 }
.opacity-70 { opacity: 0.7 }
.opacity-80 { opacity: 0.8 }
.opacity-90 { opacity: 0.9 }
.opacity-100 { opacity: 1 }

/* Shadow */
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.4) }

/* Overflow */
.overflow-hidden   { overflow: hidden }
.overflow-auto     { overflow: auto }
.overflow-x-hidden { overflow-x: hidden }
.overflow-y-auto   { overflow-y: auto }

/* Object fit */
.object-cover   { object-fit: cover }
.object-contain { object-fit: contain }
.object-center  { object-position: center }

/* Misc */
.cursor-pointer      { cursor: pointer }
.select-none         { user-select: none }
.pointer-events-none { pointer-events: none }
.pointer-events-auto { pointer-events: auto }
.list-none           { list-style: none }
.appearance-none     { appearance: none }
.isolate             { isolation: isolate }
.will-change-transform { will-change: transform }
.translate-x-full    { transform: translateX(100%) }
.-translate-x-1\/2  { transform: translateX(-50%) }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0 }

/* Transition */
.transition        { transition-property: color,background-color,border-color,opacity,box-shadow,transform; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms }
.transition-colors { transition-property: color,background-color,border-color; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms }
.duration-200      { transition-duration: 200ms }

/* Backdrop filter */
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px) }

/* Hover utilities */
.hover\:text-white:hover     { color: #ffffff }
.hover\:text-yellow:hover    { color: var(--color-yellow) }
.hover\:bg-yellow:hover      { background-color: var(--color-yellow) }
.hover\:border-yellow:hover  { border-color: var(--color-yellow) }
.hover\:opacity-80:hover     { opacity: 0.8 }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem) }

/* Responsive — sm (640px+) */
@media (min-width: 640px) {
  .sm\:flex       { display: flex }
  .sm\:hidden     { display: none !important }
  .sm\:flex-row   { flex-direction: row }
  .sm\:items-center { align-items: center }
  .sm\:gap-6      { gap: 1.5rem }
  .sm\:w-auto     { width: auto }
}

/* Responsive — md (768px+) */
@media (min-width: 768px) {
  .md\:flex        { display: flex }
  .md\:grid        { display: grid }
  .md\:hidden      { display: none !important }
  .md\:flex-row    { flex-direction: row }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)) }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) }
  .md\:items-center { align-items: center }
  .md\:gap-8       { gap: 2rem }
  .md\:gap-16      { gap: 4rem }
  .md\:max-w-xl    { max-width: 36rem }
  .md\:max-w-2xl   { max-width: 42rem }
}

/* Responsive — lg (1024px+) */
@media (min-width: 1024px) {
  .lg\:flex        { display: flex }
  .lg\:grid        { display: grid }
  .lg\:hidden      { display: none !important }
  .lg\:flex-row    { flex-direction: row }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)) }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)) }
  .lg\:items-center { align-items: center }
  .lg\:gap-16      { gap: 4rem }
  .lg\:max-w-2xl   { max-width: 42rem }
  .lg\:max-w-3xl   { max-width: 48rem }
}

/* ─────────────────────────────────────────────────────────────
   KEYFRAME ANIMATIONS
   ───────────────────────────────────────────────────────────── */
@keyframes ff-up {
  from { opacity: 0; transform: translateY(24px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes ff-fade {
  from { opacity: 0 }
  to   { opacity: 1 }
}
@keyframes ff-scroll-line {
  0%   { transform: translateY(-100%) }
  100% { transform: translateY(250%) }
}
@keyframes ff-spin {
  to { transform: rotate(360deg) }
}
@keyframes ff-toast-in {
  from { opacity: 0; transform: translateY(-6px) }
  to   { opacity: 1; transform: translateY(0) }
}

.animate-ff-up   { animation: ff-up 0.7s var(--ease-expo) both }
.animate-ff-fade { animation: ff-fade 0.6s ease both }
.animate-spin    { animation: ff-spin 1s linear infinite }

.delay-100  { animation-delay: 0.1s }
.delay-200  { animation-delay: 0.2s }
.delay-300  { animation-delay: 0.3s }
.delay-400  { animation-delay: 0.4s }
.delay-500  { animation-delay: 0.5s }
.delay-1000 { animation-delay: 1.0s }

/* ─────────────────────────────────────────────────────────────
   LAYOUT
   ───────────────────────────────────────────────────────────── */
.ff-container {
  max-width: 1280px;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* ─────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────── */
.ff-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: 68px;
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease-expo), border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.ff-header.is-scrolled {
  background: rgba(0, 8, 20, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(0, 53, 102, 0.4);
  box-shadow: 0 2px 30px rgba(0,0,0,0.6);
}

.ff-header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 68px;
}

/* Logo */
.ff-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  gap: 10px;
}
.ff-logo-img,
.ff-logo img {
  height: 32px !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 32px !important;
  min-height: unset !important;
  min-width: unset !important;
  filter: brightness(0) invert(1);
  transition: opacity 0.2s;
  object-fit: contain;
  display: block !important;
}
.ff-logo-text {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

/* Desktop nav */
.ff-nav {
  display: flex;
  align-items: stretch;
  height: 68px;
  margin-left: auto;
  margin-right: 16px;
}
.ff-nav ul {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0; padding: 0;
}
.ff-nav li {
  position: relative;
  display: flex;
  align-items: stretch;
}
.ff-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(221,226,235,0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
  height: 68px;
}
.ff-nav > ul > li > a:hover,
.ff-nav > ul > li.current-menu-item > a,
.ff-nav > ul > li.current-menu-ancestor > a { color: #ffffff; }

/* Dropdown chevron */
.ff-nav .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  opacity: 0.55;
}
/* chevron rotation handled by JS .is-open class */

/* Active underline */
.ff-nav > ul > li::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-yellow);
  transform: scaleX(0);
  transition: transform 0.2s var(--ease-expo);
}
.ff-nav > ul > li:hover::after,
.ff-nav > ul > li.current-menu-item::after { transform: scaleX(1); }

/* ── Dropdown — click-toggled card ── */
.ff-nav .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 200px;
  background: var(--color-prussian);
  border: 1px solid rgba(0,53,102,0.55);
  border-radius: 6px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.3);
  padding: 6px;
  list-style: none; margin: 0;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* Arrow notch */
.ff-nav .sub-menu::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px; height: 10px;
  background: var(--color-prussian);
  border-top: 1px solid rgba(0,53,102,0.55);
  border-left: 1px solid rgba(0,53,102,0.55);
  transform: translateX(-50%) rotate(45deg);
}
/* Open state — toggled by JS adding .is-open */
.ff-nav .menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.ff-nav .menu-item-has-children.is-open > a::after {
  transform: rotate(180deg);
  opacity: 1;
}
/* Items */
.ff-nav .sub-menu li { display: block; }
.ff-nav .sub-menu li a {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(221,226,235,0.8);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.ff-nav .sub-menu li a:hover,
.ff-nav .sub-menu li a:focus {
  color: #ffffff;
  background: rgba(255,195,0,0.08);
  outline: none;
}
.ff-nav .sub-menu li.current-menu-item > a {
  color: var(--color-yellow);
}
/* Divider */
.ff-nav .sub-menu li.menu-item-has-divider {
  border-top: 1px solid rgba(0,53,102,0.4);
  margin-top: 4px;
  padding-top: 4px;
}

/* Header actions */
.ff-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Cart button */
.ff-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  color: rgba(221,226,235,0.72);
  text-decoration: none;
  transition: color 0.2s;
}
.ff-cart-btn:hover { color: #ffffff; }
.ff-cart-count {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  background: var(--color-yellow);
  color: var(--color-ink);
  font-size: 9px;
  font-weight: 800;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* Burger */
.ff-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-off-white);
  flex-shrink: 0;
}
.ff-burger span {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-expo), opacity 0.2s;
}
.ff-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ff-burger.is-open span:nth-child(2) { opacity: 0; }
.ff-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.ff-mobile-nav {
  position: fixed;
  top: 68px; left: 0; right: 0; bottom: 0;
  background: var(--color-ink);
  border-top: 1px solid var(--color-border);
  z-index: 9998;
  overflow-y: auto;
  padding: 24px clamp(16px,4vw,48px) 40px;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-expo);
}
.ff-mobile-nav.is-open { transform: translateX(0); }
.ff-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.ff-mobile-nav li { border-bottom: 1px solid var(--color-border); }
.ff-mobile-nav li a {
  display: block;
  padding: 16px 0;
  font-size: 22px;
  font-weight: 700;
  color: rgba(221,226,235,0.75);
  text-decoration: none;
  transition: color 0.2s;
}
.ff-mobile-nav li a:hover { color: #ffffff; }
.ff-mobile-nav .sub-menu li { border-bottom: none; }
.ff-mobile-nav .sub-menu li a { font-size: 16px; font-weight: 400; padding: 10px 0 10px 16px; }
.ff-mobile-nav-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

/* Site content offset for fixed header */
.site-content { padding-top: 68px; }
/* Hero pages: extend under the fixed header so background fills behind it */
.page-template-default .site-content,
.home .site-content { padding-top: 0; }
.ff-hero { margin-top: -68px; padding-top: 68px; }

@media (max-width: 768px) {
  .ff-nav    { display: none !important }
  .ff-burger { display: flex }
}

/* ─────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
  white-space: nowrap;
  line-height: 1;
}
.btn-primary {
  background: var(--color-yellow);
  color: var(--color-ink);
  border-color: var(--color-yellow);
}
.btn-primary:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-ink); }
.btn-outline {
  background: transparent;
  color: var(--color-off-white);
  border-color: rgba(221,226,235,0.3);
}
.btn-outline:hover { border-color: var(--color-off-white); color: #ffffff; }
.btn-lg { padding: 15px 32px; font-size: 12px; }
.btn-sm { padding: 7px 14px; font-size: 10px; }

/* ─────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────── */
.ff-hero {
  position: relative;
  height: calc(100vh + 68px);
  height: calc(100svh + 68px);
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-ink);
}
.ff-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ff-hero-bg video,
.ff-hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Video crossfade playlist */
.ff-hero-videos {
  position: absolute;
  inset: 0;
}
.ff-hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.ff-hero-video.is-active { opacity: 1; }
.ff-hero-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      ellipse 70% 80% at 62% 48%,
      rgba(0,8,20,0.00) 0%,
      rgba(0,8,20,0.25) 35%,
      rgba(0,8,20,0.70) 60%,
      rgba(0,8,20,0.92) 80%,
      rgba(0,8,20,1.00) 100%
    );
}
.ff-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      100deg,
      rgba(0,8,20,0.90) 0%,
      rgba(0,8,20,0.50) 45%,
      rgba(0,8,20,0.05) 100%
    ),
    linear-gradient(
      to top,
      rgba(0,8,20,1.0) 0%,
      transparent 28%
    );
  pointer-events: none;
}
.ff-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.ff-hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 20px;
}
.ff-hero-eyebrow-top {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-yellow);
}
.ff-hero-eyebrow-sub {
  font-size: 13px;
  font-weight: 300;
  color: rgba(221,226,235,0.55);
  border-left: 1px solid rgba(221,226,235,0.2);
  padding-left: 16px;
}

/* Hero h1 em highlight — moved from inline <style> */
#ff-hero h1 em { color: var(--color-yellow); font-style: normal; }

/* Hero stat divider */
.ff-stat-divider { border-right: 1px solid rgba(221,226,235,0.12); }

/* Hero stats */
.ff-hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-top: 24px;
}
.ff-hero-stat {
  display: flex;
  flex-direction: column;
}

/* Scroll indicator */
.ff-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 0; right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.ff-scroll-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow: hidden;
  height: 36px;
}
.ff-scroll-chevron {
  color: var(--color-yellow);
  opacity: 0;
  animation: ff-scroll-chevron 2s ease-in-out infinite;
  flex-shrink: 0;
}
.ff-scroll-chevron--delayed {
  animation-delay: 0.4s;
}
@keyframes ff-scroll-chevron {
  0%   { opacity: 0; transform: translateY(-12px); }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 640px) {
  .ff-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
  .ff-hero-stat {
    padding-right: 0 !important;
    margin-right: 0 !important;
    border-right: none !important;
    text-align: center;
    padding: 0 8px;
  }
  .ff-hero-stat:not(:last-child) {
    border-right: 1px solid rgba(221,226,235,0.12) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   CARDS
   ───────────────────────────────────────────────────────────── */
.ff-card {
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ff-card:hover {
  border-color: rgba(255,195,0,0.28);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transform: translateY(-3px);
}
.ff-card__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.ff-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-expo);
}
.ff-card:hover .ff-card__img img { transform: scale(1.04); }
.ff-card__badge {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(0,8,20,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 3px 8px;
}
.ff-card__body { padding: 16px; }
.ff-card__stamp {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: 4px;
}
.ff-card__number {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--color-yellow);
  margin-bottom: 6px;
}
.ff-card__title {
  font-size: 15px; font-weight: 700;
  margin-bottom: 10px; line-height: 1.3;
}
.ff-card__title a { color: var(--color-white); text-decoration: none; }
.ff-card__title a:hover { color: var(--color-yellow); }
.ff-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}
.ff-card__price {
  font-size: 20px; font-weight: 700;
  color: var(--color-yellow);
}

/* ─────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────── */
.ff-footer {
  background: var(--color-ink);
  border-top: 1px solid var(--color-border);
}
.ff-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border);
}
.ff-footer-brand { max-width: 20rem; }
.ff-footer-brand p {
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.625;
  margin-top: 0.75rem;
}
.ff-footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0; padding: 0;
}
.ff-footer-nav a {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.ff-footer-nav a:hover { color: #ffffff; }
.ff-footer-newsletter { max-width: 340px; width: 100%; }
.ff-footer-newsletter-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-bottom: 0.5rem;
}
.ff-footer-newsletter-desc {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-muted);
  margin-bottom: 1rem;
  line-height: 1.625;
}
.ff-footer-newsletter-form {
  display: flex;
  width: 100%;
}
.ff-footer-newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  border-right: none;
  color: var(--color-off-white);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s;
}
.ff-footer-newsletter-input:focus { border-color: var(--color-yellow); }
.ff-footer-newsletter-input::placeholder { color: var(--color-muted); }
.ff-footer-newsletter-btn {
  flex-shrink: 0;
  padding: 13px 22px;
  background: var(--color-yellow);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.ff-footer-newsletter-btn:hover { opacity: 0.9; }
.ff-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 1.5rem;
}
.ff-footer-bottom p { margin: 0; }
.ff-footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ff-footer-links a {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.ff-footer-links a:hover { color: var(--color-yellow); }

/* Social icon buttons */
.ff-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1.25rem;
}
.ff-footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.ff-footer-social-btn:hover {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
  background: rgba(255,195,0,0.06);
}

@media (max-width: 640px) {
  .ff-footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ff-footer-newsletter { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   WOOCOMMERCE — GLOBAL
   ───────────────────────────────────────────────────────────── */
.woocommerce-page .site-content,
.woocommerce .site-content { max-width: 100%; }

/* WC wrapper resets — our templates handle layout */
.single-product .woocommerce,
.woocommerce-page .woocommerce,
.woocommerce {
  padding: 0;
  max-width: 100%;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   SHOP HERO
   ───────────────────────────────────────────────────────────── */
.ff-shop-hero {
  position: relative;
  min-height: 36vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-ink);
  margin-top: -68px;
  padding-top: 68px;
}
.ff-shop-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.ff-shop-hero__bg--gradient {
  background:
    radial-gradient(ellipse 80% 60% at 20% 100%, rgba(0,53,102,0.7) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(255,195,0,0.04) 0%, transparent 60%),
    linear-gradient(160deg, #000814 0%, #001D3D 60%, #000814 100%);
}
.ff-shop-hero__mask {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,8,20,0.92) 30%, rgba(0,8,20,0.55) 100%);
}
.ff-shop-hero__overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, var(--color-ink));
  pointer-events: none;
}
.ff-shop-hero__content {
  position: relative; z-index: 2;
  padding-top: clamp(80px,10vw,120px);
  padding-bottom: clamp(52px,6vw,80px);
}
.ff-shop-hero__stamp-row {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 18px;
}
.ff-shop-hero__stamp {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--color-yellow);
  border: 1px solid rgba(255,195,0,0.3);
  padding: 5px 12px;
  background: rgba(255,195,0,0.05);
}
.ff-shop-hero__count {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted);
}
.ff-shop-hero__heading {
  font-size: clamp(44px,7vw,90px);
  font-weight: 900;
  color: #fff;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  max-width: 14ch;
}
.ff-shop-hero__heading em { color: var(--color-yellow); font-style: normal; }
.ff-shop-hero__sub {
  font-size: clamp(14px,1.5vw,16px);
  font-weight: 300;
  color: rgba(221,226,235,0.6);
  line-height: 1.7;
  max-width: 36rem;
  margin: 0;
}

/* Decorative scan-lines */
.ff-shop-hero__scan {
  position: absolute;
  right: clamp(40px,6vw,100px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 3px;
  opacity: 0.07;
  pointer-events: none;
}
.ff-shop-hero__scan span {
  display: block; height: 1px;
  background: #fff;
}
.ff-shop-hero__scan span:nth-child(1) { width: 120px; }
.ff-shop-hero__scan span:nth-child(2) { width: 80px; }
.ff-shop-hero__scan span:nth-child(3) { width: 160px; }
.ff-shop-hero__scan span:nth-child(4) { width: 60px; }
.ff-shop-hero__scan span:nth-child(5) { width: 100px; }

/* Bottom border rule */
.ff-shop-hero__rule {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,195,0,0.25) 30%, rgba(255,195,0,0.25) 70%, transparent);
}

/* ─────────────────────────────────────────────────────────────
   SHOP BODY
   ───────────────────────────────────────────────────────────── */
.ff-shop-body {
  padding: clamp(48px,6vw,80px) 0 clamp(64px,8vw,100px);
}

/* ─────────────────────────────────────────────────────────────
   CASE FILE CARDS — WooCommerce ul.products override
   ───────────────────────────────────────────────────────────── */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0 !important; padding: 0 !important;
}
@media (max-width: 900px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 540px) {
  .woocommerce ul.products { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Card ── */
.woocommerce ul.products li.product.ff-case-card {
  position: relative;
  display: flex; flex-direction: column;
  margin: 0 !important; float: none !important; width: auto !important;
  padding: 0 !important;
  background: var(--color-ink);
  border: 1px solid var(--color-border);
  overflow: hidden;
  opacity: 0;
  animation: ff-card-in 0.55s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ── Full-card link (invisible overlay) ── */
.ff-case-card__link {
  position: absolute; inset: 0; z-index: 3;
}

/* ── Folder tab ── */
.ff-case-card__tab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--color-prussian);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.ff-case-card__case-num {
  font-size: 8px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-muted);
  font-family: monospace;
  opacity: 0.6;
}
/* Large case number in card body replacing meta-row */
.ff-case-card__case-num-large {
  font-size: 11px; font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--color-yellow);
  font-family: monospace;
  opacity: 0.85;
}
.ff-case-card__difficulty {
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid;
}
.ff-case-card__difficulty--easy   { color: #4caf82; border-color: rgba(76,175,130,0.4); background: rgba(76,175,130,0.07); }
.ff-case-card__difficulty--medium { color: var(--color-yellow); border-color: rgba(255,195,0,0.35); background: rgba(255,195,0,0.05); }
.ff-case-card__difficulty--hard   { color: #e05a5a; border-color: rgba(224,90,90,0.4); background: rgba(224,90,90,0.07); }

/* ── Image ── */
.ff-case-card__img-wrap {
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.ff-case-card__img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover; display: block;
  filter: grayscale(15%) brightness(0.85);
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), filter 0.45s ease;
}
.ff-case-card:hover .ff-case-card__img {
  transform: scale(1.05);
  filter: grayscale(0%) brightness(0.9);
}
.ff-case-card__img-placeholder {
  width: 100%; aspect-ratio: 4/3;
  background: var(--color-prussian);
  display: flex; align-items: center; justify-content: center;
}
.ff-case-card__img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,8,20,0.7) 100%);
  pointer-events: none;
}
/* Stamp watermark on image */
.ff-case-card__img-stamp {
  position: absolute;
  bottom: 12px; left: 12px;
  font-size: 7px; font-weight: 800;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  pointer-events: none;
  font-family: monospace;
}

/* ── Body ── */
.ff-case-card__body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column;
  flex: 1;
}
.ff-case-card__meta-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.ff-case-card__cat {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-yellow);
}
.ff-case-card__cat a { color: inherit; text-decoration: none; }
.ff-case-card__players {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-muted);
}
.ff-case-card__title {
  font-size: clamp(15px, 2vw, 18px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 0 auto !important;
  padding: 0 !important;
  color: var(--color-white) !important;
}
.ff-case-card__title a {
  color: inherit; text-decoration: none;
  position: relative; z-index: 4;
  transition: color 0.2s;
}
.ff-case-card:hover .ff-case-card__title a { color: #fff; }

.ff-case-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  gap: 8px;
}
.ff-case-card__price {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--color-yellow) !important;
  display: block;
}
.ff-case-card__price del { color: var(--color-muted) !important; font-weight: 300 !important; font-size: 12px !important; margin-right: 4px; }
.ff-case-card__cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-off-white);
  text-decoration: none;
  position: relative; z-index: 4;
  transition: color 0.2s, gap 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ff-case-card:hover .ff-case-card__cta { color: var(--color-yellow); gap: 8px; }
.ff-case-card__cta svg { flex-shrink: 0; transition: transform 0.2s; }
.ff-case-card:hover .ff-case-card__cta svg { transform: translateX(2px); }

/* ── Corner bracket decorations ── */
.ff-case-card__corner {
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--color-yellow);
  border-style: solid;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  z-index: 2;
}
.ff-case-card:hover .ff-case-card__corner { opacity: 0.6; }
.ff-case-card__corner--tl { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.ff-case-card__corner--br { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }

/* ── Entrance animation ── */
@keyframes ff-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Empty state ── */
.ff-shop-empty {
  text-align: center;
  padding: clamp(60px,8vw,100px) 0;
  color: var(--color-muted);
}
.ff-shop-empty__icon { font-size: 48px; margin-bottom: 16px; }
.ff-shop-empty h2 { font-size: 22px; font-weight: 700; color: var(--color-off-white); margin-bottom: 8px; }
.ff-shop-empty p { font-size: 15px; font-weight: 300; line-height: 1.7; max-width: 36rem; margin: 0 auto; }

/* ── WC Pagination ── */
.woocommerce nav.woocommerce-pagination {
  margin-top: clamp(40px,5vw,60px);
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex; gap: 4px;
  list-style: none; margin: 0; padding: 0;
  border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--color-prussian) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-muted) !important;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--color-yellow) !important; color: var(--color-yellow) !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { border-color: var(--color-yellow) !important; color: var(--color-yellow) !important; background: rgba(255,195,0,0.06) !important; }

/* WC form inputs */
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"],
.woocommerce-page select,
.woocommerce-page textarea {
  background: var(--color-prussian) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  border-radius: 2px !important;
  padding: 12px 16px !important;
  font-weight: 300 !important;
}
.woocommerce-page input:focus,
.woocommerce-page select:focus,
.woocommerce-page textarea:focus {
  border-color: var(--color-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,195,0,0.15) !important;
  outline: none !important;
}

/* WC notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  background: var(--color-prussian) !important;
  border-top-color: var(--color-yellow) !important;
  color: var(--color-off-white) !important;
  border-radius: 2px !important;
}

/* ─────────────────────────────────────────────────────────────
   WOOCOMMERCE — SINGLE PRODUCT
   ───────────────────────────────────────────────────────────── */
.ff2-product-page-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(24px,4vw,48px) clamp(16px,4vw,48px);
  align-items: start;
}
@media (max-width: 768px) {
  .ff2-product-page-wrap { grid-template-columns: 1fr; gap: 24px; }
}

/* Single product: reset div.product grid (comes after the general rule to win cascade) */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 768px) {
  .woocommerce div.product { grid-template-columns: 1fr; gap: 24px; }
}
.single-product .woocommerce div.product { display: block; }

/* Gallery */
.ff2-product-sticky-col {
  position: sticky;
  top: 84px;
}
.ff2-product-gallery-main {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--color-prussian);
}
.ff2-product-gallery-main img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ff2-product-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px 0 0;
}
.ff2-product-thumb {
  width: 60px; height: 60px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color 0.2s;
  flex-shrink: 0;
}
.ff2-product-thumb:hover,
.ff2-product-thumb.active { border-color: var(--color-yellow); }

/* Scroll col */
.ff2-product-scroll-col {
  display: flex;
  flex-direction: column;
}

/* Title / price */
.ff2-product-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  color: var(--color-white);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.ff2-price-display {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-yellow);
  margin-bottom: 16px;
}
.ff2-price-display ins { text-decoration: none; }
.ff2-price-display del { color: var(--color-muted); font-weight: 300; font-size: 16px; margin-right: 8px; }

/* Delivery line */
.ff2-delivery-line {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 16px;
}

/* Rating */
.ff2-product-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ff2-stars-row { color: var(--color-yellow); font-size: 16px; letter-spacing: 2px; }
.ff2-rating-score { font-size: 14px; font-weight: 600; color: var(--color-off-white); }
.ff2-rating-count { font-size: 12px; font-weight: 300; color: var(--color-muted); }
.ff2-rating-link { font-size: 13px; color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.ff2-rating-link:hover { color: var(--color-off-white); }

/* Difficulty bar */
.ff2-difficulty { margin-bottom: 24px; }
.ff2-difficulty__label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: 8px;
}
.ff2-difficulty__track {
  width: 100%; height: 4px;
  background: rgba(0,53,102,0.4);
  margin-bottom: 6px;
}
.ff2-difficulty__fill { height: 100%; background: var(--color-yellow); }
.ff2-difficulty__value { font-size: 13px; font-weight: 600; color: var(--color-yellow); }

/* Tags */
/* ── Product tags ── */
.ff2-product-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
/* Base pill — inline style provides bg/border/color from tag meta */
.ff2-product-tag-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 2px;
  white-space: nowrap;
  line-height: 1.4;
}
/* Button-style variant — solid fill, no separate border colour needed */
.ff2-product-tag-pill--button {
  padding: 5px 14px;
  border-color: transparent;
}

/* Short description */
.ff2-product-short-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-muted);
  margin-top: 16px;
}

/* WC default add-to-cart hidden on single product (replaced by bundle picker) */
.single-product .woocommerce div.product form.cart { display: none !important; }

/* WC add-to-cart button */
.woocommerce div.product form.cart .qty {
  width: 80px;
  text-align: center;
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  color: var(--color-white);
  font-size: 18px;
  padding: 12px;
}
.woocommerce .single_add_to_cart_button {
  background: var(--color-yellow) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 16px 28px !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
  width: 100%;
}
.woocommerce .single_add_to_cart_button:hover { opacity: 0.9 !important; }

/* Tabs */
.ff2-tabs-divider { border: none; border-top: 1px solid var(--color-border); margin: 36px 0 0; }
.ff2-tab-nav { display: flex; border-bottom: 1px solid var(--color-border); }
.ff2-tab-btn {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 20px 24px;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: color 0.2s, border-color 0.2s;
}
.ff2-tab-btn:hover { color: var(--color-off-white); }
.ff2-tab-btn.active { color: var(--color-white); border-bottom-color: var(--color-white); }
.ff2-tab-badge {
  background: var(--color-yellow);
  color: var(--color-ink);
  font-size: 9px; font-weight: 800;
  padding: 2px 6px;
  border-radius: 9999px;
  min-width: 18px;
  text-align: center;
}
.ff2-tab-panel { display: none; padding-top: 36px; }
.ff2-tab-panel.active { display: block; }
.ff2-tab-desc { color: var(--color-off-white); font-size: 15px; line-height: 1.9; }
.ff2-tab-desc p { margin-bottom: 1em; }
.ff2-tab-desc p:last-child { margin-bottom: 0; }

/* Reviews */
.ff2-reviews-summary {
  display: flex; align-items: center; gap: 40px;
  margin-bottom: 36px; padding-bottom: 36px;
  border-bottom: 1px solid var(--color-border);
}
/* template uses .ff2-score-block (not .ff2-reviews-score-block) */
.ff2-score-block {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; flex-shrink: 0;
}
/* template uses .ff2-big-score */
.ff2-big-score {
  font-size: 60px; font-weight: 900;
  color: var(--color-white); line-height: 1;
  letter-spacing: -0.03em;
}
/* template uses .ff2-big-stars */
.ff2-big-stars { display: flex; gap: 3px; }
.ff2-rev-star { font-size: 15px; color: var(--color-border); }
/* template outputs .filled (not .is-filled) */
.ff2-rev-star.filled { color: var(--color-yellow); }
.ff2-reviews-total { font-size: 11px; color: var(--color-muted); white-space: nowrap; }
/* template uses .ff2-rating-bars */
.ff2-rating-bars { flex: 1; display: flex; flex-direction: column; gap: 8px; }
/* template uses .ff2-bar-row */
.ff2-bar-row { display: flex; align-items: center; gap: 10px; }
.ff2-bar-label { font-size: 12px; color: var(--color-muted); width: 8px; flex-shrink: 0; }
.ff2-bar-track { flex: 1; height: 4px; background: rgba(0,53,102,0.4); }
.ff2-bar-fill { height: 100%; background: var(--color-yellow); }
.ff2-bar-count { font-size: 12px; color: var(--color-muted); width: 20px; text-align: right; flex-shrink: 0; }
.ff2-review-item { padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.ff2-review-item:last-child { border-bottom: none; }
.ff2-review-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ff2-review-left { display: flex; align-items: center; gap: 10px; }
.ff2-review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--color-white);
  flex-shrink: 0;
}
.ff2-review-author { font-size: 14px; font-weight: 500; color: var(--color-off-white); }
.ff2-review-verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: #4caf82;
  background: rgba(76,175,130,0.1);
  border: 1px solid rgba(76,175,130,0.2);
  padding: 2px 7px; border-radius: 9999px;
}
.ff2-review-stars { display: flex; gap: 2px; }
.ff2-review-date { font-size: 11px; color: var(--color-muted); white-space: nowrap; }
.ff2-review-body { font-size: 14px; line-height: 1.8; color: var(--color-off-white); }
.ff2-reviews-empty { text-align: center; color: var(--color-muted); font-size: 14px; padding: 40px 0; font-style: italic; }

/* ── Review / comment form ─────────────────────────────────────
   WooCommerce outputs #respond with .comment-form-rating,
   .comment-form-comment, .comment-form-author etc.
   ──────────────────────────────────────────────────────────── */
#respond {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--color-border);
}
#respond .comment-reply-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: none !important;
}
/* Star rating widget */
#respond .comment-form-rating {
  margin-bottom: 20px;
}
#respond .comment-form-rating label {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 10px;
}
#respond .stars {
  display: flex; gap: 4px; align-items: center;
}
#respond .stars a {
  font-size: 22px;
  color: var(--color-border);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1;
}
#respond .stars a:hover,
#respond .stars a.active,
#respond .stars:hover a { color: var(--color-yellow); }
#respond .stars:hover a:hover ~ a { color: var(--color-border); }
/* Layout: two-column on wider screens, single on mobile */
#respond .comment-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
#respond .comment-form-rating,
#respond .comment-form-comment,
#respond .form-submit {
  grid-column: 1 / -1;
}
/* Labels */
#respond .comment-form label {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 7px;
}
/* Inputs */
#respond .comment-form input[type="text"],
#respond .comment-form input[type="email"],
#respond .comment-form input[type="url"],
#respond .comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-prussian) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 12px 14px !important;
  outline: none !important;
  border-radius: 2px !important;
  transition: border-color 0.2s !important;
  -webkit-appearance: none;
}
#respond .comment-form input:focus,
#respond .comment-form textarea:focus {
  border-color: var(--color-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,195,0,0.1) !important;
}
#respond .comment-form textarea {
  min-height: 120px;
  resize: vertical;
}
/* Required asterisk */
#respond .required { color: var(--color-yellow); }
/* Submit button */
#respond .form-submit { margin: 0; }
#respond .form-submit .submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-yellow) !important;
  color: var(--color-ink) !important;
  border: none !important;
  padding: 13px 28px !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
  border-radius: 2px !important;
  width: auto !important;
}
#respond .form-submit .submit:hover { opacity: 0.88 !important; }
/* Custom star picker */
.ff2-star-picker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
}
.ff2-star-btn {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--color-border);
  cursor: pointer;
  padding: 2px 3px;
  transition: color 0.12s, transform 0.12s;
  font-family: inherit;
}
.ff2-star-btn:hover,
.ff2-star-btn.is-hovered { color: var(--color-yellow); transform: scale(1.15); }
.ff2-star-btn.is-selected { color: var(--color-yellow); }
.ff2-star-clear {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--color-muted);
  cursor: pointer;
  padding: 2px 6px;
  margin-left: 4px;
  font-family: inherit;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
  pointer-events: none;
}
.ff2-star-picker.has-value .ff2-star-clear {
  opacity: 1;
  pointer-events: all;
}
.ff2-star-clear:hover { color: var(--color-off-white); }

/* Rating select */
#respond .comment-form-rating select#rating {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-prussian) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 12px 14px !important;
  outline: none !important;
  border-radius: 2px !important;
  -webkit-appearance: none;
  cursor: pointer;
}
#respond .comment-form-rating select#rating:focus {
  border-color: var(--color-yellow) !important;
}

/* Comment notes / privacy notice */
#respond .comment-notes,
#respond .logged-in-as {
  grid-column: 1 / -1;
  font-size: 12px; font-weight: 300;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}
#respond .comment-notes a,
#respond .logged-in-as a { color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; }
#respond .comment-notes a:hover,
#respond .logged-in-as a:hover { color: var(--color-off-white); }

@media (max-width: 600px) {
  #respond .comment-form { grid-template-columns: 1fr; }
  #respond .form-submit .submit { width: 100% !important; justify-content: center; }
}

@media (max-width: 768px) {
  .ff2-product-sticky-col { position: relative; top: 0; }
  .ff2-reviews-summary {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }
  .ff2-score-block { align-items: flex-start; }
  .ff2-rating-bars { width: 100%; }
  .ff2-bar-track { flex: 1; min-width: 0; }
  .ff2-review-header { flex-direction: column; gap: 8px; }
  .ff2-review-right { align-items: flex-start; }
}

/* ─────────────────────────────────────────────────────────────
   WOOCOMMERCE — RELATED PRODUCTS
   ───────────────────────────────────────────────────────────── */
.ff2-related-section {
  background: #dde2eb;
  padding: clamp(60px,8vw,100px) 0 clamp(40px,6vw,80px);
  position: relative;
  /* Break out of WooCommerce's max-width wrapper */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}
.ff2-related-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: var(--color-ink);
  clip-path: ellipse(52% 100% at 50% 0%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 640px) {
  .ff2-related-section::before {
    height: 28px;
    clip-path: ellipse(80% 100% at 50% 0%);
  }
}
.ff2-related-section .ff-container { position: relative; z-index: 2; }
.ff2-related-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-prussian); margin-bottom: 10px;
}
.ff2-related-heading {
  font-size: clamp(22px,3vw,36px);
  font-weight: 900;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}
.ff2-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .ff2-related-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .ff2-related-grid { grid-template-columns: 1fr; } }

.ff2-related-card {
  background: var(--color-white);
  border: 1px solid rgba(0,29,61,0.12);
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.ff2-related-card:hover { border-color: var(--color-prussian); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,29,61,0.12); }
.ff2-related-img { display: block; overflow: hidden; position: relative; }
.ff2-related-img img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ff2-related-card:hover .ff2-related-img img { transform: scale(1.04); }
.ff2-related-evidence {
  position: absolute; top: 10px; left: 10px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-white);
  background: rgba(0,8,20,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 3px 8px;
}
.ff2-related-body { padding: 14px; }
.ff2-related-stamp { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 3px; }
.ff2-related-number { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--color-prussian); margin-bottom: 5px; }
.ff2-related-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.ff2-related-title a { color: var(--color-ink); text-decoration: none; }
.ff2-related-title a:hover { color: var(--color-prussian); }
.ff2-related-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ff2-related-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ff2-related-price { font-size: 15px; font-weight: 700; color: var(--color-prussian); }
.ff2-related-price del { color: var(--color-muted); font-weight: 300; font-size: 12px; }

/* ─────────────────────────────────────────────────────────────
   BUNDLE PICKER  (formerly ff-bundle.css)
   ───────────────────────────────────────────────────────────── */
.ff-bundle {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ff-tier {
  border: 1px solid var(--color-border);
  background: var(--color-prussian);
  transition: border-color 0.2s;
  cursor: pointer;
}
.ff-tier:hover { border-color: var(--color-muted); }
.ff-tier--active { border-color: var(--color-yellow); cursor: default; }
.ff-tier__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  gap: 12px;
}
.ff-tier__left {
  display: flex; align-items: center;
  gap: 12px; flex: 1; min-width: 0;
}
.ff-tier__radio {
  width: 18px; height: 18px;
  border: 2px solid var(--color-muted);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.ff-tier--active .ff-tier__radio { border-color: var(--color-yellow); }
.ff-tier__radio-inner {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-yellow);
  opacity: 0; transform: scale(0);
  transition: opacity 0.15s, transform 0.15s;
}
.ff-tier--active .ff-tier__radio-inner { opacity: 1; transform: scale(1); }
.ff-tier__label {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-off-white);
  white-space: nowrap;
}
.ff-tier--active .ff-tier__label { color: var(--color-white); }
.ff-tier__save {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-yellow);
  padding: 3px 8px;
  white-space: nowrap; flex-shrink: 0;
}
.ff-tier__right {
  display: flex; flex-direction: column;
  align-items: flex-end; flex-shrink: 0; gap: 2px;
}
.ff-tier__price {
  font-size: 18px; font-weight: 800;
  color: var(--color-off-white);
  white-space: nowrap; letter-spacing: -0.02em;
}
.ff-tier--active .ff-tier__price { color: var(--color-yellow); }
.ff-tier__per { font-size: 11px; font-weight: 400; color: var(--color-muted); }
.ff-tier__was { font-size: 11px; color: var(--color-muted); text-decoration: line-through; }
.ff-tier__slots {
  display: none; flex-direction: column;
  gap: 5px; padding: 0 14px 14px;
}
.ff-tier--active .ff-tier__slots { display: flex; }
.ff-tier__slot {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-ink);
  border: 1px solid var(--color-border);
  padding: 10px 13px; min-height: 62px;
  transition: border-color 0.2s;
}
.ff-tier__slot:hover { border-color: var(--color-muted); }
.ff-tier__slot--error { border-color: #e05a5a; }
.ff-slot__num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-yellow); color: var(--color-ink);
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ff-slot__img {
  width: 42px; height: 42px;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.ff-slot__info {
  flex: 1; display: flex; align-items: center;
  gap: 8px; position: relative; min-width: 0;
}
.ff-slot__name {
  font-size: 13px; font-weight: 400;
  color: var(--color-off-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ff-slot__sub { font-size: 11px; color: var(--color-muted); flex-shrink: 0; }
.ff-slot__select {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.ff-slot__chevron {
  color: var(--color-muted); flex-shrink: 0;
  margin-left: auto; transition: color 0.2s;
}
.ff-tier__slot:hover .ff-slot__chevron { color: var(--color-off-white); }
.ff-slot__select--error ~ .ff-slot__chevron { color: #e05a5a; }
.ff-bundle__footer {
  display: flex; flex-direction: column;
  gap: 8px; margin-top: 6px;
}
.ff-bundle__total-bar {
  display: flex; align-items: center;
  gap: 14px; padding: 13px 18px;
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
}
.ff-bundle__total-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-muted); flex-shrink: 0;
}
.ff-bundle__total-price {
  font-size: 26px; font-weight: 900;
  color: var(--color-yellow);
  letter-spacing: -0.02em; flex: 1;
}
.ff-bundle__saving {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-yellow);
  padding: 4px 10px; white-space: nowrap;
}
.ff-bundle__cta {
  display: flex;
  align-items: center; justify-content: center;
  gap: 10px; width: 100%;
  padding: 17px 28px;
  background: var(--color-yellow);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: opacity 0.2s;
}
.ff-bundle__cta:hover { opacity: 0.9; }
.ff-bundle__cta:disabled { opacity: 0.5; cursor: wait; }
.ff-bundle__msg {
  font-size: 13px; padding: 11px 15px;
  border: 1px solid var(--color-border);
  color: var(--color-off-white);
}
.ff-bundle__msg a { color: var(--color-yellow); text-decoration: underline; }
.ff-bundle__msg--success { border-color: #3a8c62; background: rgba(58,140,98,0.12); color: #6dbb96; }
.ff-bundle__msg--error   { border-color: #8c3a3a; background: rgba(140,58,58,0.12); color: #e07070; }

/* ─────────────────────────────────────────────────────────────
   CART DRAWER  (formerly ff-drawer.css)
   ───────────────────────────────────────────────────────────── */
.ff-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,8,20,0.7);
  z-index: 9998;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.ff-drawer-backdrop.is-open {
  opacity: 1; visibility: visible; transition-delay: 0s;
}
.ff-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-ink);
  border-left: 1px solid var(--color-border);
  z-index: 9999;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-expo);
  will-change: transform;
}
.ff-drawer.is-open { transform: translateX(0); }
.ff-drawer__header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.ff-drawer__title {
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-off-white);
}
.ff-drawer__close {
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.ff-drawer__close:hover { border-color: var(--color-off-white); color: var(--color-off-white); }
.ff-drawer__toast {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 14px 0;
  padding: 11px 13px;
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-yellow);
  font-size: 13px; color: var(--color-off-white);
  animation: ff-toast-in 0.3s ease;
  flex-shrink: 0;
}
.ff-drawer__toast-icon { color: var(--color-yellow); flex-shrink: 0; display: flex; }
.ff-drawer__toast-text { flex: 1; font-size: 13px; color: var(--color-off-white); }
.ff-drawer__toast-text strong { font-weight: 700; color: var(--color-yellow); }
.ff-drawer__toast-dismiss {
  background: transparent; border: none;
  color: var(--color-muted); cursor: pointer;
  padding: 2px; display: flex; flex-shrink: 0; transition: color 0.2s;
}
.ff-drawer__toast-dismiss:hover { color: var(--color-off-white); }
.ff-drawer__body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.ff-drawer__body::-webkit-scrollbar { width: 3px; }
.ff-drawer__body::-webkit-scrollbar-track { background: transparent; }
.ff-drawer__body::-webkit-scrollbar-thumb { background: var(--color-border); }
.ff-drawer__body.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.2s; }
.ff-drawer__empty {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  padding: 56px 24px; text-align: center;
}
.ff-drawer__empty-icon { width: 52px; height: 52px; color: var(--color-border); }
.ff-drawer__empty-text { font-size: 14px; color: var(--color-muted); margin: 0; }
.ff-drawer__continue {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border: 1px solid var(--color-border);
  color: var(--color-off-white);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.ff-drawer__continue:hover { border-color: var(--color-yellow); color: var(--color-yellow); }
.ff-drawer__items { list-style: none; margin: 0; padding: 0; }
.ff-drawer__item {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}
.ff-drawer__item-img { flex-shrink: 0; }
.ff-drawer__item-img img {
  width: 68px; height: 68px;
  object-fit: cover; display: block;
  border: 1px solid var(--color-border);
}
.ff-drawer__item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ff-drawer__item-name {
  font-size: 13px; font-weight: 400;
  color: var(--color-off-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; text-decoration: none;
  transition: color 0.2s;
}
.ff-drawer__item-name:hover { color: var(--color-yellow); }
.ff-drawer__item-price { font-size: 14px; font-weight: 700; color: var(--color-yellow); }
.ff-drawer__item-price .woocommerce-Price-amount { color: inherit; }
.ff-drawer__item-remove {
  background: transparent; border: none;
  font-family: var(--font-sans); font-size: 11px;
  color: var(--color-muted); cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color 0.2s;
}
.ff-drawer__item-remove:hover { color: var(--color-yellow); }
.ff-drawer__item-qty {
  font-size: 12px; color: var(--color-muted);
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  padding: 3px 9px; flex-shrink: 0; align-self: center;
}
.ff-drawer__upsells { padding: 18px 18px 4px; }
.ff-drawer__upsells-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-muted); margin: 0 0 10px;
}
.ff-drawer__upsells-grid { display: flex; flex-direction: column; gap: 7px; }
.ff-drawer__upsell-card {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  transition: border-color 0.2s;
}
.ff-drawer__upsell-card:hover { border-color: var(--color-muted); }
.ff-drawer__upsell-card img { width: 42px; height: 42px; object-fit: cover; flex-shrink: 0; }
.ff-drawer__upsell-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ff-drawer__upsell-name { font-size: 12px; color: var(--color-off-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-drawer__upsell-price { font-size: 11px; color: var(--color-muted); }
.ff-drawer__upsell-price .woocommerce-Price-amount { color: inherit !important; font-size: inherit !important; }
.ff-drawer__upsell-add {
  width: 28px; height: 28px;
  background: var(--color-yellow); border: none;
  color: var(--color-ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: opacity 0.2s;
}
.ff-drawer__upsell-add:hover { opacity: 0.85; }
.ff-drawer__upsell-add.is-loading { opacity: 0.4; pointer-events: none; }
.ff-drawer__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  padding: 18px;
  background: var(--color-ink);
}
.ff-drawer__total {
  display: flex; align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ff-drawer__total-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-muted);
}
.ff-drawer__total-amount {
  font-size: 26px; font-weight: 900;
  color: var(--color-yellow); letter-spacing: -0.02em;
}
.ff-drawer__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 24px;
  background: var(--color-yellow); color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; margin-bottom: 14px;
  transition: opacity 0.2s;
}
.ff-drawer__cta:hover { opacity: 0.9; color: var(--color-ink); }
.ff-drawer__trust { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.ff-drawer__trust-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--color-muted);
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  padding: 4px 9px;
}
.ff-drawer__trust-item svg { color: var(--color-yellow); flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   MISSING / ADDITIONAL COMPONENT STYLES
   ───────────────────────────────────────────────────────────── */

/* Breadcrumb */
.ff2-breadcrumb-wrap { padding-top: clamp(16px, 3vw, 28px); }
.ff2-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}
.ff2-breadcrumb a { color: var(--color-muted); text-decoration: none; }
.ff2-breadcrumb a:hover { color: var(--color-off-white); }
.ff2-breadcrumb-sep { color: var(--color-border); padding: 0 2px; }

/* Gallery main image */
.ff2-gallery-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-prussian);
}
.ff2-gallery-main img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Related products — "View Case" button */
.ff2-related-cta {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--color-prussian);
  color: var(--color-prussian);
  background: transparent;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ff2-related-cta:hover {
  background: var(--color-prussian);
  color: var(--color-white);
}

/* Footer — semantic classes replacing utility soup */
.ff-footer-copyright {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
  margin: 0;
}

/* Difficulty bar fill — width is set inline (dynamic %) */
.ff2-difficulty__fill { height: 100%; background: var(--color-yellow); }


/* ─────────────────────────────────────────────────────────────
   HERO — additional semantic classes
   (replaces inline styles from front-page.php)
   ───────────────────────────────────────────────────────────── */

/* Constrain hero copy to ~3/4 width */
.ff-hero-inner { max-width: 48rem; }

/* Fallback gradient when no video/image set */
.ff-hero-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #000814 0%, #001D3D 55%, #003566 100%);
}

/* H1 */
.ff-hero-heading {
  font-size: clamp(38px, 6.5vw, 80px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: 1.5rem;
}
.ff-hero-heading em { color: var(--color-yellow); font-style: normal; }

/* Sub */
.ff-hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 300;
  line-height: 1.625;
  color: rgba(221, 226, 235, 0.70);
  max-width: 34rem;
  margin-bottom: 2.5rem;
}

/* Stat value + label */
.ff-hero-stat-value {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 900;
  color: var(--color-yellow);
  line-height: 1;
  margin-bottom: 4px;
}
.ff-hero-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

/* Divider between stats */
.ff-hero-stat--divided {
  padding-right: 2rem;
  margin-right: 2rem;
  border-right: 1px solid rgba(221, 226, 235, 0.12);
}

/* Scroll indicator label */
.ff-scroll-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .ff-hero-stat--divided {
    padding-right: 0 !important;
    margin-right: 0 !important;
    border-right: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   WOOCOMMERCE CHECKOUT
   ═════════════════════════════════════════════════════════════ */

/* ── Page wrapper — constrain to same container as rest of site ── */
.woocommerce-checkout #page,
.woocommerce-checkout .site-main,
.woocommerce-checkout .woocommerce {
  max-width: 100%;
  padding: 0;
  margin: 0;
}
/* FF2 multistep checkout plugin owns all spacing — no constraints here */
.woocommerce-checkout .woocommerce {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Two-column layout ── */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-checkout h3#ship-to-different-address,
.woocommerce-checkout .woocommerce-additional-fields {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Override WC's floated two-col layout with CSS grid.
   Width and padding mirrors .ff-container so checkout
   aligns with every other page on the site. */
.woocommerce-checkout form.woocommerce-checkout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
  max-width: 1280px;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
  padding-top: 40px;
  padding-bottom: 80px;
  box-sizing: border-box;
}
.woocommerce-checkout form.woocommerce-checkout #customer_details {
  grid-column: 1;
  grid-row: 1;
}
.woocommerce-checkout form.woocommerce-checkout #order_review_heading,
.woocommerce-checkout form.woocommerce-checkout #order_review {
  grid-column: 2;
  grid-row: 1 / span 3;
}
.woocommerce-checkout form.woocommerce-checkout .woocommerce-checkout-payment {
  grid-column: 1;
  grid-row: 2;
}

/* ── Section headings ── */
.woocommerce-checkout h3 {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-yellow) !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: none !important;
}
.woocommerce-checkout #order_review_heading {
  margin-bottom: 16px !important;
}

/* ── Form rows & labels ── */
.woocommerce-checkout .form-row {
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.woocommerce-checkout .form-row + .form-row {
  margin-top: 12px !important;
}
.woocommerce-checkout label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
  margin-bottom: 6px !important;
  display: block;
}
.woocommerce-checkout label .optional {
  color: var(--color-muted) !important;
  opacity: 0.5;
}
.woocommerce-checkout label .required {
  color: var(--color-yellow) !important;
  text-decoration: none !important;
}

/* ── Inputs, selects, textareas ── */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background: var(--color-prussian) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 12px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  -webkit-appearance: none !important;
  transition: border-color 0.2s !important;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--color-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,195,0,0.1) !important;
}
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
  color: var(--color-muted) !important;
  opacity: 0.6 !important;
}

/* ── Select arrow ── */
.woocommerce-checkout select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7f97' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

/* ── Select2 — WooCommerce replaces country/state <select> with Select2 widget ── */
.woocommerce-checkout .select2-container .select2-selection--single {
  background: var(--color-prussian) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  height: auto !important;
  padding: 12px 36px 12px 14px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}
.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--focus .select2-selection--single {
  border-color: var(--color-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,195,0,0.1) !important;
}
.woocommerce-checkout .select2-selection--single .select2-selection__rendered {
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: inherit !important;
  padding: 0 !important;
}
.woocommerce-checkout .select2-selection--single .select2-selection__placeholder {
  color: var(--color-muted) !important;
  opacity: 0.6 !important;
}
/* Replace Select2's default arrow with our SVG chevron */
.woocommerce-checkout .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 10px !important;
  width: 20px !important;
}
.woocommerce-checkout .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}
.woocommerce-checkout .select2-selection--single .select2-selection__arrow::after {
  content: '' !important;
  display: block !important;
  width: 12px !important;
  height: 8px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7f97' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
/* Dropdown panel */
.woocommerce-checkout .select2-dropdown {
  background: var(--color-prussian) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  z-index: 99999 !important;
}
.woocommerce-checkout .select2-search--dropdown {
  padding: 10px !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.woocommerce-checkout .select2-search--dropdown .select2-search__field {
  background: var(--color-ink) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus {
  border-color: rgba(255,195,0,0.5) !important;
}
.woocommerce-checkout .select2-results__options {
  max-height: 240px !important;
  overflow-y: auto !important;
  padding: 4px 0 !important;
}
.woocommerce-checkout .select2-results__option {
  background: transparent !important;
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  padding: 9px 14px !important;
}
.woocommerce-checkout .select2-results__option--highlighted,
.woocommerce-checkout .select2-results__option[aria-selected="true"] {
  background: rgba(255,195,0,0.08) !important;
  color: var(--color-yellow) !important;
}
.woocommerce-checkout .select2-results__option[aria-selected="true"] {
  font-weight: 600 !important;
}

/* ── Address fields two-col grid ── */
.woocommerce-checkout .woocommerce-address-fields .form-row-first,
.woocommerce-checkout .woocommerce-address-fields .form-row-last,
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  float: none !important;
  width: 100% !important;
}
.woocommerce-checkout .woocommerce-address-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.woocommerce-checkout .woocommerce-address-fields__field-wrapper .form-row-wide {
  grid-column: 1 / -1 !important;
}

/* ── Section card styling ── */
.woocommerce-checkout #customer_details .woocommerce-billing-fields,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-account-fields {
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 28px;
  margin-bottom: 20px;
}

/* ── Checkbox rows ── */
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-form-login__rememberme {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--color-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}
.woocommerce-checkout input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  accent-color: var(--color-yellow) !important;
  flex-shrink: 0;
}

/* ── Ship to different address toggle ── */
.woocommerce-checkout h3#ship-to-different-address {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer;
}
.woocommerce-checkout h3#ship-to-different-address label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-yellow) !important;
  cursor: pointer;
}

/* ── Order review table (right column) ── */
.woocommerce-checkout #order_review {
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  position: sticky;
  top: 88px;
}
.woocommerce-checkout table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
  margin: 0 !important;
}
.woocommerce-checkout table.shop_table th {
  padding: 16px 24px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
  border-bottom: 1px solid var(--color-border) !important;
  background: transparent !important;
}
.woocommerce-checkout table.shop_table td {
  padding: 16px 24px !important;
  font-size: 13px !important;
  color: var(--color-off-white) !important;
  border-bottom: 1px solid var(--color-border) !important;
  vertical-align: top !important;
}
.woocommerce-checkout table.shop_table .product-name {
  font-weight: 600 !important;
  color: var(--color-off-white) !important;
}
.woocommerce-checkout table.shop_table .product-name .product-quantity {
  color: var(--color-muted) !important;
  font-weight: 300 !important;
}
.woocommerce-checkout table.shop_table .product-total {
  text-align: right !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
}
.woocommerce-checkout table.shop_table tfoot tr td,
.woocommerce-checkout table.shop_table tfoot tr th {
  padding: 12px 24px !important;
  font-size: 12px !important;
}
.woocommerce-checkout table.shop_table tfoot .order-total td,
.woocommerce-checkout table.shop_table tfoot .order-total th {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--color-white) !important;
  border-bottom: none !important;
  padding-bottom: 20px !important;
}
.woocommerce-checkout table.shop_table tfoot .order-total .amount {
  color: var(--color-yellow) !important;
  font-size: 18px !important;
}

/* ── Payment section ── */
.woocommerce-checkout #payment {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--color-prussian) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-off-white) !important;
  cursor: pointer;
  margin: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--color-yellow) !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  flex-shrink: 0;
}
/* Active payment method highlight */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: rgba(255,195,0,0.35) !important;
  background: rgba(255,195,0,0.04) !important;
}
.woocommerce-checkout #payment .payment_box {
  background: rgba(0,8,20,0.4) !important;
  border-top: 1px solid var(--color-border) !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.woocommerce-checkout #payment .payment_box p,
.woocommerce-checkout #payment .payment_box label {
  font-size: 12px !important;
  color: var(--color-muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 300 !important;
}
/* Payment method card icons */
.woocommerce-checkout #payment ul.payment_methods li img {
  height: 20px !important;
  width: auto !important;
  margin-left: auto !important;
  opacity: 0.7;
}

/* ── Privacy / terms notice ── */
.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: 11px !important;
  color: var(--color-muted) !important;
  line-height: 1.7 !important;
  margin-bottom: 20px !important;
}
.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--color-yellow) !important;
}

/* ── Place order button ── */
.woocommerce-checkout #payment #place_order {
  width: 100% !important;
  background: var(--color-yellow) !important;
  color: var(--color-ink) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 16px 32px !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
  display: block !important;
}
.woocommerce-checkout #payment #place_order:hover {
  opacity: 0.88 !important;
}

/* ── WC notices ── */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
  margin-bottom: 20px !important;
  border-radius: 2px !important;
}
.woocommerce-checkout .woocommerce-NoticeGroup {
  grid-column: 1 / -1;
}

/* ── Coupon / promo code ── */
/* Hide the coupon toggle in its default position above the form;
   JS moves it into #order_review below the totals table */
.woocommerce-checkout .woocommerce-form-coupon-toggle:not(.ff-coupon-moved) {
  display: none !important;
}
/* Once moved, style it as a tidy row inside the order summary panel */
.woocommerce-checkout .ff-coupon-moved {
  padding: 14px 20px !important;
  border-top: 1px solid var(--color-border) !important;
  background: transparent !important;
  margin: 0 !important;
}
.woocommerce-checkout .ff-coupon-moved .woocommerce-info {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--color-muted) !important;
}
.woocommerce-checkout .ff-coupon-moved .woocommerce-info::before {
  display: none !important;
}
.woocommerce-checkout .showcoupon,
.woocommerce-checkout .coupon-form {
  font-size: 12px !important;
  color: var(--color-muted) !important;
}
.woocommerce-checkout .showcoupon a,
.woocommerce-checkout #coupon_code {
  color: var(--color-yellow) !important;
}

/* ── "— or —" payment divider ── */
.woocommerce-checkout #payment ul.payment_methods li.ff-payment-or {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  pointer-events: none;
}
.woocommerce-checkout #payment ul.payment_methods li.ff-payment-or span {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
  white-space: nowrap;
}
.woocommerce-checkout #payment ul.payment_methods li.ff-payment-or::before,
.woocommerce-checkout #payment ul.payment_methods li.ff-payment-or::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--color-border) !important;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .woocommerce-checkout form.woocommerce-checkout {
    grid-template-columns: 1fr !important;
    padding-top: 24px;
    padding-bottom: 60px;
  }
  .woocommerce-checkout form.woocommerce-checkout #order_review_heading,
  .woocommerce-checkout form.woocommerce-checkout #order_review {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: relative !important;
    top: 0 !important;
  }
  .woocommerce-checkout form.woocommerce-checkout #customer_details {
    order: 2;
  }
  .woocommerce-checkout form.woocommerce-checkout #order_review_heading {
    order: 1;
  }
  .woocommerce-checkout form.woocommerce-checkout #order_review {
    order: 1;
  }
  .woocommerce-checkout form.woocommerce-checkout .woocommerce-checkout-payment {
    order: 3;
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .woocommerce-checkout .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr !important;
  }
}
/* ═════════════════════════════════════════════════════════════
   WOOCOMMERCE BLOCK CHECKOUT & CART
   ═════════════════════════════════════════════════════════════ */

/* ── Checkout: #main must be full-width — plugin ff-container controls spacing ── */
.woocommerce-checkout #main {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Cart #main — keep constrained for block cart */
.woocommerce-cart #main {
  max-width: 1280px;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(24px, 6vw, 80px);
  padding-top: 0;
  padding-bottom: 80px;
  box-sizing: border-box;
}
/* Reset WC block's own padding/width so our #main wrapper controls it */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.wc-block-checkout,
.wc-block-cart {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
/* Gutenberg wraps checkout/cart pages in .is-layout-constrained which has a
   --wp--style--global--content-size max-width. Override so #main controls width. */
.woocommerce-checkout .is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull),
.woocommerce-cart .is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull),
.woocommerce-checkout .wp-block-group,
.woocommerce-cart .wp-block-group {
  max-width: 100% !important;
  padding-inline: 0 !important;
}

/* ── Hide the duplicate standalone order summary block ──
   The block checkout already renders the sidebar internally.
   A second wp-block-woocommerce-checkout-order-summary-block
   placed outside the checkout block causes the duplication. ── */
.wp-block-woocommerce-checkout > .wp-block-woocommerce-checkout-order-summary-block:last-of-type {
  display: none !important;
}
/* Also hide if WC renders a second sidebar copy */
.wc-block-checkout__sidebar + .wc-block-checkout__sidebar {
  display: none !important;
}

/* ── Section step cards ── */
.wc-block-components-checkout-step {
  background: var(--color-prussian) !important;
  border: 1px solid rgba(0,53,102,0.5) !important;
  border-radius: 2px !important;
  padding: 28px !important;
  margin-bottom: 16px !important;
}
.wc-block-components-checkout-step__container,
.wc-block-components-checkout-step__content {
  padding: 0 !important;
  margin-top: 16px !important;
}

/* ── Step headings ── */
.wc-block-components-checkout-step__title,
.wc-block-checkout__main h2,
.wp-block-woocommerce-checkout h2 {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--color-yellow) !important;
  margin: 0 !important;
}
.wc-block-components-checkout-step__title-icon {
  display: none !important;
}

/* ── Express checkout label ── */
.wc-block-components-express-payment__title {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
}
.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
  background: rgba(0,53,102,0.5) !important;
}
.wc-block-components-express-payment-continue-rule {
  color: var(--color-muted) !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* ── Kill ALL rogue divider lines WC injects ── */
.wp-block-woocommerce-checkout hr,
.wp-block-woocommerce-cart hr,
.wc-block-checkout hr,
.wc-block-cart hr,
.wc-block-checkout__main hr,
.wc-block-checkout__sidebar hr,
.wc-block-components-checkout-step hr,
.wc-block-components-separator,
.wc-block-components-express-payment-continue-rule {
  display: none !important;
  border: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Floating label fix ──
   WC block renders label AFTER the input in the DOM.
   We use order:-1 on the label to pull it above without
   flex-direction:column-reverse which breaks Stripe iframes. ── */
.wc-block-components-text-input {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.wc-block-components-text-input label,
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input.has-error label {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
  pointer-events: none !important;
  padding: 0 !important;
  background: transparent !important;
  order: -1 !important;
}
/* Country/select wrapper same treatment */
.wc-block-components-country-input,
.wc-block-components-state-input {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.wc-block-components-country-input label,
.wc-block-components-state-input label {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
}

/* ── Inputs ── */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-select select,
.wc-block-components-form select {
  background: var(--color-ink) !important;
  border: 1px solid rgba(0,53,102,0.5) !important;
  border-radius: 2px !important;
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 11px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  -webkit-appearance: none !important;
  height: auto !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-country-input input:focus,
.wc-block-components-state-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-form select:focus {
  border-color: var(--color-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,195,0,0.1) !important;
  outline: none !important;
}
.wc-block-components-text-input input::placeholder {
  color: transparent !important; /* hide placeholder since we have labels */
}
/* Select arrow */
.wc-block-components-select select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7f97' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

/* ── Validation errors ── */
.wc-block-components-text-input.has-error input {
  border-color: #e05c5c !important;
}
.wc-block-components-validation-error p {
  font-size: 10px !important;
  color: #e8a0a0 !important;
  margin-top: 4px !important;
}

/* ── Checkboxes ── */
.wc-block-components-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.wc-block-components-checkbox input[type="checkbox"] {
  accent-color: var(--color-yellow) !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
.wc-block-components-checkbox__label {
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-muted) !important;
}

/* ── Order summary sidebar ── */
.wc-block-checkout__sidebar {
  position: sticky !important;
  top: 88px !important;
}
/* Single card wrapping the entire sidebar — ONE border only */
.wc-block-checkout__sidebar > * {
  background: var(--color-prussian) !important;
  border: 1px solid rgba(0,53,102,0.5) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}
/* Strip any inner borders that WC adds to child wrappers */
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout__sidebar .wc-block-components-totals-coupon {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Order summary heading / toggle */
.wc-block-components-order-summary__button-text,
.wc-block-components-order-summary details summary {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-yellow) !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(0,53,102,0.4) !important;
  display: block !important;
}
/* Product rows */
.wc-block-components-order-summary-item {
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(0,53,102,0.3) !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
.wc-block-components-order-summary-item:last-child {
  border-bottom: none !important;
}
.wc-block-components-order-summary-item__image img {
  border-radius: 2px !important;
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
}
.wc-block-components-order-summary-item__full-price,
.wc-block-components-order-summary-item__individual-prices {
  color: var(--color-muted) !important;
  font-size: 12px !important;
}
.wc-block-components-order-summary-item__name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-off-white) !important;
}
.wc-block-components-order-summary-item__description {
  font-size: 11px !important;
  color: var(--color-muted) !important;
  margin-top: 2px !important;
  display: none !important; /* hide long product description in sidebar */
}

/* ── Totals rows ── */
.wc-block-components-totals-wrapper {
  padding: 0 20px !important;
  border-top: 1px solid rgba(0,53,102,0.4) !important;
  border-bottom: none !important;
}
.wc-block-components-totals-item {
  padding: 11px 0 !important;
  border-bottom: 1px solid rgba(0,53,102,0.25) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.wc-block-components-totals-item:last-child { border-bottom: none !important; }
.wc-block-components-totals-item__label {
  font-size: 12px !important;
  color: var(--color-muted) !important;
}
.wc-block-components-totals-item__value {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-off-white) !important;
}
.wc-block-components-totals-footer-item {
  padding: 14px 0 !important;
  border-top: 1px solid rgba(0,53,102,0.4) !important;
  border-bottom: none !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--color-white) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--color-yellow) !important;
}

/* ── Coupon ── */
.wc-block-components-totals-coupon {
  padding: 12px 24px !important;
  border-top: 1px solid rgba(0,53,102,0.4) !important;
}
.wc-block-components-totals-coupon details summary {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
  padding: 0 !important;
  border: none !important;
  cursor: pointer !important;
}
.wc-block-components-totals-coupon__form {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.wc-block-components-totals-coupon__form input {
  flex: 1 !important;
  background: var(--color-ink) !important;
  border: 1px solid rgba(0,53,102,0.5) !important;
  border-radius: 2px !important;
  color: var(--color-off-white) !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
}
.wc-block-components-totals-coupon__form button {
  background: transparent !important;
  border: 1px solid rgba(0,53,102,0.5) !important;
  border-radius: 2px !important;
  color: var(--color-off-white) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 9px 14px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: border-color 0.2s !important;
}
.wc-block-components-totals-coupon__form button:hover {
  border-color: var(--color-yellow) !important;
  color: var(--color-yellow) !important;
}

/* ── Payment methods ── */
.wc-block-components-radio-control-accordion-option {
  background: var(--color-prussian) !important;
  border: 1px solid rgba(0,53,102,0.5) !important;
  border-radius: 2px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;          /* input + label sit side-by-side */
  flex-direction: column !important; /* but content rows stack vertically */
}
.wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: rgba(255,195,0,0.3) !important;
}
/* The label row: WC renders input BEFORE label as siblings inside the option div.
   We make the label a flex row that fills the width, and hide the sibling input
   since the label's own layout span already contains a visual radio. */
.wc-block-components-radio-control-accordion-option > input[type="radio"] {
  /* Input is a sibling to label, not inside it — position it absolutely
     so it doesn't displace the label, WC uses for/id association */
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}
.wc-block-components-radio-control-accordion-option label {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 14px 18px !important;
  cursor: pointer !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  color: var(--color-off-white) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* WC's layout span inside the label — fills remaining space */
.wc-block-components-radio-control-accordion-option-layout {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
}
/* The visual radio circle WC renders inside the layout span */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-layout__radio {
  flex-shrink: 0 !important;
}
/* Label text */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label,
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label-group {
  color: var(--color-off-white) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  flex: 1 !important;
}
.wc-block-components-radio-control-accordion-content {
  background: rgba(0,8,20,0.5) !important;
  border-top: 1px solid rgba(0,53,102,0.4) !important;
  padding: 16px 18px !important;
}
/* Stripe iframe container */
.wc-block-components-radio-control-accordion-content iframe,
#payment-method .wc-block-gateway-container iframe {
  background: transparent !important;
  color-scheme: dark !important;
}
/* Stripe elements inject their own iframe — we can style the wrapper */
.wc-block-gateway-container {
  background: var(--color-ink) !important;
  border: 1px solid rgba(0,53,102,0.5) !important;
  border-radius: 2px !important;
  padding: 14px !important;
}
/* Payment method icon images */
.wc-block-components-payment-method-label__brand-logo {
  height: 18px !important;
  width: auto !important;
  opacity: 0.7 !important;
  margin-left: auto !important;
}

/* ── Place Order button ── */
.wc-block-components-checkout-place-order-button {
  width: 100% !important;
  background: var(--color-yellow) !important;
  color: var(--color-ink) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 15px 32px !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
  display: block !important;
  margin-top: 20px !important;
}
.wc-block-components-checkout-place-order-button:hover {
  opacity: 0.88 !important;
  background: var(--color-yellow) !important;
  color: var(--color-ink) !important;
}

/* ── Policy / terms ── */
.wc-block-checkout__privacy-policy,
.wc-block-checkout__terms,
.wc-block-components-checkout-return-to-cart-button {
  font-size: 11px !important;
  color: var(--color-muted) !important;
}
.wc-block-checkout__privacy-policy a,
.wc-block-checkout__terms a {
  color: var(--color-yellow) !important;
}

/* ── Notices ── */
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
  background: rgba(224,92,92,0.06) !important;
  border-left: 3px solid #e05c5c !important;
  color: var(--color-off-white) !important;
  border-radius: 0 2px 2px 0 !important;
}
.wc-block-components-notice-banner.is-info {
  background: rgba(255,195,0,0.06) !important;
  border-left: 3px solid var(--color-yellow) !important;
  border-radius: 0 2px 2px 0 !important;
}

/* ═════════════════════════════════════════════════════════════
   WOOCOMMERCE BLOCK CART — /cart page
   ═════════════════════════════════════════════════════════════ */

/* ── Cart table ── */
.wc-block-cart-items {
  border: 1px solid rgba(0,53,102,0.5) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
.wc-block-cart-items__header {
  background: var(--color-prussian) !important;
  border-bottom: 1px solid rgba(0,53,102,0.5) !important;
  padding: 10px 20px !important;
}
.wc-block-cart-items__header span {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
}
.wc-block-cart-item__wrap {
  background: var(--color-prussian) !important;
  border-bottom: 1px solid rgba(0,53,102,0.35) !important;
  padding: 20px !important;
  display: grid !important;
  grid-template-columns: 64px 1fr auto auto !important;
  gap: 16px !important;
  align-items: center !important;
}
.wc-block-cart-item__wrap:last-child {
  border-bottom: none !important;
}
.wc-block-cart-item__image img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
}
.wc-block-cart-item__product-name,
.wc-block-cart-item__product-name a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-off-white) !important;
  text-decoration: none !important;
}
.wc-block-cart-item__product-name a:hover {
  color: var(--color-yellow) !important;
}
.wc-block-cart-item__product-metadata {
  font-size: 11px !important;
  color: var(--color-muted) !important;
  margin-top: 4px !important;
}
/* Qty stepper */
.wc-block-components-quantity-selector {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: 1px solid rgba(0,53,102,0.5) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  background: var(--color-ink) !important;
}
.wc-block-components-quantity-selector__button {
  background: transparent !important;
  border: none !important;
  color: var(--color-muted) !important;
  width: 32px !important;
  height: 36px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: color 0.15s !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wc-block-components-quantity-selector__button:hover {
  color: var(--color-yellow) !important;
}
.wc-block-components-quantity-selector__input {
  width: 36px !important;
  height: 36px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(0,53,102,0.5) !important;
  border-right: 1px solid rgba(0,53,102,0.5) !important;
  color: var(--color-off-white) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 !important;
}
.wc-block-cart-item__total {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  text-align: right !important;
}
/* Remove item button */
.wc-block-cart-item__remove-link {
  font-size: 10px !important;
  color: var(--color-muted) !important;
  text-decoration: none !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: color 0.15s !important;
}
.wc-block-cart-item__remove-link:hover { color: #e05c5c !important; }

/* ── Cart totals / proceed to checkout ── */
.wc-block-cart__submit-container,
.wp-block-woocommerce-cart-order-summary-block {
  background: var(--color-prussian) !important;
  border: 1px solid rgba(0,53,102,0.5) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  padding: 24px !important;
}
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  width: 100% !important;
  background: var(--color-yellow) !important;
  color: var(--color-ink) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 15px 32px !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: block !important;
  transition: opacity 0.2s !important;
}
.wc-block-cart__submit-button:hover { opacity: 0.88 !important; }

/* ── Empty cart ── */
.wc-block-cart--is-empty .wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2 {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--color-white) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
}
.wc-block-cart--is-empty .wc-block-cart__empty-cart__title::before,
.wp-block-woocommerce-empty-cart-block h2::before {
  content: "— " !important;
  color: var(--color-yellow) !important;
}
.wp-block-woocommerce-empty-cart-block p {
  font-size: 14px !important;
  color: var(--color-muted) !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__image,
.wc-block-cart__empty-cart__image {
  display: none !important; /* hide default WC bag icon */
}
/* Replace with a text stamp */
.wp-block-woocommerce-empty-cart-block::before {
  content: "NO OPEN CASES" !important;
  display: block !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--color-yellow) !important;
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(0,53,102,0.4) !important;
}
.wp-block-woocommerce-empty-cart-block a.wc-block-components-button,
.wc-block-cart__empty-cart__link {
  display: inline-flex !important;
  background: var(--color-yellow) !important;
  color: var(--color-ink) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 13px 28px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}
.wp-block-woocommerce-empty-cart-block a.wc-block-components-button:hover { opacity: 0.88 !important; }

/* ── Spinner ── */
.wc-block-components-spinner {
  border-color: rgba(0,53,102,0.4) !important;
  border-top-color: var(--color-yellow) !important;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .wc-block-components-checkout-step { padding: 20px !important; }
  .wc-block-cart-item__wrap {
    grid-template-columns: 56px 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .wc-block-cart-item__total { grid-column: 2 !important; }
}

/* ═════════════════════════════════════════════════════════════
   ORDER RECEIVED / THANK YOU PAGE
   ═════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.ff-order-hero {
  position: relative;
  padding-top: calc(68px + 64px);
  padding-bottom: 64px;
  overflow: hidden;
  background: var(--color-ink);
  margin-bottom: 0;
}
.ff-order-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 100% 50%, rgba(0,53,102,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(0,29,61,0.5) 0%, transparent 60%);
}
.ff-order-hero__mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, var(--color-ink) 100%);
  pointer-events: none;
}
.ff-order-hero__content {
  position: relative;
  z-index: 1;
}
.ff-order-hero__stamp {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,195,0,0.12);
  font-family: monospace;
  margin-bottom: 28px;
  user-select: none;
}
.ff-order-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ff-order-hero__eyebrow-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-yellow);
}
.ff-order-hero__eyebrow-ref {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-left: 20px;
  border-left: 1px solid rgba(221,226,235,0.15);
}
.ff-order-hero__heading {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin: 0 0 20px;
}
.ff-order-hero__heading span { color: var(--color-yellow); }
.ff-order-hero__sub {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-muted);
  max-width: 480px;
  margin-bottom: 40px;
}

/* ── Order meta pills ── */
.ff-order-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ff-order-meta-pill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  background: var(--color-prussian);
  border: 1px solid rgba(0,53,102,0.5);
  border-radius: 2px;
  min-width: 120px;
}
.ff-order-meta-pill__label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.ff-order-meta-pill__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
}

/* ── Body layout ── */
.ff-order-body {
  padding-top: 48px;
  padding-bottom: 80px;
}
.ff-order-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: start;
}

/* ── Notice banners ── */
.ff-order-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 2px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.ff-order-notice svg { flex-shrink: 0; margin-top: 2px; }
.ff-order-notice--success {
  background: rgba(76,175,130,0.08);
  border: 1px solid rgba(76,175,130,0.3);
  color: #a0d4bb;
}
.ff-order-notice--success svg { color: #4caf82; }
.ff-order-notice--error {
  background: rgba(224,90,90,0.08);
  border: 1px solid rgba(224,90,90,0.3);
  color: #e8a0a0;
}
.ff-order-notice--error svg { color: #e05a5a; }
.ff-order-notice--error a { color: var(--color-yellow); }
.ff-order-notice--info {
  background: rgba(255,195,0,0.06);
  border: 1px solid rgba(255,195,0,0.2);
  color: var(--color-muted);
}
.ff-order-notice--info svg { color: var(--color-yellow); }
.ff-order-notice strong { color: var(--color-off-white); font-weight: 600; }

/* ── Cards ── */
.ff-order-card {
  background: var(--color-prussian);
  border: 1px solid rgba(0,53,102,0.5);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 20px;
}
.ff-order-card--dark {
  background: var(--color-ink);
  border-color: rgba(0,53,102,0.4);
}
.ff-order-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0,53,102,0.4);
}
.ff-order-card__title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-yellow);
}
.ff-order-card__count {
  font-size: 10px;
  color: var(--color-muted);
}

/* ── Order items ── */
.ff-order-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,53,102,0.3);
}
.ff-order-item:last-child { border-bottom: none; }
.ff-order-item__img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.ff-order-item__img-placeholder {
  width: 56px;
  height: 56px;
  background: rgba(0,53,102,0.3);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ff-order-item__details { flex: 1; min-width: 0; }
.ff-order-item__label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin-bottom: 4px;
}
.ff-order-item__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-off-white);
  line-height: 1.3;
}
.ff-order-item__name a { color: inherit; text-decoration: none; }
.ff-order-item__name a:hover { color: var(--color-yellow); }
.ff-order-item__qty { font-size: 11px; color: var(--color-muted); margin-top: 2px; }
.ff-order-item__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
  white-space: nowrap;
}

/* ── Totals ── */
.ff-order-totals {
  padding: 0 20px;
  border-top: 1px solid rgba(0,53,102,0.4);
}
.ff-order-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(0,53,102,0.2);
  font-size: 13px;
  color: var(--color-muted);
}
.ff-order-totals__row:last-child { border-bottom: none; }
.ff-order-totals__row--total {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-white);
  padding: 14px 0;
  border-top: 1px solid rgba(0,53,102,0.5);
}
.ff-order-totals__row--total span:last-child { color: var(--color-yellow); }

/* ── What's next steps ── */
.ff-order-steps { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.ff-order-step { display: flex; gap: 16px; align-items: flex-start; }
.ff-order-step__num {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--color-yellow);
  font-family: monospace;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: rgba(255,195,0,0.08);
  border: 1px solid rgba(255,195,0,0.2);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-order-step__text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-off-white);
  display: block;
  margin-bottom: 4px;
}
.ff-order-step__text p {
  font-size: 12px;
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.6;
}
.ff-order-card .btn--full { display: flex; width: calc(100% - 40px); margin: 0 20px 20px; box-sizing: border-box; justify-content: center; }

/* ── Address ── */
.ff-order-address {
  display: block;
  padding: 16px 20px 4px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--color-muted);
  font-style: normal;
}
.ff-order-address__email,
.ff-order-address__phone {
  padding: 0 20px 14px;
  font-size: 12px;
  color: var(--color-muted);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ff-order-grid {
    grid-template-columns: 1fr;
  }
  .ff-order-hero__heading { font-size: clamp(32px, 8vw, 48px); }
  .ff-order-meta-pills { gap: 8px; }
  .ff-order-meta-pill { min-width: 100px; padding: 12px 16px; }
}
@media (max-width: 480px) {
  .ff-order-hero { padding-top: calc(68px + 40px); padding-bottom: 40px; }
  .ff-order-meta-pill { flex: 1; min-width: 0; }
}

/* ═════════════════════════════════════════════════════════════
   CHECKOUT — COMPREHENSIVE RESTYLE v0.3.3
   ═════════════════════════════════════════════════════════════ */

/* ── Express checkout area ── */
.wc-block-components-express-payment {
  background: var(--color-prussian) !important;
  border: 1px solid rgba(0,53,102,0.5) !important;
  border-radius: 2px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
.wc-block-components-express-payment__title {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--color-yellow) !important;
  margin-bottom: 14px !important;
  display: block !important;
}
/* Express buttons (Google Pay, Apple Pay etc) */
.wc-block-components-express-payment__event-buttons > * {
  border-radius: 2px !important;
  overflow: hidden !important;
}

/* ── "Or" divider after express checkout — restyle instead of hiding ── */
.wc-block-components-express-payment-continue-rule {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--color-muted) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 20px 0 !important;
  height: auto !important;
  border: none !important;
  padding: 0 !important;
}
.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(0,53,102,0.5) !important;
  display: block !important;
}

/* ── Return to cart link ── */
.wc-block-components-checkout-return-to-cart-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--color-muted) !important;
  text-decoration: none !important;
  margin-top: 12px !important;
  transition: color 0.15s !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.wc-block-components-checkout-return-to-cart-button:hover {
  color: var(--color-off-white) !important;
}

/* ── Save payment checkbox ── */
.wc-block-components-payment-methods .wc-block-components-checkbox,
.wc-block-components-save-payment-info .wc-block-components-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 12px !important;
  color: var(--color-muted) !important;
  margin-top: 14px !important;
}
.wc-block-components-checkbox input[type="checkbox"] {
  accent-color: var(--color-yellow) !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* ── Coupon / promo code button ── */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon details summary {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-yellow) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* ── Shipping method radios ── */
.wc-block-components-radio-control__option {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(0,53,102,0.2) !important;
  gap: 10px !important;
}
.wc-block-components-radio-control__option:last-child {
  border-bottom: none !important;
}
/* Hide the raw input (sibling to label) — WC renders a styled radio circle inside the label */
.wc-block-components-radio-control__option > input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}
.wc-block-components-radio-control__option label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-off-white) !important;
}
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__label-group {
  color: var(--color-off-white) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  flex: 1 !important;
}
.wc-block-components-radio-control__description,
.wc-block-components-radio-control__secondary-label {
  color: var(--color-muted) !important;
  font-size: 12px !important;
}
.wc-block-components-shipping-rates-control__package {
  padding: 0 !important;
}
/* Yellow accent on the WC-rendered radio circle */
.wc-block-components-radio-control__option .wc-block-components-radio-control__input {
  accent-color: var(--color-yellow) !important;
}

/* ── Checkbox in terms / newsletter ── */
.wc-block-checkout__add-note .wc-block-components-checkbox,
.wc-block-checkout__terms .wc-block-components-checkbox {
  gap: 10px !important;
  font-size: 12px !important;
  color: var(--color-muted) !important;
  align-items: flex-start !important;
  margin-top: 8px !important;
}

/* ── Loading spinner / overlay ── */
.wc-block-components-loading-mask__mask { opacity: 0.6 !important; }
.wc-block-components-spinner { border-top-color: var(--color-yellow) !important; }

/* ── Validation error text ── */
.wc-block-components-validation-error {
  font-size: 11px !important;
  color: #e05a5a !important;
  margin-top: 4px !important;
}
.wc-block-components-text-input.has-error input {
  border-color: rgba(224,90,90,0.5) !important;
}

/* ── Country dropdown option text ── */
.wc-block-components-country-input select,
.wc-block-components-state-input select {
  background: var(--color-prussian) !important;
  color: var(--color-off-white) !important;
  border: 1px solid rgba(0,53,102,0.6) !important;
  border-radius: 2px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* ── Textarea (order notes) ── */
.wc-block-checkout__add-note textarea,
.wc-block-components-textarea {
  background: var(--color-prussian) !important;
  color: var(--color-off-white) !important;
  border: 1px solid rgba(0,53,102,0.6) !important;
  border-radius: 2px !important;
  padding: 12px !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  width: 100% !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}
.wc-block-checkout__add-note textarea:focus,
.wc-block-components-textarea:focus {
  outline: none !important;
  border-color: rgba(255,195,0,0.5) !important;
  box-shadow: 0 0 0 3px rgba(255,195,0,0.08) !important;
}

/* ── Step number badges (WC shows 1, 2, 3 circles) ── */
.wc-block-components-checkout-step__heading-number {
  display: none !important;
}

/* ── "Billing same as shipping" checkbox row ── */
.wc-block-checkout__use-address-for-billing {
  margin-top: 8px !important;
}

/* ═══════════════════════════════════════════════════
   CHECKOUT FIXES v0.3.7
   ═══════════════════════════════════════════════════ */

/* ── Shipping address card (saved address display) ── */
.wc-block-checkout__shipping-fields .wc-block-components-address-card,
.wc-block-components-address-card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.wc-block-components-address-card__address {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-off-white) !important;
  line-height: 1.5 !important;
}
.wc-block-components-address-card__edit,
.wc-block-components-address-card button[aria-label*="Edit"],
.wc-block-checkout__shipping-fields .wc-block-components-address-card__edit {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-yellow) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.wc-block-components-address-card__edit:hover { opacity: 0.75 !important; }

/* "Use same address for billing" checkbox row */
.wc-block-checkout__use-address-for-billing label {
  font-size: 13px !important;
  color: var(--color-muted) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ── Express checkout — fix Google Pay button inside our card ── */
.wc-block-components-express-payment__event-buttons {
  padding: 0 !important;
}
/* Google Pay / Apple Pay iframes render with their own bg — wrap them */
.wc-block-components-express-payment__event-buttons > div,
.wc-block-components-express-payment__event-buttons > button {
  border-radius: 2px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,53,102,0.4) !important;
}
/* The GPay button itself injects its own iframe — we can't change its bg,
   but we can make our card bg match so the dark button doesn't look stranded */
.wc-block-components-express-payment {
  background: var(--color-ink) !important;
}

/* ── Deduplicate express payment title (was declared twice) ── */
.wc-block-components-express-payment__title-container {
  margin-bottom: 14px !important;
}


/* ═════════════════════════════════════════════════════════════
   CART PAGE HERO & LAYOUT
   ═════════════════════════════════════════════════════════════ */

.ff-cart-hero {
  display: none; /* shown on .woocommerce-cart pages */
}
.woocommerce-cart .ff-cart-hero {
  position: relative;
  padding-top: calc(68px + 56px);
  padding-bottom: 48px;
  overflow: hidden;
  background: var(--color-ink);
}
.ff-cart-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 100% 60%, rgba(0,53,102,0.3) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(0,29,61,0.4) 0%, transparent 60%);
}
.ff-cart-hero__mask {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--color-ink) 100%);
  pointer-events: none;
}
.ff-cart-hero__content { position: relative; z-index: 1; }
.ff-cart-hero__eyebrow {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.ff-cart-hero__eyebrow-label {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--color-yellow);
}
.ff-cart-hero__eyebrow-count {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-muted);
  padding-left: 20px;
  border-left: 1px solid rgba(221,226,235,0.15);
}
.ff-cart-hero__heading {
  font-size: clamp(32px, 5.5vw, 56px);
  font-weight: 900; line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin: 0 0 16px;
}
.ff-cart-hero__heading span { color: var(--color-yellow); }
.ff-cart-hero__sub {
  font-size: 15px; font-weight: 300;
  line-height: 1.8; color: var(--color-muted);
  max-width: 440px; margin: 0;
}

/* ── Cart block container ── */
.woocommerce-cart #main {
  padding-top: 0 !important;
}
.wc-block-cart {
  padding-top: 40px !important;
  padding-bottom: 80px !important;
}

/* ── Cart items table header ── */
.wc-block-cart-items__header {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  padding: 0 0 10px !important;
  border-bottom: 2px solid rgba(0,53,102,0.5) !important;
  margin-bottom: 4px !important;
}
.wc-block-cart-items__header .wc-block-cart-items__header-product,
.wc-block-cart-items__header .wc-block-cart-items__header-quantity,
.wc-block-cart-items__header .wc-block-cart-items__header-total {
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
}

/* ── Cross-sell / "New in store" section on empty cart ── */
.wp-block-woocommerce-empty-cart-block .wc-block-handpicked-products,
.woocommerce-cart .cross-sells,
.wc-block-cart__cross-sells,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block {
  margin-top: 48px !important;
  padding-top: 40px !important;
  border-top: 1px solid rgba(0,53,102,0.3) !important;
}
.wc-block-cart__cross-sells-title,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block h2,
.woocommerce-cart .cross-sells h2 {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--color-yellow) !important;
  margin-bottom: 24px !important;
}

/* ── "New in store" products on empty cart — match shop card style ── */
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-handpicked-products ul.products,
.wc-block-cart__cross-sells ul.products,
.woocommerce-cart .cross-sells ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important; margin: 0 !important;
}
.wp-block-woocommerce-empty-cart-block ul.products li.product,
.wc-block-cart__cross-sells ul.products li.product,
.woocommerce-cart .cross-sells ul.products li.product {
  background: var(--color-prussian) !important;
  border: 1px solid rgba(0,53,102,0.4) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.wp-block-woocommerce-empty-cart-block ul.products li.product img,
.woocommerce-cart .cross-sells ul.products li.product img {
  width: 100% !important; aspect-ratio: 4/3 !important;
  object-fit: cover !important; display: block !important;
}
.wp-block-woocommerce-empty-cart-block ul.products li.product .woocommerce-loop-product__title,
.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important; font-weight: 800 !important;
  color: var(--color-white) !important;
  padding: 14px 16px 4px !important; margin: 0 !important;
}
.wp-block-woocommerce-empty-cart-block ul.products li.product .price,
.woocommerce-cart .cross-sells ul.products li.product .price {
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--color-yellow) !important;
  padding: 0 16px 14px !important; margin: 0 !important;
}
.wp-block-woocommerce-empty-cart-block ul.products li.product .button,
.woocommerce-cart .cross-sells ul.products li.product .button {
  display: block !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(0,53,102,0.4) !important;
  color: var(--color-yellow) !important;
  font-size: 9px !important; font-weight: 800 !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  padding: 12px 16px !important; text-decoration: none !important;
  margin-top: auto !important;
  transition: background 0.15s !important;
}
.wp-block-woocommerce-empty-cart-block ul.products li.product .button:hover,
.woocommerce-cart .cross-sells ul.products li.product .button:hover {
  background: rgba(255,195,0,0.06) !important;
}

/* ── Cart page title (WP page title — hide it, hero replaces it) ── */
.woocommerce-cart .page-title,
.woocommerce-cart .entry-title,
.woocommerce-cart h1.page-title {
  display: none !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .ff-cart-hero { padding-top: calc(68px + 36px); padding-bottom: 32px; }
  .ff-cart-hero__heading { font-size: clamp(28px, 9vw, 40px); }
}

/* ═════════════════════════════════════════════════════════════
   ELEMENTOR GLOBAL WIDGET STYLES
   Targets all Elementor widgets site-wide to match Fatal Files
   dark theme. Uses Elementor's own class structure.
   ═════════════════════════════════════════════════════════════ */

/* ── Elementor global font override ──────────────────────────
   Elementor stores typography in CSS custom properties on :root.
   We override every typography variable here, then enforce with
   !important on font-family so inline styles can't win.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Elementor kit typography variables — all fonts → Source Sans 3 */
  --e-global-typography-primary-font-family:   "Source Sans 3";
  --e-global-typography-secondary-font-family: "Source Sans 3";
  --e-global-typography-text-font-family:      "Source Sans 3";
  --e-global-typography-accent-font-family:    "Source Sans 3";
  /* Weight taper */
  --e-global-typography-primary-font-weight:   900;
  --e-global-typography-secondary-font-weight: 800;
  --e-global-typography-text-font-weight:      300;
  --e-global-typography-accent-font-weight:    800;
}
/* Belt-and-braces: force Source Sans 3 on every Elementor element */
.elementor,
.elementor *,
.elementor-widget-container,
.elementor-widget-container * {
  font-family: 'Source Sans 3', sans-serif !important;
}

/* ── Elementor base container ── */
.elementor-section,
.e-con,
.e-con-inner {
  --e-global-color-primary:    var(--color-yellow);
  --e-global-color-secondary:  var(--color-prussian);
  --e-global-color-text:       var(--color-off-white);
  --e-global-color-accent:     var(--color-yellow);
}

/* ── HEADINGS ─────────────────────────────────────────────── */
.elementor-widget-heading .elementor-heading-title {
  color: var(--color-white);
  font-family: 'Source Sans 3', var(--font-sans), sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* Size utility classes */
.elementor-widget-heading .elementor-heading-title.elementor-size-xxl  { font-size: clamp(36px, 6vw, 72px); }
.elementor-widget-heading .elementor-heading-title.elementor-size-xl   { font-size: clamp(28px, 4vw, 52px); }
.elementor-widget-heading .elementor-heading-title.elementor-size-large{ font-size: clamp(22px, 3vw, 38px); }
.elementor-widget-heading .elementor-heading-title.elementor-size-medium{ font-size: 22px; }
.elementor-widget-heading .elementor-heading-title.elementor-size-small { font-size: 16px; letter-spacing: 0; }
/* H1–H6 weight taper: 900 → 800 → 700 → 600 → 600 → 600 */
.elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -0.03em;
}
.elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.elementor-widget-heading h3.elementor-heading-title {
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.elementor-widget-heading h4.elementor-heading-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.elementor-widget-heading h5.elementor-heading-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-yellow);
}
.elementor-widget-heading h6.elementor-heading-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── TEXT EDITOR ──────────────────────────────────────────── */
.elementor-widget-text-editor {
  color: var(--color-off-white);
  font-family: 'Source Sans 3', var(--font-sans), sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
}
.elementor-widget-text-editor p { margin-bottom: 1em; }
.elementor-widget-text-editor a {
  color: var(--color-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.elementor-widget-text-editor a:hover { opacity: 0.8; }
.elementor-widget-text-editor strong { font-weight: 700; color: var(--color-white); }

/* ── BUTTON ───────────────────────────────────────────────── */
.elementor-widget-button .elementor-button {
  background: var(--color-yellow) !important;
  color: var(--color-ink) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: 'Source Sans 3', var(--font-sans), sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  transition: opacity 0.2s !important;
  text-decoration: none !important;
}
.elementor-widget-button .elementor-button:hover { opacity: 0.85 !important; }
/* Ghost variant — any button with outline/ghost class Elementor adds */
.elementor-widget-button .elementor-button.elementor-button-ghost,
.elementor-widget-button .elementor-button[style*="background: transparent"],
.elementor-widget-button .elementor-button[style*="background:transparent"] {
  background: transparent !important;
  border: 1px solid rgba(255,195,0,0.4) !important;
  color: var(--color-yellow) !important;
}

/* ── ICON ─────────────────────────────────────────────────── */
.elementor-widget-icon .elementor-icon,
.elementor-widget-icon .elementor-icon i,
.elementor-widget-icon .elementor-icon svg {
  color: var(--color-yellow);
  fill: var(--color-yellow);
}

/* ── ICON BOX ─────────────────────────────────────────────── */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  background: var(--color-prussian);
  border: 1px solid rgba(0,53,102,0.5);
  border-radius: 2px;
  padding: 28px 24px;
  transition: border-color 0.2s;
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
  border-color: rgba(255,195,0,0.3);
}
.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
  color: var(--color-yellow);
  font-size: 32px;
  margin-bottom: 16px;
}
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a {
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.elementor-widget-icon-box .elementor-icon-box-description {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  margin-top: 8px;
}

/* ── IMAGE BOX ────────────────────────────────────────────── */
.elementor-widget-image-box .elementor-image-box-wrapper {
  background: var(--color-prussian);
  border: 1px solid rgba(0,53,102,0.5);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.elementor-widget-image-box .elementor-image-box-wrapper:hover {
  border-color: rgba(255,195,0,0.3);
}
.elementor-widget-image-box .elementor-image-box-img img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.elementor-widget-image-box .elementor-image-box-content {
  padding: 20px 20px 24px;
}
.elementor-widget-image-box .elementor-image-box-title {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.elementor-widget-image-box .elementor-image-box-description {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
}

/* ── IMAGE ────────────────────────────────────────────────── */
.elementor-widget-image img {
  border-radius: 2px;
}
/* Elementor placeholder image */
.elementor-widget-image img[src*="placeholder.png"] {
  opacity: 0.3;
  filter: invert(1);
}

/* ── ICON LIST ────────────────────────────────────────────── */
.elementor-widget-icon-list .elementor-icon-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.elementor-widget-icon-list .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,53,102,0.25);
}
.elementor-widget-icon-list .elementor-icon-list-item:last-child {
  border-bottom: none;
}
.elementor-widget-icon-list .elementor-icon-list-icon {
  color: var(--color-yellow);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 3px;
}
.elementor-widget-icon-list .elementor-icon-list-icon svg {
  fill: var(--color-yellow);
  width: 12px; height: 12px;
}
.elementor-widget-icon-list .elementor-icon-list-text {
  color: var(--color-off-white);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}
.elementor-widget-icon-list a {
  color: var(--color-off-white);
  text-decoration: none;
}
.elementor-widget-icon-list a:hover { color: var(--color-yellow); }

/* ── TABS ─────────────────────────────────────────────────── */
.elementor-widget-tabs .elementor-tabs-wrapper {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(0,53,102,0.4);
  margin-bottom: 0;
}
.elementor-widget-tabs .elementor-tab-title {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 12px 20px;
  font-family: 'Source Sans 3', var(--font-sans), sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.elementor-widget-tabs .elementor-tab-title:hover {
  color: var(--color-off-white);
}
.elementor-widget-tabs .elementor-tab-title.elementor-active,
.elementor-widget-tabs .elementor-tab-title[aria-selected="true"] {
  color: var(--color-yellow);
  border-bottom-color: var(--color-yellow);
}
.elementor-widget-tabs .elementor-tab-title a {
  color: inherit;
  text-decoration: none;
}
.elementor-widget-tabs .elementor-tabs-content-wrapper {
  border: 1px solid rgba(0,53,102,0.4);
  border-top: none;
  background: var(--color-prussian);
}
.elementor-widget-tabs .elementor-tab-content {
  padding: 24px;
  color: var(--color-off-white);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  display: none;
}
.elementor-widget-tabs .elementor-tab-content.elementor-active {
  display: block;
}

/* ── ACCORDION ────────────────────────────────────────────── */
.elementor-widget-accordion .elementor-accordion {
  border: 1px solid rgba(0,53,102,0.4);
  border-radius: 2px;
  overflow: hidden;
}
.elementor-widget-accordion .elementor-accordion-item {
  border-bottom: 1px solid rgba(0,53,102,0.4);
  background: var(--color-prussian);
}
.elementor-widget-accordion .elementor-accordion-item:last-child {
  border-bottom: none;
}
.elementor-widget-accordion .elementor-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  font-family: 'Source Sans 3', var(--font-sans), sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-off-white);
  transition: color 0.15s, background 0.15s;
  user-select: none;
}
.elementor-widget-accordion .elementor-tab-title:hover {
  background: rgba(0,29,61,0.6);
  color: var(--color-white);
}
.elementor-widget-accordion .elementor-tab-title.elementor-active,
.elementor-widget-accordion .elementor-accordion-item-active .elementor-tab-title {
  color: var(--color-yellow);
  background: rgba(255,195,0,0.04);
}
.elementor-widget-accordion .elementor-tab-title a {
  color: inherit;
  text-decoration: none;
  flex: 1;
}
/* Accordion arrow icon */
.elementor-widget-accordion .elementor-accordion-icon {
  color: var(--color-muted);
  font-size: 12px;
  flex-shrink: 0;
  transition: transform 0.2s, color 0.15s;
}
.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon,
.elementor-widget-accordion .elementor-accordion-item-active .elementor-accordion-icon {
  color: var(--color-yellow);
  transform: rotate(180deg);
}
.elementor-widget-accordion .elementor-tab-content {
  padding: 0 20px 18px;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  border-top: 1px solid rgba(0,53,102,0.3);
  background: rgba(0,8,20,0.4);
}

/* ── TOGGLE (same structure as accordion) ─────────────────── */
.elementor-widget-toggle .elementor-toggle {
  border: 1px solid rgba(0,53,102,0.4);
  border-radius: 2px;
  overflow: hidden;
}
.elementor-widget-toggle .elementor-toggle-item {
  border-bottom: 1px solid rgba(0,53,102,0.3);
  background: var(--color-prussian);
}
.elementor-widget-toggle .elementor-toggle-item:last-child { border-bottom: none; }
.elementor-widget-toggle .elementor-tab-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-off-white);
  cursor: pointer;
  transition: color 0.15s;
}
.elementor-widget-toggle .elementor-tab-title:hover { color: var(--color-yellow); }
.elementor-widget-toggle .elementor-tab-title.elementor-active { color: var(--color-yellow); }
.elementor-widget-toggle .elementor-toggle-icon { color: var(--color-muted); font-size: 12px; flex-shrink: 0; }
.elementor-widget-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon { color: var(--color-yellow); }
.elementor-widget-toggle .elementor-tab-content {
  padding: 0 20px 16px;
  color: var(--color-muted);
  font-size: 14px; font-weight: 300; line-height: 1.8;
  background: rgba(0,8,20,0.4);
}

/* ── COUNTER ──────────────────────────────────────────────── */
.elementor-widget-counter .elementor-counter-number-wrapper {
  font-family: 'Source Sans 3', var(--font-sans), sans-serif;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--color-yellow);
  line-height: 1;
}
.elementor-widget-counter .elementor-counter-number-prefix,
.elementor-widget-counter .elementor-counter-number-suffix {
  color: var(--color-muted);
  font-size: 0.5em;
  font-weight: 600;
}
.elementor-widget-counter .elementor-counter-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 8px;
}

/* ── PROGRESS BAR ─────────────────────────────────────────── */
.elementor-widget-progress .elementor-progress-wrapper {
  background: rgba(0,53,102,0.3);
  border-radius: 1px;
  overflow: hidden;
  height: 4px;
  margin-top: 8px;
}
.elementor-widget-progress .elementor-progress-bar {
  background: var(--color-yellow);
  height: 100%;
  border-radius: 1px;
  transition: width 0.8s ease;
  position: relative;
}
/* Remove the % label inside the bar */
.elementor-widget-progress .elementor-progress-bar .elementor-progress-percentage {
  display: none;
}
.elementor-widget-progress .elementor-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
/* Show % after the title */
.elementor-widget-progress .elementor-progress-percentage {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-yellow);
  letter-spacing: 0;
}

/* ── TESTIMONIAL ──────────────────────────────────────────── */
.elementor-widget-testimonial .elementor-testimonial-wrapper {
  background: var(--color-prussian);
  border: 1px solid rgba(0,53,102,0.5);
  border-radius: 2px;
  padding: 28px 24px;
  position: relative;
}
.elementor-widget-testimonial .elementor-testimonial-content {
  color: var(--color-off-white);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  font-style: italic;
  padding-left: 18px;
  border-left: 2px solid var(--color-yellow);
  margin-bottom: 20px;
}
.elementor-widget-testimonial .elementor-testimonial-name {
  color: var(--color-white);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.elementor-widget-testimonial .elementor-testimonial-job {
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
}
.elementor-widget-testimonial .elementor-testimonial-image img {
  border-radius: 50%;
  border: 2px solid rgba(255,195,0,0.3);
  width: 48px; height: 48px;
  object-fit: cover;
}

/* ── TEAM MEMBER ──────────────────────────────────────────── */
.elementor-widget-team-member .elementor-team-member-wrapper,
.elementor-widget-team-member .elementor-widget-container {
  background: var(--color-prussian);
  border: 1px solid rgba(0,53,102,0.5);
  border-radius: 2px;
  overflow: hidden;
  text-align: center;
}
.elementor-widget-team-member img {
  width: 100%; display: block;
  filter: grayscale(20%);
  transition: filter 0.3s;
}
.elementor-widget-team-member:hover img { filter: grayscale(0%); }
.elementor-widget-team-member .elementor-team-member-name,
.elementor-widget-team-member h3 {
  color: var(--color-white);
  font-size: 16px; font-weight: 800;
  letter-spacing: -0.01em;
  padding: 16px 16px 2px;
  margin: 0;
}
.elementor-widget-team-member .elementor-team-member-role,
.elementor-widget-team-member .elementor-team-member-description {
  color: var(--color-muted);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0 16px 16px;
}
/* Social icons on team member */
.elementor-widget-team-member .elementor-social-links {
  display: flex; justify-content: center; gap: 10px;
  padding: 12px 16px 20px;
  border-top: 1px solid rgba(0,53,102,0.3);
}
.elementor-widget-team-member .elementor-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: rgba(0,8,20,0.5);
  border: 1px solid rgba(0,53,102,0.5);
  border-radius: 2px;
  color: var(--color-muted);
  font-size: 12px;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.elementor-widget-team-member .elementor-social-icon:hover {
  border-color: rgba(255,195,0,0.4);
  color: var(--color-yellow);
}

/* ── ALERT / NOTICE ───────────────────────────────────────── */
.elementor-widget-alert .elementor-alert {
  background: var(--color-prussian);
  border: 1px solid rgba(0,53,102,0.5);
  border-left: 3px solid var(--color-yellow);
  border-radius: 2px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
.elementor-widget-alert .elementor-alert-title {
  color: var(--color-white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.elementor-widget-alert .elementor-alert-description {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
}
/* Alert colour variants */
.elementor-widget-alert .elementor-alert-success { border-left-color: #2ecc71; }
.elementor-widget-alert .elementor-alert-warning { border-left-color: var(--color-yellow); }
.elementor-widget-alert .elementor-alert-danger  { border-left-color: #e05c5c; }
.elementor-widget-alert .elementor-alert-info    { border-left-color: #3498db; }
/* Dismiss X button */
.elementor-widget-alert .elementor-alert-dismiss {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none;
  color: var(--color-muted);
  font-size: 14px; cursor: pointer;
  line-height: 1; padding: 2px;
  transition: color 0.15s;
}
.elementor-widget-alert .elementor-alert-dismiss:hover { color: var(--color-off-white); }

/* ── DIVIDER ──────────────────────────────────────────────── */
.elementor-widget-divider .elementor-divider-separator {
  border-top-color: rgba(0,53,102,0.4) !important;
  border-top-width: 1px !important;
}
.elementor-widget-divider .elementor-divider__text {
  color: var(--color-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--color-ink);
  padding: 0 12px;
}

/* ── SPACER ───────────────────────────────────────────────── */
/* No visual changes needed — spacer is invisible by design */

/* ── VIDEO ────────────────────────────────────────────────── */
.elementor-widget-video .elementor-wrapper,
.elementor-widget-video .elementor-video-container {
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(0,53,102,0.4);
}
.elementor-widget-video .elementor-custom-embed-play {
  background: rgba(255,195,0,0.9);
  border-radius: 50%;
}
.elementor-widget-video .elementor-custom-embed-play i {
  color: var(--color-ink);
}

/* ── GOOGLE MAPS ──────────────────────────────────────────── */
.elementor-widget-google_maps .elementor-custom-embed {
  border: 1px solid rgba(0,53,102,0.4);
  border-radius: 2px;
  overflow: hidden;
  filter: invert(0.85) hue-rotate(180deg) saturate(0.7);
}

/* ── SOCIAL ICONS ─────────────────────────────────────────── */
.elementor-widget-social-icons .elementor-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(0,29,61,0.6);
  border: 1px solid rgba(0,53,102,0.5);
  border-radius: 2px;
  color: var(--color-muted);
  font-size: 13px;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.elementor-widget-social-icons .elementor-social-icon:hover {
  border-color: rgba(255,195,0,0.4);
  color: var(--color-yellow);
}

/* ── SEARCH ───────────────────────────────────────────────── */
.elementor-widget-search-form .elementor-search-form__container {
  border: 1px solid rgba(0,53,102,0.5);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
}
.elementor-widget-search-form input[type="search"] {
  background: var(--color-prussian);
  border: none;
  color: var(--color-off-white);
  font-family: 'Source Sans 3', var(--font-sans), sans-serif;
  font-size: 13px;
  padding: 12px 16px;
  flex: 1;
  outline: none;
}
.elementor-widget-search-form input[type="search"]::placeholder { color: var(--color-muted); }
.elementor-widget-search-form .elementor-search-form__submit {
  background: var(--color-yellow);
  color: var(--color-ink);
  border: none;
  padding: 12px 18px;
  cursor: pointer;
  font-size: 14px;
  transition: opacity 0.15s;
}
.elementor-widget-search-form .elementor-search-form__submit:hover { opacity: 0.85; }

/* ── FORMS (Elementor Pro / Contact Form 7) ───────────────── */
.elementor-widget-form .elementor-field-group label,
.elementor-form .elementor-field-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
  margin-bottom: 6px;
}
.elementor-widget-form input[type="text"],
.elementor-widget-form input[type="email"],
.elementor-widget-form input[type="tel"],
.elementor-widget-form input[type="number"],
.elementor-widget-form textarea,
.elementor-widget-form select {
  background: var(--color-prussian);
  border: 1px solid rgba(0,53,102,0.5);
  border-radius: 2px;
  color: var(--color-off-white);
  font-family: 'Source Sans 3', var(--font-sans), sans-serif;
  font-size: 13px;
  padding: 11px 14px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.elementor-widget-form input:focus,
.elementor-widget-form textarea:focus,
.elementor-widget-form select:focus {
  border-color: rgba(255,195,0,0.5);
}
.elementor-widget-form .elementor-button {
  background: var(--color-yellow);
  color: var(--color-ink);
  border: none;
  border-radius: 2px;
  font-family: 'Source Sans 3', var(--font-sans), sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 32px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.elementor-widget-form .elementor-button:hover { opacity: 0.85; }

/* ── POSTS / BLOG ─────────────────────────────────────────── */
.elementor-widget-posts .elementor-post__card,
.elementor-widget-posts .elementor-post {
  background: var(--color-prussian);
  border: 1px solid rgba(0,53,102,0.5);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.elementor-widget-posts .elementor-post__card:hover { border-color: rgba(255,195,0,0.3); }
.elementor-widget-posts .elementor-post__thumbnail img { width: 100%; display: block; }
.elementor-widget-posts .elementor-post__text { padding: 18px 20px 22px; }
.elementor-widget-posts .elementor-post__title a {
  color: var(--color-white);
  font-size: 16px; font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.elementor-widget-posts .elementor-post__title a:hover { color: var(--color-yellow); }
.elementor-widget-posts .elementor-post__meta-data {
  color: var(--color-muted);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 8px;
}
.elementor-widget-posts .elementor-post__excerpt p {
  color: var(--color-muted);
  font-size: 13px; font-weight: 300; line-height: 1.7;
}
.elementor-widget-posts .elementor-post__read-more {
  color: var(--color-yellow);
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none;
}

/* ── SECTION / COLUMN DEFAULTS ────────────────────────────── */
/* Ensure Elementor sections inherit the dark background correctly */
.elementor-section .elementor-container,
.e-con > .e-con-inner {
  color: var(--color-off-white);
}
/* Elementor applies white bg to sections by default in some themes */
.elementor-element.elementor-section:not([data-settings*="background_color"]) {
  background-color: transparent;
}
/* Inner sections / containers */
.elementor-inner-section .elementor-container {
  background: transparent;
}

.ff-footer-newsletter-msg {
  font-size: 12px; font-weight: 400;
  margin-top: 8px; min-height: 18px;
}
.ff-footer-newsletter-msg--ok    { color: #2ecc71; }
.ff-footer-newsletter-msg--error { color: #e05c5c; }


/* ============================================================
   WOOCOMMERCE — MY ACCOUNT
   ============================================================ */

/* ── Page wrapper ── */
.woocommerce-account #primary {
  max-width: 1280px;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
  padding-top: 48px;
  padding-bottom: 80px;
  box-sizing: border-box;
}

/* ── Two-column layout: nav sidebar + content ── */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
}

/* ── Sidebar navigation ── */
.woocommerce-MyAccount-navigation {
  position: sticky;
  top: 80px;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.woocommerce-MyAccount-navigation-link {
  border-bottom: 1px solid var(--color-border);
}
.woocommerce-MyAccount-navigation-link:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 11px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  background: var(--color-prussian);
  transition: color 0.15s, background 0.15s, padding-left 0.15s;
}

.woocommerce-MyAccount-navigation-link a:hover {
  color: var(--color-off-white);
  background: var(--color-navy);
  padding-left: 24px;
}

/* Active state */
.woocommerce-MyAccount-navigation-link.is-active a {
  color: var(--color-yellow);
  background: var(--color-navy);
  font-weight: 600;
  border-left: 3px solid var(--color-yellow);
  padding-left: 15px;
}

/* Log out — visually distinct */
.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--color-muted);
  font-size: 11px;
  opacity: 0.65;
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  color: #e05c5c;
  opacity: 1;
  background: rgba(224, 92, 92, 0.06);
  padding-left: 24px;
}

/* ── Content area ── */
.woocommerce-MyAccount-content {
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 32px 36px;
}

.woocommerce-MyAccount-content p {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--color-off-white);
  line-height: 1.7;
  margin-bottom: 12px;
}

.woocommerce-MyAccount-content p:last-child {
  margin-bottom: 0;
}

.woocommerce-MyAccount-content strong {
  font-weight: 600;
  color: var(--color-white);
}

.woocommerce-MyAccount-content a {
  color: var(--color-yellow);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,195,0,0.25);
  transition: border-color 0.15s;
}
.woocommerce-MyAccount-content a:hover {
  border-bottom-color: var(--color-yellow);
}

/* Section headings inside content */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 16px;
}
.woocommerce-MyAccount-content h2 { font-size: 18px; }
.woocommerce-MyAccount-content h3 { font-size: 15px; }

/* Tables (orders, etc.) */
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 13px;
}

.woocommerce-MyAccount-content table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
}

.woocommerce-MyAccount-content table td {
  padding: 12px 14px;
  color: var(--color-off-white);
  font-weight: 300;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.woocommerce-MyAccount-content table tr:last-child td {
  border-bottom: none;
}

.woocommerce-MyAccount-content table tbody tr:hover td {
  background: rgba(255,255,255,0.02);
}

/* Order status badges */
.woocommerce-MyAccount-content .woocommerce-order-status,
.woocommerce-MyAccount-content mark.order-status {
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 2px !important;
  color: var(--color-yellow) !important;
  border: 1px solid rgba(255,195,0,0.3) !important;
}

/* CTA buttons inside content */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content button[type="submit"] {
  display: inline-block;
  background: var(--color-yellow) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 10px 22px !important;
  border: none !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: background 0.15s !important;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content a.button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
  background: var(--color-gold) !important;
  color: var(--color-ink) !important;
}

/* Form inputs inside account (edit account / address pages) */
.woocommerce-MyAccount-content .form-row input[type="text"],
.woocommerce-MyAccount-content .form-row input[type="email"],
.woocommerce-MyAccount-content .form-row input[type="password"],
.woocommerce-MyAccount-content .form-row textarea,
.woocommerce-MyAccount-content .form-row select {
  background: var(--color-ink) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 11px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}
.woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-MyAccount-content .form-row textarea:focus,
.woocommerce-MyAccount-content .form-row select:focus {
  border-color: var(--color-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,195,0,0.1) !important;
}

.woocommerce-MyAccount-content .form-row label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 6px;
}

/* Notices inside content */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
  background: rgba(255,195,0,0.06) !important;
  border-left: 3px solid var(--color-yellow) !important;
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  border-radius: 0 2px 2px 0 !important;
}

/* ── Responsive: stack on mobile ── */
@media (max-width: 680px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .woocommerce-MyAccount-navigation {
    position: static;
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
  }

  .woocommerce-MyAccount-navigation-link {
    border-bottom: none;
    border-right: 1px solid var(--color-border);
  }
  .woocommerce-MyAccount-navigation-link:last-child {
    border-right: none;
  }

  .woocommerce-MyAccount-navigation-link a {
    padding: 10px 14px;
    font-size: 11px;
  }
  .woocommerce-MyAccount-navigation-link a:hover {
    padding-left: 14px;
  }
  .woocommerce-MyAccount-navigation-link.is-active a {
    border-left: none;
    border-bottom: 3px solid var(--color-yellow);
    padding-left: 14px;
  }

  .woocommerce-account #primary {
    padding-top: 28px;
    padding-bottom: 48px;
  }

  .woocommerce-MyAccount-content {
    padding: 20px 18px;
  }
}


/* ============================================================
   PAGE HERO BANNER — login / account / checkout
   Matches the shop/hints hero style: full-bleed bg image, dark overlays
   ============================================================ */

.ff-page-hero {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-ink);
  /* Neutralise any #primary padding so hero butts up against header */
  margin-top: -68px; /* match header height like .ff-hero */
  padding-top: 68px;
}

/* Background image div (bg-image set via inline style) */
.ff-page-hero__bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
}

/* Dark gradient mask — left-heavy like shop hero */
.ff-page-hero__mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,8,20,0.88) 30%, rgba(0,8,20,0.55) 100%);
}

/* Bottom fade into page bg */
.ff-page-hero__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--color-ink));
  pointer-events: none;
}

/* Fallback gradient when no image is set */
.ff-page-hero--no-image {
  background:
    radial-gradient(ellipse 80% 60% at 10% 100%, rgba(0,53,102,0.6) 0%, transparent 70%),
    linear-gradient(160deg, #000814 0%, #001D3D 60%, #000814 100%);
}

.ff-page-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
  padding-top: clamp(60px, 8vw, 96px);
  padding-bottom: clamp(36px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ff-page-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin: 0;
}

.ff-page-hero__title {
  font-family: var(--font-sans);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  color: var(--color-white);
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin: 0;
}

.ff-page-hero__sub {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 300;
  color: rgba(221,226,235,0.6);
  margin: 4px 0 0;
  max-width: 44ch;
  line-height: 1.6;
}

/* ── Account page: hero is outside #primary, so keep normal padding ── */
/* (padding-top already set by the main .woocommerce-account #primary rule above) */

/* ============================================================
   WOOCOMMERCE — LOGIN PAGE (logged-out /my-account/)
   ============================================================ */

/* Centre the login form column */
.woocommerce:has(.woocommerce-form-login) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-top: 40px;
  padding-bottom: 48px;
}

.woocommerce:has(.woocommerce-form-login) > .woocommerce-notices-wrapper,
.woocommerce:has(.woocommerce-form-login) > .woocommerce-form-login {
  width: 100%;
  max-width: 480px;
}

/* ── Login form card ── */
.woocommerce-form-login {
  background: var(--color-prussian);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 36px 40px 32px;
}

/* ── Field rows ── */
.woocommerce-form-login .woocommerce-form-row {
  margin-bottom: 20px;
  display: block;
}

/* ── Labels ── */
.woocommerce-form-login label:not(.woocommerce-form__label-for-checkbox) {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 7px;
}

.woocommerce-form-login .required { display: none; }

/* ── Inputs ── */
.woocommerce-form-login .woocommerce-Input--text,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"] {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--color-ink) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 11px 14px !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.woocommerce-form-login input[type="text"]:focus,
.woocommerce-form-login input[type="password"]:focus {
  border-color: var(--color-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,195,0,0.1) !important;
}

/* ── Remember me + submit row ── */
.woocommerce-form-login .form-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
}

.woocommerce-form-login .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--color-muted);
  white-space: nowrap;
}

.woocommerce-form-login .woocommerce-form__input-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  min-width: 15px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-ink);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}

.woocommerce-form-login .woocommerce-form__input-checkbox:checked {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
}

.woocommerce-form-login .woocommerce-form__input-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 2px; left: 4px;
  width: 5px; height: 8px;
  border: 2px solid var(--color-ink);
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* ── Submit button ── */
.woocommerce-form-login .woocommerce-form-login__submit {
  display: inline-block;
  background: var(--color-yellow) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 11px 28px !important;
  border: none !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.woocommerce-form-login .woocommerce-form-login__submit:hover {
  background: var(--color-gold) !important;
}

/* ── Lost password ── */
.woocommerce:has(.woocommerce-form-login) > .woocommerce-LostPassword {
  max-width: 480px;
  width: 100%;
  margin-top: 14px;
  text-align: center;
}

.woocommerce-LostPassword a {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.woocommerce-LostPassword a:hover {
  color: var(--color-off-white);
  border-bottom-color: var(--color-border);
}

/* ── Login error notices ── */
.woocommerce:has(.woocommerce-form-login) .woocommerce-error,
.woocommerce:has(.woocommerce-form-login) .woocommerce-message {
  background: rgba(224,92,92,0.08) !important;
  border-left: 3px solid #e05c5c !important;
  color: var(--color-off-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  border-radius: 0 2px 2px 0 !important;
  list-style: none !important;
}

/* ── Express checkout separator — hidden ── */
#wc-stripe-express-checkout-button-separator {
  display: none !important;
}

/* ── Mobile ── */
@media (max-width: 520px) {
  .woocommerce-form-login {
    padding: 24px 20px 20px;
  }

  .woocommerce-form-login .form-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .woocommerce-form-login .woocommerce-form-login__submit {
    width: 100% !important;
    text-align: center !important;
  }
}