/* ============================================================
   FUSION FIREARMS -- Apple Store-Inspired Premium Theme
   Magento 2 + Hyva v1.4.5 (Tailwind CSS + Alpine.js)
   Premium 1911 manufacturer -- fusionfirearms.com

   Design language: Apple STORE layout & typography system
   with Fusion Firearms brand identity (blue/red accents)

   Colors: #0071e3 (Apple blue buttons), #1d1d1f (dark text)
   Fonts:  Inter (body), Rajdhani (headings)
   Background: #FFFFFF white (Apple Store-style)

   STRATEGY: Override Hyva CSS custom properties at :root level.
   Apple Store clean white backgrounds, massive typography,
   minimal UI, product-first design with Fusion blue/red hints.
   ============================================================ */


/* ============================================================
   SECTION 1: GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Rajdhani:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');


/* ============================================================
   SECTION 2: ROOT CSS VARIABLES
   Hyva v1.4.5 variable overrides + custom --ff-* tokens
   ============================================================ */
:root {
    /* ---------------------------------------------------------
       Hyva core semantic colors -- Apple Store light theme
       --------------------------------------------------------- */
    --color-bg: #ffffff;
    --color-fg: #1d1d1f;
    --color-fg-secondary: #6e6e73;
    --color-surface: #f5f5f7;
    --color-container-lighter: #f5f5f7;
    --color-container: #ffffff;
    --color-container-darker: #e8e8ed;
    --color-on-primary: #fff;

    /* Primary = Apple blue (Fusion blue hint) */
    --color-primary-lighter: #2997ff;
    --color-primary: #0071e3;
    --color-primary-darker: #0077ED;

    /* Secondary = Fusion red (accent only) */
    --color-secondary-lighter: #FF5555;
    --color-secondary: #FF2D2D;
    --color-secondary-darker: #CC2424;

    /* Gray/slate scales -- Apple Store light theme (normal light→dark) */
    --color-black: #000;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f5f5f7;
    --color-gray-200: #e8e8ed;
    --color-gray-300: #d2d2d7;
    --color-gray-400: #86868b;
    --color-gray-500: #6e6e73;
    --color-gray-600: #424245;
    --color-gray-700: #333336;
    --color-gray-800: #1d1d1f;
    --color-gray-900: #1d1d1f;
    --color-slate-50: #f9fafb;
    --color-slate-200: #e8e8ed;
    --color-slate-300: #d2d2d7;
    --color-slate-400: #86868b;
    --color-slate-600: #6e6e73;
    --color-slate-800: #333336;
    --color-slate-950: #1d1d1f;

    /* Blue scale -- Apple blue */
    --color-blue-50: rgba(0, 113, 227, 0.06);
    --color-blue-300: #64d2ff;
    --color-blue-500: #0071e3;
    --color-blue-600: #0077ED;

    /* Red scale -- brand red (accent) */
    --color-red-50: rgba(255, 45, 45, 0.06);
    --color-red-500: #FF2D2D;
    --color-red-600: #CC2424;

    /* Green -- success states */
    --color-green-50: rgba(52, 199, 89, 0.08);
    --color-green-400: #34c759;
    --color-green-500: #30D158;

    /* Form styling variables */
    --form-bg: #ffffff;
    --form-stroke: #d2d2d7;
    --form-color: #1d1d1f;
    --form-active-color: #0071e3;

    /* Hyva button component variables */
    --btn-bg: #0071e3;
    --btn-color: #fff;
    --btn-stroke: transparent;
    --btn-hover-bg: #0077ED;
    --btn-disabled-bg: #e8e8ed;
    --radius-lg: 18px;

    /* Hyva card component variables */
    --card-bg: #ffffff;
    --card-stroke: #d2d2d7;
    --card-py: 24px;
    --card-px: 24px;

    /* Slate values that Hyva uses */
    --color-slate-100: #f5f5f7;
    --color-slate-500: #6e6e73;
    --color-slate-700: #424245;
    --color-slate-900: #1d1d1f;

    /* ---------------------------------------------------------
       Custom --ff-* brand tokens
       --------------------------------------------------------- */

    /* Brand Blues -- Apple Store + Fusion hint */
    --ff-blue:        #0071e3;
    --ff-blue-dark:   #0077ED;
    --ff-blue-light:  #2997ff;
    --ff-blue-glow:   rgba(0, 113, 227, 0.15);
    --ff-blue-subtle: rgba(0, 113, 227, 0.06);

    /* Brand Reds -- Fusion accent (subtle use) */
    --ff-red:         #FF2D2D;
    --ff-red-dark:    #CC2424;
    --ff-red-light:   #FF5555;
    --ff-red-glow:    rgba(255, 45, 45, 0.15);

    /* Utility colors */
    --ff-green:       #34c759;
    --ff-green-glow:  rgba(52, 199, 89, 0.15);
    --ff-yellow:      #FF9500;

    /* Backgrounds -- Apple Store white */
    --ff-bg-body:       #ffffff;
    --ff-bg-primary:    #ffffff;
    --ff-bg-secondary:  #f5f5f7;
    --ff-bg-card:       #ffffff;
    --ff-bg-card-hover: #f5f5f7;
    --ff-bg-elevated:   #ffffff;
    --ff-bg-input:      #ffffff;
    --ff-bg-footer:     #f5f5f7;

    /* Text -- Apple Store dark */
    --ff-text-primary:   #1d1d1f;
    --ff-text-secondary: #6e6e73;
    --ff-text-muted:     #6e6e73;  /* Was #86868b — bumped to pass WCAG AA (5.93:1 vs 3.94:1 on white). Same as --ff-text-secondary now; semantic distinction was decorative. */

    /* Borders -- Apple Store light */
    --ff-border:        #d2d2d7;
    --ff-border-hover:  #86868b;
    --ff-border-subtle: #e8e8ed;

    /* Gradients -- minimal */
    --ff-gradient-blue-red: linear-gradient(135deg, var(--ff-blue), var(--ff-red));
    --ff-gradient-dark:     linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%);
    --ff-gradient-card:     none;
    --ff-gradient-promo:    linear-gradient(90deg, #0071e3 0%, #2997ff 50%, #0071e3 100%);

    /* Shadows -- Apple Store subtle */
    --ff-shadow-blue:     none;
    --ff-shadow-red:      none;
    --ff-shadow-card:     0 2px 8px rgba(0, 0, 0, 0.04);
    --ff-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.08);
    --ff-shadow-dark:     0 2px 4px rgba(0, 0, 0, 0.04);
    --ff-shadow-lift:     0 8px 28px rgba(0, 0, 0, 0.1);

    /* Typography */
    --ff-font-heading: 'Rajdhani', sans-serif;
    --ff-font-body:    'Inter', sans-serif;

    /* Transitions -- Immersive Garden feel */
    --ff-ease:            cubic-bezier(0.4, 0, 0.2, 1);
    --ff-ease-out:        cubic-bezier(0.0, 0, 0.2, 1);
    --ff-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --ff-transition:      all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --ff-transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --ff-transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing scale */
    --ff-section-pad-desktop: 80px;
    --ff-section-pad-tablet:  64px;
    --ff-section-pad-mobile:  48px;

    /* Container */
    --ff-container-max: 1280px;
    --ff-container-pad: 24px;
}


/* ============================================================
   SECTION 3: BASE / GLOBAL STYLES
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Alpine.js cloak — hide until initialized */
[x-cloak] { display: none !important; }

html {
    font-size: 16px !important;  /* Override Magento styles-m.css 62.5% hack — restores 1rem = 16px for Tailwind + custom CSS */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--ff-font-body);
    font-size: 18px;
    line-height: 1.7;
    color: var(--ff-text-primary);
    background-color: var(--ff-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* overflow-x intentionally NOT set on body — would break position:sticky on
       .page-header. Horizontal overflow is clipped at the html level instead. */
}

/* -- Headings -- */
h1, h2, h3, h4, h5, h6,
.ff-heading {
    font-family: var(--ff-font-heading);
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ff-text-primary);
    margin-top: 0;
}

h1 { font-size: clamp(3rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); }
h5 { font-size: clamp(1.125rem, 2vw, 1.375rem); }
h6 { font-size: clamp(1rem, 1.5vw, 1.125rem); }

/* -- Paragraphs & body text -- */
p {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--ff-text-secondary);
    font-size: 1.25rem;
    line-height: 1.7;
}

/* -- Links -- */
a {
    color: var(--ff-blue);
    text-decoration: none;
    transition: color 0.3s var(--ff-ease);
}

a:hover {
    color: var(--ff-blue-light);
}

a:focus-visible {
    outline: 2px solid var(--ff-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* -- Selection -- */
::selection {
    background-color: rgba(0, 113, 227, 0.2);
    color: #1d1d1f;
}

::-moz-selection {
    background-color: rgba(0, 113, 227, 0.2);
    color: #1d1d1f;
}

/* -- Custom scrollbar -- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ff-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--ff-border);
    border-radius: 5px;
    border: 2px solid var(--ff-bg-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ff-border-hover);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ff-border) var(--ff-bg-primary);
}

/* -- Images -- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* -- Lists -- */
ul, ol {
    color: var(--ff-text-secondary);
}

li {
    margin-bottom: 0.25em;
}

/* -- Horizontal rule -- */
hr {
    border: none;
    border-top: 1px solid var(--ff-border);
    margin: 2rem 0;
}

/* -- Strong / bold -- */
strong, b {
    color: var(--ff-text-primary);
    font-weight: 600;
}

/* -- Code -- */
code, pre {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    border-radius: 6px;
    color: var(--ff-blue-light);
}

code {
    padding: 0.15em 0.4em;
    font-size: 0.9em;
}

pre {
    padding: 1.25rem;
    overflow-x: auto;
}

/* -- Tables (base) -- */
table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ff-text-primary);
}

th {
    font-family: var(--ff-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 1.0625rem;
    padding: 14px 16px;
    text-align: left;
    background: var(--ff-bg-card);
    border-bottom: 2px solid var(--ff-border);
    color: var(--ff-text-secondary);
}

td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ff-border-subtle);
    font-size: 1rem;
}

tr:hover td {
    background: var(--ff-bg-card);
}

/* -- Forms (base) -- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
    font-family: var(--ff-font-body);
    font-size: 1rem;
    color: var(--ff-text-primary);
    background-color: var(--ff-bg-input);
    border: 1px solid var(--ff-border);
    border-radius: 8px;
    padding: 12px 16px;
    transition: border-color 0.3s var(--ff-ease), box-shadow 0.3s var(--ff-ease);
    width: 100%;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--ff-blue);
    box-shadow: 0 0 0 3px rgba(0, 163, 255, 0.15);
}

input::placeholder,
textarea::placeholder {
    color: var(--ff-text-muted);
    opacity: 1;
}

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6e6e73;
    margin-bottom: 6px;
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================================
   CHECKBOX & RADIO — global, clean, on-brand
   ============================================================
   Replaces the OS-native checkbox/radio (which renders
   differently per Windows/Mac/Linux/browser and looks like a
   greyed-out or blue half-styled native control) with a fully
   custom design that's consistent across every browser:

   - 20×20 box (radio is a 20×20 circle)
   - 1.5px #d2d2d7 border at rest, white fill
   - Brand-blue fill + white checkmark / centered dot when checked
   - 4px brand-blue glow ring on focus-visible
   - Smooth 0.18s transitions

   Treven: "I want this to be incredibly easy for the customer to
   know if the box is checked or not and look clean."

   Native control is hidden with `appearance: none` + the visual
   is drawn entirely in CSS using a ::after pseudo-element. We
   skip this on `.qty` inputs and any specialized widgets that
   have their own treatment elsewhere in the file. */

input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /* Reset OS-level dimensions so the box renders at exactly 20×20 */
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    /* Hard-set both color AND image so no OS-native inner shape
       (dot, square, etc.) can render through `appearance: none`.
       Firefox + older Edge sometimes paint a grey inner dot on
       radios even after appearance: none — explicit
       `background-image: none` shuts that down. */
    background-color: #ffffff;
    background-image: none;
    border: 1.5px solid #d2d2d7;
    /* Kill any default browser accent fill that some engines
       still draw under `appearance: none`. */
    accent-color: transparent;
    /* Kill any default inset shadow or glyph that might bleed
       through (Safari occasionally still draws a checkmark glyph
       under accent-color even after appearance: none). */
    color: transparent;
    cursor: pointer;
    position: relative;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    /* Make sure the native focus outline doesn't double up
       with our box-shadow ring below. */
    outline: none;
    /* Vertical alignment with adjacent label text */
    vertical-align: middle;
}

/* Checkbox = rounded square */
input[type="checkbox"] {
    border-radius: 6px;
}

/* Radio = perfect circle */
input[type="radio"] {
    border-radius: 50%;
}

/* Hover state — border tightens to brand blue so the customer
   sees the control is interactive before they click. */
input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
    border-color: var(--ff-blue, #0071e3);
}

/* Checked state — the Fusion brand red↔blue diagonal gradient
   as the box fill. Same gradient family we use on the spark
   hairline rules (brand blue → brand red → brand blue) so the
   checked control reads as unmistakably "this is Fusion." */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: linear-gradient(135deg,
        var(--ff-blue, #00A3FF) 0%,
        var(--ff-blue, #00A3FF) 35%,
        var(--ff-red, #c8102e) 75%,
        #8a0a1f 100%);
    border-color: var(--ff-blue, #00A3FF);
    /* Subtle outer glow so the checked control pops off the page.
       The 1px white "halo" inside the box helps separate the
       gradient fill from the white checkmark and from the
       white page surrounding it. */
    box-shadow:
        inset 0 0 0 1.5px #ffffff,
        0 2px 6px rgba(200, 16, 46, 0.18),
        0 2px 6px rgba(0, 113, 227, 0.18);
}

/* Checkmark — drawn with a rotated rectangle that has only the
   right + bottom border visible (classic CSS checkmark trick).
   Positioned to sit centered inside the 20px box. Drop-shadow
   makes the white check pop cleanly against the gradient. */
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
    pointer-events: none;
}

/* Radio dot — a 8px white circle centered inside the 20px control,
   with the same drop-shadow as the checkmark so the dot reads
   cleanly against the gradient fill. */
input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
    pointer-events: none;
}

/* Focus ring — 4px translucent brand-blue halo so keyboard users
   see clearly where focus is. Same pattern as the form inputs. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    border-color: var(--ff-blue, #0071e3);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18);
}

/* When checked AND focused, combine BOTH treatments — keep the
   inset white halo + brand glow from :checked AND add the
   focus halo around the outside. Otherwise :focus-visible
   would override :checked's box-shadow stack. */
input[type="checkbox"]:checked:focus-visible,
input[type="radio"]:checked:focus-visible {
    box-shadow:
        inset 0 0 0 1.5px #ffffff,
        0 0 0 4px rgba(0, 113, 227, 0.22),
        0 2px 6px rgba(200, 16, 46, 0.18),
        0 2px 6px rgba(0, 113, 227, 0.18);
}

/* Disabled state */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    background: #f5f5f7;
    border-color: #e8e8ed;
    cursor: not-allowed;
}
input[type="checkbox"]:disabled:checked,
input[type="radio"]:disabled:checked {
    background: #d2d2d7;
    border-color: #d2d2d7;
}

/* Select dropdown arrow */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* Fieldset */
fieldset {
    border: 1px solid var(--ff-border);
    border-radius: 8px;
    padding: 24px;
    background: var(--ff-bg-secondary);
}

legend {
    font-family: var(--ff-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ff-text-primary);
    padding: 0 8px;
}


/* ============================================================
   SECTION 4: MINIMAL TAILWIND CLASS OVERRIDES
   Only for classes that do NOT inherit from Hyva root variables.
   ============================================================ */

/* bg-white — keep as actual white in light theme, EXCEPT in header */
.bg-white {
    background-color: #ffffff !important;
}

/* Override bg-white specifically inside page-header to show dark nav */
.page-header .bg-white,
.page-header #header.bg-white {
    background-color: transparent !important;
}

/* bg-gray-* overrides for hardcoded Tailwind classes */
.bg-gray-50 {
    background-color: var(--ff-bg-secondary) !important;
}

.bg-gray-100 {
    background-color: var(--ff-bg-card) !important;
}

.bg-gray-200 {
    background-color: var(--ff-bg-card-hover) !important;
}

/* text-black override */
.text-black {
    color: var(--ff-text-primary) !important;
}

/* text-gray-* overrides where Tailwind classes are hardcoded */
.text-gray-500 {
    color: var(--ff-text-muted) !important;
}

.text-gray-600 {
    color: var(--ff-text-secondary) !important;
}

.text-gray-700 {
    color: #333336 !important;
}

.text-gray-800 {
    color: #1d1d1f !important;
}

.text-gray-900 {
    color: var(--ff-text-primary) !important;
}

/* border-gray-* overrides */
.border-gray-200 {
    border-color: var(--ff-border) !important;
}

.border-gray-300 {
    border-color: var(--ff-border) !important;
}

/* Shadow overrides for dark theme */
.shadow,
.shadow-md {
    box-shadow: var(--ff-shadow-card) !important;
}

.shadow-lg {
    box-shadow: var(--ff-shadow-elevated) !important;
}

.shadow-sm {
    box-shadow: var(--ff-shadow-dark) !important;
}

.shadow-none {
    box-shadow: none !important;
}

/* Ring color overrides */
.ring-blue-500,
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--ff-blue) !important;
}

.ring-primary,
.focus\:ring-primary:focus {
    --tw-ring-color: var(--ff-blue) !important;
}

/* Divide color overrides */
.divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--ff-border) !important;
}

/* Hover bg overrides */
.hover\:bg-gray-50:hover {
    background-color: var(--ff-bg-card) !important;
}

.hover\:bg-gray-100:hover {
    background-color: var(--ff-bg-card-hover) !important;
}

.hover\:bg-white:hover {
    background-color: var(--ff-bg-card) !important;
}

/* Tailwind bg-white with opacity modifiers (Hyvä uses bg-white/70, bg-white/95) */
[class*="bg-white\/"] {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Placeholder color */
.placeholder-gray-400::placeholder,
.placeholder-gray-500::placeholder {
    color: var(--ff-text-muted) !important;
}

/* Focus within border */
.focus-within\:border-blue-500:focus-within {
    border-color: var(--ff-blue) !important;
}

/* Even row backgrounds for tables */
.even\:bg-gray-50:nth-child(even) {
    background-color: #f9fafb !important;
}

/* Hyva breadcrumb separator override */
.text-slate-400 {
    color: var(--ff-text-muted) !important;
}

.text-slate-600 {
    color: var(--ff-text-secondary) !important;
}

.bg-slate-50 {
    background-color: var(--ff-bg-secondary) !important;
}

.bg-slate-100 {
    background-color: var(--ff-bg-card) !important;
}

.border-slate-200 {
    border-color: var(--ff-border) !important;
}

.border-slate-300 {
    border-color: var(--ff-border-hover) !important;
}


/* ============================================================
   SECTION 5: HEADER STYLING
   ============================================================ */

/* Page header wrapper — Apple-style dark nav bar (FULLY opaque so no white bleed through transparent logo) */
.page-header {
    background: #1d1d1f !important;
    border-bottom: none;
    border-top: none !important;
    position: sticky;
    top: 0;
    z-index: 50;
    transition: box-shadow 0.3s var(--ff-ease), background 0.3s var(--ff-ease);
}

.page-header.scrolled,
.page-header.is-sticky {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
    background: #1d1d1f !important;
}

/* The inner bg-white div that Hyvä adds inside the header — override it to transparent */
.page-header > div.bg-white,
.page-header .relative.z-30.bg-white,
.page-header div[class*="bg-white"][class*="border-b"],
.page-header div[class*="border-b"][class*="shadow"][class*="bg-white"] {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Main header container — force transparent to show dark page-header bg */
#header,
.page-header #header,
#header.bg-white,
.page-header > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: static !important;
    max-width: 1720px !important;
    margin: 0 auto;
    height: auto;
    min-height: 68px;
}

#header .container,
#header > div {
    display: flex;
    align-items: center;
    gap: 0;
    height: 44px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Logo — compact, Apple-size */
.page-header .logo,
#header .logo,
.logo {
    flex-shrink: 0;
    max-width: 40px;
    transition: opacity 0.3s var(--ff-ease);
    padding: 0 12px;
}

.logo:hover {
    opacity: 0.7;
}

.logo img {
    max-height: 28px;
    width: auto;
    /* Invert logo to white for dark nav bar */
    filter: brightness(0) invert(1);
}

/* Header icon buttons -- white icons on dark nav */
.page-header .btn,
.page-header button.btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 10px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.3s var(--ff-ease);
    min-width: auto;
    min-height: auto;
    line-height: 1;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.page-header .btn:hover,
.page-header button.btn:hover {
    color: #ffffff !important;
    background: transparent !important;
}

/* Header SVG icons — white */
.page-header svg,
.page-header .btn svg,
#header svg {
    color: rgba(255, 255, 255, 0.8);
}

.page-header .btn:hover svg,
.page-header button.btn:hover svg {
    color: #ffffff;
}

/* -- Search -- */
#menu-search-icon {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s var(--ff-ease);
    cursor: pointer;
}

#menu-search-icon:hover {
    color: #ffffff;
}

/* Search styling */
.block-search input {
    background: #1d1d1f;
    border: 1px solid #424245;
    border-radius: 8px;
    color: #f5f5f7;
    padding: 8px 16px;
    font-size: 0.875rem;
    width: 100%;
    transition: border-color 0.3s var(--ff-ease), box-shadow 0.3s var(--ff-ease);
}

.block-search input:focus {
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
    outline: none;
}

.block-search input::placeholder {
    color: #6e6e73;
}

/* Search suggestions dropdown */
#search_autocomplete,
.search-autocomplete {
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    margin-top: 4px;
    overflow: hidden;
    max-width: 400px;
}

#search_autocomplete li,
.search-autocomplete li {
    padding: 10px 16px;
    border-bottom: 1px solid #e8e8ed;
    color: #6e6e73;
    transition: background 0.2s var(--ff-ease);
    cursor: pointer;
}

#search_autocomplete li:hover,
.search-autocomplete li:hover,
#search_autocomplete li.selected {
    background: #f5f5f7;
    color: #1d1d1f;
}

#search_autocomplete li:last-child,
.search-autocomplete li:last-child {
    border-bottom: none;
}

/* -- Account / Sign-In icon (header trigger for the account drawer) --
   Parallel to the cart icon: same translucent-white at rest, full white
   on hover, plus a brand-blue tint when the drawer is open
   (aria-expanded="true") so the customer can see at a glance which
   header surface is active. Sits right next to the cart icon in the
   header so visual consistency matters. */
#customer-menu {
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s var(--ff-ease), transform 0.2s var(--ff-ease);
    cursor: pointer;
}

#customer-menu:hover {
    color: #ffffff;
    outline: none;
}

/* Keyboard focus on header account icon — color shift from 80% →
   100% white is too subtle on the navy header for keyboard users.
   Brand-blue outline ring with 4px offset (clears the icon glyph
   without overlapping the surrounding header padding). Mirrored on
   the compare and hamburger icons below. */
#customer-menu:focus-visible {
    color: #ffffff;
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Active state — drawer is open. Brand-blue tint signals "this is the
   surface that's currently expanded" without requiring the user to
   look for the open drawer. Same affordance pattern as cart-icon-fill
   on non-empty cart, different mechanism (aria-expanded vs :has()
   badge detection). */
#customer-menu[aria-expanded="true"] {
    color: var(--ff-blue, #0071e3);
}

#customer-menu:active {
    transform: scale(0.96);
    transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    #customer-menu {
        transition: color 0.3s var(--ff-ease);
    }
    #customer-menu:active {
        transform: none;
    }
}

/* -- Header compare-link icon -- shows up in the header only when
   itemCount > 0 (Hyvä's Alpine `hiddenIfEmpty` class on `#compare-
   link`). Without explicit styling the icon inherits a default color
   that doesn't match the surrounding cart + account + hamburger
   icons. Brought to parity here. */
#compare-link {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s var(--ff-ease), transform 0.2s var(--ff-ease);
    cursor: pointer;
}

#compare-link:hover {
    color: #ffffff;
    outline: none;
}

#compare-link:focus-visible {
    color: #ffffff;
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 4px;
    border-radius: 4px;
}

#compare-link:active {
    transform: scale(0.96);
    transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    #compare-link {
        transition: color 0.3s var(--ff-ease);
    }
    #compare-link:active {
        transform: none;
    }
}

/* -- Mobile hamburger trigger -- the third header icon (alongside
   account + cart). Hyvä's vendor markup ships it as `btn bg-transparent
   border-transparent p-2` with no id. Target via the unique
   aria-controls="ff-mobile-menu-drawer" attribute. Matches the cart +
   account icon language: translucent-white at rest, full white on
   hover, brand-blue when the drawer is open, scale press on tap. */
button[aria-controls="ff-mobile-menu-drawer"] {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s var(--ff-ease), transform 0.2s var(--ff-ease);
    cursor: pointer;
}

button[aria-controls="ff-mobile-menu-drawer"]:hover {
    color: #ffffff;
    outline: none;
}

button[aria-controls="ff-mobile-menu-drawer"]:focus-visible {
    color: #ffffff;
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 4px;
    border-radius: 4px;
}

button[aria-controls="ff-mobile-menu-drawer"][aria-expanded="true"] {
    color: var(--ff-blue, #0071e3);
}

button[aria-controls="ff-mobile-menu-drawer"]:active {
    transform: scale(0.96);
    transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    button[aria-controls="ff-mobile-menu-drawer"] {
        transition: color 0.3s var(--ff-ease);
    }
    button[aria-controls="ff-mobile-menu-drawer"]:active {
        transform: none;
    }
}

/* -- Cart icon -- */
#menu-cart-icon {
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s var(--ff-ease);
    cursor: pointer;
}

#menu-cart-icon:hover {
    color: #ffffff;
}

/* Keyboard focus on the header cart trigger button (every page).
   Same hover color shift plus 2px brand-blue outline at 3px offset
   + small border-radius so the ring wraps the icon + count badge
   cleanly. Sits on the dark navy header so brand-blue contrasts. */
#menu-cart-icon:focus-visible {
    color: #ffffff;
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Cart icon SVG glyph fills when cart has items.

   Hyvä's count badge (<span x-text="summaryCount" x-show="summaryCount"
   x-cloak>) is visible only when summaryCount > 0:
     - x-cloak attribute hides it pre-Alpine-init (CSS [x-cloak] {display:
       none}). Alpine removes the attribute after first render.
     - x-show evaluates summaryCount; if 0/null Alpine adds inline
       style="display: none;". If truthy, no inline style.
   :has() lets us detect that visible state from the parent button and
   reflect it on the SVG glyph below.

   The :not([x-cloak]) guard prevents a brief flash of "filled" state
   between server-render and Alpine boot. The :not([style*="display:
   none"]) guard handles the empty-cart case where Alpine sets the
   inline display:none.

   Fill uses currentColor so it inherits the existing icon color (white
   on the navy header). Strong visual signal "you have items waiting"
   that complements the small numeric badge — the count tells you HOW
   MANY, the filled glyph tells you AT A GLANCE that the cart is loaded.
   No JS hook needed; pure CSS. */
#menu-cart-icon:has(span[x-text="summaryCount"]:not([x-cloak]):not([style*="display: none"])) svg circle,
#menu-cart-icon:has(span[x-text="summaryCount"]:not([x-cloak]):not([style*="display: none"])) svg path {
    fill: currentColor;
    transition: fill 0.3s var(--ff-ease);
}

/* Cart badge */
#menu-cart-icon .counter,
#menu-cart-icon .ff-badge,
.minicart-wrapper .counter {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #0071e3;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50px;
    padding: 0 4px;
}

/* Mini cart dropdown — white panel */
.minicart-wrapper .block-minicart,
#cart-drawer,
[x-ref="cartDrawer"],
.cart-drawer {
    background: #ffffff;
    border: 1px solid #e8e8ed;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    color: #1d1d1f;
}

.minicart-wrapper .product-item-name a,
.cart-drawer .product-item-name a {
    color: #1d1d1f;
    font-weight: 600;
}

.minicart-wrapper .product-item-name a:hover,
.cart-drawer .product-item-name a:hover {
    color: #0071e3;
    outline: none;
}
.minicart-wrapper .product-item-name a:focus-visible,
.cart-drawer .product-item-name a:focus-visible {
    color: #0071e3;
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
    border-radius: 4px;
}

/* -- Navigation (Hyva desktop menu) -- */

/* Header layout — nav inline with logo */
#header > .container,
#header > div:first-child {
    flex-wrap: nowrap !important;
}

/* Navigation wrapper — transparent, centered, static for dropdown positioning */
div.navigation,
.navigation {
    background: transparent !important;
    flex: 1 1 auto !important;
    order: 0 !important;
    border-top: none;
    padding: 0 !important;
    position: static !important;
}

/* Inner nav container */
.navigation > div {
    padding: 0 !important;
    max-width: 100%;
    margin: 0 auto;
    position: static !important;
}

/* Nav element itself — static so dropdowns escape to .page-header */
.navigation nav,
.navigation nav.relative {
    position: static !important;
}

/* Menu list -- centered horizontal, static for dropdown positioning */
.navigation nav > ul,
.navigation ul.flex {
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 44px !important;
    position: static !important;
}

/* Top-level menu items — Apple 44px height */
.navigation .level-0 {
    position: relative;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    margin: 0 !important;
}

/* The span wrapping link + button */
.navigation .level-0 > span,
.navigation .level-0 > span.flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    height: 44px !important;
    gap: 0 !important;
}

.navigation .level-0:hover,
.navigation .level-0[data-active] {
    border-bottom: none !important;
}

/* Top-level nav links — Apple-style small white text */
.navigation .level-0 a.level-0,
.navigation .level-0 > span > a {
    font-family: var(--ff-font-body) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.6875rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 0 10px !important;
    white-space: nowrap;
    transition: color 0.3s var(--ff-ease);
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    line-height: 1 !important;
    flex-shrink: 0;
}

.navigation .level-0:hover a.level-0,
.navigation .level-0:hover > span > a,
.navigation .level-0 a[aria-current="page"] {
    color: #ffffff !important;
}

/* Dropdown chevron buttons — hide them (Apple doesn't show arrows) */
.navigation .level-0 button,
.navigation .level-0 button.group,
.navigation .level-0 > span > button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    line-height: 1 !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: none !important;
}

.navigation .level-0 button svg {
    width: 10px !important;
    height: 10px !important;
}

.navigation .level-0:hover button {
    color: rgba(255, 255, 255, 0.8);
}

/* Dropdown submenus — Apple full-width white panel.
   Uses absolute positioning relative to .page-header (the nearest
   positioned ancestor at full viewport width).
   NOTE: Do NOT use display !important — Alpine.js controls visibility
   with inline style="display:none" which !important would override. */

/* Make the LI static so dropdowns escape to .page-header */
.navigation .level-0 {
    position: static !important;
}

.navigation .level-0 > ul,
.navigation .level-0 ul[x-show] {
    /* Position relative to .page-header (all ancestors are static) */
    position: absolute !important;
    top: 44px !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    translate: none !important;
    z-index: 200 !important;
    background: rgba(251, 251, 253, 0.98) !important;
    border: none !important;
    border-top: 1px solid #d2d2d7 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08) !important;
    padding: 28px 40px 32px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    /* display: flex (no !important) so Alpine's inline display:none wins */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 24px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Dropdown links — Apple clean, medium-sized for easy reading */
.navigation .level-0 > ul a,
.navigation .level-0 ul[x-show] a {
    display: block;
    color: #1d1d1f !important;
    font-family: var(--ff-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    padding: 8px 24px !important;
    margin: 0 !important;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 8px;
}

/* Dropdown list items */
.navigation .level-0 > ul li,
.navigation .level-0 ul[x-show] li {
    display: block;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    flex-shrink: 0;
}

.navigation .level-0 > ul a:hover,
.navigation .level-0 ul[x-show] a:hover {
    color: #0071e3 !important;
    background: rgba(0, 113, 227, 0.06) !important;
}

/* Mobile nav toggle — white on dark header */
.nav-toggle {
    color: #ffffff;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 1px;
    background: #ffffff;
    position: relative;
    transition: all 0.3s var(--ff-ease);
}

.nav-toggle span::before,
.nav-toggle span::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #ffffff;
    left: 0;
    transition: all 0.3s var(--ff-ease);
}

.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { bottom: -6px; }

/* Mobile nav panel — white */
.nav-sections-mobile,
.mobile-nav-panel {
    background: #ffffff;
    border-right: 1px solid #e8e8ed;
}

/* Hyva mobile menu drawer */
dialog[id*="menu"],
.mobile-menu-drawer {
    background: #ffffff !important;
    color: #1d1d1f;
}

/* Header account dropdown */
.header .bg-white,
#header .bg-white,
nav.bg-white,
.page-header .bg-white {
    background: #ffffff !important;
    border: 1px solid #e8e8ed;
}

/* Account dropdown */
.relative.inline-block nav,
#header nav:not([aria-label="Main menu"]):not([aria-label="Mobile Main Menu"]) {
    background: #ffffff !important;
    border-color: #e8e8ed !important;
}

/* Header account links */
.header.links a,
.authorization-link a,
.greet.welcome {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    transition: color 0.3s var(--ff-ease);
}

.header.links a:hover,
.authorization-link a:hover {
    color: #ffffff;
}

/* ============================================================
   HIDE DEFAULT HYVA CMS HOMEPAGE CONTENT
   These blocks come from the CMS page body and should not
   render alongside our custom homepage sections.
   ============================================================ */
#hyva-demo-hero,
.prose.mb-24,
section.snap-slider.product-slider,
.product-slider.my-8 {
    display: none !important;
}


/* ============================================================
   SECTION 6: PROMO BAR
   ============================================================ */
.ff-promo-bar {
    background: #f5f5f7;
    border-bottom: 1px solid #e8e8ed;
    color: #6e6e73;
    text-align: center;
    padding: 6px 20px;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.3;
    position: relative;
    z-index: 51;
    overflow: hidden;
}

.ff-highlight {
    font-weight: 700;
    color: var(--ff-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@keyframes promoShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes promoShine {
    0% { left: -100%; }
    100% { left: 200%; }
}


/* ============================================================
   SECTION 7: HOMEPAGE SECTIONS
   ============================================================ */

/* Homepage: full-width layout override
   Magento wraps content in .page-main > .columns > .column.main
   which constrains width to 960px. Homepage sections need full viewport. */
.cms-index-index .page-main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cms-index-index .columns,
.cms-index-index.page-layout-1column .columns {
    max-width: 100% !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

.cms-index-index .column.main {
    max-width: 100% !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* -- Hide default Hyva prose CMS block on homepage -- */
.cms-index-index .prose,
.cms-index-index .snap-slider.product-slider {
    display: none !important;
}

/* -- Hide empty Magento page-title-wrapper + breadcrumbs on homepage --
   Magento renders <div class="page-title-wrapper"><h1 class="page-title"></h1></div>
   and an empty .breadcrumbs container on every page. On the homepage the
   h1 is blank, but the wrapper still occupies ~60-80px on mobile because of
   .page-title-wrapper { padding-top: 16px; margin-bottom: 4px; } combined
   with the empty h1's clamp(2rem, 4vw, 3rem) line-height. That shows up as a
   white bar under the dark header on mobile, breaking the Apple-style
   header-to-hero flow. The hero IS the page title on this page, so suppress
   the empty wrapper + breadcrumbs entirely. Mirrors the same pattern we
   already use on checkout (~21771) and customer-account pages (~26959). */
.cms-index-index .page-title-wrapper,
.cms-index-index .breadcrumbs {
    display: none !important;
}

/* -- Hero — cinematic, immersive -- */
/* Old .ff-hero — no longer used, replaced by .ff-apple-hero */
.ff-hero {
    display: none;
}

.ff-hero::before,
.ff-hero::after {
    display: none;
}

.ff-hero > * {
    position: relative;
    z-index: 1;
}

.ff-hero h1 {
    font-size: clamp(3.5rem, 7vw, 6rem);
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 0.95;
    max-width: 900px;
    animation: ff-fade-up 0.8s var(--ff-ease) both;
}

.ff-hero p {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: var(--ff-text-secondary);
    max-width: 620px;
    margin: 0 auto 28px;
    line-height: 1.65;
    animation: ff-fade-up 0.8s var(--ff-ease) 0.15s both;
}

.ff-hero-cta-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Hero featured model cards */
.ff-model-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ff-border);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: all 0.3s var(--ff-ease);
}
.ff-model-card:hover {
    border-color: rgba(0, 163, 255, 0.4);
    background: rgba(0, 163, 255, 0.06);
}

/* Shop by Purpose cards */
.ff-purpose-card {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    transition: all 0.35s var(--ff-ease);
}
.ff-purpose-card:hover {
    border-color: rgba(0, 113, 227, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.ff-purpose-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 163, 255, 0.08);
    color: var(--ff-blue);
}

/* Section label (small accent text above titles — Apple-clean, no ornaments) */
.ff-section-label {
    font-family: var(--ff-font-heading);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ff-blue);
    margin-bottom: 0.75rem;
}

/* -- Section -- */
.ff-section {
    padding: var(--ff-section-pad-desktop) 0;
    position: relative;
}

.ff-section-alt {
    background: var(--ff-bg-secondary);
}

.ff-section-header {
    text-align: center;
    margin-bottom: 64px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.ff-section-title {
    font-family: var(--ff-font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--ff-text-primary);
    margin-bottom: 20px;
    line-height: 1.05;
}

.ff-section-subtitle {
    font-size: 1.375rem;
    color: var(--ff-text-secondary);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Section with lines + diamond divider accent */
.ff-section-title-decorated {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-bottom: 56px;
}

.ff-section-title-decorated::before,
.ff-section-title-decorated::after {
    content: '';
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: var(--ff-border);
}


/* ============================================================
   SECTION 8: TRUST BAR
   ============================================================ */
.ff-trust-bar {
    background: var(--ff-bg-secondary);
    border-top: 1px solid var(--ff-border-subtle);
    border-bottom: 1px solid var(--ff-border-subtle);
    padding: 16px 0;
}

.ff-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: var(--ff-container-max);
    margin: 0 auto;
    padding: 0 var(--ff-container-pad);
}

.ff-trust-item {
    text-align: center;
    padding: 20px 16px;
    border-radius: 12px;
    transition: var(--ff-transition);
}

.ff-trust-item:hover {
    background: rgba(0, 163, 255, 0.04);
}

.ff-trust-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ff-blue);
    font-size: 1.5rem;
}

.ff-trust-icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--ff-blue);
}

.ff-trust-title {
    font-family: var(--ff-font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.06em;
    color: var(--ff-text-primary);
    margin-bottom: 1px;
    line-height: 1.3;
}

.ff-trust-desc {
    font-size: 0.8125rem;
    color: var(--ff-text-muted);
    line-height: 1.3;
}

.ff-trust-icon-color {
    color: var(--ff-blue);
}

/* ============================================================
   TRUST BAR — native HTML rebuild of Treven's polished design.
   Full-width section, light-gray surface, three tiles with big
   icons + red->blue gradient accent line + uppercase title +
   gray descriptor. Replaces the PNG approach (which read as a
   foreign card pasted on the page).
   ============================================================ */

.ff-trust-bar {
    background: #f5f5f7;
    border-top: 1px solid #e8e8ed;
    border-bottom: 1px solid #e8e8ed;
    padding: 56px 0;
    width: 100%;
}

.ff-trust-bar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.ff-trust-bar__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ff-trust-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    margin: 0;
}

.ff-trust-tile__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d1d1f;
    margin: 0 0 10px;
}

.ff-trust-tile__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
}

/* Red-to-blue gradient accent under each icon — the signature
   visual cue from Treven's design. 56px wide x 2px tall. */
.ff-trust-tile__rule {
    display: block;
    width: 56px;
    height: 2px;
    margin: 0 0 18px;
    background: linear-gradient(90deg, #dc1f26 0%, #0071e3 100%);
    border-radius: 2px;
}

.ff-trust-tile__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1d1d1f;
    margin: 0 0 8px;
    line-height: 1.2;
}

.ff-trust-tile__desc {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #6e6e73;
    margin: 0;
    line-height: 1.4;
    max-width: 28ch;
}

/* Subtle vertical separators between tiles on desktop, like
   Treven's reference design. Only between tiles (not at the
   ends), and only on wider viewports. */
@media (min-width: 768px) {
    .ff-trust-tile + .ff-trust-tile {
        border-left: 1px solid #e5e5ea;
    }
}

@media (max-width: 767px) {
    .ff-trust-bar {
        padding: 40px 0;
    }
    .ff-trust-bar__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .ff-trust-tile {
        padding: 12px;
    }
    .ff-trust-tile__icon {
        width: 44px;
        height: 44px;
    }
    .ff-trust-tile__rule {
        width: 44px;
        margin-bottom: 14px;
    }
}


/* ============================================================
   SECTION 9: LINEUP CARDS (NEW — replaces old flagship cards)
   Bold, high-contrast, premium product showcase
   ============================================================ */

/* Section background with subtle texture */
.ff-lineup-section {
    background: linear-gradient(180deg, #ffffff 0%, var(--ff-bg-secondary) 30%, var(--ff-bg-secondary) 70%, #ffffff 100%) !important;
    position: relative;
}
.ff-lineup-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 163, 255, 0.2), transparent);
}

/* Card container */
.ff-lineup-card {
    background: linear-gradient(165deg, #243848 0%, #1A2E3C 40%, #152430 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: transform 0.45s var(--ff-ease), border-color 0.45s var(--ff-ease), box-shadow 0.45s var(--ff-ease);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
/* Inner top highlight for glass effect */
.ff-lineup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    z-index: 2;
}

.ff-lineup-card:hover {
    transform: translateY(-8px);
    border-color: var(--card-accent, var(--ff-blue));
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.6),
        0 0 40px color-mix(in srgb, var(--card-accent, #00A3FF) 12%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Keyboard focus on homepage lineup cards — same hover lift + glow as
   :hover plus a 2px brand-blue outline ring at 3px offset so keyboard
   users tabbing through the homepage hero lineup can spot which card
   is focused. Sits on dark bg so the brand-blue ring contrasts well. */
.ff-lineup-card:focus-visible {
    transform: translateY(-8px);
    border-color: var(--card-accent, var(--ff-blue));
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.6),
        0 0 40px color-mix(in srgb, var(--card-accent, #00A3FF) 12%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 3px;
}

/* Badge */
.ff-lineup-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 5;
    font-family: var(--ff-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 16px;
    border-radius: 50px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Visual header — the "hero" area of each card */
.ff-lineup-visual {
    position: relative;
    padding: 48px 28px 36px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.ff-lineup-visual-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: opacity 0.4s var(--ff-ease);
    opacity: 0.5;
}

.ff-lineup-card:hover .ff-lineup-visual-bg {
    opacity: 1;
}

/* Ghost model name — large watermark behind */
.ff-lineup-model-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--ff-font-heading);
    font-size: 7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.025);
    white-space: nowrap;
    user-select: none;
    z-index: 0;
    transition: color 0.5s var(--ff-ease), transform 0.5s var(--ff-ease);
}

.ff-lineup-card:hover .ff-lineup-model-ghost {
    color: rgba(255, 255, 255, 0.06);
    transform: translate(-50%, -50%) scale(1.05);
}

/* Visible model name — large, bold, white */
.ff-lineup-model-name {
    font-family: var(--ff-font-heading);
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    position: relative;
    z-index: 1;
    line-height: 1;
    transition: transform 0.35s var(--ff-ease), text-shadow 0.35s var(--ff-ease);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.ff-lineup-card:hover .ff-lineup-model-name {
    transform: scale(1.05);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

/* Model type / subtitle */
.ff-lineup-model-type {
    font-family: var(--ff-font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--card-accent, var(--ff-blue));
    position: relative;
    z-index: 1;
    margin-top: 10px;
    text-shadow: 0 0 20px color-mix(in srgb, var(--card-accent, #00A3FF) 30%, transparent);
}

/* Card body */
.ff-lineup-body {
    padding: 24px 28px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 100%);
}

.ff-lineup-desc {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ff-text-secondary);
    margin-bottom: 18px;
}

/* Spec tags */
.ff-lineup-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.ff-lineup-spec {
    font-family: var(--ff-font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ff-text-secondary);
    transition: border-color 0.3s var(--ff-ease), background 0.3s var(--ff-ease);
}

.ff-lineup-card:hover .ff-lineup-spec {
    border-color: color-mix(in srgb, var(--card-accent, #00A3FF) 25%, transparent);
    background: color-mix(in srgb, var(--card-accent, #00A3FF) 5%, transparent);
}

/* Price + CTA footer */
.ff-lineup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ff-lineup-price {
    font-family: var(--ff-font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.ff-lineup-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--card-accent, var(--ff-blue));
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;
    border: 1.5px solid var(--card-accent, var(--ff-blue));
    transition: all 0.3s var(--ff-ease);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
/* Shimmer effect on CTA hover */
.ff-lineup-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s var(--ff-ease);
}
.ff-lineup-cta:hover::before {
    left: 100%;
}

.ff-lineup-cta:hover {
    background: var(--card-accent, var(--ff-blue));
    color: #fff;
    box-shadow: 0 6px 24px color-mix(in srgb, var(--card-accent, #00A3FF) 35%, transparent);
    transform: translateY(-1px);
}

/* Accent line at bottom of card */
.ff-lineup-accent-line {
    height: 3px;
    background: linear-gradient(90deg, var(--card-accent, var(--ff-blue)), transparent);
    opacity: 0;
    transition: opacity 0.3s var(--ff-ease);
}

.ff-lineup-card:hover .ff-lineup-accent-line {
    opacity: 1;
}

/* Keep old .ff-flagship-price for backward compat */
.ff-flagship-price {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ff-text-primary);
    margin-bottom: 4px;
}

.ff-flagship-price-old {
    font-size: 1.125rem;
    color: var(--ff-text-muted);
    text-decoration: line-through;
    margin-left: 8px;
    font-weight: 400;
}

.ff-flagship-desc {
    font-size: 1.125rem;
    color: var(--ff-text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.ff-flagship-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Quick view overlay */
.ff-flagship-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 25, 35, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s var(--ff-ease);
    z-index: 3;
}

.ff-flagship-card:hover .ff-flagship-overlay {
    opacity: 1;
}


/* ============================================================
   SECTION 10: CATEGORY CARDS
   ============================================================ */
.ff-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    max-width: var(--ff-container-max);
    margin: 0 auto;
    padding: 0 var(--ff-container-pad);
}

.ff-category-card {
    background: linear-gradient(165deg, #243848 0%, #1A2E3C 40%, #152430 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 36px 20px 32px;
    text-align: center;
    transition: transform 0.4s var(--ff-ease), border-color 0.4s var(--ff-ease), box-shadow 0.4s var(--ff-ease);
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Glass-like top highlight */
.ff-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.ff-category-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 163, 255, 0.4);
    box-shadow: 0 16px 48px rgba(0, 163, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ff-category-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(0, 163, 255, 0.06);
    border: 1px solid rgba(0, 163, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    transition: all 0.35s var(--ff-ease);
}

.ff-category-card:hover .ff-category-icon {
    background: rgba(0, 163, 255, 0.12);
    border-color: rgba(0, 163, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 0 24px rgba(0, 163, 255, 0.15);
}

.ff-category-icon svg,
.ff-category-icon img {
    width: 30px;
    height: 30px;
    color: var(--ff-blue);
}

.ff-category-name {
    font-family: var(--ff-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ff-text-primary);
    margin-bottom: 6px;
    line-height: 1.2;
}

.ff-category-count {
    font-size: 1.125rem;
    color: var(--ff-text-muted);
}

/* Sale card -- red accent border */
.ff-category-card--sale {
    border-color: rgba(255, 45, 45, 0.3);
}

.ff-category-card--sale:hover {
    border-color: var(--ff-red);
    box-shadow: 0 8px 32px rgba(255, 45, 45, 0.12);
}

.ff-category-card--sale .ff-category-icon {
    background: rgba(255, 45, 45, 0.08);
    border-color: rgba(255, 45, 45, 0.15);
}

.ff-category-card--sale:hover .ff-category-icon {
    background: rgba(255, 45, 45, 0.15);
    border-color: var(--ff-red);
}

.ff-category-card--sale .ff-category-icon svg {
    color: var(--ff-red);
}

.ff-category-card--sale .ff-category-name {
    color: var(--ff-red);
}


/* ============================================================
   SECTION 11: SERVICES CTA SECTION
   ============================================================ */
.ff-services-section {
    position: relative;
    overflow: hidden;
}

.ff-services-card {
    background: var(--ff-gradient-card);
    border: 1px solid var(--ff-border);
    border-radius: 20px;
    padding: 64px 48px;
    text-align: center;
    max-width: var(--ff-container-max);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.ff-services-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 163, 255, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.ff-services-card > * {
    position: relative;
    z-index: 1;
}

.ff-services-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 16px;
}

.ff-services-desc {
    font-size: 1.125rem;
    color: var(--ff-text-secondary);
    max-width: 600px;
    margin: 0 auto 40px;
}

.ff-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.ff-service-item {
    background: rgba(15, 25, 35, 0.6);
    border: 1px solid var(--ff-border-subtle);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: border-color 0.3s var(--ff-ease);
}

.ff-service-item:hover {
    border-color: var(--ff-blue);
}

.ff-service-icon {
    color: var(--ff-blue);
    margin-bottom: 16px;
    font-size: 1.5rem;
}

.ff-service-name {
    font-family: var(--ff-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ff-text-primary);
    margin-bottom: 8px;
}

.ff-service-text {
    font-size: 1.125rem;
    color: var(--ff-text-muted);
    line-height: 1.5;
}


/* ============================================================
   SECTION 12: NEWSLETTER
   ============================================================ */
.ff-newsletter {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    border-radius: 20px;
    padding: 64px 48px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.ff-newsletter-title {
    font-family: var(--ff-font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.06em;
    color: var(--ff-text-primary);
    margin-bottom: 12px;
}

.ff-newsletter-desc {
    font-size: 1rem;
    color: var(--ff-text-secondary);
    margin-bottom: 32px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.ff-newsletter-form {
    display: flex;
    gap: 12px;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}

.ff-newsletter-form input[type="email"] {
    flex: 1;
    background: var(--ff-bg-input);
    border: 1px solid var(--ff-border);
    border-radius: 50px;
    color: var(--ff-text-primary);
    padding: 14px 24px;
    font-size: 1rem;
}

.ff-newsletter-form input[type="email"]:focus {
    border-color: var(--ff-blue);
    box-shadow: 0 0 0 3px rgba(0, 163, 255, 0.15);
    outline: none;
}

.ff-newsletter-form button {
    flex-shrink: 0;
}

/* Magento newsletter block */
.block.newsletter {
    background: transparent;
    max-width: 500px;
    margin: 0 auto;
}

.block.newsletter .form.subscribe {
    display: flex;
    gap: 12px;
}

.block.newsletter input[type="email"] {
    flex: 1;
    background: var(--ff-bg-input);
    border: 1px solid var(--ff-border);
    border-radius: 50px;
    color: var(--ff-text-primary);
    padding: 14px 24px;
    font-size: 1rem;
}

.block.newsletter .action.subscribe {
    flex-shrink: 0;
}

/* Newsletter agreement text */
.ff-newsletter-fine {
    font-size: 1rem;
    color: var(--ff-text-muted);
    margin-top: 16px;
}


/* ============================================================
   SECTION 13: BUTTONS
   ============================================================ */

/* Primary CTA -- pill shaped */
.ff-btn-primary,
button.ff-btn-primary,
a.ff-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ff-blue);
    color: #fff;
    font-family: var(--ff-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 32px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.3s var(--ff-ease), box-shadow 0.3s var(--ff-ease), background 0.3s var(--ff-ease);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
}

.ff-btn-primary:hover,
button.ff-btn-primary:hover,
a.ff-btn-primary:hover {
    background: var(--ff-blue-light);
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0, 163, 255, 0.35);
    color: #fff;
}

.ff-btn-primary:active {
    transform: scale(0.98);
}

.ff-btn-primary:focus-visible {
    outline: 2px solid var(--ff-blue);
    outline-offset: 3px;
}

/* Secondary CTA -- ghost / outline pill */
.ff-btn-secondary,
button.ff-btn-secondary,
a.ff-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: #fff;
    font-family: var(--ff-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s var(--ff-ease);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
}

.ff-btn-secondary:hover,
button.ff-btn-secondary:hover,
a.ff-btn-secondary:hover {
    background: #fff;
    color: var(--ff-bg-primary);
    border-color: #fff;
}

/* Keyboard focus on the .ff-btn-secondary ghost button (white-text-on-
   dark inverse button used on dark hero surfaces). Same hover shift to
   white bg + navy text, plus a 2px brand-blue outline ring at 3px
   offset for keyboard nav distinguishability. Brand-blue contrasts
   against both the white button surface and the dark page bg. */
.ff-btn-secondary:focus-visible,
button.ff-btn-secondary:focus-visible,
a.ff-btn-secondary:focus-visible {
    background: #fff;
    color: var(--ff-bg-primary);
    border-color: #fff;
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 3px;
}

.ff-btn-secondary:active {
    transform: scale(0.98);
}

/* Red variant */
.ff-btn-red,
button.ff-btn-red,
a.ff-btn-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ff-red);
    color: #fff;
    font-family: var(--ff-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 32px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.3s var(--ff-ease), box-shadow 0.3s var(--ff-ease), background 0.3s var(--ff-ease);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
}

.ff-btn-red:hover {
    background: var(--ff-red-light);
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(255, 45, 45, 0.35);
    color: #fff;
}

/* Keyboard focus on red destructive button — same hover treatment plus
   high-contrast double-ring (2px white inner + 2px red outer) since the
   focus surface is red. Red ring matches the destructive intent so all
   three signals (button color + hover scale + focus ring) align. */
.ff-btn-red:focus-visible,
button.ff-btn-red:focus-visible,
a.ff-btn-red:focus-visible {
    background: var(--ff-red-light);
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(255, 45, 45, 0.35),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-red, #d70015);
    color: #fff;
    outline: none;
}

/* Light-context outline button — secondary action on white card
   surfaces. The existing .ff-btn-secondary is white-text-on-dark
   for hero / footer surfaces; this is its dark-text-on-white
   counterpart for the customer-account / order / invoice
   surfaces. Same pill shape, same Oswald uppercase typography,
   same hover-to-brand-blue transition. Use side by side with
   .ff-btn-primary across the account section. */
.ff-btn-outline,
button.ff-btn-outline,
a.ff-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Transparent fill so the button doesn't paint a grey/off-white
       rectangle behind itself when it sits on a white card. The
       hairline border + text are all the visual weight needed. */
    background: transparent;
    color: #1d1d1f;
    font-family: var(--ff-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 32px;
    /* Hairline border matches .ff-orders__card / .ff-account-card
       (#e8e8ed) so the button feels part of the same design system,
       not a heavier-weighted standalone element. */
    border: 1px solid #e8e8ed;
    border-radius: 50px;
    cursor: pointer;
    transition: color 0.18s var(--ff-ease), border-color 0.18s var(--ff-ease), background 0.18s var(--ff-ease), transform 0.18s var(--ff-ease);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
}
.ff-btn-outline:hover,
button.ff-btn-outline:hover,
a.ff-btn-outline:hover {
    color: var(--ff-blue, #0071e3);
    border-color: var(--ff-blue, #0071e3);
    background: transparent;
    transform: translateY(-1px);
}
.ff-btn-outline:active {
    transform: scale(0.98);
}
.ff-btn-outline:focus-visible,
button.ff-btn-outline:focus-visible,
a.ff-btn-outline:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
    color: var(--ff-blue, #0071e3);
    border-color: var(--ff-blue, #0071e3);
}

/* Small button variant */
.ff-btn-sm {
    padding: 10px 20px;
    font-size: 1rem;
}

/* Large button variant */
.ff-btn-lg {
    padding: 18px 40px;
    font-size: 1rem;
}

/* Icon-only button */
.ff-btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    color: var(--ff-text-secondary);
    cursor: pointer;
    transition: var(--ff-transition-fast);
}

.ff-btn-icon:hover {
    background: var(--ff-bg-card-hover);
    border-color: var(--ff-blue);
    color: var(--ff-blue);
}

/* Keyboard focus on icon-only circle buttons — same hover bg + brand-blue
   border treatment plus 2px brand-blue outline at 2px offset. Sits on
   dark/card bg surfaces so the brand-blue ring contrasts well. */
.ff-btn-icon:focus-visible {
    background: var(--ff-bg-card-hover);
    border-color: var(--ff-blue);
    color: var(--ff-blue);
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 2px;
}

/* Global Hyva .btn base override -- dark theme defaults */
button.btn,
.btn {
    background: transparent;
    border: 1px solid var(--ff-border);
    border-radius: 8px;
    color: var(--ff-text-secondary);
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

button.btn:hover,
.btn:hover {
    border-color: var(--ff-border-hover);
    color: var(--ff-text-primary);
}

/* Transparent variant -- icon buttons */
button.btn.bg-transparent,
.btn.bg-transparent,
button.btn.border-transparent,
.btn.border-transparent {
    background: transparent !important;
    border: none !important;
}

/* Mobile nav menu buttons */
.page-header nav button,
.page-header nav .bg-surface {
    background: var(--ff-bg-card) !important;
    color: var(--ff-text-primary) !important;
    border-color: var(--ff-border) !important;
}

/* Magento button overrides */
button.action.primary,
.action.primary,
button.primary,
.btn-primary {
    background: #0071e3 !important;
    color: #fff !important;
    font-family: var(--ff-font-heading);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    border: none !important;
    border-radius: 980px !important;
    padding: 14px 32px !important;
    /* Animate transform + shadow alongside background for the hover lift below
       (was: only `background 0.2s ease` — left hover state without easing on
       the new transform/shadow micro-interaction). */
    transition: background 0.2s ease, transform 0.2s var(--ff-ease, cubic-bezier(0.25, 0.1, 0.25, 1)), box-shadow 0.25s var(--ff-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
    cursor: pointer;
    font-size: 1.0625rem;
    will-change: transform;
}

/* Subtle hover lift — translateY + scale + soft brand-blue glow.
   Matches the design standard ("translateY(-1px) + shadow lift"). The
   previous rule explicitly killed transform/box-shadow which left every
   stock Magento primary button without any hover micro-interaction. */
button.action.primary:hover,
.action.primary:hover,
button.primary:hover,
.btn-primary:hover {
    background: #0077ed !important;
    transform: translateY(-1px) scale(1.015);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.32);
    outline: none;
}
/* Keyboard focus — same hover treatment plus a double-ring (white inner
   2px + brand-blue outer 2px) so the focus state is visible on both the
   filled-blue button surface AND the page bg behind it. Single-color
   outline would be invisible on the brand-blue button. */
button.action.primary:focus-visible,
.action.primary:focus-visible,
button.primary:focus-visible,
.btn-primary:focus-visible {
    background: #0077ed !important;
    transform: translateY(-1px) scale(1.015);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.32),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3);
    outline: none;
}

/* Tactile press state — slight compress so clicks feel real. */
button.action.primary:active,
.action.primary:active,
button.primary:active,
.btn-primary:active {
    transform: translateY(0) scale(0.985);
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.20);
    transition-duration: 0.08s;
}

button.action.secondary,
.action.secondary {
    background: transparent !important;
    color: var(--ff-text-primary) !important;
    border: 1px solid var(--ff-border) !important;
    border-radius: 50px !important;
    font-family: var(--ff-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 24px !important;
    transition: all 0.3s var(--ff-ease);
    cursor: pointer;
}

button.action.secondary:hover,
.action.secondary:hover {
    background: var(--ff-bg-card) !important;
    border-color: var(--ff-blue) !important;
    color: var(--ff-blue) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.10);
    outline: none;
}
button.action.secondary:focus-visible,
.action.secondary:focus-visible {
    background: var(--ff-bg-card) !important;
    border-color: var(--ff-blue) !important;
    color: var(--ff-blue) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.10);
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 3px !important;
}

button.action.secondary:active,
.action.secondary:active {
    transform: translateY(0) scale(0.985);
    transition-duration: 0.08s;
}

/* Tocart button */
button.action.tocart,
.action.tocart {
    background: #0071e3 !important;
    color: #fff !important;
    border-radius: 980px !important;
    font-family: var(--ff-font-heading);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    padding: 14px 32px !important;
    border: none !important;
    font-size: 1.0625rem;
    white-space: nowrap;
    /* Animate transform + shadow alongside background so the hover lift
       (defined below) actually eases instead of jumping. */
    transition: background 0.2s ease, transform 0.2s var(--ff-ease, cubic-bezier(0.25, 0.1, 0.25, 1)), box-shadow 0.25s var(--ff-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
    will-change: transform;
}

/* Ensure Add to Cart label doesn't wrap */
button.action.tocart span,
.action.tocart span,
#product-addtocart-button span {
    white-space: nowrap;
    display: inline !important;
}

button.action.tocart:hover,
.action.tocart:hover {
    background: #0077ed !important;
    transform: translateY(-1px) scale(1.015);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.32);
}

/* Keyboard focus — same hover lift plus high-contrast double-ring
   (white inner 2px + brand-blue outer 2px) so the focus indicator is
   visible on both the filled-blue button surface AND the page bg
   behind it. The ATC button is the most-used CTA on PDPs/PLPs/cart
   recommendations — keyboard users need a clear focus state. */
button.action.tocart:focus-visible,
.action.tocart:focus-visible {
    background: #0077ed !important;
    transform: translateY(-1px) scale(1.015);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.32),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3);
    outline: none;
}

/* Press state — slight compress for tactile feedback. */
button.action.tocart:active,
.action.tocart:active {
    transform: translateY(0) scale(0.985);
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.20);
    transition-duration: 0.08s;
}

/* Disabled button */
button:disabled,
button[disabled],
.action.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}


/* ============================================================
   SECTION 14: FOOTER
   ============================================================
   IMPORTANT: scope this to the actual site footer only. The bare
   `footer` element selector used to be in this list, and that
   over-broad rule was bleeding the dark-grey site-footer fill
   onto every <footer> element on the page — including the
   `<footer class="ff-account-card__footer">` and
   `<footer class="ff-orders__card-footer">` we use semantically
   inside dashboard cards. Treven saw it as a grey rectangle
   behind the action buttons (Edit / Change Password / View
   Order / Reorder / Download Invoice / etc.) on every card.

   The .ff-footer and .page-footer classes already cover the
   only legitimate targets (our custom site footer + Magento's
   wrapper). The bare `footer` is gone. */
.ff-footer,
.page-footer {
    background: var(--ff-bg-footer);
    color: var(--ff-text-secondary);
    border-top: 1px solid var(--ff-border-subtle);
}

.ff-footer-inner {
    max-width: var(--ff-container-max);
    margin: 0 auto;
    padding: 64px var(--ff-container-pad) 40px;
}

.ff-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 48px;
}

.ff-footer-heading {
    font-family: var(--ff-font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1d1d1f;
    margin-bottom: 20px;
}

.ff-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ff-footer-links li {
    margin-bottom: 2px;
}

.ff-footer-links a {
    color: var(--ff-text-muted);
    font-size: 0.75rem;
    transition: color 0.3s var(--ff-ease), padding-left 0.3s var(--ff-ease);
    display: inline-block;
}

.ff-footer-links a:hover,
a.ff-footer-link:hover {
    color: var(--ff-text-primary) !important;
    padding-left: 4px;
}

/* Footer nav (from footer.phtml template) */
.ff-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ff-footer-nav a {
    color: var(--ff-text-muted);
    font-size: 0.75rem;
    transition: color 0.3s var(--ff-ease);
    display: block;
    margin-bottom: 0 !important;
    padding: 3px 0 !important;
}

.ff-footer-nav a:hover {
    color: var(--ff-text-primary) !important;
}

.ff-footer-desc {
    font-size: 1.125rem;
    color: var(--ff-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Footer social icons */
.ff-footer-social {
    display: flex;
    gap: 12px;
}

.ff-footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    color: var(--ff-text-muted);
    transition: all 0.3s var(--ff-ease);
}

.ff-footer-social a:hover {
    background: var(--ff-blue);
    border-color: var(--ff-blue);
    color: #fff;
    transform: translateY(-2px);
}

/* Footer bottom bar */
.ff-footer-bottom {
    border-top: 1px solid var(--ff-border-subtle);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.ff-footer-copyright {
    font-size: 1rem;
    color: var(--ff-text-muted);
}

.ff-footer-legal {
    display: flex;
    gap: 24px;
}

.ff-footer-legal a {
    font-size: 1rem;
    color: var(--ff-text-muted);
}

.ff-footer-legal a:hover {
    color: var(--ff-text-primary);
}

/* Magento footer block overrides */
.page-footer .footer.content {
    background: var(--ff-bg-footer);
    padding: 64px var(--ff-container-pad) 40px;
    max-width: var(--ff-container-max);
    margin: 0 auto;
}

.page-footer .footer.content .block-title strong {
    font-family: var(--ff-font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ff-blue);
}

.page-footer .footer.content ul {
    list-style: none;
    padding: 0;
}

.page-footer .footer.content ul a {
    color: var(--ff-text-muted);
    font-size: 1.125rem;
    transition: color 0.3s var(--ff-ease);
}

.page-footer .footer.content ul a:hover {
    color: var(--ff-text-primary);
}


/* ============================================================
   SECTION 15: UTILITY CLASSES
   ============================================================ */

/* Container */
.ff-container {
    max-width: var(--ff-container-max);
    margin: 0 auto;
    padding: 0 var(--ff-container-pad);
    width: 100%;
}

/* Diamond decorative element */
.ff-diamond {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--ff-blue);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.ff-diamond--sm {
    width: 6px;
    height: 6px;
}

.ff-diamond--lg {
    width: 10px;
    height: 10px;
}

/* Divider with diamond */
.ff-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin: 32px 0;
}

.ff-divider::before,
.ff-divider::after {
    content: '';
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: var(--ff-border);
}

/* Gradient text */
.ff-gradient-text {
    background: var(--ff-gradient-blue-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Blue accent text */
.ff-text-blue {
    color: var(--ff-blue);
}

.ff-text-red {
    color: var(--ff-red);
}

.ff-text-muted {
    color: var(--ff-text-muted);
}

/* Badge (cart count, notification) */
.ff-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--ff-blue);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    border-radius: 50px;
    line-height: 1;
}

.ff-badge--red {
    background: var(--ff-red);
}

/* Tag / label pills */
.ff-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--ff-blue-subtle);
    color: var(--ff-blue);
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 50px;
    border: 1px solid rgba(0, 163, 255, 0.2);
}

.ff-tag--red {
    background: rgba(255, 45, 45, 0.08);
    color: var(--ff-red);
    border-color: rgba(255, 45, 45, 0.2);
}

.ff-tag--green {
    background: rgba(74, 222, 128, 0.08);
    color: var(--ff-green);
    border-color: rgba(74, 222, 128, 0.2);
}

/* Glow effects */
.ff-glow-blue {
    box-shadow: 0 0 30px rgba(0, 163, 255, 0.2);
}

.ff-glow-red {
    box-shadow: 0 0 30px rgba(255, 45, 45, 0.2);
}

/* Card base utility */
.ff-card {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border-subtle);
    border-radius: 16px;
    padding: 24px;
    transition: var(--ff-transition);
}

.ff-card:hover {
    border-color: var(--ff-border-hover);
}

.ff-card--interactive:hover {
    border-color: var(--ff-blue);
    box-shadow: 0 8px 32px rgba(0, 163, 255, 0.12);
    transform: translateY(-2px);
}

/* Keyboard focus on the .ff-card--interactive utility — when this
   modifier wraps clickable card content (anchor or button), keyboard
   users tabbing to it need a clear focus indicator. Same hover treatment
   plus 2px brand-blue outline at 3px offset. */
.ff-card--interactive:focus-visible {
    border-color: var(--ff-blue);
    box-shadow: 0 8px 32px rgba(0, 163, 255, 0.12);
    transform: translateY(-2px);
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 3px;
}

/* Loading / skeleton */
.ff-skeleton {
    background: linear-gradient(90deg, var(--ff-bg-card) 25%, var(--ff-bg-card-hover) 50%, var(--ff-bg-card) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s ease infinite;
    border-radius: 8px;
}

@keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Visually hidden (accessible) */
.ff-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Aspect ratio helpers */
.ff-aspect-1x1 { aspect-ratio: 1 / 1; }
.ff-aspect-4x3 { aspect-ratio: 4 / 3; }
.ff-aspect-16x9 { aspect-ratio: 16 / 9; }

/* Overflow scroll container */
.ff-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ff-scroll-x::-webkit-scrollbar {
    display: none;
}


/* ============================================================
   SECTION 15B: PREMIUM VISUAL EFFECTS
   Glass morphism, ambient lighting, micro-animations
   ============================================================ */

/* --- Accent line under header — removed for clean Apple look --- */
.page-header::after {
    display: none !important;
}

/* --- Glass card style --- */
.ff-glass {
    background: rgba(28, 42, 53, 0.6);
    /* backdrop-filter removed — causes Chrome rendering hangs */
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Premium section dividers — gradient lines --- */
.ff-section + .ff-section::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(0, 163, 255, 0.25) 50%, transparent 95%);
    margin: 0 auto;
    max-width: 800px;
}

/* --- Subtle entrance animations --- */
@keyframes ff-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ff-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hero stat numbers — count-up feel */
@keyframes ff-number-pop {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* --- Ambient glow spots for sections --- */
.ff-section-glow {
    position: relative;
    overflow: hidden;
}
.ff-section-glow::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(0, 163, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* (Removed: the old "premium button pulse" shimmer rule.
   It created a `::before` translucent stripe that animated from
   `left: -100%` to `left: 100%` on hover. The newer spark-border
   rule at the bottom of this file also targets `.ff-btn-primary::before`,
   and CSS only allows one `::before` per element — the cascade merged
   them. The shimmer's hover state pushed the pseudo-element offscreen
   right, parking it directly behind any sibling button placed to the
   right of the primary CTA (e.g. the Reorder pill next to View Order
   on the My Orders / Recent Orders / Order Detail cards). End result:
   a phantom blue-gradient sliver showed behind Reorder on hover. The
   spark-border at line ~16387 is the canonical CTA hover effect now,
   so this duplicate shimmer is gone. */

/* --- Card hover glow ring --- */
.ff-flagship-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(0, 163, 255, 0.2), transparent 40%, transparent 60%, rgba(0, 163, 255, 0.1));
    opacity: 0;
    transition: opacity 0.4s var(--ff-ease);
    z-index: -1;
}

.ff-flagship-card:hover::before {
    opacity: 1;
}

/* --- Sale category card special pulsing border --- */
.ff-category-card--sale {
    border-color: rgba(255, 45, 45, 0.2);
}
.ff-category-card--sale:hover {
    border-color: var(--ff-red) !important;
    box-shadow: 0 8px 32px rgba(255, 45, 45, 0.12);
}

/* --- Premium search bar in header --- */
#search-content {
    max-width: 320px;
    width: 100%;
    position: relative;
}

#search-content input[type="search"],
#search-content input[type="text"] {
    background: rgba(15, 25, 35, 0.9);
    border: 1px solid rgba(0, 163, 255, 0.12);
    border-radius: 50px;
    color: var(--ff-text-primary);
    padding: 8px 16px 8px 36px;
    font-size: 0.9375rem;
    width: 100%;
    transition: border-color 0.3s var(--ff-ease), box-shadow 0.3s var(--ff-ease), width 0.4s var(--ff-ease);
}

#search-content input:focus {
    border-color: var(--ff-blue);
    box-shadow: 0 0 0 3px rgba(0, 163, 255, 0.12), 0 4px 20px rgba(0, 163, 255, 0.08);
    outline: none;
}

/* --- Smooth scroll progress indicator --- */
@keyframes ff-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* --- Product card image overlay on hover --- */
.product-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 163, 255, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ff-ease);
    pointer-events: none;
    border-radius: 20px;
    z-index: 1;
}

.product-item:hover::after {
    opacity: 1;
}


/* ============================================================
   SECTION 16: PRODUCT LISTING PAGES (PLP)
   Apple Store style — clean, spacious, products-first
   ============================================================ */

/* Page layout — centered with generous padding */
.page-products .columns,
.page-layout-2columns-left .columns,
.page-layout-1column .columns {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* Force single-column layout — no sidebar grid, Apple doesn't use sidebars */
.page-products.page-layout-2columns-left .columns {
    display: block !important;
    grid-template-columns: none !important;
}

/* Sidebar — restyle as horizontal subcategory navigation bar */
.page-products .sidebar-main {
    width: 100% !important;
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    align-self: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

/* Hide sidebar-additional */
.page-products .sidebar-additional {
    display: none !important;
}

/* Hide "Shop By" title — redundant when subcategories are visible */
.page-products .sidebar-main .block-title {
    display: none !important;
}

.page-products .sidebar-main .block-content {
    padding: 0;
}

/* Filter option groups — display as horizontal pill bar */
.page-products .sidebar-main dl.card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* Hide the filter group title (e.g. "Category") — pills are self-explanatory */
.page-products .sidebar-main dt {
    display: none !important;
}

.page-products .sidebar-main dd {
    padding-top: 0 !important;
}

/* Filter items — horizontal pill buttons */
.page-products .sidebar-main .items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    justify-content: center !important;
}

.page-products .sidebar-main .items > li {
    padding: 0 !important;
    margin: 0 !important;
}

.page-products .sidebar-main .items > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #1d1d1f !important;
    font-family: var(--ff-font-body);
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 980px !important;
    background: #ffffff !important;
    transition: all 0.2s ease;
    white-space: nowrap !important;
    text-decoration: none !important;
    justify-content: center !important;
    letter-spacing: 0.01em;
}

.page-products .sidebar-main .items > li > a:hover {
    color: #0071e3 !important;
    border-color: #0071e3 !important;
    background: rgba(0, 113, 227, 0.04) !important;
}

/* Filter count badges — subtle inside pills */
.page-products .sidebar-main .items > li > a .count {
    background: transparent !important;
    color: #6e6e73 !important;
    font-size: 0.8125rem;
    font-weight: 400;
    padding: 0 !important;
    border-radius: 0;
}

/* Layered navigation — Apple-style horizontal filter pills */
.page-products .sidebar-main .block-content {
    padding: 0 !important;
}

/* Filter pill buttons */
.page-products .sidebar-main .filter-option.card {
    display: inline-flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 980px !important;
    padding: 0 !important;
    margin: 0 4px 8px !important;
    min-width: auto;
    max-width: none;
    vertical-align: top;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    overflow: visible !important;
}

.page-products .sidebar-main .filter-option.card:hover {
    border-color: #6e6e73 !important;
}

/* Filter heading text — clean, not ALL CAPS */
.page-products .sidebar-main .filter-option.card h3 {
    font-family: var(--ff-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #1d1d1f !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    background: transparent !important;
}

.page-products .sidebar-main .filter-option.card h3 button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 10px 20px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 980px !important;
    color: #1d1d1f !important;
    gap: 6px !important;
    white-space: nowrap !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Chevron icon inside filter button */
.page-products .sidebar-main .filter-option.card h3 button svg {
    width: 10px !important;
    height: 10px !important;
    color: #6e6e73 !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
}

/* Hide redundant "filter" screen reader text if visible */
.page-products .sidebar-main .filter-option.card h3 button .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Filter title text — override Tailwind */
.page-products .sidebar-main .filter-option.card h3 button .title {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

/* Chevron wrapper — remove bordered box, make inline */
.page-products .sidebar-main .filter-option.card h3 button > span:last-child {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
}

/* Active/open filter state */
.page-products .sidebar-main .filter-option.card h3 button[aria-expanded="true"] {
    color: #0071e3 !important;
}
.page-products .sidebar-main .filter-option.card h3 button[aria-expanded="true"] svg {
    color: #0071e3 !important;
}

/* Filter dropdown overlay — clean Apple card */
.page-products .sidebar-main .filter-option.card .filter-options-content {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 50 !important;
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    max-height: 280px;
    overflow-y: auto;
    padding: 8px !important;
    min-width: 220px !important;
}

/* Smooth scrollbar for filter dropdown */
.page-products .sidebar-main .filter-option.card .filter-options-content::-webkit-scrollbar {
    width: 6px;
}
.page-products .sidebar-main .filter-option.card .filter-options-content::-webkit-scrollbar-thumb {
    background: #d2d2d7;
    border-radius: 3px;
}
.page-products .sidebar-main .filter-option.card .filter-options-content::-webkit-scrollbar-track {
    background: transparent;
}

.page-products .sidebar-main .filter-option.card ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-products .sidebar-main .filter-option.card ol li {
    margin: 0 !important;
    padding: 0 !important;
}

.page-products .sidebar-main .filter-option.card ol li a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.875rem !important;
    color: #1d1d1f !important;
    padding: 8px 12px !important;
    border-radius: 8px;
    transition: all 0.15s ease;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    white-space: normal !important;
    line-height: 1.4 !important;
}

.page-products .sidebar-main .filter-option.card ol li a:hover {
    color: #0071e3 !important;
    background: #f5f5f7 !important;
    outline: none !important;
}
.page-products .sidebar-main .filter-option.card ol li a:focus-visible {
    color: #0071e3 !important;
    background: #f5f5f7 !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

/* Filter item count — subtle gray */
.page-products .sidebar-main .filter-option.card ol li a .count {
    color: #6e6e73 !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
}

/* Wrap the filter options horizontally centered */
.page-products .sidebar-main .block[x-data] .block-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
}

/* Make filter cards position anchor for dropdown overlay */
.page-products .sidebar-main .filter-option.card {
    position: relative !important;
    overflow: visible !important;
}

/* Mobile filter toggle button — clean */
.ff-filter-toggle {
    display: none !important;
}

/* Hide category description — products first */
.category-description {
    display: none !important;
}

/* Category page header — Apple Store "Shop Mac" style */
.page-title-wrapper {
    margin-bottom: 4px !important;
    padding-top: 16px;
    text-align: center;
}

.page-title-wrapper .page-title {
    font-family: var(--ff-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.015em;
    color: #1d1d1f;
}

/* Breadcrumbs — Apple style, subtle */
/* Breadcrumbs — Apple Store style */
.breadcrumbs {
    padding: 8px 0 !important;
    margin-bottom: 0 !important;
}

.breadcrumbs .items {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}

.breadcrumbs a,
.breadcrumbs .item {
    color: #6e6e73 !important;
    font-size: 0.75rem !important;
}

.breadcrumbs .item:last-child,
.breadcrumbs .item:last-child a {
    color: #1d1d1f !important;
}

.breadcrumbs a:hover {
    color: #0071e3 !important;
    text-decoration: none !important;
    outline: none !important;
}

/* Keyboard focus on breadcrumb anchors — a color shift alone is too
   subtle for keyboard users tabbing through the trail. Restore a 2px
   brand-blue outline ring (matches global a:focus-visible at line 265)
   with 3px offset so the indicator clears the small font and the
   chevron separator. */
.breadcrumbs a:focus-visible {
    color: #0071e3 !important;
    text-decoration: none !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 3px !important;
    border-radius: 2px !important;
}

/* Breadcrumb separator — thin Apple chevron instead of / */
.breadcrumbs .separator {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 20px !important;
    justify-content: center !important;
}
.breadcrumbs .separator::after {
    content: '\203A' !important;
    font-size: 0.875rem !important;
    color: #6e6e73 !important;
    line-height: 1 !important;
}

/* Hide the ::after pseudo-element on breadcrumb items (Hyva adds empty 24px spacer) */
.breadcrumbs .item::after {
    display: none !important;
}

/* ===============================================================
   PLP toolbar — Fusion Firearms clean sort bar
   ===============================================================
   Vendor (Hyvä) ships THREE pieces in the toolbar:
     - viewmode toggle (grid/list segmented control)
     - sort dropdown
     - asc/desc arrow button
   That stacking confused customers (Treven flagged it: the toggle
   "doesn't turn on", the dropdown "has no options", the arrow is
   unlabeled). We replaced the markup via template overrides:
     - viewmode.phtml → empty (grid-only theme, no list view designed)
     - sorter.phtml → single labeled dropdown encoding both sort field
       AND direction in each option (Apple/Nike pattern).
   The CSS below styles the new `.ff-sorter` markup AND defensively
   hides any vendor-rendered `.modes` / `.sorter-action` markup that
   slips through (e.g. on search results or third-party catalog pages
   that don't go through our template overrides).
   =============================================================== */

.toolbar.toolbar-products {
    padding: 8px 0 !important;
    margin-bottom: 16px !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-height: 0 !important;
    overflow: visible !important;            /* let the dropdown menu paint outside the bar */
}

.toolbar-products .sorter {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide toolbar-amount text (clutter — count is shown by pagination) */
.toolbar-products .toolbar-amount {
    display: none !important;
}

/* Defensive: hide vendor view-mode toggle on any page where our
   override didn't catch (search results, third-party catalog
   listings). Our override returns empty so this is a no-op there;
   on other pages this guarantees the toggle never appears. */
.toolbar-products .modes,
.toolbar-products [data-role="mode-switcher"],
.toolbar-products .modes-mode {
    display: none !important;
}

/* Defensive: hide the vendor asc/desc arrow button. Our combined
   sorter encodes direction in each option, so the standalone arrow
   button is redundant. */
.toolbar-products .sorter-action,
.toolbar-products .action.sorter-action {
    display: none !important;
}

/* Compact the catalog section wrapper */
.page-products .column.main section.py-8 {
    padding-top: 0 !important;
    padding-bottom: 16px !important;
}

/* Remove excessive products-grid margins */
.products.wrapper.products-grid {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

/* Tighten product grid top padding */
.products-grid ul {
    padding-top: 0 !important;
}

/* ---------- Fusion Firearms sorter — premium pill dropdown ---------- */

.ff-sorter {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.ff-sorter__label {
    font-family: var(--ff-font-heading, 'Oswald', Impact, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6e6e73;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    cursor: pointer;
}

.ff-sorter__field {
    position: relative;
    display: inline-block;
}

.ff-sorter__select {
    /* Reset native chrome */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Apple-pill base */
    background: #f5f5f7;
    border: 1px solid transparent;
    color: #1d1d1f;
    border-radius: 980px;
    padding: 10px 38px 10px 18px;
    font-family: var(--ff-font-body, system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    min-width: 200px;

    /* Custom chevron — pulled out into ::after so we can rotate on focus */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.25l3.5 3.5 3.5-3.5' fill='none' stroke='%236e6e73' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;

    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ff-sorter__select:hover {
    background-color: #ebebef;
}

.ff-sorter__select:focus {
    outline: none;
    border-color: var(--ff-blue, #0071e3);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
    background-color: #ffffff;
}

.ff-sorter__select:focus-visible {
    outline: none;
    border-color: var(--ff-blue, #0071e3);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18);
}

@media (max-width: 540px) {
    .ff-sorter {
        gap: 8px;
        flex: 1 1 auto;
    }
    .ff-sorter__label {
        font-size: 0.75rem;
    }
    .ff-sorter__select {
        min-width: 0;
        flex: 1 1 auto;
        padding: 9px 34px 9px 14px;
        font-size: 0.875rem;
    }
}

/* Toolbar items count — emphasize the count numbers in brand-blue +
   heavier weight so customers can scan inventory size at a glance.
   Hyvä emits "Items <span class='toolbar-number'>1</span>-<span>12</span>
   of <span>68</span>" — base text stays muted body, just the numbers
   pop. */
.toolbar-products .toolbar-amount {
    color: #1d1d1f !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
}

.toolbar-products .toolbar-amount .toolbar-number {
    color: var(--ff-blue, #0071e3) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}

/* Pagination dark theme */
.pages .items {
    display: flex;
    gap: 4px;
}

.pages .item a,
.pages .item strong {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    font-family: var(--ff-font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all 0.2s var(--ff-ease);
}

.pages .item a {
    background: #ffffff;
    border: 1px solid #d2d2d7;
    color: #6e6e73;
}

.pages .item a:hover {
    border-color: #0071e3;
    color: #1d1d1f;
    background: rgba(0, 113, 227, 0.04);
    outline: none;
}
.pages .item a:focus-visible {
    border-color: #0071e3;
    color: #1d1d1f;
    background: rgba(0, 113, 227, 0.04);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

.pages .item.current strong {
    background: #0071e3;
    color: #fff;
    border: 1px solid #0071e3;
}

/* Main column — full width, no sidebar grid */
.page-products .column.main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

/* Ensure product UL stretches full width */
.products-grid .product-items.mx-auto,
.products-grid ul.mx-auto,
.products-grid ul {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Product grid — Apple iPad buy page style
   Desktop: 3 columns, Tablet: 2 columns, Mobile: 1 column (forced)
   Breakpoint raised to 767px so all phones show single card per row */
.products-grid .product-items,
.products-grid ul,
.products.list .product-items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px 24px !important;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2 columns on tablet */
@media (max-width: 1023px) {
    .products-grid .product-items,
    .products-grid ul,
    .products.list .product-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 28px 20px !important;
    }
}

/* 1 column on mobile — all phones (up to 767px to cover large phones) */
@media (max-width: 767px) {
    .products-grid .product-items,
    .products-grid ul,
    .products.list .product-items {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* Product grid items — li wrappers must stretch */
.products-grid .product-items > li,
.products-grid ul > li,
.products.list .product-items > li {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
}

/* Product card — Apple iPhone buy page: NO box, NO gray backer, just product on page */
.product-item,
.product-item.card,
.product-item.card-interactive {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    flex: 1;
    position: relative;
    box-shadow: none !important;
    padding: 0 !important;
}

.product-item:hover {
    box-shadow: none !important;
    transform: none;
}

/* Hide empty star ratings everywhere — Apple-clean declutter */
.product-item .rating-summary,
.product-info-main .rating-summary,
.product-reviews-summary:not(.reviewed) {
    display: none !important;
}

/* Product image — Apple style: NO background, product floats on page */
.product-item .product-item-photo,
.product-item .product-image-container {
    position: relative !important;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    width: 100%;
}

/* ============================================================
   PAGINATION — Apple-style prominent centered controls
   ============================================================ */

/* Bottom toolbar (second occurrence) — stack vertically, centered */
.toolbar-bottom .toolbar.toolbar-products,
.products.wrapper + .toolbar-products,
.toolbar-products:last-of-type {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 48px 16px !important;
    margin-top: 24px !important;
    border-top: 1px solid #e8e8ed;
    overflow: visible !important;
    grid-template-columns: none !important;
    width: 100% !important;
}

.toolbar-bottom .toolbar.toolbar-products > *,
.toolbar-products:last-of-type > * {
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    order: unset !important;
    flex: none !important;
    grid-column: unset !important;
}

/* Force pagination above amount text for Apple-like order */
.toolbar-products:last-of-type nav.pages,
.toolbar-products:last-of-type .pages {
    order: 1 !important;
}
.toolbar-products:last-of-type .toolbar-amount,
.toolbar-products:last-of-type #toolbar-amount {
    order: 2 !important;
}
.toolbar-products:last-of-type .limiter {
    order: 3 !important;
}
.toolbar-products:last-of-type .toolbar-sorter {
    display: none !important;
}
.toolbar-products:last-of-type .modes {
    display: none !important;
}

/* Items count display ("Items 1-12 of 68") */
.toolbar-amount,
.toolbar-products .toolbar-amount,
#toolbar-amount {
    display: block !important;
    text-align: center;
    font-size: 0.9375rem;
    color: #6e6e73;
    margin: 0;
    order: -1;
}

/* The pagination list — prominent centered row */
.pages,
nav.pages {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pages ol,
.pages .items,
.pages-items {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.pages .item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Page number buttons — Apple pill style */
.pages a,
.pages span.item,
.pages .page,
.pages-item-previous,
.pages-item-next,
.pages a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: 980px !important;
    border: 1px solid #d2d2d7 !important;
    background: #ffffff !important;
    color: #1d1d1f !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}

.pages a:hover,
.pages a.btn:hover {
    background: #f5f5f7 !important;
    border-color: #6e6e73 !important;
}

/* Keyboard focus on pagination buttons — keyboard users tabbing
   through page numbers need a clearer indicator than the subtle
   light-grey background change. Brand-blue outline ring matches
   the global a:focus-visible language at line 265 and the
   breadcrumb fix at line 3413. */
.pages a:focus-visible,
.pages a.btn:focus-visible {
    background: #f5f5f7 !important;
    border-color: var(--ff-blue, #0071e3) !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

/* Current/active page — filled blue */
.pages .current,
.pages strong.page,
.pages li.current a,
.pages li.current strong {
    background: #0071e3 !important;
    border-color: #0071e3 !important;
    color: #ffffff !important;
    cursor: default;
}

/* Prev/Next chevron-only buttons */
.pages-item-previous,
.pages-item-next,
a.action.previous,
a.action.next {
    min-width: 44px !important;
    padding: 0 !important;
}
.pages-item-previous svg,
.pages-item-next svg,
.action.previous svg,
.action.next svg {
    width: 14px;
    height: 14px;
}

/* Limiter ("Show 12 / 24 / 36") — Apple clean select */
.limiter,
.toolbar-products .limiter {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    font-size: 0.9375rem;
    color: #6e6e73;
}

.limiter select,
.limiter .limiter-options {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 980px !important;
    padding: 8px 32px 8px 16px !important;
    font-size: 0.9375rem !important;
    color: #1d1d1f !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3e%3cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.limiter select:hover,
.limiter .limiter-options:hover {
    border-color: #6e6e73 !important;
}

.limiter select:focus-visible,
.limiter .limiter-options:focus-visible,
.limiter select:focus,
.limiter .limiter-options:focus {
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
    outline: none !important;
}

/* ============================================================
   LIST VIEW MODE — horizontal row layout with larger image
   ============================================================ */
.products-list .product-item,
.mode-list .product-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 32px;
    padding: 32px 0 !important;
    border-bottom: 1px solid #e8e8ed;
    text-align: left !important;
}

.products-list .product-item:last-child,
.mode-list .product-item:last-child {
    border-bottom: none;
}

/* Image column in list view — fixed sensible width */
.products-list .product-item .product-item-photo,
.products-list .product-item .product-image-container,
.mode-list .product-item .product-item-photo,
.mode-list .product-item .product-image-container {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
}

/* Image inside list view */
.products-list .product-item .product-image-photo,
.mode-list .product-item .product-image-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Product info area in list view: left-aligned, fills remaining width */
.products-list .product-item .product-info,
.products-list .product-item .product-item-details,
.mode-list .product-item .product-info,
.mode-list .product-item .product-item-details {
    flex: 1;
    text-align: left !important;
    align-items: flex-start !important;
    padding: 0 !important;
}

.products-list .product-item .product-info *,
.products-list .product-item .product-item-details *,
.mode-list .product-item .product-info *,
.mode-list .product-item .product-item-details * {
    text-align: left !important;
}

/* Product name — left aligned, larger in list view */
.products-list .product-item .product-item-name a,
.products-list .product-item .product-item-link,
.mode-list .product-item .product-item-name a,
.mode-list .product-item .product-item-link {
    text-align: left !important;
    font-size: 1.625rem !important;
}

/* Price — left aligned */
.products-list .product-item .price-box,
.mode-list .product-item .price-box {
    text-align: left !important;
}

/* Add to Cart in list view — aligned left not centered */
.products-list .product-item .action.tocart,
.products-list .product-item .btn-primary,
.products-list .product-item button.action.primary,
.mode-list .product-item .action.tocart,
.mode-list .product-item .btn-primary,
.mode-list .product-item button.action.primary {
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
}

.products-list .product-item .product-item-actions,
.mode-list .product-item .product-item-actions {
    justify-content: flex-start !important;
}

/* Mobile list view: stack image on top, text below */
@media (max-width: 640px) {
    .products-list .product-item,
    .mode-list .product-item {
        flex-direction: column !important;
        align-items: stretch;
    }
    .products-list .product-item .product-item-photo,
    .products-list .product-item .product-image-container,
    .mode-list .product-item .product-item-photo,
    .mode-list .product-item .product-image-container {
        flex: none !important;
        width: 100% !important;
        max-width: 100%;
    }
}

/* No vignette needed for light theme */
.product-item .product-image-container::after {
    display: none;
}

.product-item .product-image-container {
    background: transparent !important;
}

/* Grid view product image — absolute positioning inside aspect-ratio container */
.products-grid .product-item .product-image-photo,
.catalog-category-view .products-grid .product-item .product-image-photo {
    position: absolute !important;
    inset: 4%;
    width: 92% !important;
    height: 92% !important;
    object-fit: contain;
    transition: transform 0.5s var(--ff-ease);
}

.products-grid .product-item:hover .product-image-photo {
    transform: scale(1.04);
}

/* Cart/mini-cart/other context images stay normal flow — no absolute positioning */
.checkout-cart-index .product-image-photo,
.minicart-items .product-image-photo,
.block-minicart .product-image-photo,
.cart .product-image-photo {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    margin: 0 !important;
}

/* ============================================================
   CART DRAWER — Intelligent Change inspired design
   Clean, premium, with 3-tier rewards bar at the top
   ============================================================ */

dialog.ff-cart-drawer {
    background: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
    max-width: 100vw;
}

@media (min-width: 640px) {
    dialog.ff-cart-drawer {
        width: 480px !important;
    }
}

/* Header */
.ff-cart-drawer__header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px;
    flex-shrink: 0;
}

.ff-cart-drawer__title {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: #1d1d1f;
    margin: 0;
    letter-spacing: -0.01em;
}

.ff-cart-drawer__title strong {
    font-weight: 700;
}

.ff-cart-drawer__title .items-total {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #6e6e73;
    margin-left: 8px;
}

/* Cart close button — UNIFIED with account/menu drawers (white circle + dark X) */
.ff-cart-drawer__close {
    background: #ffffff !important;
    border: 2px solid rgba(0, 0, 0, 0.08) !important;
    color: #1d1d1f !important;
    padding: 0 !important;
    cursor: pointer;
    width: 40px !important;
    height: 40px !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.25s ease;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ff-cart-drawer__close svg {
    width: 22px !important;
    height: 22px !important;
    color: #1d1d1f !important;
    stroke: #1d1d1f !important;
    stroke-width: 2.5 !important;
}

.ff-cart-drawer__close:hover {
    background: #1d1d1f !important;
    border-color: #1d1d1f !important;
    transform: rotate(90deg) scale(1.08);
}

.ff-cart-drawer__close:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ------------------ REWARDS TIER BAR ------------------ */
.ff-cart-rewards {
    padding: 0 24px 20px;
    border-bottom: 1px solid #e8e8ed;
    flex-shrink: 0;
}

.ff-cart-rewards__tiers {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    position: relative;
}

/* Connecting line behind the tier icons */
.ff-cart-rewards__tiers::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: #e8e8ed;
    z-index: 0;
}

.ff-cart-rewards__tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
    flex: 1;
}

.ff-cart-rewards__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8e8ed;
    color: #6e6e73;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.ff-cart-rewards__tier.is-unlocked .ff-cart-rewards__icon {
    /* Unlock = achievement. Match the brand-blue gradient that fills the
       progress bar above so the icon visually connects to the progress.
       Soft 4px halo signals "achieved" without being noisy. Subtle 1.06×
       scale draws the eye to the unlocked badge. */
    background: linear-gradient(135deg, #0071e3, #2997ff);
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16),
                0 4px 10px rgba(0, 113, 227, 0.20);
    transform: scale(1.06);
}

.ff-cart-rewards__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6e6e73;
    text-align: center;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

.ff-cart-rewards__tier.is-unlocked .ff-cart-rewards__label {
    color: var(--ff-blue, #0071e3);
    font-weight: 700;
}

/* Progress bar */
.ff-cart-rewards__bar {
    height: 6px;
    background: #e8e8ed;
    border-radius: 980px;
    overflow: hidden;
    margin-bottom: 10px;
}

.ff-cart-rewards__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0071e3, #2997ff);
    border-radius: 980px;
    transition: width 0.4s ease;
}

.ff-cart-rewards__message {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1d1d1f;
    text-align: center;
    letter-spacing: 0;
}

/* ------------------ LINE ITEMS ------------------ */
.ff-cart-items {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ff-cart-item {
    display: flex !important;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid #e8e8ed;
    list-style: none;
}

.ff-cart-item__image {
    /* Brand standard: product photos always sit on PURE WHITE (not
       grey). Was background:#f5f5f7 — visually fine on its own but
       breaks parity with the homepage tiles, PLP cards (transparent),
       PDP gallery (white), and Smart-Picks/Recently-Viewed carousels
       which all use white. Switched to white + a 1px hairline border
       for the visual frame so the thumbnail still reads as a card
       rather than floating loose on the white drawer surface. */
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    padding: 8px;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.ff-cart-item__image img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    width: auto !important;
    height: auto !important;
}

.ff-cart-item__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ff-cart-item__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.ff-cart-item__name {
    font-family: var(--ff-font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.005em;
    flex: 1;
    /* Long product names ("XP Pro and XP COMP 4" Recoil Spring Kit –
       Stainless Steel (7LB, 9LB, 10LB, 13LB)") would wrap to 4-5
       lines inside the narrow cart-drawer column without a clamp.
       Two-line clamp keeps each cart line compact and visually
       even — matches the line-clamp pattern used on PLP cards
       (LAUNCH-TASKS.md line 156). The full title remains accessible
       via the anchor's title attribute set by ff-card-title-tooltip
       .js. word-break catches long SKU-like strings without spaces. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.ff-cart-item__remove {
    background: rgba(225, 29, 72, 0.08) !important;
    border: 1.5px solid rgba(225, 29, 72, 0.3) !important;
    color: #e11d48 !important;
    padding: 6px !important;
    width: 32px;
    height: 32px;
    border-radius: 9999px !important;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ff-cart-item__remove svg {
    width: 16px !important;
    height: 16px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
}

.ff-cart-item__remove:hover {
    background: #e11d48 !important;
    border-color: #e11d48 !important;
    color: #ffffff !important;
    transform: scale(1.06);
    outline: none !important;
}

/* Keyboard focus on cart-drawer line-item remove (trash) button —
   destructive action so it gets a red outline ring matching the
   filled red bg state. 2px white outline ring with 2px offset for
   contrast against the red surface. */
.ff-cart-item__remove:focus-visible {
    background: #e11d48 !important;
    border-color: #e11d48 !important;
    color: #ffffff !important;
    transform: scale(1.06);
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

.ff-cart-item__options {
    margin: 0;
    display: table;
    font-size: 0.75rem;
    color: #6e6e73;
}

.ff-cart-item__options > div {
    display: table-row;
}

.ff-cart-item__options dt,
.ff-cart-item__options dd {
    display: table-cell;
    padding: 2px 8px 2px 0;
}

.ff-cart-item__options dt {
    font-weight: 500;
    color: #6e6e73;
}

.ff-cart-item__options dd {
    margin: 0;
    color: #1d1d1f;
}

.ff-cart-item__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* Qty controls — high-contrast branded buttons (blue/red) */
.ff-cart-item__qty {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    padding: 0;
}

.ff-cart-item__qty-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #0090ff 0%, #0071e3 50%, #0060c8 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.35);
    flex-shrink: 0;
}

.ff-cart-item__qty-btn svg {
    width: 14px !important;
    height: 14px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 3 !important;
}

.ff-cart-item__qty-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #00a3ff 0%, #0077ed 50%, #0071e3 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.5);
    outline: none !important;
}

/* Keyboard focus on cart drawer line-item qty +/- buttons —
   same brand-blue gradient + lift as hover plus a 2px white
   outline ring (visible on the brand-blue filled button) with
   2px offset for clear keyboard nav. */
.ff-cart-item__qty-btn:focus-visible:not(:disabled) {
    background: linear-gradient(135deg, #00a3ff 0%, #0077ed 50%, #0071e3 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.5);
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* First btn (minus) uses subtle red-tinted style */
.ff-cart-item__qty-btn:first-child {
    background: rgba(225, 29, 72, 0.1) !important;
    border: 2px solid rgba(225, 29, 72, 0.35) !important;
    color: #e11d48 !important;
    box-shadow: none !important;
}

.ff-cart-item__qty-btn:first-child svg {
    color: #e11d48 !important;
    stroke: #e11d48 !important;
}

.ff-cart-item__qty-btn:first-child:hover:not(:disabled) {
    background: #e11d48 !important;
    border-color: #e11d48 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.4) !important;
}

.ff-cart-item__qty-btn:first-child:hover:not(:disabled) svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.ff-cart-item__qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}

.ff-cart-item__qty-value {
    min-width: 36px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #1d1d1f;
    padding: 0 4px;
}

.ff-cart-item__price {
    font-family: var(--ff-font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1d1d1f;
}

.ff-cart-item__price .price {
    font-weight: 700;
}

.ff-cart-item__error {
    font-size: 0.75rem;
    color: #FF3B30;
    padding: 6px 0;
}

/* ------------------ EMPTY STATE ------------------ */
.ff-cart-drawer__empty {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    gap: 12px;
}

.ff-cart-drawer__empty-icon {
    color: #d2d2d7;
    margin-bottom: 8px;
}

.ff-cart-drawer__empty-title {
    font-family: var(--ff-font-heading);
    font-size: 1.25rem;
    color: #1d1d1f;
    margin: 0;
    letter-spacing: -0.01em;
}

.ff-cart-drawer__empty-subtitle {
    font-size: 0.9375rem;
    color: #6e6e73;
    margin: 0 0 4px;
}

/* Popular-category shortcut chips inside the empty cart drawer.
   2×2 grid of pills. Light grey card by default, brand-blue border + lift
   on hover. Closes-and-navigates via natural anchor click — drawer auto-
   closes when the page navigates away. */
.ff-cart-drawer__empty-cats {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 320px;
}

.ff-cart-drawer__empty-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    background: #f5f5f7;
    border: 1px solid #e8e8ed;
    border-radius: 12px;
    color: #1d1d1f;
    font-family: var(--ff-font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.ff-cart-drawer__empty-cat:hover {
    background: #ffffff;
    border-color: var(--ff-blue, #0071e3);
    color: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.12);
    outline: none;
}

/* Keyboard focus on empty-cart drawer category chips (Handguns /
   Sights / Parts / Holsters) — same lift + brand-blue treatment
   as hover plus a 2px brand-blue outline ring with 2px offset.
   Border-color already shifts to brand-blue on focus, the outline
   sits outside that for clear keyboard feedback. */
.ff-cart-drawer__empty-cat:focus-visible {
    background: #ffffff;
    border-color: var(--ff-blue, #0071e3);
    color: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.12);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

/* ------------------ FOOTER (Subtotal + CTAs) ------------------ */
.ff-cart-drawer__footer {
    padding: 20px 24px 24px;
    border-top: 1px solid #e8e8ed;
    background: #ffffff;
    flex-shrink: 0;
}

.ff-cart-drawer__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ff-cart-drawer__subtotal-label {
    font-size: 1rem;
    font-weight: 500;
    color: #1d1d1f;
}

.ff-cart-drawer__subtotal-amount {
    font-family: var(--ff-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.ff-cart-drawer__subtotal-amount .price {
    font-weight: 700;
}

.ff-cart-drawer__note {
    font-size: 0.75rem;
    color: #6e6e73;
    text-align: center;
    margin: 0 0 16px 0;
}

/* Primary CTA: navy → brand-blue on hover. Aligns with site-wide design
   standard (navy #0a1929 base, brand-blue hover with translateY lift +
   soft shadow). Was previously #1d1d1f (near-black) at 2px radius —
   off the brand language used everywhere else. */
.ff-cart-drawer__checkout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    min-height: 52px !important;
    padding: 14px 24px !important;
    background: #0a1929 !important;
    color: #ffffff !important;
    font-family: var(--ff-font-heading) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.18) !important;
    margin: 0 0 10px 0 !important;
}

.ff-cart-drawer__checkout:hover {
    background: #0071e3 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 113, 227, 0.30) !important;
    outline: none;
}

/* Keyboard focus on cart drawer Checkout button — the primary
   conversion CTA inside the drawer. Mouse hover already lifts +
   brand-blues; keyboard users need the same visual signal plus a
   2px white outline ring (visible against brand-blue filled
   button) with 3px offset. */
.ff-cart-drawer__checkout:focus-visible {
    background: #0071e3 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 113, 227, 0.30) !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 3px !important;
}

.ff-cart-drawer__checkout:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.24) !important;
    transition-duration: 0.08s !important;
}

/* Secondary: outlined Continue Shopping. Brand-blue ghost pattern (matches
   the wishlist + coupon-form button language) instead of the previous
   solid-black hover treatment. */
.ff-cart-drawer__continue {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    min-height: 48px !important;
    padding: 12px 24px !important;
    background: #ffffff !important;
    color: #0a1929 !important;
    font-family: var(--ff-font-heading) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                border-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: none !important;
}

.ff-cart-drawer__continue:hover {
    background: rgba(0, 113, 227, 0.08) !important;
    color: var(--ff-blue, #0071e3) !important;
    border-color: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.10) !important;
    outline: none;
}

/* Keyboard focus on cart drawer Continue Shopping button — same
   ghost pattern as hover (light-blue tint + brand-blue text/border)
   plus a 2px brand-blue outline ring with 2px offset. The outline
   sits inside the focus, the existing border edge provides natural
   container framing. */
.ff-cart-drawer__continue:focus-visible {
    background: rgba(0, 113, 227, 0.08) !important;
    color: var(--ff-blue, #0071e3) !important;
    border-color: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.10) !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

.ff-cart-drawer__continue:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 113, 227, 0.16) !important;
    transition-duration: 0.08s !important;
}

@media (prefers-reduced-motion: reduce) {
    .ff-cart-drawer__checkout:hover,
    .ff-cart-drawer__checkout:active,
    .ff-cart-drawer__continue:hover,
    .ff-cart-drawer__continue:active {
        transform: none;
    }
}

/* Scrollbar styling for the items list (Chrome/Safari) */
.ff-cart-items::-webkit-scrollbar {
    width: 6px;
}
.ff-cart-items::-webkit-scrollbar-track {
    background: transparent;
}
.ff-cart-items::-webkit-scrollbar-thumb {
    background: #d2d2d7;
    border-radius: 980px;
}
.ff-cart-items::-webkit-scrollbar-thumb:hover {
    background: #86868b;
}

/* ============================================================
   MINI-CART DRAWER — Apple-style right-side drawer with visible CTAs
   ============================================================ */

/* The minicart dialog itself — clean white panel sliding in from right */
dialog[class*="md:w-"]:has(p:is(:has(strong)), strong) {
    background: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
}

/* Scope a general fix to any dialog on the site that has the cart contents */
dialog {
    padding: 0;
    background: #ffffff;
}

/* Cart (checkout) link buttons inside the minicart — MUST be visible
   Hyvä's .btn.btn-primary uses CSS vars that aren't set properly in the
   minicart context, leaving buttons transparent. Force Apple blue pill. */
dialog a.btn.btn-primary,
dialog a.btn.btn-primary:visited,
.block-minicart a.btn.btn-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 14px 24px !important;
    background: #0071e3 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 980px !important;
    font-family: var(--ff-font-body) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
}

dialog a.btn.btn-primary:hover,
.block-minicart a.btn.btn-primary:hover {
    background: #0077ed !important;
    color: #ffffff !important;
}

/* Keyboard focus on minicart/dialog primary "Checkout" button — same
   bg shift plus high-contrast double-ring (2px white inner + 2px
   brand-blue outer) since the button surface is brand-blue. */
dialog a.btn.btn-primary:focus-visible,
.block-minicart a.btn.btn-primary:focus-visible {
    background: #0077ed !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3) !important;
    outline: none !important;
}

/* Secondary "View and Edit Cart" button — outlined pill */
dialog a.btn.btn-secondary,
dialog a.btn.btn-secondary:visited,
.block-minicart a.btn.btn-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 14px 24px !important;
    background: transparent !important;
    color: #0071e3 !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 980px !important;
    font-family: var(--ff-font-body) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
    margin-top: 10px !important;
}

dialog a.btn.btn-secondary:hover,
.block-minicart a.btn.btn-secondary:hover {
    background: #f5f5f7 !important;
    border-color: #6e6e73 !important;
    color: #0071e3 !important;
}

/* Keyboard focus on minicart/dialog "View and Edit Cart" ghost button
   — same hover shift plus 2px brand-blue outline at 2px offset.
   Single-ring works since the button surface is light grey. */
dialog a.btn.btn-secondary:focus-visible,
.block-minicart a.btn.btn-secondary:focus-visible {
    background: #f5f5f7 !important;
    border-color: var(--ff-blue, #0071e3) !important;
    color: #0071e3 !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

/* Minicart header "My Cart" */
dialog p.text-2xl strong {
    font-family: var(--ff-font-heading) !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    color: #1d1d1f !important;
}

/* Minicart item list — clean rows */
dialog ul.grow {
    padding: 8px 0 !important;
}

/* Subtotal row in minicart — larger, prominent */
dialog .subtotal,
dialog [class*="subtotal"] {
    padding: 16px 0 !important;
    border-top: 1px solid #e8e8ed;
    font-size: 1rem;
    color: #1d1d1f;
    font-weight: 500;
}

dialog .subtotal .price,
dialog [class*="subtotal"] .price {
    font-family: var(--ff-font-heading) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
}

/* Bottom area of minicart with buttons — padding and spacing */
dialog > div:last-of-type {
    padding: 20px 24px !important;
    background: #ffffff;
    border-top: 1px solid #e8e8ed;
}

/* Legacy rule REMOVED — was making cart close transparent with no border.
 * All close buttons now styled consistently by the unified block further down. */

/* Product info area — Apple iPhone style: CENTERED text below image */
.product-item .product-info,
.product-item .product-item-details,
.product-item .product-item-details *,
.product-item .product-info * {
    text-align: center !important;
}
.product-item .product-info,
.product-item .product-item-details {
    padding: 24px 12px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center !important;
}

.product-item .product-item-name {
    margin-bottom: 8px;
    width: 100%;
}

.product-item .product-item-name a,
.product-item-link {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.015em;
    color: #1d1d1f !important;
    text-decoration: none !important;
    transition: color 0.3s var(--ff-ease);
    line-height: 1.2;
    /* Clamp to 2 lines + ellipsis so wildly different name lengths
       (e.g. short "Liberty Pitboss" vs long "XP Pro and XP COMP 4'
       Recoil Spring Kit – Stainless Steel (7LB, 9LB, 10LB, 13LB)")
       don't break grid alignment. min-height: 2.4em (≈ 2 × line-height)
       reserves space so 1-line titles still leave the price + ATC
       button on the same y-coordinate as longer-titled cards. The
       full title is still discoverable via the title= tooltip + the
       <a> element's accessible name. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
    text-align: center !important;
    word-break: break-word;
}

.product-item .product-item-name a:hover,
.product-item-link:hover {
    color: #0071e3 !important;
    text-decoration: none !important;
    outline: none !important;
}

/* Keyboard focus on PLP card title links — these are the primary
   nav anchors on every product listing page. Hover-only feedback
   is a charcoal → brand-blue color shift; the additional outline
   ring ensures keyboard users can spot the focused card title
   without scanning for the subtle hue change inside a 4-column
   product grid. 2px brand-blue outline + 3px offset keeps the
   indicator clear of the line-clamped 2-line title block. */
.product-item .product-item-name a:focus-visible,
.product-item-link:focus-visible {
    color: #0071e3 !important;
    text-decoration: none !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
}

/* Product price — Apple "From $X" style, bold and centered */
.product-item .price-box,
.price-box {
    margin: 8px 0 18px;
}

.product-item .price,
.price-box .price {
    font-family: var(--ff-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: 0;
}

/* Make "Out of stock" subtle and not a strong red dot */
.product-item .stock.unavailable,
.product-item .stock.available {
    font-size: 0.8125rem;
    color: #6e6e73 !important;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* "Starting at" eyebrow on product cards (category grid + homepage
   carousels) — small grey uppercase label above the price for products
   whose options can raise the base price (Treven 2026-05-28). Mirrors the
   PDP "Starting at" treatment. */
.ff-card-starting-at,
.ff-parts-card__starting-at {
    display: block;
    font-family: var(--ff-font-body, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6e6e73;
    margin: 0 0 2px;
    line-height: 1.2;
}
.ff-card-starting-at { text-align: center; }
.ff-parts-card__starting-at { text-align: left; }

/* Out-of-stock / pre-order product-card titles must stay the SAME size as
   in-stock ones (Treven 2026-05-28: OOS titles rendered larger on category
   pages). The base card codes both identically, so this defends against a
   module (e.g. Amasty Pre-Order) restyling unavailable cards with a bigger
   title. */
.catalog-category-view .product-item .product-item-link,
.catalog-category-view .product-item .product-item-name a,
.catalog-category-view .product-item:has(.stock.unavailable) .product-item-link {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
}

.price-box .old-price .price {
    font-size: 1.125rem;
    color: var(--ff-text-muted);
    text-decoration: line-through;
    font-weight: 400;
}

.price-box .special-price .price {
    color: var(--ff-red);
}

/* ============================================================
   SALE CATEGORY PAGE — every product price renders in brand red
   ============================================================
   Treven: "On the sale page some items have red sale prices and
   others do not. They all need to have the red sale price."

   The default rule above (`.price-box .special-price .price`)
   only fires when Magento renders the special-price/old-price
   pair — which happens only on simple products that have a
   `special_price` attribute set. Configurable products (where
   the parent doesn't have special_price but children do) and
   products discounted via cart price rules render their final
   price as a plain `.price` without the special-price wrapper.

   On the Sale category page every product IS a sale item by
   definition, so we paint every final price red regardless of
   how Magento chose to wrap it. Old/regular price (struck-through
   compare-at) stays muted grey so the red sale price stands out
   against it.

   Scoped to body classes that contain "category-sale" to catch
   both `/sale` (url_key=sale → body.category-sale) and any
   subcategory under sale (e.g., `/sale/handguns` →
   body.category-sale-handguns), without leaking onto non-sale
   product cards elsewhere. */

body[class*="category-sale"] .product-item .price-box,
body[class*="category-sale"] .product-item .price-box .price,
body[class*="category-sale"] .product-item .price-box .price-final_price .price,
body[class*="category-sale"] .product-item .price-box .normal-price .price,
body[class*="category-sale"] .product-item .price-box .price-wrapper .price,
body[class*="category-sale"] .product-item .price-box [data-price-type="finalPrice"] .price,
body[class*="category-sale"] .product-item .price-box .minimal-price .price,
body[class*="category-sale"] .product-item .price-box .price-from .price,
body[class*="category-sale"] .product-item .price-box .price-to .price {
    color: var(--ff-red, #c8102e) !important;
    font-weight: 700 !important;
    /* Treven: "Why are some prices larger than others?" — Magento
       renders different price variants (special-price vs plain
       finalPrice vs minimal-price etc.) with different default
       sizes. Force every variant on the sale page to the same
       1.125rem (18px) Oswald-display size for visual consistency. */
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    letter-spacing: 0.01em !important;
    font-feature-settings: "tnum" !important;
}

/* Old (compare-at) price keeps the muted strike-through so the
   red sale price reads as the headline. */
body[class*="category-sale"] .product-item .price-box .old-price .price,
body[class*="category-sale"] .product-item .price-box .price-final_price.old-price .price {
    color: var(--ff-text-muted, #6e6e73) !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* "From" / "To" / "As low as" labels in red too so the qualifier
   stays visually consistent with the price it precedes. */
body[class*="category-sale"] .product-item .price-box .price-label,
body[class*="category-sale"] .product-item .price-box .price-from,
body[class*="category-sale"] .product-item .price-box .price-to {
    color: var(--ff-red, #c8102e) !important;
}

/* Product labels / badges */
.product-item .product-label,
.product-label {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--ff-red);
    color: #fff;
    font-family: var(--ff-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 14px;
    border-radius: 50px;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Add to Cart — Apple "Learn more" pill: centered, clean blue */
.product-item .action.tocart,
.product-item .btn-primary,
.product-item button.action.primary {
    width: auto !important;
    min-width: 130px;
    padding: 10px 28px !important;
    font-family: var(--ff-font-body) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 980px !important;
    background: #0071e3 !important;
    color: #fff !important;
    border: none !important;
    transition: background 0.2s ease !important;
    cursor: pointer;
    margin-top: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-block;
    align-self: center !important;
}
.product-item .action.tocart:hover,
.product-item .btn-primary:hover,
.product-item button.action.primary:hover {
    background: #0077ed !important;
    box-shadow: none !important;
    transform: none;
}

/* Product actions (wishlist, compare) — centered, subtle */
.product-item .product-item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center !important;
    margin-top: 12px;
}

.product-item .action.towishlist,
.product-item .action.tocompare,
.product-item .btn.p-2.rounded-full {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: #6e6e73 !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    padding: 0 !important;
}

.product-item .action.towishlist:hover,
.product-item .action.tocompare:hover,
.product-item .btn.p-2.rounded-full:hover {
    background: rgba(0, 113, 227, 0.10) !important;
    color: var(--ff-blue, #0071e3) !important;
    transform: scale(1.08);
    outline: none;
}
.product-item .action.towishlist:focus-visible,
.product-item .action.tocompare:focus-visible,
.product-item .btn.p-2.rounded-full:focus-visible {
    background: rgba(0, 113, 227, 0.10) !important;
    color: var(--ff-blue, #0071e3) !important;
    transform: scale(1.08);
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

.product-item .action.towishlist:active,
.product-item .action.tocompare:active,
.product-item .btn.p-2.rounded-full:active {
    transform: scale(0.96);
    transition-duration: 0.08s !important;
}

/* Heart fills on hover/focus to preview the "added to wishlist" state.
   Scoped to data-addto="wishlist" so the compare button (different icon,
   shares the same .btn.p-2.rounded-full class) keeps its outline glyph. */
.product-item button[data-addto="wishlist"]:hover svg,
.product-item button[data-addto="wishlist"]:focus-visible svg {
    fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .product-item .action.towishlist:hover,
    .product-item .action.tocompare:hover,
    .product-item .btn.p-2.rounded-full:hover,
    .product-item .action.towishlist:active,
    .product-item .action.tocompare:active,
    .product-item .btn.p-2.rounded-full:active {
        transform: none;
    }
}

/* Rating stars */
.rating-summary {
    margin-bottom: 8px;
}

.rating-summary .rating-result {
    color: var(--ff-yellow);
}

.rating-summary .rating-result > span::before {
    color: var(--ff-yellow);
}

/* Swatch options on PLP */
.swatch-attribute .swatch-option {
    border: 2px solid var(--ff-border);
    border-radius: 4px;
    transition: border-color 0.2s var(--ff-ease);
}

.swatch-attribute .swatch-option:hover,
.swatch-attribute .swatch-option.selected {
    border-color: var(--ff-blue);
    box-shadow: 0 0 0 2px rgba(0, 163, 255, 0.2);
}

/* Product list view */
.products.list .product-item {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
}

.products.list .product-item .product-image-container {
    aspect-ratio: auto;
    height: 100%;
}


/* ============================================================
   SECTION 17: PRODUCT DETAIL PAGE (PDP)
   ============================================================ */

/* Main product container */
.catalog-product-view .column.main {
    background: var(--ff-bg-primary);
    max-width: var(--ff-container-max, 1280px);
    margin: 0 auto;
    padding: 0 20px;
}

/* Product info wrapper — must be full width, not floated */
.catalog-product-view .product-info-main {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* PDP product info — Apple iPhone detail page: no card, clean flat layout */
.catalog-product-view .product-info-main .card,
.catalog-product-view .product.info.main .card,
.catalog-product-view .column.main .card,
.catalog-product-view #product-review-container .card,
.catalog-product-view .product-info-main > div.grid section .card,
.catalog-product-view .review-add,
.catalog-product-view .block.review-add {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Review section wrapper — remove card styling */
.catalog-product-view .block.review-add,
.catalog-product-view #product-review-container {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #d2d2d7;
}

.catalog-product-view .block.review-add .block-title,
.catalog-product-view .block.review-add h2 {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    text-transform: none !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 16px !important;
}

/* Info column wrapper — generous vertical spacing */
.catalog-product-view .product-info-main > section:first-child > div:last-child,
.catalog-product-view .product.info.main > section:first-child > div:last-child,
.catalog-product-view .product-info {
    padding: 12px 0 !important;
}

/* Sticky IMAGE column on desktop — image stays visible while scrolling long options list
   Apple iPhone PDP pattern: gallery stays fixed on left, info scrolls on right */
@media (min-width: 1024px) {
    .catalog-product-view .product-info-main > section:first-child > section:first-child,
    .catalog-product-view .product-info-main > section:first-child > *:first-child:not(script),
    .catalog-product-view .product.info.main > section:first-child > section:first-child,
    .catalog-product-view .product.info.main > section:first-child > *:first-child:not(script),
    .catalog-product-view .product.media {
        position: sticky !important;
        top: 90px !important;
        align-self: start !important;
    }
}

/* Info sections — clean dividers between info blocks (no card borders) */
.catalog-product-view .product-info > * + *,
.catalog-product-view .product-info-main .product-info > * + * {
    margin-top: 20px;
}

/* Price and availability spacing */
.catalog-product-view .product-info-main .price-box,
.catalog-product-view .product.info.main .price-box {
    margin: 24px 0 !important;
    padding: 20px 0 0 !important;
    border-top: 1px solid #e8e8ed;
}

/* "Starting at" eyebrow injected via ff-options-ui.js above the
   price block on products whose customizable options add to the
   base price. Reads as a small grey label so customers see
   "Starting at $19.95" instead of bare $19.95 then surprise at
   $64.95 after picking an option (Treven 2026-05-22).

   When the eyebrow is present we want the price-box's own top
   border to disappear (the eyebrow is the new section opener) and
   the spacing to tighten between eyebrow and price. */
.catalog-product-view .ff-pdp-starting-at {
    display: block;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6e6e73;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid #e8e8ed;
}
.catalog-product-view .ff-pdp-starting-at + .price-box {
    margin-top: 4px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* SKU row — Apple small meta text */
.product-info-main .product.attribute.sku,
.catalog-product-view .product.attribute.sku {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid #e8e8ed;
    font-size: 0.8125rem;
}

.product-info-main .product.attribute.sku .type,
.catalog-product-view .product.attribute.sku .type {
    color: #6e6e73;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.product-info-main .product.attribute.sku .value,
.catalog-product-view .product.attribute.sku .value {
    color: #1d1d1f;
    font-weight: 400;
}

/* Product section grid — Apple iPhone PDP style: larger image column (58/42 split) */
.catalog-product-view .product-info-main > section:first-child,
.catalog-product-view .product.info.main > section:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
    gap: 56px !important;
    align-items: start;
    margin-bottom: 48px;
}

/* Stack to single column below lg breakpoint (< 1024px) */
@media (max-width: 1023px) {
    .catalog-product-view .product-info-main > section:first-child,
    .catalog-product-view .product.info.main > section:first-child {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 32px !important;
    }
}

@media (max-width: 767px) {
    .catalog-product-view .product-info-main > section:first-child,
    .catalog-product-view .product.info.main > section:first-child {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* Description + More Info — FORCE single column (2-col looks horrible with long text) */
.catalog-product-view .product-info-main > div.grid.lg\:grid-cols-2,
.catalog-product-view .product.info.main > div.grid.lg\:grid-cols-2,
.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 {
    grid-template-columns: 1fr !important;
    max-width: 100%;
    gap: 40px !important;
    margin-top: 48px;
}

/* Each detail section (Description, More Information) — clean card styling */
.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section {
    background: transparent;
    padding: 32px 0 0;
    border-top: 1px solid #d2d2d7;
    max-width: 100%;
}

.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Detail section titles — Apple accordion-style headings */
.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section h2,
.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section h3 {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    text-transform: none !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    border: none !important;
}

/* Description body text — readable */
.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section p,
.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section .product.attribute.description {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #424245;
    max-width: 780px;
}

/* More Information table — Apple spec style */
.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section table.additional-attributes,
.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section table {
    width: 100%;
    max-width: 780px;
    border-collapse: collapse;
}

.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section table tr {
    border-bottom: 1px solid #e8e8ed;
}

.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section table th,
.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section table td {
    padding: 14px 0 !important;
    font-size: 0.9375rem;
    color: #1d1d1f;
    border: none !important;
    vertical-align: top;
}

.catalog-product-view div.grid.lg\:grid-cols-2.gap-8 > section table th {
    font-weight: 500;
    color: #6e6e73;
    width: 40%;
    text-align: left;
    padding-right: 24px !important;
}

/* Product title — Apple iPad PDP: large, bold, tight spacing */
.product-info-main .page-title .base,
.catalog-product-view .page-title-wrapper h1 {
    font-family: var(--ff-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.025em;
    color: #1d1d1f;
    line-height: 1.08;
    margin-bottom: 16px;
}

/* Product SKU */
.product-info-main .product.attribute.sku .value {
    color: #6e6e73;
    font-size: 0.875rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Product price (PDP) — Apple style, substantial but not shouting */
.product-info-main .price-box .price {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.product-info-main .price-box .old-price .price {
    font-size: 1.25rem;
    color: var(--ff-text-muted);
    text-decoration: line-through;
    font-weight: 400;
}

.product-info-main .price-box .special-price .price {
    color: var(--ff-red);
}

/* Product short description */
.product-info-main .product.attribute.overview {
    color: var(--ff-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Availability — Apple-subtle */
.product-info-main .stock.available,
.product-info-main .stock.available span {
    color: #34c759 !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.9375rem !important;
}

.product-info-main .stock.unavailable,
.product-info-main .stock.unavailable span {
    color: #6e6e73 !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.9375rem !important;
}

/* Quantity input */
.product-info-main .field.qty {
    margin-bottom: 20px;
}

/* Qty input — pill style (matches both .input-text.qty and Hyva .form-input) */
.product-info-main .input-text.qty,
.product-info-main input.form-input[id^="qty"],
.product-info-main input[name="qty"] {
    background: #f5f5f7 !important;
    border: none !important;
    border-radius: 980px !important;
    color: #1d1d1f !important;
    text-align: center !important;
    width: 72px !important;
    padding: 10px 12px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    outline: none !important;
    box-shadow: none !important;
}
.product-info-main input.form-input[id^="qty"]:focus,
.product-info-main input[name="qty"]:focus {
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
}

/* PDP Add to Cart wrapper — restructure Hyva's price/qty/button row into Apple vertical stack */
.catalog-product-view .product-info-main .card.mb-6,
.catalog-product-view .product.info.main .card.mb-6 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
}

/* The flex row containing price + qty/button group — stack on all sizes for clean Apple layout */
.catalog-product-view .product-info-main .card.mb-6 > .flex.flex-col.sm\:flex-row,
.catalog-product-view .product.info.main .card.mb-6 > .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    padding-top: 20px;
    border-top: 1px solid #e8e8ed;
}

/* The qty + button group — full width, button dominates */
.catalog-product-view .product-info-main .card.mb-6 .flex.gap-2.ml-auto,
.catalog-product-view .product-info-main .card.mb-6 .flex.gap-2.mt-4,
.catalog-product-view .product.info.main .card.mb-6 .flex.gap-2.ml-auto,
.catalog-product-view .product.info.main .card.mb-6 .flex.gap-2.mt-4 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    align-items: center;
    gap: 12px !important;
}

/* Add to Cart button — full width Apple pill */
.catalog-product-view .product-info-main .card.mb-6 button.btn.btn-primary,
.catalog-product-view .product-info-main .card.mb-6 button[type="submit"].btn-primary,
.catalog-product-view .product.info.main .card.mb-6 button.btn.btn-primary,
.catalog-product-view .product.info.main button[type="submit"].btn.btn-primary {
    flex: 1 !important;
    width: 100% !important;
    padding: 14px 32px !important;
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    border-radius: 980px !important;
    background: #0071e3 !important;
    color: #fff !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease !important;
}

.catalog-product-view .product-info-main .card.mb-6 button.btn.btn-primary:hover,
.catalog-product-view .product.info.main .card.mb-6 button.btn.btn-primary:hover {
    background: #0077ed !important;
}

/* Keyboard focus on the Hyvä-default-wrapped PDP ATC button (legacy
   .card.mb-6 wrapper that fires when .ff-pdp-info layout isn't applied
   — fallback to the main PDP ATC fix at line 21300+). Same hover bg
   shift plus high-contrast double-ring (2px white inner + 2px brand-
   blue outer) since the focus surface is brand-blue. */
.catalog-product-view .product-info-main .card.mb-6 button.btn.btn-primary:focus-visible,
.catalog-product-view .product.info.main .card.mb-6 button.btn.btn-primary:focus-visible {
    background: #0077ed !important;
    box-shadow: 0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3) !important;
    outline: none !important;
}

/* Qty input wrapper — fixed smaller width */
.catalog-product-view .product-info-main .card.mb-6 .field.qty,
.catalog-product-view .product.info.main .card.mb-6 .field.qty {
    flex: 0 0 auto;
    max-width: 96px;
}

/* Price stays prominent */
.catalog-product-view .product-info-main .card.mb-6 .price-wrapper,
.catalog-product-view .product-info-main .card.mb-6 [data-price-type],
.catalog-product-view .product.info.main .card.mb-6 .price-wrapper {
    align-self: flex-start;
}

/* Add to cart box — Apple "Add to Bag": full-width prominent pill below options */
.product-info-main .box-tocart,
.catalog-product-view .box-tocart {
    margin-bottom: 24px;
    margin-top: 24px;
    width: 100%;
}

.product-info-main .box-tocart .action.tocart,
.product-info-main .box-tocart button.action.tocart,
.catalog-product-view .box-tocart .action.tocart,
.catalog-product-view .box-tocart button.action.tocart {
    width: 100% !important;
    max-width: none !important;
    padding: 16px 40px !important;
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    border-radius: 980px !important;
    background: #0071e3 !important;
    color: #fff !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    transition: background 0.2s ease !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.product-info-main .box-tocart .action.tocart:hover,
.product-info-main .box-tocart button.action.tocart:hover,
.catalog-product-view .box-tocart .action.tocart:hover,
.catalog-product-view .box-tocart button.action.tocart:hover {
    background: #0077ed !important;
}

/* Keyboard focus on the .box-tocart-wrapped PDP ATC variant — yet
   another selector path the PDP main button can take depending on
   Hyvä's wrapping. Same hover bg shift plus high-contrast double-ring
   (2px white inner + 2px brand-blue outer) since the focus surface is
   brand-blue. Mirrors the .ff-pdp-info, .card.mb-6, and bare
   .catalog-product-view scoped fixes elsewhere in this stylesheet. */
.product-info-main .box-tocart .action.tocart:focus-visible,
.product-info-main .box-tocart button.action.tocart:focus-visible,
.catalog-product-view .box-tocart .action.tocart:focus-visible,
.catalog-product-view .box-tocart button.action.tocart:focus-visible {
    background: #0077ed !important;
    box-shadow: 0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3) !important;
    outline: none !important;
}

/* Qty + Add to Cart layout — vertical stack so button gets full width */
.product-info-main .box-tocart .fieldset,
.catalog-product-view .box-tocart .fieldset {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100%;
}

.product-info-main .box-tocart .field.qty,
.catalog-product-view .box-tocart .field.qty {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-info-main .box-tocart .field.qty label,
.catalog-product-view .box-tocart .field.qty label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1d1d1f;
    margin-bottom: 0;
}

/* PDP wishlist/compare buttons — borderless like Apple */
.product-info-main .btn.p-2.rounded-full,
.catalog-product-view .btn.p-2.rounded-full {
    background: transparent !important;
    border: none !important;
    color: #6e6e73 !important;
    transition: all 0.2s ease !important;
}
.product-info-main .btn.p-2.rounded-full:hover,
.catalog-product-view .btn.p-2.rounded-full:hover {
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
}

/* Keyboard focus on PDP wishlist/compare circle buttons (the small
   borderless icon buttons in the product-info column). Same hover
   treatment plus 2px brand-blue outline at 2px offset for clear
   keyboard nav distinguishability. */
.product-info-main .btn.p-2.rounded-full:focus-visible,
.catalog-product-view .btn.p-2.rounded-full:focus-visible {
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

/* Product options (configurable, custom) — Apple configurator style */
.product-options-wrapper {
    margin: 32px 0 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid #e8e8ed;
}

/* "Customizable Options:" h2 — Apple-style small section label (was 56px huge!) */
.product-options-wrapper h2,
.product-options-wrapper .legend,
.product-options-wrapper .fieldset > h2,
.catalog-product-view .product-options-wrapper h2 {
    font-family: var(--ff-font-heading) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #6e6e73 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    border: none !important;
}

/* Each option field (Trigger Design, Trigger Color, etc.) */
.product-options-wrapper .field,
.product-options-wrapper .fieldset .field {
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
    border: none;
}

/* Option field label ("Trigger Design *") — medium, clean */
.product-options-wrapper .field .label,
.product-options-wrapper .field > label,
.product-options-wrapper .field .legend,
.product-options-wrapper .field span.label {
    font-family: var(--ff-font-heading) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #1d1d1f !important;
    font-size: 1rem !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Required asterisk */
.product-options-wrapper .field .label em,
.product-options-wrapper .field .required em {
    color: #0071e3;
    font-style: normal;
    margin-left: 4px;
}

/* Dropdown selects — Apple pill style (overrides all base select rules) */
.product-options-wrapper select,
.product-options-wrapper .control select,
.product-info-main .product-options-wrapper select,
.product-info-main .product-options-wrapper .field select {
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 12px !important;
    padding: 12px 44px 12px 16px !important;
    font-family: var(--ff-font-body) !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: #1d1d1f !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3e%3cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    box-sizing: border-box !important;
}

.product-options-wrapper select:focus,
.product-options-wrapper .control select:focus {
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
    outline: none !important;
}

/* Text input options */
.product-options-wrapper input[type="text"],
.product-options-wrapper input[type="number"],
.product-options-wrapper textarea {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    color: #1d1d1f !important;
}

.product-options-wrapper input[type="text"]:focus,
.product-options-wrapper input[type="number"]:focus,
.product-options-wrapper textarea:focus {
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
    outline: none !important;
}

/* Radio / checkbox options — Apple tile style */
.product-options-wrapper .field.choice,
.product-options-wrapper ul.options-list,
.product-options-wrapper .radio,
.product-options-wrapper .checkbox {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.product-options-wrapper ul.options-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
}

.product-options-wrapper ul.options-list li:hover {
    border-color: #6e6e73;
}

.product-options-wrapper ul.options-list li:has(input:checked),
.product-options-wrapper ul.options-list li.selected {
    border-color: #0071e3;
    box-shadow: 0 0 0 1px #0071e3;
}

.product-options-wrapper ul.options-list input[type="radio"],
.product-options-wrapper ul.options-list input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: #0071e3;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.product-options-wrapper ul.options-list label {
    font-size: 0.9375rem;
    color: #1d1d1f;
    cursor: pointer;
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Option images — shown inline within the option (Apple-style thumbnails) */
.product-options-wrapper ul.options-list label img,
.product-options-wrapper .option-image,
.product-options-wrapper .swatch-option img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
    background: #f5f5f7;
    padding: 4px;
    flex-shrink: 0;
}

/* Reference image under selection — if rendered below, style as clean inline card */
.product-options-wrapper .field + .option-reference-image,
.product-options-wrapper .field img:not(.swatch-option img):not(.option-image):not(ul.options-list img) {
    max-width: 200px;
    margin-top: 12px;
    border-radius: 12px;
    background: #f5f5f7;
    padding: 8px;
    display: block;
}

/* Swatch options (visual config swatches) — Apple style tiles */
.product-options-wrapper .swatch-attribute,
.product-options-wrapper .configurable-swatches {
    margin-bottom: 20px;
}

.product-options-wrapper .swatch-attribute-options,
.product-options-wrapper .swatch-options {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.product-options-wrapper .swatch-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    min-height: 72px;
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8125rem;
    color: #1d1d1f;
    text-align: center;
}

.product-options-wrapper .swatch-option:hover {
    border-color: #6e6e73 !important;
    box-shadow: none !important;
}

.product-options-wrapper .swatch-option.selected,
.product-options-wrapper .swatch-option[aria-checked="true"] {
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 1px #0071e3 !important;
}

/* Swatch options on PDP */
.swatch-opt .swatch-attribute {
    margin-bottom: 20px;
}

.swatch-opt .swatch-attribute-label {
    font-family: var(--ff-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ff-text-primary);
    font-size: 1.125rem;
}

.swatch-opt .swatch-attribute-selected-option {
    color: var(--ff-text-secondary);
    font-size: 1.0625rem;
}

/* Image gallery — Apple iPhone PDP: photo blends into the page.
   Background is transparent (the page is already white site-wide via
   the global `body { background: #ffffff !important }`) so the photo
   container has no visible frame. Previously this was #f5f5f7 + 18px
   radius which created a grey card around white-bg product JPGs. */
.gallery-placeholder,
.fotorama {
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    width: 100%;
}

/* Hyvä gallery — Apple light theme, fills column width */
#gallery {
    background: transparent;
    border-radius: 18px;
    overflow: visible;
    padding: 0;
    width: 100%;
}

#gallery-main {
    /* Pure white — no box, no border, photo just sits on the page */
    background: #ffffff !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    width: 100%;
    /* Was 1 / 1 (square) which forced ~1190 px tall on a 1920 px viewport
       and pushed page content way down. 3 / 2 landscape matches the way
       most firearms are photographed and feels far less top-heavy. */
    aspect-ratio: 3 / 2 !important;
    max-height: 70vh !important;
}

#gallery-main > div,
#gallery-main picture,
#gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* No drop-shadow — Treven feedback (2026-05-21): the soft shadow
       made white-background JPGs read as a "floating card" on the
       page instead of a photo blending into the white page. Brand
       spec is "product photos sit on PURE WHITE backdrops" — that
       only works if the page itself is also white edge-to-edge and
       nothing visually frames the image. */
    filter: none;
}

/* Gallery fullscreen overlay — dark */
#gallery [class*="fixed"][class*="bg-white"],
#gallery .bg-white {
    background: var(--ff-bg-primary) !important;
}

/* Gallery fullscreen click button — remove default browser bg */
#gallery button.absolute.inset-0,
#gallery-main button.absolute,
#gallery-main > div > button {
    background: transparent !important;
    border: none;
    cursor: zoom-in;
}

/* Keyboard-focus indicator for the fullscreen-trigger button. Without
   this, keyboard users tabbing into the gallery have no visual cue that
   pressing Enter would open fullscreen — the button is full-image-size
   and transparent, so a default outline can land outside the visible
   image. Inset 4px brand-blue ring (offset:-4 brings the outline inside
   the button bounds, away from the image edge so it stays visible
   against any background). */
#gallery button.absolute.inset-0:focus-visible,
#gallery-main button.absolute:focus-visible,
#gallery-main > div > button:focus-visible {
    outline: 3px solid var(--ff-blue, #0071e3) !important;
    outline-offset: -3px !important;
}

/* Video player containers — dark bg behind videos */
#gallery-main .bg-white {
    background: var(--ff-bg-secondary) !important;
}

/* ============================================================
   PDP GALLERY — Apple iPad-style ghost arrows + dots indicator
   ============================================================
   The Hyvä vendor gallery emits a #thumbs <nav> with prev/next
   chevron buttons + a thumbnail strip below the main image. On
   our PDPs that strip read as cluttered and the arrows stretched
   to the full thumb-row height. Treven's design standard is the
   Apple PDP: clean photo, compact ghost arrows pinned to the
   image edges, dots indicator below.

   We keep Hyvä's gallery component byte-identical and overlay
   our own controls via web/js/ff-pdp-gallery.js (registered in
   catalog_product_view.xml). The original #thumbs nav is hidden
   below; the new .ff-pdp-gallery-arrows + .ff-pdp-gallery-dots
   markup is appended INSIDE #gallery-main by the JS. */

/* Hide the entire vendor thumbs nav — the new gallery enhancer
   replaces it with dots + ghost arrows pinned to the gallery image. */
#thumbs {
    display: none !important;
}

/* Fullscreen close button — hide by default (and before Alpine hydrates, so
   no stray X sits over the inline gallery), then show it ONLY when the
   gallery wrapper actually enters fullscreen. The wrapper <div> gains
   Tailwind's `.fixed` class while `fullscreen` is true (see vendor
   gallery.phtml line ~63), and the close button lives inside that wrapper.
   The previous rule keyed off :not([x-show="fullscreen"]):not([aria-expanded])
   but Hyvä's button carries NEITHER attribute, so the !important rule matched
   in fullscreen too and left customers with no way to exit. */
#gallery button[aria-label="Close fullscreen"] {
    display: none !important;
}
#gallery .fixed button[aria-label="Close fullscreen"] {
    display: block !important;
}

/* New gallery overlay arrows — circular ghost buttons on the
   left / right edges of #gallery-main. Visible always on touch
   devices; fade in on hover on desktop (Apple iPad PDP pattern).
   `.ff-pdp-gallery-arrows` is the wrapper appended by JS into
   #gallery-main; arrows are pinned with absolute positioning.

   The `width: auto !important` + `height: auto !important` + `filter:
   none !important` overrides are essential — the existing
   `#gallery-main > div` rule (line ~6224) applies a drop-shadow filter
   and forces 100% sizing onto every direct div child, intended for
   Hyvä's image wrappers but it also catches our new overlay wrappers.
   The drop-shadow on a transparent full-size wrapper renders as a
   ghost halo over the photo and makes the gallery image look faded. */
.ff-pdp-gallery-arrows,
.ff-pdp-gallery-dots {
    filter: none !important;
    width: auto !important;
    height: auto !important;
    object-fit: initial !important;
}
.ff-pdp-gallery-arrows {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none; /* Wrapper passes clicks through to image */
    z-index: 5;
}
/* Arrow selectors prefixed with `#gallery-main` so the bg + border
   don't get reset to transparent by the same higher-specificity rule
   that affected the dots. */
#gallery-main .ff-pdp-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1d1d1f !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
    opacity: 0; /* Hidden by default on desktop, fades in on hover */
    padding: 0 !important;
}
#gallery-main .ff-pdp-gallery-arrow--prev { left: 16px; }
#gallery-main .ff-pdp-gallery-arrow--next { right: 16px; }
#gallery-main .ff-pdp-gallery-arrow svg {
    width: 22px;
    height: 22px;
    color: #1d1d1f !important;
    stroke: #1d1d1f !important;
}
/* Show arrows on hover of the gallery (desktop) */
#gallery-main:hover .ff-pdp-gallery-arrow,
#gallery-main .ff-pdp-gallery-arrow:hover,
#gallery-main .ff-pdp-gallery-arrow:focus-visible {
    opacity: 1;
}
#gallery-main .ff-pdp-gallery-arrow:hover {
    background: #ffffff !important;
    transform: translateY(-50%) scale(1.06);
}
#gallery-main .ff-pdp-gallery-arrow:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}
#gallery-main .ff-pdp-gallery-arrow:active {
    transform: translateY(-50%) scale(0.96);
}

/* Touch devices: arrows always visible (no hover available) */
@media (hover: none) {
    .ff-pdp-gallery-arrow { opacity: 1; }
}

/* Mobile: arrows scale down slightly (still tappable per WCAG 44×44) */
@media (max-width: 767px) {
    .ff-pdp-gallery-arrow {
        width: 40px;
        height: 40px;
    }
    .ff-pdp-gallery-arrow svg {
        width: 18px;
        height: 18px;
    }
    .ff-pdp-gallery-arrow--prev { left: 12px; }
    .ff-pdp-gallery-arrow--next { right: 12px; }
}

/* Reduced-motion: disable scale + opacity transitions */
@media (prefers-reduced-motion: reduce) {
    .ff-pdp-gallery-arrow,
    .ff-pdp-gallery-arrow:hover,
    .ff-pdp-gallery-arrow:active,
    .ff-pdp-gallery-arrow:focus-visible {
        transition: none;
        transform: translateY(-50%);
    }
}

/* Dots indicator — sits at the bottom of #gallery-main, centered.
   Each dot is an 8px circle that grows and turns navy when active.
   Apple's iPad PDP pattern. */
.ff-pdp-gallery-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 9999px;
    z-index: 5;
    pointer-events: auto;
}
/* Dot selectors are prefixed `#gallery-main .ff-pdp-gallery-dot` to
   beat the existing `#gallery-main > div > button { background:
   transparent !important; }` rule (line ~6242) on specificity. Without
   the ID prefix the dots inherit transparent background and render
   invisibly inside their pill. Same for arrow buttons below. */
#gallery-main .ff-pdp-gallery-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px;
    border-radius: 50% !important;
    background: rgba(29, 29, 31, 0.35) !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
    flex-shrink: 0;
}
#gallery-main .ff-pdp-gallery-dot:hover {
    background: rgba(29, 29, 31, 0.6) !important;
}
#gallery-main .ff-pdp-gallery-dot:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}
#gallery-main .ff-pdp-gallery-dot.is-active {
    background: #0a1929 !important;
    width: 24px !important;
    min-width: 24px;
    border-radius: 4px !important;
}
@media (prefers-reduced-motion: reduce) {
    .ff-pdp-gallery-dot { transition: none; }
}
@media (max-width: 767px) {
    .ff-pdp-gallery-dots { bottom: 12px; padding: 6px 12px; gap: 7px; }
}

/* Ensure #gallery-main is a positioning context for the overlay
   arrows + dots (it already has overflow: hidden + aspect-ratio
   from earlier rules; just need explicit position: relative). */
.catalog-product-view #gallery-main {
    position: relative !important;
}

/* Override Hyvä's `self-center` on the gallery wrapper. The Tailwind
   class `self-center` translates to `align-self: center`, which centers
   the gallery vertically in its grid row. With the right info-column
   being shorter than the photo's natural height, this pushed the photo
   ~72px below the column-top — title and photo were misaligned even
   though both columns started at the same y. Forcing align-self: start
   pins the photo to the top of its grid cell so its top edge lines up
   with the title's top edge. */
.catalog-product-view #gallery .relative.self-center,
.catalog-product-view #gallery > div.relative {
    align-self: start !important;
}

/* PDP info column — tighten the vertical rhythm so title → price →
   stock → CTA reads as a tight stack instead of an airy waterfall.
   The parent .ff-pdp-info uses `display: flex; flex-direction: column`
   with a `gap: 14px` that was compounding margin-bottom on each child
   into ~50–60 px gaps between elements. Resetting the parent gap to
   0 + setting explicit, smaller margin-bottom on each block puts the
   spacing fully under control. */
.product-info-main .ff-pdp-info {
    gap: 0 !important;
}
.ff-pdp-info__eyebrow { margin: 0 0 12px 0 !important; }
.ff-pdp-info__title { margin: 0 0 6px 0 !important; }
.ff-pdp-info__subtitle { margin: 0 0 18px 0 !important; }
.ff-pdp-info__reviews { margin: 0 0 14px 0 !important; }
.ff-pdp-info__short-desc { margin: 0 0 16px 0 !important; }
.ff-pdp-info__price { margin: 0 0 14px 0 !important; }
.ff-pdp-info__stock { margin: 0 0 14px 0 !important; }
.ff-pdp-info__cta { margin: 0 0 16px 0 !important; }
/* Trust badges block — keep a slightly larger gap above so it visually
   separates from the immediate purchase controls. */
.ff-pdp-info__trust { margin-top: 4px !important; }

/* Mobile: ensure the product title is visible under the photo
   (Hyvä's vendor template can apply Tailwind responsive classes that
   hide the in-column title on small viewports, expecting a separate
   "page-title" header to fill in — but our PDP layout doesn't render
   that separate header). Force visibility on every breakpoint. */
@media (max-width: 1023px) {
    .catalog-product-view .ff-pdp-info__title,
    .catalog-product-view .ff-pdp-info__title h1,
    .catalog-product-view .ff-pdp-info__title .page-title,
    .catalog-product-view .product-info-main h1.page-title,
    .catalog-product-view .product-info-main .page-title-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        overflow: visible !important;
    }
    /* Tighten the right-column top spacing on mobile so the title sits
       close to the photo above it instead of falling far below. */
    .catalog-product-view .product-info-main {
        padding-top: 8px !important;
    }
    /* Title font scales down a touch on small phones */
    .catalog-product-view .ff-pdp-info__title h1,
    .catalog-product-view .ff-pdp-info__title .page-title {
        font-size: 1.75rem !important;
        line-height: 1.12 !important;
    }
}

.fotorama__nav__shaft .fotorama__thumb {
    border: 2px solid var(--ff-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s var(--ff-ease);
}

.fotorama__nav__shaft .fotorama__thumb.fotorama__active {
    border-color: var(--ff-blue);
}

.fotorama__arr {
    background: rgba(15, 25, 35, 0.7);
    color: #fff;
    transition: background 0.3s var(--ff-ease);
}

.fotorama__arr:hover {
    background: rgba(0, 163, 255, 0.8);
}

/* Product tabs */
.product.info.detailed {
    margin-top: 48px;
}

.product.info.detailed .product.data.items > .item.title {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-right: 4px;
}

.product.info.detailed .product.data.items > .item.title > a,
.product.info.detailed .data.item.title {
    font-family: var(--ff-font-heading);
    font-size: 0.9375rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #6e6e73;
    padding: 12px 20px;
    transition: color 0.2s ease;
    display: block;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.product.info.detailed .product.data.items > .item.title.active > a,
.product.info.detailed .data.item.title.active {
    color: #1d1d1f;
    border-bottom-color: #1d1d1f;
}

.product.info.detailed .product.data.items > .item.title > a:hover {
    color: #1d1d1f;
}

.product.info.detailed .product.data.items > .item.content,
.product.info.detailed .data.item.content {
    background: #ffffff;
    border: none;
    border-radius: 0;
    padding: 24px 0;
    color: #6e6e73;
    font-size: 1rem;
    line-height: 1.7;
    margin-top: 0;
}

/* Product additional info table */
.product.info.detailed .additional-attributes {
    width: 100%;
}

.product.info.detailed .additional-attributes th {
    font-family: var(--ff-font-heading);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #6e6e73;
    font-size: 0.9375rem;
    background: transparent;
    padding: 12px 16px;
    border-bottom: 1px solid #e8e8ed;
}

.product.info.detailed .additional-attributes td {
    color: var(--ff-text-primary);
    font-size: 1rem;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ff-border-subtle);
}

/* Hyvä PDP description/info sections — 2-column grid layout */
.catalog-product-view .product-info-main > div.grid {
    margin-top: 40px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
}

.catalog-product-view .product-info-main > div.grid > section {
    background: transparent !important;
    padding: 32px 0 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid #d2d2d7 !important;
    box-shadow: none !important;
}

/* Description heading (h2) — clean, no bottom border line */
.catalog-product-view .product-info-main > div.grid h2 {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.015em;
    color: #1d1d1f;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* Description body text */
.catalog-product-view .product-info-main > div.grid p,
.catalog-product-view .product-info-main > div.grid div {
    color: #6e6e73;
    font-size: 1rem;
    line-height: 1.7;
}

/* Description list items (features, specs) */
.catalog-product-view .product-info-main > div.grid li,
.catalog-product-view .product-info-main > div.grid ul {
    color: #6e6e73;
    font-size: 1rem;
    line-height: 1.7;
}

/* Bold text in descriptions */
.catalog-product-view .product-info-main > div.grid strong,
.catalog-product-view .product-info-main > div.grid b {
    color: #1d1d1f;
}

/* More Information table */
.catalog-product-view .product-info-main > div.grid table {
    width: 100%;
}

.catalog-product-view .product-info-main > div.grid table tr {
    border-bottom: 1px solid #e8e8ed;
}

.catalog-product-view .product-info-main > div.grid table th {
    font-family: var(--ff-font-heading);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #6e6e73;
    padding: 12px 16px;
    text-align: left;
    font-size: 0.9375rem;
}

.catalog-product-view .product-info-main > div.grid table td {
    color: #1d1d1f;
    padding: 12px 16px;
    font-size: 0.9375rem;
}

/* Review section — Apple-style flat, no box */
.catalog-product-view .product-info-main > section:last-child {
    margin-top: 40px !important;
    padding-top: 32px !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid #d2d2d7 !important;
    padding: 32px 0 0 !important;
}

/* Related / upsell / cross-sell */
.block.related,
.block.upsell,
.block.crosssell {
    margin-top: 64px;
}

.block.related .block-title strong,
.block.upsell .block-title strong,
.block.crosssell .block-title strong {
    font-family: var(--ff-font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ff-text-primary);
}

/* Wishlist & compare links on PDP */
.product-social-links .action.towishlist,
.product-social-links .action.tocompare,
.product-social-links .action.mailto {
    color: var(--ff-text-muted);
    font-size: 1.0625rem;
    transition: color 0.3s var(--ff-ease);
}

.product-social-links .action.towishlist:hover,
.product-social-links .action.tocompare:hover,
.product-social-links .action.mailto:hover {
    color: var(--ff-blue);
}


/* ============================================================
   SECTION 18: CART & CHECKOUT
   ============================================================ */

/* Cart page */
.checkout-cart-index .page-title {
    font-family: var(--ff-font-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

/* Cart table */
.cart.table-wrapper {
    background: #ffffff;
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.cart.table-wrapper table {
    background: transparent;
}

.cart.table-wrapper thead th {
    background: var(--ff-bg-card);
    font-family: var(--ff-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ff-text-secondary);
    font-size: 1rem;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ff-border);
}

.cart.table-wrapper tbody td {
    padding: 20px;
    border-bottom: 1px solid var(--ff-border-subtle);
    color: var(--ff-text-primary);
    vertical-align: middle;
}

.cart.table-wrapper .product-item-name a {
    font-family: var(--ff-font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ff-text-primary);
}

.cart.table-wrapper .product-item-name a:hover {
    color: var(--ff-blue);
    outline: none;
}
.cart.table-wrapper .product-item-name a:focus-visible {
    color: var(--ff-blue);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
    border-radius: 4px;
}

.cart.table-wrapper .input-text.qty {
    background: var(--ff-bg-input);
    border: 1px solid var(--ff-border);
    border-radius: 8px;
    color: var(--ff-text-primary);
    text-align: center;
    width: 60px;
    padding: 8px;
}

.cart.table-wrapper .action.action-delete {
    color: var(--ff-text-muted);
    transition: color 0.3s var(--ff-ease);
}

.cart.table-wrapper .action.action-delete:hover {
    color: var(--ff-red);
}

/* Cart summary */
.cart-summary {
    background: var(--ff-bg-secondary);
    border: 1px solid var(--ff-border);
    border-radius: 16px;
    padding: 32px;
}

.cart-summary .summary.title {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ff-text-primary);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ff-border);
}

.cart-summary .totals th,
.cart-summary .totals td {
    padding: 10px 0;
    color: var(--ff-text-secondary);
    border-bottom: 1px solid var(--ff-border-subtle);
}

.cart-summary .totals .grand.totals th,
.cart-summary .totals .grand.totals td {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ff-text-primary);
    border-bottom: none;
    padding-top: 16px;
}

.cart-summary .checkout-methods-items .action.checkout {
    width: 100%;
    text-align: center;
}

/* Discount / coupon code */
.cart-discount {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    border-radius: 12px;
    padding: 20px;
    margin-top: 24px;
}

.cart-discount .title {
    font-family: var(--ff-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ff-text-primary);
    font-weight: 600;
}

/* Checkout page */
.checkout-index-index .page-title {
    font-family: var(--ff-font-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

/* Checkout steps */
.opc-wrapper {
    max-width: var(--ff-container-max);
}

.opc-wrapper .step-title {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ff-text-primary);
    border-bottom: 2px solid var(--ff-blue);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

/* Checkout fieldsets */
.opc-wrapper .fieldset {
    background: var(--ff-bg-secondary);
    border: 1px solid var(--ff-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.opc-wrapper .field .label {
    color: var(--ff-text-secondary);
}

/* Checkout sidebar */
.opc-sidebar {
    background: var(--ff-bg-secondary);
    border: 1px solid var(--ff-border);
    border-radius: 16px;
    padding: 32px;
}

.opc-sidebar .opc-block-summary .title {
    font-family: var(--ff-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ff-text-primary);
}

.opc-sidebar .opc-block-summary .table-totals th,
.opc-sidebar .opc-block-summary .table-totals td {
    color: var(--ff-text-secondary);
    padding: 8px 0;
}

.opc-sidebar .opc-block-summary .grand.totals th,
.opc-sidebar .opc-block-summary .grand.totals td {
    font-weight: 700;
    color: var(--ff-text-primary);
    font-size: 1.25rem;
}

/* Shipping methods */
.checkout-shipping-method .table-checkout-shipping-method {
    background: var(--ff-bg-card);
    border-radius: 12px;
    overflow: hidden;
}

.checkout-shipping-method .table-checkout-shipping-method td {
    padding: 14px 16px;
    color: var(--ff-text-secondary);
    border-bottom: 1px solid var(--ff-border-subtle);
}

/* Payment methods */
.payment-method {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 12px;
    transition: border-color 0.3s var(--ff-ease);
}

.payment-method._active,
.payment-method:hover {
    border-color: var(--ff-blue);
}

.payment-method-title {
    font-family: var(--ff-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ff-text-primary);
}

/* Place order button */
.checkout-payment-method .action.checkout,
.action.primary.checkout {
    width: 100%;
    padding: 18px 40px !important;
    font-size: 1rem;
}

/* Order confirmation / success */
.checkout-success {
    text-align: center;
    padding: 64px 24px;
}

.checkout-success .page-title {
    color: var(--ff-green);
}


/* ============================================================
   SECTION 19: CUSTOMER ACCOUNT PAGES
   ============================================================ */

/* ============================================================
   CUSTOMER ACCOUNT — comprehensive redesign 2026-05-08
   ============================================================
   Replaces the previous grid-on-.page-main layout that was
   wrecking Hyvä's actual DOM structure (h1.page-title sibling
   to .columns, both being shoved into an unrelated 2-col grid
   that stretched the h1 to 1920 px tall). New layout:

       .page-main (block flow)
         ├── .container (page-title row, full width)
         └── .columns (the actual 2-col grid: sidebar + main)

   Apple-style premium feel:
     - Light surface background, white cards with hairline borders
     - Sidebar: clean nav with brand-blue active left bar
     - Main: card grid with consistent radius / padding / shadow
     - Generous breathing room, never airy waterfall gaps
     - Typography: Oswald for section headings, Inter for body */

/* Outer page surface */
.account {
    background: #f5f5f7;
}

.account .page-main {
    display: block !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 32px 24px 80px !important;
    background: transparent !important;
}

/* Page header (h1) — full-width row above the sidebar/main grid */
.account .page-main > .container,
.account .page-title-wrapper {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    display: block !important;
    flex: initial !important;
}

.account h1.page-title {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: clamp(1.875rem, 3vw, 2.5rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    color: #1d1d1f !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
}

/* Subtitle below the page title — friendly welcome line */
.account .page-title-wrapper::after,
.account h1.page-title + p {
    display: block !important;
    color: #6e6e73 !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* The 2-column layout — sidebar + main — moved here from .page-main */
.account .columns {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 32px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
}

/* Sidebar — clean white card, Apple-style nav with brand-blue active state.
   Override the default dark-navy bg + bordered card styling. */
.account .sidebar-main {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    padding: 12px !important;
    margin: 0 !important;
    height: fit-content !important;
    position: sticky !important;
    top: 88px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.account .sidebar-main .card,
.account .sidebar-main > div.card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sidebar collapsible toggle button (mobile) — lighten so SR + sighted users
   can read it; Hyvä ships it with hidden text labels. */
.account .sidebar-main #account-nav-title,
.account .sidebar-main button[aria-controls*="account-nav"] {
    color: #1d1d1f !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.8125rem !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid #e8e8ed !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}
@media (min-width: 768px) {
    .account .sidebar-main #account-nav-title {
        display: none !important;
    }
}

.account .sidebar-main .block-title,
.account .sidebar-main .block-title strong {
    display: none !important;  /* Hide the redundant "My Account" text — page H1 already says it */
}

/* Sidebar nav list */
.account .sidebar-main #account-nav,
.account .sidebar-main nav.account-nav,
.account .sidebar-main nav,
.account .sidebar-main .nav.items {
    list-style: none !important;
    padding: 6px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: block !important;
}

.account .sidebar-main .nav.items .item,
.account .sidebar-main nav .item,
.account .sidebar-main nav li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

.account .sidebar-main .nav.items .item a,
.account .sidebar-main nav .item a,
.account .sidebar-main nav a:not(.btn) {
    display: block !important;
    padding: 10px 14px !important;
    margin: 2px 0 !important;
    color: #1d1d1f !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.account .sidebar-main .nav.items .item a:hover,
.account .sidebar-main nav .item a:hover,
.account .sidebar-main nav a:not(.btn):hover {
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
    outline: none !important;
}
.account .sidebar-main .nav.items .item a:focus-visible,
.account .sidebar-main nav a:focus-visible {
    background: #f5f5f7 !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: -2px !important;
}

/* Active nav state — REMOVED 2026-05-08. The newer rule below
   (body.account .sidebar-main .current ...) replaces this with a
   red↔blue underline `::after` animation that doesn't shift the
   item's position. Treven flagged the inset-left-bar + padding-shift
   as "weird and oversized." Keeping just a transparent reset here
   so any leftover specificity from this selector chain doesn't
   re-apply the bar. */
.account .sidebar-main .nav.items .item.current,
.account .sidebar-main .nav.items .item.current a,
.account .sidebar-main .nav.items .item.current strong,
.account .sidebar-main nav .item.current a,
.account .sidebar-main nav .current,
.account .sidebar-main nav a[aria-current="page"] {
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 14px !important;
    border-left: 0 !important;
}

/* Sign-out link — destructive red on hover */
.account .sidebar-main a[href*="logout"],
.account .sidebar-main .nav.items a[href*="logout"] {
    color: #6e6e73 !important;
    margin-top: 8px !important;
    border-top: 1px solid #e8e8ed !important;
    padding-top: 14px !important;
    border-radius: 0 0 8px 8px !important;
}
.account .sidebar-main a[href*="logout"]:hover {
    color: #d70015 !important;
    background: rgba(215, 0, 21, 0.04) !important;
}

/* Main content area — transparent background, content cards do the styling */
.account .column.main {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* Cards inside main — every dashboard block becomes a clean white card.
   Padding 32px (was 24px) so text doesn't kiss the rounded inner corners
   per Treven's feedback. Border-radius 18 to match the spark-border
   pseudo radius for cards that DO get the spark treatment. */
.account .column.main .block,
.account .column.main .block.card,
.account .column.main > .card {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 18px !important;
    padding: 32px !important;
    margin: 0 0 24px 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    display: block !important;
    overflow: visible !important;
    max-width: 100% !important;
}

/* Inner sub-cards (Contact Information / Newsletters / Default Billing /
   Default Shipping) live INSIDE the parent card and need their own
   visible card surface so each section reads as its own contained piece.
   Treven specifically called these out as "looks terrible — should be
   cards that are contained." */
.account .column.main .flex.flex-wrap > div.lg\:w-1\/2,
.account .column.main .flex.flex-wrap > div.w-full {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 14px !important;
    padding: 24px 28px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Block titles inside cards — clear section heading, "VIEW ALL" link sits inline */
.account .column.main .block-title {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    flex-wrap: nowrap !important;
}
.account .column.main .block-title strong,
.account .column.main h2.block-title,
.account .column.main h3.block-title,
.account .column.main .legend,
.account .column.main h2:not(.ff-order-tracker__title):not([class*="ff-"]) {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #1d1d1f !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
}
.account .column.main .block-title .action,
.account .column.main .block-title a {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--ff-blue, #0071e3) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}
.account .column.main .block-title .action:hover {
    text-decoration: underline !important;
}

/* Info boxes inside cards (Account Information / Newsletter / etc.) */
.account .box {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
}
.account .box + .box {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #e8e8ed !important;
}
.account .box-title {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.account .box-title span,
.account .box-title strong {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #6e6e73 !important;
}
.account .box-content,
.account .box-content p,
.account .box-content address {
    color: #1d1d1f !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
}
.account .box-actions {
    margin-top: 8px !important;
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.account .box-actions a {
    color: var(--ff-blue, #0071e3) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.account .box-actions a:hover { text-decoration: underline !important; }

/* Account dashboard split: Account Information / Newsletters /
   Default Billing / Default Shipping all live inside Tailwind flex
   containers Hyvä emits as `<div class="flex flex-wrap justify-between">`.
   Each child has `lg:w-1/2 w-full p-4` so on lg breakpoints we get a
   2-col grid. That works EXCEPT the parent `.block-content` was set
   to `display: grid` by an earlier rule, which then squeezed the inner
   flex into a single grid column. We fully reset both: parent stays
   as block, the Tailwind flex-wrap inside drives the layout. */
.account .column.main .block-content,
.account .column.main .block-dashboard-info > .block-content,
.account .column.main .block-dashboard-addresses > .block-content {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
}

/* Tailwind flex-wrap rows used for the dashboard 2-col layout.
   Make children evenly fill ~50% on desktop, 100% on mobile. */
.account .column.main .flex.flex-wrap,
.account .column.main .flex.flex-wrap.justify-between {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}
.account .column.main .flex.flex-wrap > div,
.account .column.main .flex.flex-wrap > .lg\:w-1\/2,
.account .column.main .flex.flex-wrap > .w-full {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}
@media (max-width: 720px) {
    .account .column.main .flex.flex-wrap > div,
    .account .column.main .flex.flex-wrap > .lg\:w-1\/2,
    .account .column.main .flex.flex-wrap > .w-full {
        flex: 1 1 100% !important;
    }
}

/* Inner card wrapper that Hyvä emits inside each .lg:w-1/2 cell.
   Tailwind classes like `.flex.p-8.sm:flex-row` give it default
   styling we don't want when we're already in a card. Reset the
   p-8 padding (we control padding via the card wrapper) and remove
   the inner flex-row so addresses stack naturally as a list. */
.account .column.main .flex.flex-wrap > div > .flex.p-8,
.account .column.main .flex.flex-wrap > div > div.flex {
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Recent Orders — fix the broken table layout */
.account .column.main .block-dashboard-orders {
    overflow: visible !important;
}
.account .column.main .block-dashboard-orders .overflow-x-auto {
    overflow-x: auto !important;
    margin: 0 -4px !important;
    padding: 0 4px !important;
}
.account .column.main .block-dashboard-orders table,
.account .column.main table.data.table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}
.account .column.main .block-dashboard-orders table th,
.account .column.main table.data.table th {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #6e6e73 !important;
    text-align: left !important;
    padding: 8px 12px 8px 0 !important;
    border-bottom: 1px solid #e8e8ed !important;
    background: transparent !important;
}
.account .column.main .block-dashboard-orders table td,
.account .column.main table.data.table td {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    color: #1d1d1f !important;
    padding: 14px 12px 14px 0 !important;
    border-bottom: 1px solid #f5f5f7 !important;
    background: transparent !important;
    vertical-align: middle !important;
}
.account .column.main table.data.table tbody tr:last-child td {
    border-bottom: 0 !important;
}
.account .column.main table.data.table .col.actions a {
    color: var(--ff-blue, #0071e3) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    margin-right: 12px !important;
}
.account .column.main table.data.table .col.actions a:hover {
    text-decoration: underline !important;
}

/* Mobile: collapse 2-column to single column */
@media (max-width: 1023px) {
    .account .columns {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .account .sidebar-main {
        position: static !important;
    }
}

/* ============================================================
   MY ORDERS — premium card layout per Treven's reference design
   ============================================================
   Tabs (Current / Unpaid / All orders) at the top, each order
   rendered as a card with download-invoice button top-right,
   status row, and a 2-column grid of product thumbnails.
   Lives at body.sales-order-history. */

.ff-orders {
    width: 100%;
}
.ff-orders__tabs {
    display: inline-flex;
    background: #f5f5f7;
    border-radius: 12px;
    padding: 4px;
    margin: 0 0 24px 0;
    gap: 2px;
}
.ff-orders__tab {
    padding: 10px 22px;
    border: 0;
    background: transparent;
    color: #6e6e73;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    position: relative;
}
.ff-orders__tab:hover {
    color: #1d1d1f;
}
.ff-orders__tab.is-active {
    background: #ffffff;
    color: #0a1929;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
/* Selected tab gets the same red↔blue underline pulse as the
   sidebar active state — the homepage signature animation that
   Treven specified for active tabs across the account UI. */
.ff-orders__tab.is-active::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 4px;
    height: 3px;
    border-radius: 2px;
    background: #0071e3;
    animation: ff-sidebar-active-color 3s ease-in-out infinite;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .ff-orders__tab.is-active::after { animation: none; background: #0071e3; }
}
.ff-orders__tab:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

.ff-orders__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ff-orders__card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 18px;
    padding: 24px 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    isolation: isolate;
}
.ff-orders__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08),
                0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Spark border on hover — only on the My Orders cards (these are
   clickable into order detail) */
.ff-orders__card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    padding: 2px;
    background: conic-gradient(
        from var(--ff-card-angle),
        transparent 0%,
        transparent 50%,
        var(--ff-card-line-color) 62%,
        var(--ff-card-line-color) 68%,
        transparent 78%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}
.ff-orders__card:hover::before {
    opacity: 1;
    animation: ff-card-spin 3.2s linear infinite,
               ff-card-color-cycle 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .ff-orders__card:hover { transform: none; }
    .ff-orders__card:hover::before { animation: none; --ff-card-line-color: #0071e3; }
}

/* Card header — Order # + meta on left, Download Invoice button on right */
.ff-orders__card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
}
.ff-orders__card-id {
    flex: 1 1 auto;
    min-width: 0;
}
.ff-orders__card-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #1d1d1f !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}
.ff-orders__card-meta {
    font-size: 0.8125rem;
    color: #6e6e73;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}

/* Download invoice button — uses the canonical .ff-btn-outline
   .ff-btn-sm classes from the site button system. Only thin
   layout tweaks left here: shrink + flex-shrink for the card
   header layout. Visual styling lives on the shared classes. */
.ff-orders__invoice {
    flex-shrink: 0;
}

/* Stats row — Status / Date of delivery / Delivered to / Total */
.ff-orders__card-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
    margin: 0 0 20px 0;
}
@media (min-width: 1024px) {
    .ff-orders__card-stats {
        grid-template-columns: auto auto auto auto;
        justify-content: start;
        gap: 8px 36px;
    }
}
.ff-orders__stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.ff-orders__stat dt {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.8125rem;
    color: #6e6e73;
    margin: 0;
    flex-shrink: 0;
}
.ff-orders__stat dd {
    font-size: 0.875rem;
    color: #1d1d1f;
    margin: 0;
    font-weight: 500;
}
.ff-orders__stat-total {
    font-weight: 700 !important;
    color: #0a1929 !important;
}
.ff-orders__status {
    font-weight: 600 !important;
    text-transform: capitalize;
}
.ff-orders__status--unpaid { color: #b45309 !important; }
.ff-orders__status--current { color: #0071e3 !important; }
.ff-orders__status--other { color: #1d1d1f !important; }

/* Items grid — 2-column tile of order items */
.ff-orders__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px 0;
}
@media (max-width: 640px) {
    .ff-orders__items { grid-template-columns: 1fr; }
}
.ff-orders__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: transparent;
    border: 1px solid #ececf0;
    border-radius: 12px;
    min-width: 0;
}
.ff-orders__item-img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    object-fit: contain;
    padding: 4px;
    flex-shrink: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Yireo NextGenImages wraps img in <picture> for WebP fallback. Both
   the picture wrapper AND the img inside need the styling — the
   wrapper got 64×64 but the inner img defaulted to natural size and
   spilled invisibly. Force the inner img to fill the picture box.
   <source> stays display:none — it's a meta element, not a render
   element; setting display:block on it makes it occupy a phantom
   empty box that pushes the layout apart. */
.ff-orders__item-img picture,
.ff-orders__item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    border: 0;
    background: transparent;
    padding: 0;
    display: block;
}
.ff-orders__item-img source { display: none; }
.ff-orders__item-img--placeholder {
    background: linear-gradient(135deg, rgba(0, 163, 255, 0.06), rgba(0, 0, 0, 0.02)), #ffffff;
}
.ff-orders__item-body { flex: 1 1 auto; min-width: 0; }
.ff-orders__item-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 4px 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ff-orders__item-meta {
    font-size: 0.75rem;
    color: #6e6e73;
    margin: 0;
}

/* Card footer — View Order CTA + optional Reorder */
.ff-orders__card-footer {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #f5f5f7;
}
/* View Order + Reorder buttons now use the canonical
   .ff-btn-primary / .ff-btn-outline classes from the site button
   system. Per Treven's directive: "use existing styles, no reason
   to recreate new ones." Local rules are layout-only. */
.ff-orders__reorder-form {
    display: inline-flex;
    margin: 0;
}

/* Empty state — shown when the active filter (Current / Unpaid)
   has zero matching orders. Branded card with title + helpful
   sub-message guiding the customer back to the right tab. */
.ff-orders__empty {
    padding: 56px 32px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.ff-orders__empty-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    margin: 0 0 8px 0;
}
.ff-orders__empty-sub {
    color: #6e6e73;
    font-size: 0.9375rem;
    margin: 0;
    line-height: 1.5;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.ff-orders__empty-state {
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 18px;
    padding: 60px 32px;
    text-align: center;
}
.ff-orders__empty-message {
    color: #6e6e73;
    margin: 0;
    font-size: 1rem;
}

/* Pager */
.ff-orders__pager {
    margin: 24px 0 0 0;
    display: flex;
    justify-content: center;
}

/* Mobile tweaks */
@media (max-width: 640px) {
    .ff-orders__card { padding: 18px 20px; }
    .ff-orders__card-header { flex-direction: column; align-items: flex-start; }
    .ff-orders__invoice { width: 100%; justify-content: center; }
    .ff-orders__tabs { width: 100%; }
    .ff-orders__tab { flex: 1 1 0; padding: 10px 8px; }
}

/* ============================================================
   DASHBOARD RECENT-ORDERS WIDGET VARIANT (.ff-orders--dashboard)
   ============================================================
   Renders inside the Account Dashboard page. Same .ff-orders__*
   building blocks as the My Orders full list — just trimmed:
   - No filter tabs
   - No pager
   - Header is a section header (h2 + "View all" link), not the
     page-title H1 from the full Orders page
   - Cards have lighter padding so the widget feels compact
     inside its dashboard column. */

.ff-orders__widget-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px 0;
    flex-wrap: wrap;
}
.ff-orders__widget-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    margin: 0;
}
.ff-orders__view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0071e3;
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}
.ff-orders__view-all:hover {
    color: #0064c8;
    transform: translateX(2px);
}
.ff-orders__view-all:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Dashboard variant tightens the gap between cards so the widget
   feels like a tidy "at a glance" panel rather than a full list. */
.ff-orders--dashboard .ff-orders__list {
    gap: 14px;
}
.ff-orders--dashboard .ff-orders__card {
    padding: 22px 24px;
}

/* On the dashboard the widget shares the column with other cards
   (Account Information, Address Book), so the order card's
   embedded thumbnail grid stays single-column to avoid crowding
   inside a narrow column. The full My Orders page already uses
   2-col so we're only overriding the dashboard context. */
@media (min-width: 1024px) {
    .ff-orders--dashboard .ff-orders__items {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   STRETCHED-LINK CARDS (My Orders / Recent Orders)
   ============================================================
   Each .ff-orders__card has a hidden full-card <a> that lets the
   customer click anywhere on the card to open the order detail
   view. Buttons inside the card (Download invoice, View order,
   Reorder) live above the link via z-index + position:relative
   so their own click handlers fire normally instead of bubbling
   to the card link. */

.ff-orders__card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    text-decoration: none;
    /* Invisible but real — gives keyboard focus a target and
       keeps the click hitbox at full card size. Hidden text is
       inside aria-label for SR users. */
    overflow: hidden;
    text-indent: -9999px;
    color: transparent;
    background: transparent;
    transition: background 0.18s ease;
    /* The card already shows a hover lift + spark border, so the
       link's own hover doesn't need extra paint. Keep it null. */
}
.ff-orders__card-link:focus-visible {
    /* Keyboard focus ring — uses the spark border zone so the
       customer sees a clear blue outline when they Tab onto a card. */
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: -2px;
}

/* Stretched-link stacking: the link itself is the only thing at
   z-index 2 (covering the full card area). Content sections do
   NOT get an explicit z-index — they render naturally and clicks
   on text fall through to the link below them.

   The ONLY exception: real buttons (Download invoice, View order,
   Reorder) get position:relative + z-index: 3 so they sit above
   the link and capture their own clicks. */
.ff-orders__card .ff-orders__invoice,
.ff-orders__card .ff-orders__view-btn,
.ff-orders__card .ff-orders__reorder-btn,
.ff-orders__card .ff-orders__reorder-form,
.ff-orders__card .ff-btn-primary,
.ff-orders__card .ff-btn-outline,
.ff-orders__card a:not(.ff-orders__card-link),
.ff-orders__card button {
    position: relative;
    z-index: 3;
}

/* Card cursor — on hover the whole thing acts like a link. */
.ff-orders__card { cursor: pointer; }
/* But buttons + their hit zones get back the proper cursor. */
.ff-orders__card .ff-orders__invoice,
.ff-orders__card .ff-orders__view-btn,
.ff-orders__card .ff-orders__reorder-btn,
.ff-orders__card .ff-orders__reorder-form button {
    cursor: pointer;
}


/* ============================================================
   ORDER DETAIL VIEW (.ff-order-view) — sales/order/view page
   ============================================================
   Premium card layout matching My Orders / invoice. Top-right
   action bar with consistent .ff-btn-primary / .ff-btn-outline
   chips (Back / Print invoice / Reorder), then the card itself
   with header / stats / addresses / tracking / items / totals. */

.ff-order-view {
    width: 100%;
}

/* Top action bar — sits above the card, right-aligned. */
.ff-order-view__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 0 20px 0;
}
.ff-order-view__reorder-form {
    display: inline-flex;
    margin: 0;
}

/* The card itself — reuses .ff-orders__card visual but no
   stretched-link (the customer is already in the detail view) */
.ff-order-view__card {
    cursor: default !important;
}
.ff-order-view__card:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.ff-order-view__card::before {
    /* No spark animation — this isn't a clickable summary card. */
    display: none;
}

/* Addresses + methods grid — 2-col on desktop, single col on mobile. */
.ff-order-view__addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
    padding: 22px 0;
    margin: 0 0 4px 0;
    border-bottom: 1px solid #f0f0f3;
    border-top: 1px solid #f0f0f3;
}
@media (min-width: 1024px) {
    .ff-order-view__addresses {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.ff-order-view__addr {
    min-width: 0;
}
.ff-order-view__addr-label {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6e6e73;
    margin: 0 0 8px 0;
}
.ff-order-view__addr-body {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #1d1d1f;
    margin: 0;
    font-style: normal;
}

/* Tracking info — small list of carrier + tracking number rows. */
.ff-order-view__tracking {
    margin: 22px 0;
    padding: 18px 22px;
    background: rgba(0, 113, 227, 0.05);
    border: 1px solid rgba(0, 113, 227, 0.18);
    border-radius: 14px;
}
.ff-order-view__tracking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    font-size: 0.9375rem;
}
.ff-order-view__tracking-list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.ff-order-view__tracking-carrier {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d1d1f;
}
.ff-order-view__tracking-num {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    color: var(--ff-blue, #0071e3);
    font-feature-settings: "tnum";
    font-weight: 500;
}

/* Items section — reuses .ff-orders__items grid but with item-level
   product totals on the right, not just qty/price line. */
.ff-order-view__items-section {
    margin: 22px 0;
}
.ff-order-view__items {
    grid-template-columns: 1fr !important;
    gap: 12px;
}
.ff-order-view__item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 16px !important;
    padding: 14px 16px !important;
    background: transparent;
    border: 1px solid #ececf0;
    border-radius: 12px;
}
.ff-order-view__item-sku {
    font-size: 0.75rem;
    color: #6e6e73;
    margin: 2px 0 4px 0;
    font-feature-settings: "tnum";
}
.ff-order-view__item-total {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d1d1f;
    text-align: right;
    white-space: nowrap;
    font-feature-settings: "tnum";
}

/* Totals stack — reuses the .ff-invoice__totals-list structure
   from the print invoice (same grid + :has() pattern). The view
   page renders order_totals directly from the layout, which
   outputs the same flat <div> pair format. */
.ff-order-view__totals-row {
    display: flex;
    justify-content: flex-end;
    margin: 22px 0 0 0;
    padding-top: 22px;
    border-top: 1px solid #f0f0f3;
}
.ff-order-view__totals-list {
    max-width: 360px;
    width: 100%;
}

/* Mobile tweaks for the order view. */
@media (max-width: 720px) {
    .ff-order-view__actions {
        justify-content: stretch;
    }
    .ff-order-view__actions > * {
        flex: 1 1 30%;
    }
    .ff-order-view__addresses {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ff-order-view__item {
        grid-template-columns: 60px minmax(0, 1fr) !important;
        gap: 12px !important;
    }
    .ff-order-view__item-total {
        grid-column: 2;
        text-align: left;
        font-size: 1rem;
    }
}


/* My Warranties page — the template renders its own branded
   `.ff-warranty-account__header > h1` ("My Warranties") inside the
   content card. Magento layout ALSO renders an outer page-title
   that comes through as "MY WARRANTIES — FUSION FIREARMS" (full
   document title). Hide the outer page-title on this specific
   page so the in-template H1 is the single source of truth.
   Body class is `ff_warranty-account-index` (Fusion_Warranty
   module's controller route, with underscore separator). */
body.ff_warranty-account-index .page-title-wrapper,
body.ff_warranty-account-index .page-main > .container > h1,
body.ff_warranty-account-index .page-main > .container {
    display: none !important;
}

/* ============================================================
   ACCOUNT CARDS — Fusion signature: spark border on INTERACTIVE
   cards only.
   ============================================================
   Treven's note: spark animation should only be on cards that
   are actually clickable. Display-only cards (Account Info,
   Newsletters, Address Book inner billing/shipping panels)
   should be plain. The spark + pop apply to:

     1. Each row in the My Orders list (each row is a clickable
        order — clicking "View Order" navigates to detail).
     2. Each warranty card on My Warranties (clicking "Request
        Service" navigates to a deep-linked service form).

   Recent Orders / Account Info / Newsletters / Address Book on
   the dashboard stay plain — they are containers for child
   actions, not themselves a click target. */

body.sales-order-history table.data.table tr,
body.ff_warranty-account-index .ff-warranty-card,
body.account .ff-warranty-card {
    position: relative;
    isolation: isolate;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Slow pop-up on hover (interactive cards only) */
body.sales-order-history table.data.table tr:hover,
body.ff_warranty-account-index .ff-warranty-card:hover,
body.account .ff-warranty-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08),
                0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* Spark border pseudo — same conic-gradient + mask trick as the
   product cards. Inset:-2px so the border sits OUTSIDE the card's
   own 1px hairline. */
body.sales-order-history table.data.table tr::before,
body.ff_warranty-account-index .ff-warranty-card::before,
body.account .ff-warranty-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    padding: 2px;
    background: conic-gradient(
        from var(--ff-card-angle),
        transparent 0%,
        transparent 50%,
        var(--ff-card-line-color) 62%,
        var(--ff-card-line-color) 68%,
        transparent 78%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

body.sales-order-history table.data.table tr:hover::before,
body.ff_warranty-account-index .ff-warranty-card:hover::before,
body.account .ff-warranty-card:hover::before {
    opacity: 1;
    animation: ff-card-spin 3.2s linear infinite,
               ff-card-color-cycle 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.sales-order-history table.data.table tr:hover::before,
    body.ff_warranty-account-index .ff-warranty-card:hover::before,
    body.account .ff-warranty-card:hover::before {
        animation: none !important;
        --ff-card-line-color: #0071e3;
    }
    body.sales-order-history table.data.table tr:hover,
    body.account .ff-warranty-card:hover {
        transform: none !important;
    }
}

/* ============================================================
   ACCOUNT BUTTONS — match site-standard primary CTAs
   ============================================================
   "Manage Addresses", "Edit", "Change Password", "Edit Address",
   "Request Service", "View Order", "Reorder", and "+ Register
   another firearm" all need to look like the primary CTAs used
   throughout the site (navy → brand-blue with translateY lift).
   Using the existing `.ff-btn-primary` styling. */

/* Primary navy → brand-blue pill — applied to high-intent CTAs */
body.account .ff-warranty-card__action--primary,
body.account .ff-warranty-account__cta,
body.account .column.main .actions a.action.primary,
body.account .column.main .action.primary,
body.account .column.main button.action.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #0a1929 !important;
    color: #ffffff !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 14px 28px !important;
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.18) !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

body.account .ff-warranty-card__action--primary:hover,
body.account .ff-warranty-account__cta:hover,
body.account .column.main .action.primary:hover,
body.account .column.main button.action.primary:hover {
    background: var(--ff-blue, #0071e3) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.30) !important;
    text-decoration: none !important;
    outline: none !important;
}

body.account .ff-warranty-card__action--primary:focus-visible,
body.account .ff-warranty-account__cta:focus-visible,
body.account .column.main .action.primary:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 3px !important;
}

/* Secondary outlined pills — Edit / Manage / View Order / Reorder.
   Brand-blue ring on white, fills brand-blue on hover. */
body.account .column.main .block-title a,
body.account .column.main .actions a:not(.action.primary):not(.btn-primary),
body.account .column.main .actions-toolbar a:not(.primary),
body.account .ff-warranty-account__cta-secondary,
body.account .box-actions a {
    color: var(--ff-blue, #0071e3) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

body.account .column.main .actions a.action[href*="reorder"],
body.account .column.main .actions a.action[title*="View"],
body.sales-order-history .col.actions a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 18px !important;
    border: 1.5px solid var(--ff-blue, #0071e3) !important;
    border-radius: 9999px !important;
    color: var(--ff-blue, #0071e3) !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}

body.account .column.main .actions a.action[href*="reorder"]:hover,
body.account .column.main .actions a.action[title*="View"]:hover,
body.sales-order-history .col.actions a:hover {
    background: var(--ff-blue, #0071e3) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* ============================================================
   ACCOUNT WELCOME HEADER — "Your Account" + name + email subtitle
   ============================================================
   Replaces the bare "MY ACCOUNT" h1 with a richer welcome header.
   Treven's reference design shows the customer's name + email
   directly under the page title. Magento doesn't surface the
   logged-in customer in the page-title block, so we add it via
   a JS file (web/js/ff-account-greeting.js) that reads the
   customer-data localStorage. The H1 itself stays plain text
   so SEO + screen readers stay happy. */

body.account .ff-account-greeting,
body.customer-address-index .ff-account-greeting,
body.sales-order-history .ff-account-greeting,
body.sales-order-view .ff-account-greeting {
    display: block !important;
    margin: 4px 0 24px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1rem !important;
    color: #6e6e73 !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.account .ff-account-greeting strong {
    color: #1d1d1f !important;
    font-weight: 600 !important;
}

/* Defensive — Hyvä can render the page-title under different body
   classes depending on route registration. Hide the outer h1 anywhere
   the in-template warranty header is rendered, so we never duplicate. */
.account .page-main > .container:has(+ .columns .ff-warranty-account__header) {
    display: none !important;
}

/* Login / Register forms */
.customer-account-login .page-main {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px var(--ff-container-pad);
}
/* === Create Account page — mirrors the Become a Dealer page (PRO-219).
   Reuses .ff-dealer-hero + .ff-dealer-form (same as the dealer + contact
   pages) and full-bleeds the sections to the viewport. Supersedes the old
   600px-centered treatment. The site-wide html/body overflow-x:clip guard
   absorbs the 100vw scrollbar width on mobile. === */
/* Un-box every wrapper. body + #maincontent raise specificity above Hyvä's
   base rules, and display:block defeats the flex .columns shrinking the main
   column to its content width (the reason the hero rendered as a centered box
   instead of a full band). */
body.customer-account-create #maincontent.page-main,
body.customer-account-create .page-main,
body.customer-account-create .columns,
body.customer-account-create.page-layout-1column .columns,
body.customer-account-create .column.main {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Bulletproof full-bleed: position-based breakout works no matter how the
   column is sized or centered (the calc(50% - 50vw) margin variant silently
   fails when the column is not full-width). */
body.customer-account-create .ff-dealer-hero,
body.customer-account-create .ff-dealer-benefits,
body.customer-account-create .ff-dealer-form {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}
.customer-account-create .page-title-wrapper { display: none !important; }
/* Beat the site-wide h1/h2 colors so the hero title stays white, form title ink. */
body.customer-account-create .ff-dealer-hero__title { color: #ffffff !important; }
body.customer-account-create .ff-dealer-form__title { color: #1d1d1f !important; }

/* Register form helpers. The fields themselves reuse .ff-dealer-form__* so they
   match the dealer form exactly; these only cover the password show/hide button,
   the newsletter checkbox, and the inline sign-in link. */
.ff-register__pw { position: relative; display: flex; align-items: center; }
.ff-register__pw .ff-register__pw-input { padding-right: 48px; }
.ff-register__pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 0; background: transparent;
    color: #6e6e73; cursor: pointer; border-radius: 8px; transition: color 0.2s ease;
}
.ff-register__pw-toggle:hover,
.ff-register__pw-toggle:focus-visible { color: var(--ff-blue, #00A3FF); outline: none; }
.ff-register__newsletter { margin-top: 2px; }
.ff-register__check {
    display: flex; align-items: center; gap: 10px; font-family: inherit;
    font-size: 0.95rem; font-weight: 400; text-transform: none; letter-spacing: 0;
    color: #1d1d1f; cursor: pointer;
}
.ff-register__check input[type="checkbox"] {
    width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--ff-blue, #00A3FF);
}
.ff-register__signin { color: var(--ff-blue, #00A3FF); font-weight: 600; }
.ff-register__signin:hover { text-decoration: underline; }

/* PRO-181 (2026-05-19): single-column centered login. Treven asked
   for a single centered card with the new-customer CTA at the bottom
   (rendered inline by form/login.phtml as .ff-login-newcustomer)
   instead of the vendor two-column layout. The block-new-customer
   block is removed via customer_account_login.xml referenceBlock
   remove="true", so only .card sits inside .login-container. */
.customer-account-login .login-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.customer-account-login .login-container > .card {
    width: 100% !important;
    max-width: 480px !important;
    min-width: 0 !important;
}

/* Narrower page container for the single card */
.customer-account-login .page-main {
    max-width: 600px !important;
}

.customer-account-login .page-title-wrapper {
    text-align: center;
    margin-bottom: 40px !important;
}

.customer-account-login .page-title-wrapper h1 {
    font-family: var(--ff-font-heading) !important;
    font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #1d1d1f !important;
}

/* Form field labels — Apple style: above input, not inline, blue asterisk beside.
   PRO-181: extended the field/label/input rules below to also cover
   `.contact-index-index` so the Contact page inherits the same 52px
   input + brand-blue focus visual as login/forgot/create. */
.customer-account-login .field,
.customer-account-create .field,
.customer-account-forgotpassword .field,
.contact-index-index .field {
    display: block;
    margin-bottom: 16px;
}

.customer-account-login .field > .label,
.customer-account-login .field > label,
.customer-account-create .field > .label,
.customer-account-create .field > label,
.customer-account-forgotpassword .field > .label,
.contact-index-index .field > .label,
.contact-index-index .field > label {
    display: inline-block !important;
    width: auto !important;
    margin-bottom: 6px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #6e6e73 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    float: none !important;
    text-align: left !important;
}

.customer-account-login .field > .control,
.customer-account-create .field > .control,
.customer-account-forgotpassword .field > .control,
.contact-index-index .field > .control {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
}

/* Inputs — premium 52 px tall, 12 px radius, 1.5 px border, brand-blue
   focus ring. Matches the contact page + dealer signup form so the
   sign-in / register / forgot flows feel like a single design system. */
.customer-account-login input[type="text"],
.customer-account-login input[type="email"],
.customer-account-login input[type="tel"],
.customer-account-login input[type="password"],
.customer-account-login input.form-input,
.customer-account-create input[type="text"],
.customer-account-create input[type="email"],
.customer-account-create input[type="tel"],
.customer-account-create input[type="password"],
.customer-account-create input.form-input,
.customer-account-forgotpassword input[type="text"],
.customer-account-forgotpassword input[type="email"],
.customer-account-forgotpassword input.form-input,
.contact-index-index input[type="text"],
.contact-index-index input[type="email"],
.contact-index-index input[type="tel"],
.contact-index-index input.form-input,
.contact-index-index textarea.form-input {
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1rem !important;
    color: #1d1d1f !important;
    background: #ffffff !important;
    border: 1.5px solid #d2d2d7 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.customer-account-login input:focus,
.customer-account-create input:focus,
.customer-account-forgotpassword input:focus,
.contact-index-index input:focus,
.contact-index-index textarea:focus {
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
    outline: none !important;
}

.customer-account-login input::placeholder,
.customer-account-create input::placeholder,
.customer-account-forgotpassword input::placeholder {
    color: #6e6e73 !important;
    opacity: 1 !important;
}

/* Password reveal button — sits inline with the password input. Match
   input height + sit on the right edge so the affordance feels native
   to the field rather than tacked on. */
.customer-account-login .field.password .control,
.customer-account-create .field .control.flex,
.customer-account-create .control.flex {
    position: relative !important;
    align-items: stretch !important;
}
.customer-account-login .field.password .control input,
.customer-account-create .field .control.flex input.form-input {
    padding-right: 56px !important;
}
.customer-account-login .field.password .control button[type="button"],
.customer-account-create .field .control.flex button[type="button"],
.customer-account-create .control.flex button[type="button"] {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 8px !important;
    background: transparent !important;
    border: 0 !important;
    color: #6e6e73 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: color 0.15s ease, background 0.15s ease !important;
}
.customer-account-login .field.password .control button[type="button"]:hover,
.customer-account-create .field .control.flex button[type="button"]:hover,
.customer-account-create .control.flex button[type="button"]:hover {
    color: var(--ff-blue, #0071e3) !important;
    background: rgba(0, 113, 227, 0.08) !important;
}

/* Card styling for both blocks — Apple clean flat cards */
.customer-account-login .block-customer-login,
.customer-account-login .block-new-customer,
.customer-account-login .login-container > .card,
.customer-account-create .form-create-account {
    background: #ffffff !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 40px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) !important;
    display: flex;
    flex-direction: column;
}

/* Inner wrappers (sometimes Hyvä wraps forms) — remove all gray boxes/padding */
.customer-account-login .card .fieldset,
.customer-account-login .block-customer-login .fieldset,
.customer-account-login .block-customer-login > div,
.customer-account-login .login-container .card > div,
.customer-account-login form.form-login,
.customer-account-login form.form-login > .fieldset {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Required asterisk — make subtle blue instead of loud red */
.customer-account-login .field.required > .label:after,
.customer-account-login .field._required > .label:after,
.customer-account-login label em.required,
.customer-account-login .required > em,
.customer-account-login .field .label em {
    color: #0071e3 !important;
    opacity: 0.7;
}

/* Block titles */
.customer-account-login .block-title strong,
.customer-account-login .block-new-customer h2,
.customer-account-create .page-title {
    font-family: var(--ff-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.015em;
    color: #1d1d1f;
    margin-bottom: 8px;
}

/* Description text */
.customer-account-login .block-customer-login p,
.customer-account-login .block-new-customer p {
    color: #6e6e73;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Form fieldset cleanup */
.customer-account-login .fieldset.login {
    border: none;
    padding: 0;
    margin: 0;
}

/* Submit buttons — premium navy default → brand-blue on hover with
   translateY lift + shadow. 56 px tall, 12 px radius, Oswald uppercase.
   Same treatment as contact form / dealer signup so primary CTAs are
   visually consistent across every account flow. */
.customer-account-login .actions-toolbar .btn.btn-primary,
.customer-account-login .actions-toolbar button.btn.btn-primary,
.customer-account-login .actions-toolbar .action.primary,
.customer-account-login .actions-toolbar .action.submit,
.customer-account-create .actions-toolbar .btn.btn-primary,
.customer-account-create .actions-toolbar button.btn.btn-primary,
.customer-account-create .actions-toolbar .action.primary,
.customer-account-create .actions-toolbar .action.submit,
.customer-account-forgotpassword .actions-toolbar .btn.btn-primary,
.customer-account-forgotpassword .actions-toolbar button.btn.btn-primary,
.customer-account-forgotpassword .actions-toolbar .action.primary,
.customer-account-forgotpassword .actions-toolbar .action.submit {
    display: inline-flex !important;
    width: 100% !important;
    height: 56px !important;
    padding: 0 32px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0a1929 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16) !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
.customer-account-login .actions-toolbar .btn.btn-primary:hover,
.customer-account-login .actions-toolbar button.btn.btn-primary:hover,
.customer-account-login .actions-toolbar .action.primary:hover,
.customer-account-create .actions-toolbar .btn.btn-primary:hover,
.customer-account-create .actions-toolbar button.btn.btn-primary:hover,
.customer-account-create .actions-toolbar .action.primary:hover,
.customer-account-forgotpassword .actions-toolbar .btn.btn-primary:hover,
.customer-account-forgotpassword .actions-toolbar button.btn.btn-primary:hover,
.customer-account-forgotpassword .actions-toolbar .action.primary:hover {
    background: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30) !important;
}

/* "Create an Account" anchor on the login page — secondary CTA on the
   New Customers card. Also full-width to mirror the Sign In button so
   the two cards balance visually. */
.customer-account-login .block-new-customer .actions-toolbar .btn.btn-primary,
.customer-account-login .block-new-customer .actions-toolbar a.btn.btn-primary {
    width: 100% !important;
}

/* Actions toolbar layout — submit button stacks above the secondary
   forgot-password / go-back link, both centered. */
.customer-account-login .actions-toolbar,
.customer-account-create .actions-toolbar,
.customer-account-forgotpassword .actions-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 28px !important;
    align-items: stretch !important;
}

/* Secondary text links inside the actions toolbar (forgot password,
   go back). Underlined on hover, brand-blue, centered. */
.customer-account-login .actions-toolbar a,
.customer-account-create .actions-toolbar a,
.customer-account-forgotpassword .actions-toolbar a,
.customer-account-forgotpassword .actions-toolbar .secondary a {
    color: var(--ff-blue, #0071e3) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-align: center !important;
    padding: 4px 0 !important;
    transition: color 0.15s ease !important;
}
.customer-account-login .actions-toolbar a:hover,
.customer-account-create .actions-toolbar a:hover,
.customer-account-forgotpassword .actions-toolbar a:hover {
    color: #0a1929 !important;
    text-decoration: underline !important;
}

/* Required asterisk — soft red, immediately recognizable. Override
   the earlier blue rule above so login/create/forgot all read the
   same and match the contact form. */
.customer-account-login .field.required > .label::after,
.customer-account-login .field._required > .label::after,
.customer-account-login .field.required > label::after,
.customer-account-login .field._required > label::after,
.customer-account-create .field.required > .label::after,
.customer-account-create .field._required > .label::after,
.customer-account-create .field.required > label::after,
.customer-account-create .field._required > label::after,
.customer-account-forgotpassword .field.required > .label::after,
.customer-account-forgotpassword .field._required > .label::after {
    content: ' *' !important;
    color: #d70101 !important;
    opacity: 1 !important;
    margin-left: 2px !important;
}

/* Brand-blue custom checkboxes on .field.choice form rows site-wide.
   Replaces Hyvä's tiny round role="switch" default with a flat 20×20
   square + brand-blue fill + white check on :checked. Applies anywhere
   Magento emits its standard `.field.choice` container — Create Account
   (newsletter / shopping-assist), Login (Remember Me), Forgot, Cart
   (gift / terms), Checkout (terms / save info), Contact, etc. Excludes
   product-options checkboxes (those have their own `.options-list`
   tile-style elsewhere in this stylesheet). */
.field.choice {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 12px 0 !important;
}
.field.choice input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #ffffff !important;
    border: 1.5px solid #d2d2d7 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}
.field.choice input[type="checkbox"]:checked {
    background: var(--ff-blue, #0071e3) !important;
    border-color: var(--ff-blue, #0071e3) !important;
}
.field.choice input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}
.field.choice input[type="checkbox"]:focus-visible {
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
    outline: none !important;
}
.field.choice .label,
.field.choice label {
    margin: 0 !important;
    font-size: 0.9375rem !important;
    color: #1d1d1f !important;
    cursor: pointer !important;
}

/* Create Account: clean up the two-column "Personal Info" / "Sign-in
   Info" fieldset cards so they read as proper grouped panels rather
   than the default Hyvä `.my-8.card` margin-stacked look. */
.customer-account-create .registration-container .form-create-account fieldset.card {
    margin: 0 !important;
    padding: 32px !important;
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}
.customer-account-create .registration-container .form-create-account fieldset.card legend {
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #e8e8ed !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #1d1d1f !important;
}
.customer-account-create .registration-container .form-create-account .md\:grid {
    gap: 24px !important;
}
.customer-account-create .registration-container .form-create-account .actions-toolbar {
    margin-top: 32px !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Forgot password page card — single email field, tight footprint,
   matches the login card visual language. */
.customer-account-forgotpassword .columns .column.main {
    max-width: 520px !important;
    margin: 0 auto !important;
}
.customer-account-forgotpassword .columns .column.main .card,
.customer-account-forgotpassword #user_forgotpassword {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 18px !important;
    padding: 40px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 520px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}
.customer-account-forgotpassword #user_forgotpassword fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.customer-account-forgotpassword #user_forgotpassword fieldset.mb-8 {
    color: #6e6e73 !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
}
.customer-account-forgotpassword .page-title-wrapper h1 {
    font-family: var(--ff-font-heading) !important;
    font-size: clamp(2rem, 3.5vw, 2.5rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    text-align: center !important;
    margin-bottom: 32px !important;
}

/* Password strength meter — quieter inline label rather than the
   default loud pill. Sits below the password field with breathing
   room. */
.customer-account-create #password-strength-meter-container {
    margin-top: 8px !important;
}
.customer-account-create #password-strength-meter {
    font-size: 0.8125rem !important;
    color: #6e6e73 !important;
    font-weight: 500 !important;
}


/* ============================================================
   SECTION 20: MESSAGES / ALERTS
   ============================================================ */

/* Base message styling */
.message {
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    font-size: 1.125rem;
    line-height: 1.5;
    border: 1px solid;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Success */
.message.success,
.message-success {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.2);
    color: var(--ff-green);
}

/* Error */
.message.error,
.message-error {
    background: rgba(255, 45, 45, 0.08);
    border-color: rgba(255, 45, 45, 0.2);
    color: var(--ff-red);
}

/* Warning */
.message.warning,
.message-warning {
    background: rgba(255, 184, 0, 0.08);
    border-color: rgba(255, 184, 0, 0.2);
    color: var(--ff-yellow);
}

/* Info / notice */
.message.info,
.message.notice,
.message-notice {
    background: rgba(0, 163, 255, 0.08);
    border-color: rgba(0, 163, 255, 0.2);
    color: var(--ff-blue);
}

/* Page messages container */
.page.messages {
    max-width: var(--ff-container-max);
    margin: 0 auto;
    padding: 16px var(--ff-container-pad) 0;
}

/* Validation errors — Magento renders these inline below a failed
   form field (e.g. "Email is required" under the email input on
   /customer/account/login or /customer/account/create when the user
   submits an incomplete form). Premium ecom (Apple, SIG, Williams-
   Sonoma) prefix these with a small warning glyph so the error reads
   as a recognized validation state rather than orphaned red text. */
.mage-error,
.field-error {
    color: var(--ff-red);
    font-size: 0.875rem;
    line-height: 1.4;
    margin-top: 6px;
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
}

/* Inline 14×14 warning-triangle SVG (encoded as data: URL so we don't
   add any external dependency). Stroke color baked into the SVG to
   match var(--ff-red) ≈ #e0245e. align-items:flex-start above keeps
   the icon at the top when the message wraps to 2 lines. */
.mage-error::before,
.field-error::before {
    content: '';
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0245e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Failed input gets a soft red glow ring matching our brand-blue
   focus-ring language — communicates "this field needs attention"
   even before the user reads the error message. */
input.mage-error,
select.mage-error,
textarea.mage-error {
    border-color: var(--ff-red) !important;
    box-shadow: 0 0 0 4px rgba(224, 36, 94, 0.12) !important;
}

/* Cookie notice */
.cookie-status-message {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    border-radius: 12px;
    color: var(--ff-text-secondary);
    padding: 16px 20px;
}


/* ============================================================
   SECTION 21: BREADCRUMBS, PAGINATION, TOOLBAR
   ============================================================ */

/* Breadcrumbs */
.breadcrumbs {
    padding: 16px 0;
    margin-bottom: 8px;
}

.breadcrumbs .items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.breadcrumbs .item {
    font-size: 1rem;
    color: var(--ff-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumbs .item a {
    color: var(--ff-text-muted);
    transition: color 0.2s var(--ff-ease);
    text-decoration: none;
}

.breadcrumbs .item a:hover {
    color: var(--ff-blue);
    outline: none;
}
.breadcrumbs .item a:focus-visible {
    color: var(--ff-blue);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
    border-radius: 4px;
}

.breadcrumbs .item:last-child {
    color: var(--ff-text-primary);
}

/* Hide CSS-generated separator — HTML already has <span class="separator"> */
.breadcrumbs .item + .item::before {
    content: none !important;
    display: none !important;
}

/* Pagination */
.pages {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

.pages .items {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

.pages .item {
    display: flex;
}

.pages .item a,
.pages .item strong {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    transition: all 0.2s var(--ff-ease);
    text-decoration: none;
}

.pages .item a {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    color: var(--ff-text-secondary);
}

.pages .item a:hover {
    background: var(--ff-bg-card-hover);
    border-color: var(--ff-blue);
    color: var(--ff-text-primary);
    outline: none;
}
.pages .item a:focus-visible {
    background: var(--ff-bg-card-hover);
    border-color: var(--ff-blue);
    color: var(--ff-text-primary);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

.pages .item.current strong {
    background: var(--ff-blue);
    color: #fff;
    border: 1px solid var(--ff-blue);
}

.pages .item .action.next,
.pages .item .action.previous {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    color: var(--ff-text-secondary);
}

.pages .item .action.next:hover,
.pages .item .action.previous:hover {
    background: var(--ff-bg-card-hover);
    border-color: var(--ff-blue);
    color: var(--ff-blue);
    outline: none;
}
.pages .item .action.next:focus-visible,
.pages .item .action.previous:focus-visible {
    background: var(--ff-bg-card-hover);
    border-color: var(--ff-blue);
    color: var(--ff-blue);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

/* Toolbar */
.toolbar.toolbar-products {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--ff-border);
}

.toolbar .toolbar-amount {
    color: var(--ff-text-muted);
    font-size: 1.0625rem;
}

.toolbar .toolbar-amount .toolbar-number {
    color: var(--ff-text-primary);
    font-weight: 600;
}

/* Sorter */
.toolbar .toolbar-sorter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar .toolbar-sorter .sorter-label {
    color: var(--ff-text-muted);
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.toolbar .toolbar-sorter select {
    background: var(--ff-bg-input);
    border: 1px solid var(--ff-border);
    border-radius: 8px;
    color: var(--ff-text-primary);
    padding: 8px 36px 8px 12px;
    font-size: 1.0625rem;
    min-width: 180px;
}

/* View mode (grid/list toggle) */
.toolbar .modes {
    display: flex;
    gap: 4px;
}

.toolbar .modes-mode {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    border-radius: 8px;
    color: var(--ff-text-muted);
    transition: all 0.2s var(--ff-ease);
    cursor: pointer;
}

.toolbar .modes-mode:hover,
.toolbar .modes-mode.active {
    background: var(--ff-bg-card-hover);
    border-color: var(--ff-blue);
    color: var(--ff-blue);
    outline: none;
}
.toolbar .modes-mode:focus-visible {
    background: var(--ff-bg-card-hover);
    border-color: var(--ff-blue);
    color: var(--ff-blue);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

/* Limiter (items per page) */
.toolbar .limiter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar .limiter .limiter-label {
    color: var(--ff-text-muted);
    font-size: 1.0625rem;
}

.toolbar .limiter select {
    background: var(--ff-bg-input);
    border: 1px solid var(--ff-border);
    border-radius: 8px;
    color: var(--ff-text-primary);
    padding: 8px 36px 8px 12px;
    font-size: 1.0625rem;
}

/* Layered navigation / filters */
.sidebar .block-title strong,
.filter-title strong {
    font-family: var(--ff-font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ff-text-primary);
}

.sidebar .filter-options-title {
    font-family: var(--ff-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ff-text-primary);
    padding: 12px 0;
    border-bottom: 1px solid var(--ff-border-subtle);
    cursor: pointer;
    transition: color 0.2s var(--ff-ease);
    font-size: 1.125rem;
}

.sidebar .filter-options-title:hover {
    color: var(--ff-blue);
    outline: none;
}

/* Keyboard focus on PLP filter-section title (Filter By: Caliber /
   Action / Stock & Finish / etc accordion summaries) — same brand-
   blue color shift as hover plus a 2px brand-blue outline ring
   with 2px offset for clear keyboard nav through the filter
   accordion. */
.sidebar .filter-options-title:focus-visible {
    color: var(--ff-blue);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
    border-radius: 3px;
}

.sidebar .filter-options-content {
    padding: 12px 0;
}

.sidebar .filter-options-content .item {
    padding: 6px 0;
}

.sidebar .filter-options-content .item a {
    color: var(--ff-text-secondary);
    font-size: 1.125rem;
    transition: color 0.2s var(--ff-ease);
}

.sidebar .filter-options-content .item a:hover {
    color: var(--ff-blue);
}

.sidebar .filter-options-content .item .count {
    color: var(--ff-text-muted);
    font-size: 1rem;
}

/* Active filters */
.filter-current .items .item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ff-blue-subtle);
    border: 1px solid rgba(0, 163, 255, 0.2);
    border-radius: 50px;
    padding: 4px 12px;
    margin: 0 4px 4px 0;
    font-size: 1rem;
    color: var(--ff-blue);
}

.filter-current .action.remove {
    color: var(--ff-blue);
    font-size: 1.0625rem;
    transition: color 0.2s var(--ff-ease);
}

.filter-current .action.remove:hover {
    color: var(--ff-red);
    outline: none;
}
.filter-current .action.remove:focus-visible {
    color: var(--ff-red);
    outline: 2px solid var(--ff-red, #d70015);
    outline-offset: 2px;
    border-radius: 4px;
}

/* "Clear All" filters action — Hyvä emits a plain `<a class="text-sm
   text-fg-secondary">Clear All</a>` inside `.filter-actions` (no
   `.action.clear` class), so the previous selector never matched the
   rendered markup and the link rendered as bland body text. Now: a
   visible ghost pill (Oswald uppercase, 1px #d2d2d7 border, 980px
   radius) with destructive-intent hover (soft red bg + red text +
   red border, brand alarm color #ef4444). The `::before` "×" prefix
   reinforces the "remove" affordance. */
.filter-actions a,
.filter-actions .action.clear,
.filter-current + .filter-actions a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: transparent !important;
    color: #6e6e73 !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 980px !important;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease !important;
}

.filter-actions a::before,
.filter-actions .action.clear::before {
    content: '\00d7'; /* multiplication sign — visually a clean × */
    font-size: 1.125rem;
    line-height: 0;
    font-weight: 600;
    margin-top: -2px;
}

.filter-actions a:hover,
.filter-actions .action.clear:hover {
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    background: rgba(239, 68, 68, 0.06) !important;
    transform: translateY(-1px);
    outline: none !important;
}

/* Keyboard focus on PLP "Clear All" filter pill — same red
   destructive-intent treatment as hover plus a 2px red outline
   ring with 2px offset. Red ring instead of brand-blue here
   because the action is destructive (clears applied filters);
   matches the red color language used by the link's color +
   border on hover/focus. */
.filter-actions a:focus-visible,
.filter-actions .action.clear:focus-visible {
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    background: rgba(239, 68, 68, 0.06) !important;
    transform: translateY(-1px);
    outline: 2px solid #ef4444 !important;
    outline-offset: 2px !important;
}


/* ============================================================
   SECTION 22: ANIMATIONS & KEYFRAMES
   ============================================================ */

/* Fade in up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ff-animate-in {
    animation: fadeInUp 0.6s var(--ff-ease) forwards;
}

.ff-animate-in-delay-1 { animation-delay: 0.1s; }
.ff-animate-in-delay-2 { animation-delay: 0.2s; }
.ff-animate-in-delay-3 { animation-delay: 0.3s; }
.ff-animate-in-delay-4 { animation-delay: 0.4s; }
.ff-animate-in-delay-5 { animation-delay: 0.5s; }

/* Slide down (for dropdowns) */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale in */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ff-scale-in {
    animation: scaleIn 0.4s var(--ff-ease) forwards;
}

/* Fade in */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ff-fade-in {
    animation: fadeIn 0.5s var(--ff-ease) forwards;
}

/* Pulse glow (for CTA emphasis) */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 163, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 163, 255, 0.4);
    }
}

.ff-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Slide in from left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide in from right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Float (for decorative elements) */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.ff-float {
    animation: float 3s ease-in-out infinite;
}

/* Spin (for loading) */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ff-spin {
    animation: spin 1s linear infinite;
}

/* Progress bar fill */
@keyframes progressFill {
    from { width: 0; }
    to { width: var(--progress, 100%); }
}

/* Count up (number animation hook) */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Smooth hover transition defaults */
.ff-hover-lift {
    transition: transform 0.4s var(--ff-ease), box-shadow 0.4s var(--ff-ease);
}

.ff-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--ff-shadow-lift);
}

.ff-hover-scale {
    transition: transform 0.3s var(--ff-ease);
}

.ff-hover-scale:hover {
    transform: scale(1.03);
}

.ff-hover-bright {
    transition: filter 0.3s var(--ff-ease);
}

.ff-hover-bright:hover {
    filter: brightness(1.1);
}


/* ============================================================
   SECTION 23: RESPONSIVE MEDIA QUERIES
   ============================================================ */

/* -- 1280px: Large desktop adjustments -- */
@media (max-width: 1280px) {
    .ff-flagship-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ff-category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .ff-footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }

    .products-grid .product-items,
    .products-grid ul,
    .products.list .product-items {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* -- 1024px: Tablet landscape -- */
@media (max-width: 1024px) {
    :root {
        --ff-section-pad-desktop: 64px;
    }

    .ff-hero {
        min-height: 70vh;
        padding: 80px var(--ff-container-pad) 64px;
    }

    .ff-hero h1 {
        font-size: clamp(2.25rem, 5vw, 3.5rem);
    }

    .ff-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ff-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ff-services-card {
        padding: 48px 32px;
    }

    .ff-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .products-grid .product-items,
    .products.list .product-items {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .ff-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .account .page-main {
        grid-template-columns: 220px 1fr;
        gap: 24px;
    }

    /* Navigation text size */
    nav.navigation > ul > li > a,
    .nav-sections a.level-top,
    .level-top {
        padding: 12px 14px;
        font-size: 1.0625rem;
    }
}

/* -- 768px: Tablet portrait -- */
@media (max-width: 768px) {
    :root {
        --ff-section-pad-desktop: 48px;
        --ff-container-pad: 20px;
    }

    body {
        font-size: 16px;
    }

    p {
        font-size: 1rem;
    }

    .ff-hero {
        min-height: 60vh;
        padding: 64px var(--ff-container-pad) 48px;
    }

    .ff-hero h1 {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    .ff-hero p {
        font-size: 1.0625rem;
    }

    .ff-section-header {
        margin-bottom: 40px;
    }

    .ff-flagship-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ff-category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .ff-category-card {
        padding: 24px 12px;
    }

    /* Force 1 product per row on all mobile/small-tablet — avoids squished cards */
    .products-grid .product-items,
    .products-grid ul,
    .products.list .product-items {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        max-width: 520px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ff-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ff-services-grid {
        grid-template-columns: 1fr;
    }

    .ff-services-card {
        padding: 40px 24px;
    }

    .ff-newsletter {
        padding: 40px 24px;
    }

    .ff-newsletter-form {
        flex-direction: column;
    }

    .ff-newsletter-form button {
        width: 100%;
    }

    .ff-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .ff-footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .ff-footer-legal {
        justify-content: center;
    }

    /* Product list view goes to grid on tablet */
    .products.list .product-item {
        grid-template-columns: 1fr;
    }

    /* Account page stack */
    .account .page-main {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .account .sidebar-main {
        position: static;
    }

    /* Cart */
    .cart.table-wrapper {
        overflow-x: auto;
    }

    /* Checkout */
    .opc-wrapper .fieldset {
        padding: 16px;
    }

    .opc-sidebar {
        padding: 24px;
    }

    /* Toolbar adjustments */
    .toolbar.toolbar-products {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar .toolbar-sorter {
        width: 100%;
    }

    .toolbar .toolbar-sorter select {
        flex: 1;
    }

    /* Search full width */
    #search-content {
        max-width: 100%;
    }

    #search-content input[type="search"],
    #search-content input[type="text"],
    .block-search input {
        max-width: 100%;
    }
}

/* -- 640px: Small tablet / Large phone -- */
@media (max-width: 640px) {
    .ff-hero {
        min-height: 50vh;
        padding: 48px var(--ff-container-pad) 40px;
    }

    .ff-hero h1 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: 16px;
    }

    .ff-hero p {
        font-size: 1rem;
        margin-bottom: 28px;
    }

    .ff-hero-cta-group {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .ff-hero-cta-group .ff-btn-primary,
    .ff-hero-cta-group .ff-btn-secondary {
        width: 100%;
        max-width: 300px;
        text-align: center;
        justify-content: center;
    }

    .ff-flagship-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .ff-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .ff-category-card {
        padding: 20px 10px;
    }

    .ff-category-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
    }

    .ff-category-name {
        font-size: 1.125rem;
    }

    .ff-trust-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ff-trust-item {
        display: flex;
        text-align: left;
        gap: 16px;
        align-items: center;
        padding: 16px;
    }

    .ff-trust-icon {
        margin: 0;
        flex-shrink: 0;
    }

    .ff-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Product grid single column — full width on small phones */
    .products-grid .product-items {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Cart table becomes stacked */
    .cart.table-wrapper thead {
        display: none;
    }

    .cart.table-wrapper tbody tr {
        display: block;
        padding: 16px;
        border-bottom: 1px solid var(--ff-border);
        position: relative;
    }

    .cart.table-wrapper tbody td {
        display: block;
        padding: 4px 0;
        border: none;
        text-align: left;
    }

    .cart.table-wrapper tbody td::before {
        content: attr(data-th) ": ";
        font-weight: 600;
        color: var(--ff-text-muted);
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Login / Register */
    .customer-account-login .login-container {
        grid-template-columns: 1fr;
    }
    .customer-account-login .block-customer-login,
    .customer-account-login .block-new-customer .card,
    .customer-account-create .form-create-account {
        padding: 24px;
    }
}

/* -- 480px: Mobile -- */
@media (max-width: 480px) {
    :root {
        --ff-container-pad: 16px;
    }

    body {
        font-size: 15px;
    }

    h1 { font-size: clamp(1.5rem, 6vw, 2.25rem); }
    h2 { font-size: clamp(1.375rem, 5vw, 2rem); }
    h3 { font-size: clamp(1.125rem, 3vw, 1.5rem); }

    .ff-hero {
        min-height: 45vh;
    }

    .ff-section {
        padding: var(--ff-section-pad-mobile) 0;
    }

    .ff-section-header {
        margin-bottom: 32px;
    }

    .ff-btn-primary,
    .ff-btn-secondary,
    .ff-btn-red {
        padding: 12px 24px;
        font-size: 1rem;
    }

    .ff-btn-lg {
        padding: 14px 28px;
        font-size: 1.0625rem;
    }

    /* Action buttons full width on mobile */
    button.action.primary,
    .action.primary,
    button.action.tocart,
    .action.tocart {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Logo smaller */
    .logo img {
        max-height: 40px;
    }

    /* Promo bar smaller */
    .ff-promo-bar {
        font-size: 1.125rem;
        padding: 8px 16px;
    }

    /* Product detail adjustments */
    .product-info-main .price-box .price {
        font-size: 1.5rem;
    }

    .product-info-main .box-tocart .action.tocart {
        max-width: 100%;
    }

    /* Product tabs stacked */
    .product.info.detailed .product.data.items > .item.title > a,
    .product.info.detailed .data.item.title {
        padding: 10px 16px;
        font-size: 1.0625rem;
    }

    .product.info.detailed .product.data.items > .item.content,
    .product.info.detailed .data.item.content {
        padding: 20px;
    }

    /* Account */
    .account .column.main {
        padding: 20px;
    }

    .account .sidebar-main {
        padding: 16px;
    }

    /* Cart summary */
    .cart-summary {
        padding: 20px;
    }

    /* Checkout */
    .opc-sidebar {
        padding: 20px;
    }

    /* Pagination smaller */
    .pages .item a,
    .pages .item strong {
        min-width: 36px;
        height: 36px;
        font-size: 1.0625rem;
    }
}

/* -- 360px: Very small phone -- */
@media (max-width: 360px) {
    .ff-category-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ff-category-card {
        padding: 16px 8px;
    }

    .ff-category-icon {
        width: 40px;
        height: 40px;
    }

    .ff-category-name {
        font-size: 1rem;
    }

    .ff-promo-bar {
        font-size: 1.0625rem;
    }
}


/* ============================================================
   SECTION 24: MODAL / DRAWER / OVERLAY
   ============================================================ */

/* Modal backdrop */
.modal-popup .modal-inner-wrap,
.modals-wrapper .modal-inner-wrap {
    background: var(--ff-bg-secondary);
    border: 1px solid var(--ff-border);
    border-radius: 16px;
    color: var(--ff-text-primary);
    box-shadow: var(--ff-shadow-elevated);
    animation: scaleIn 0.3s var(--ff-ease);
}

.modal-popup .modal-header,
.modals-wrapper .modal-header {
    border-bottom: 1px solid var(--ff-border);
    padding: 20px 24px;
}

.modal-popup .modal-title,
.modals-wrapper .modal-title {
    font-family: var(--ff-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ff-text-primary);
}

.modal-popup .modal-content,
.modals-wrapper .modal-content {
    padding: 24px;
    color: var(--ff-text-secondary);
}

.modal-popup .modal-footer,
.modals-wrapper .modal-footer {
    border-top: 1px solid var(--ff-border);
    padding: 16px 24px;
}

.modal-popup .action-close,
.modals-wrapper .action-close {
    color: var(--ff-text-muted);
    transition: color 0.2s var(--ff-ease);
}

.modal-popup .action-close:hover,
.modals-wrapper .action-close:hover {
    color: var(--ff-text-primary);
}

/* Overlay background */
.modals-overlay,
.modal-popup._show ~ .modals-overlay {
    background: rgba(0, 0, 0, 0.6);
    /* backdrop-filter removed */
}

/* Slide-in drawer (mobile nav, filters) */
.ff-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 90vw;
    background: var(--ff-bg-secondary);
    border-left: 1px solid var(--ff-border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.4s var(--ff-ease);
    overflow-y: auto;
}

.ff-drawer.is-open {
    transform: translateX(0);
}

.ff-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ff-border);
}

.ff-drawer-title {
    font-family: var(--ff-font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ff-text-primary);
}

.ff-drawer-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    border-radius: 50%;
    color: var(--ff-text-muted);
    cursor: pointer;
    transition: var(--ff-transition-fast);
}

.ff-drawer-close:hover {
    background: var(--ff-bg-card-hover);
    color: var(--ff-text-primary);
}

.ff-drawer-body {
    padding: 24px;
}


/* ============================================================
   SECTION 25: SEARCH RESULTS PAGE
   ============================================================ */
.catalogsearch-result-index .page-title {
    font-family: var(--ff-font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

.catalogsearch-result-index .search.found {
    color: var(--ff-text-secondary);
    font-size: 1rem;
    margin-bottom: 24px;
}

.catalogsearch-result-index .search.found .search-term {
    color: var(--ff-blue);
    font-weight: 600;
}


/* ============================================================
   SECTION 26: CMS PAGES / STATIC CONTENT
   ============================================================ */
.cms-page-view .page-title {
    font-family: var(--ff-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    color: #1d1d1f;
    margin-bottom: 24px;
}

.cms-page-view .column.main {
    max-width: 800px;
    margin: 0 auto;
    padding: 48px var(--ff-container-pad);
}

.cms-page-view .column.main p {
    color: var(--ff-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.cms-page-view .column.main h2 {
    margin-top: 48px;
    margin-bottom: 16px;
}

.cms-page-view .column.main h3 {
    margin-top: 32px;
    margin-bottom: 12px;
}

.cms-page-view .column.main ul,
.cms-page-view .column.main ol {
    padding-left: 24px;
    margin-bottom: 1.5rem;
}

.cms-page-view .column.main li {
    margin-bottom: 0.5rem;
    font-size: 1.0625rem;
    color: var(--ff-text-secondary);
    line-height: 1.7;
}

.cms-page-view .column.main img {
    border-radius: 12px;
    margin: 24px 0;
}

.cms-page-view .column.main blockquote {
    border-left: 3px solid var(--ff-blue);
    padding-left: 20px;
    margin: 24px 0;
    color: var(--ff-text-secondary);
    font-style: italic;
}


/* ============================================================
   SECTION 27: WISHLIST & COMPARE
   ============================================================ */

/* Wishlist page */
.wishlist-index-index .product-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
}

.wishlist-index-index .product-item {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border-subtle);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s var(--ff-ease);
}

.wishlist-index-index .product-item:hover {
    border-color: var(--ff-blue);
}

.wishlist-index-index .product-item-info {
    padding: 16px;
}

/* Wishlist page polish — page title, product name + price, action buttons.
   Matches the order-history / address-book pill button language so the
   customer-account suite feels cohesive. */
.wishlist-index-index .page-title-wrapper h1 {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.012em !important;
    color: #1d1d1f !important;
    margin: 0 0 32px !important;
}

.wishlist-index-index .product-item-photo {
    display: block;
    background: #ffffff;
    overflow: hidden;
}

.wishlist-index-index .product-item-photo img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s var(--ff-ease, ease);
}

.wishlist-index-index .product-item:hover .product-item-photo img {
    transform: scale(1.03);
}

.wishlist-index-index .product-item-name {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin: 0 0 8px;
    display: block;
}

.wishlist-index-index .product-item-name a {
    color: #1d1d1f;
    text-decoration: none;
}

.wishlist-index-index .product-item-name a:hover {
    color: var(--ff-blue, #0071e3);
}

.wishlist-index-index .price-box {
    margin: 0 0 16px;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1d1d1f;
}

/* Customer comment textarea — typically not used; if shown, keep it
   minimal so it doesn't dominate the card. */
.wishlist-index-index textarea.product-item-comment {
    width: 100%;
    min-height: 60px;
    padding: 8px 12px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #f5f5f7;
    margin: 0 0 12px;
}

/* Primary action — Add to Cart. Matches PDP add-to-cart language but
   sized for a card (smaller padding). */
.wishlist-index-index .product-item-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.wishlist-index-index .actions-primary button.action.tocart,
.wishlist-index-index button.action.tocart {
    flex: 1 1 auto;
    background: var(--ff-blue, #0071e3) !important;
    color: #ffffff !important;
    border: 0 !important;
    padding: 11px 16px !important;
    border-radius: 10px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.wishlist-index-index .actions-primary button.action.tocart:hover {
    background: #0a1929 !important;
    transform: translateY(-1px) !important;
}

@media (prefers-reduced-motion: reduce) {
    .wishlist-index-index .actions-primary button.action.tocart:hover {
        transform: none !important;
    }
}

/* Secondary actions — Edit / Remove. Pill shape matching the
   address-book + order-history action button language. Edit = brand-blue
   ghost pill, Remove = red destructive pill. */
.wishlist-index-index .actions-secondary {
    display: flex;
    gap: 6px;
}

.wishlist-index-index .actions-secondary a.action,
.wishlist-index-index a.action.delete,
.wishlist-index-index a.action.edit,
.wishlist-index-index a.action.btn-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1.5px solid #d2d2d7 !important;
    color: #6e6e73 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.wishlist-index-index a.action.edit:hover {
    border-color: var(--ff-blue, #0071e3) !important;
    color: var(--ff-blue, #0071e3) !important;
    background: rgba(0, 113, 227, 0.05) !important;
}

.wishlist-index-index a.action.delete:hover,
.wishlist-index-index a.action.btn-remove:hover {
    border-color: #d70015 !important;
    color: #d70015 !important;
    background: rgba(215, 0, 21, 0.05) !important;
}

.wishlist-index-index .actions-secondary a.action:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

/* Bottom toolbar — "Update Wishlist", "Share Wishlist", "Add All to Cart"
   buttons. Apply the same primary/secondary pattern. */
.wishlist-index-index .actions-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e7;
}

.wishlist-index-index .actions-toolbar .primary button,
.wishlist-index-index .actions-toolbar .primary .action.primary {
    background: #0a1929 !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
}

.wishlist-index-index .actions-toolbar .primary button:hover,
.wishlist-index-index .actions-toolbar .primary .action.primary:hover {
    background: var(--ff-blue, #0071e3) !important;
}

.wishlist-index-index .actions-toolbar .secondary button,
.wishlist-index-index .actions-toolbar .secondary .action {
    background: transparent !important;
    color: #1d1d1f !important;
    padding: 11px 20px !important;
    border: 1.5px solid #d2d2d7 !important;
    border-radius: 10px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.wishlist-index-index .actions-toolbar .secondary button:hover,
.wishlist-index-index .actions-toolbar .secondary .action:hover {
    border-color: var(--ff-blue, #0071e3) !important;
    color: var(--ff-blue, #0071e3) !important;
}

/* Empty wishlist state — friendly messaging + CTA back to shop.
   Triggered when the .products-grid wrapper has no items inside. */
.wishlist-index-index .message.info.empty,
.wishlist-index-index .message.empty {
    text-align: center !important;
    padding: 80px 32px !important;
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    margin: 32px 0 !important;
    color: #6e6e73 !important;
    font-size: 1rem !important;
}

/* Mobile responsive — collapse 4-col grid to 2 on tablet, 1 on phone */
@media (max-width: 900px) {
    .wishlist-index-index .product-items {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 540px) {
    .wishlist-index-index .product-items {
        grid-template-columns: 1fr !important;
    }
    .wishlist-index-index .actions-toolbar .primary,
    .wishlist-index-index .actions-toolbar .secondary {
        flex: 1 1 100%;
    }
    .wishlist-index-index .actions-toolbar .primary button,
    .wishlist-index-index .actions-toolbar .secondary button,
    .wishlist-index-index .actions-toolbar .secondary .action {
        width: 100%;
    }
}

/* Services category page CTA — rendered by Magento_PageBuilder/templates/
   catalog/category/view/description.phtml when $urlPath === 'services'.
   Clear quote-action buttons so customers landing on /services have an
   obvious next step. Sits below the intro paragraph and above the
   product grid. */
.ff-services-cta {
    background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%);
    border: 1px solid #e8e8ed;
    border-radius: 18px;
    padding: 36px 32px;
    margin: 24px auto 32px;
    text-align: center;
}

.ff-services-cta__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: #1d1d1f;
    margin: 0 0 12px;
}

.ff-services-cta__lead {
    font-size: 1rem;
    color: #6e6e73;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 24px;
}

.ff-services-cta__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.ff-services-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ff-services-cta__btn--primary {
    background: #0a1929;
    color: #ffffff;
    border: 1.5px solid #0a1929;
}

.ff-services-cta__btn--primary:hover {
    background: var(--ff-blue, #0071e3);
    border-color: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    color: #ffffff;
}

.ff-services-cta__btn--secondary {
    background: transparent;
    color: #1d1d1f;
    border: 1.5px solid #d2d2d7;
}

.ff-services-cta__btn--secondary:hover {
    border-color: var(--ff-blue, #0071e3);
    color: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
}

.ff-services-cta__btn:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ff-services-cta__btn:hover {
        transform: none;
    }
}

@media (max-width: 540px) {
    .ff-services-cta {
        padding: 24px 20px;
    }
    .ff-services-cta__btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* Compare page */
.catalog-product_compare-index .table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--ff-border);
}

.catalog-product_compare-index table {
    background: var(--ff-bg-card);
}

.catalog-product_compare-index th {
    background: var(--ff-bg-secondary);
}

/* Compare page heading + empty state. Hyvä's vendor template renders
   the page title with vanilla Tailwind (`text-3xl font-bold mb-6`)
   and the empty state as a bare unstyled `<p>You have no items to
   compare.</p>` inside `.column.main > div`. Both feel out of brand
   when a customer lands here from "Add to Compare" with no items
   actually selected (e.g. session timed out, or they came via a
   stray comparison link). */

.catalog-product_compare-index .page-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #1d1d1f !important;
    margin: 24px 0 32px !important;
}

/* Center the empty-state wrapper. Targets the parent <div> wrapping
   the lone "You have no items to compare." paragraph via :has() — so
   the populated table view (which has many child elements) is not
   affected. Falls back gracefully on browsers without :has() (Safari
   < 15.4 / Chrome < 105 / Firefox < 121) where customers still see
   the bare paragraph but the page-title above stays branded. */
.catalog-product_compare-index .column.main > div:has(> p:only-child) {
    text-align: center;
    padding: 80px 32px;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 16px;
    margin: 0 0 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.catalog-product_compare-index .column.main > div:has(> p:only-child) p {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.125rem;
    font-weight: 500;
    color: #6e6e73;
    margin: 0;
    letter-spacing: 0.02em;
}

/* "Continue shopping" CTA injected by ff-compare-empty-cta.js into the
   compare-page empty-state wrapper. Brand-blue ghost-button language
   matches the cart-drawer Continue Shopping pattern (commit 49a08f3d),
   the cart-empty CTA (line 11743), and the dealer-thanks back-link.
   Customers land here from "Add to Compare" with no selections — this
   gives them a one-tap path back to browsing without using header nav. */
.catalog-product_compare-index .ff-compare-empty__cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 24px !important;
    min-height: 48px;
    padding: 12px 28px !important;
    background: #ffffff !important;
    color: var(--ff-blue, #0071e3) !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 12px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                border-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.catalog-product_compare-index .ff-compare-empty__cta:hover {
    background: var(--ff-blue, #0071e3) !important;
    color: #ffffff !important;
    border-color: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.20);
    outline: none !important;
}
.catalog-product_compare-index .ff-compare-empty__cta:focus-visible {
    background: var(--ff-blue, #0071e3) !important;
    color: #ffffff !important;
    border-color: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px);
    /* Double-ring focus indicator (white inner + brand-blue outer) since
       the hover surface is brand-blue — single-color outline would be
       invisible. */
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.20),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3) !important;
    outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-product_compare-index .ff-compare-empty__cta:hover {
        transform: none;
    }
}


/* ============================================================
   SECTION 28: LOADING & SPINNER
   ============================================================ */
.loading-mask {
    background: rgba(15, 25, 35, 0.8);
    /* backdrop-filter removed */
}

.loading-mask .loader {
    width: 48px;
    height: 48px;
}

.loading-mask .loader::after {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    border: 3px solid var(--ff-border);
    border-top-color: var(--ff-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Inline loader */
.ff-loader {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ff-border);
    border-top-color: var(--ff-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}


/* ============================================================
   SECTION 29: TOOLTIP & POPOVER
   ============================================================ */
.ff-tooltip {
    position: relative;
}

.ff-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 1rem;
    color: var(--ff-text-primary);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s var(--ff-ease), transform 0.2s var(--ff-ease);
    z-index: 60;
    box-shadow: var(--ff-shadow-dark);
}

.ff-tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ============================================================
   SECTION 30: PRINT STYLES
   ============================================================ */
@media print {
    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .page-header,
    .page-footer,
    .ff-promo-bar,
    .ff-free-ship-banner,
    .ff-social-rail,
    .ff-to-top,
    .ff-sticky-atc,
    .ff-bg-fx,
    .ff-pdp-bg,
    .ff-pdp-globe,
    .ff-cart-drawer,
    .ff-mobile-menu-drawer,
    .ff-chatbot,
    [data-fusion-chatbot],
    .breadcrumbs,
    .sidebar,
    .toolbar,
    .pages,
    nav.navigation,
    .nav-sections {
        display: none !important;
    }

    /* Eliminate decorative hover/animation transitions on print so
       elements aren't mid-transition when the printer renders. */
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    /* Ensure product images print at native size with white bg per
       brand spec (also prevents color-managed printers from going
       muddy on dark hero bgs). */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .column.main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .product-item,
    .ff-flagship-card,
    .ff-card {
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #000;
    }
}


/* ============================================================
   SECTION 31: ACCESSIBILITY ENHANCEMENTS
   ============================================================ */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--ff-blue);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ff-flagship-card:hover,
    .ff-category-card:hover,
    .ff-card--interactive:hover {
        transform: none;
    }

    .ff-btn-primary:hover,
    .ff-btn-secondary:hover,
    .ff-btn-red:hover {
        transform: none;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    :root {
        --ff-border: #4A5A6A;
        --ff-border-hover: #5A6A7A;
        --ff-text-muted: #8899AA;
    }

    .ff-flagship-card,
    .ff-category-card,
    .ff-card {
        border-width: 2px;
    }
}

/* Skip to content link */
.ff-skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ff-blue);
    color: #fff;
    padding: 12px 24px;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    z-index: 999;
    transition: top 0.3s var(--ff-ease);
}

.ff-skip-to-content:focus {
    top: 0;
    outline: none;
}


/* ============================================================
   SECTION 32: HYVA COMPONENT SPECIFIC OVERRIDES
   ============================================================ */

/* Hyva slider/swiper dark theme */
.swiper-pagination-bullet {
    background: var(--ff-text-muted);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: var(--ff-blue);
    opacity: 1;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--ff-text-primary);
    background: rgba(15, 25, 35, 0.7);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ff-border);
    transition: all 0.3s var(--ff-ease);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--ff-blue);
    border-color: var(--ff-blue);
    color: #fff;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 16px;
}

/* Hyva product slider */
.products-slider .product-item {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border-subtle);
    border-radius: 16px;
}

/* Hyva tabs component */
[x-data*="tab"] [role="tablist"] {
    border-bottom: 1px solid var(--ff-border);
}

[x-data*="tab"] [role="tab"] {
    color: var(--ff-text-muted);
    font-family: var(--ff-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding: 12px 20px;
    transition: color 0.3s var(--ff-ease);
    border-bottom: 2px solid transparent;
}

[x-data*="tab"] [role="tab"][aria-selected="true"],
[x-data*="tab"] [role="tab"]:hover {
    color: var(--ff-blue);
    border-bottom-color: var(--ff-blue);
}

[x-data*="tab"] [role="tabpanel"] {
    padding: 24px 0;
    color: var(--ff-text-secondary);
}

/* Hyva accordion */
[x-data*="accordion"] details {
    border: 1px solid var(--ff-border);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
}

[x-data*="accordion"] summary {
    padding: 16px 20px;
    font-family: var(--ff-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ff-text-primary);
    cursor: pointer;
    transition: background 0.2s var(--ff-ease);
}

[x-data*="accordion"] summary:hover {
    background: var(--ff-bg-card);
}

[x-data*="accordion"] details[open] summary {
    background: var(--ff-bg-card);
    border-bottom: 1px solid var(--ff-border);
}

[x-data*="accordion"] details .content {
    padding: 20px;
    color: var(--ff-text-secondary);
}

/* Hyva form validation messages */
[x-data] .text-red-500,
[x-data] .text-red-600 {
    color: var(--ff-red) !important;
}

[x-data] .text-green-500,
[x-data] .text-green-600 {
    color: var(--ff-green) !important;
}

[x-data] .bg-red-50 {
    background: rgba(255, 45, 45, 0.08) !important;
}

[x-data] .bg-green-50 {
    background: rgba(74, 222, 128, 0.08) !important;
}

/* Hyva toasts / flash messages */
[x-data*="message"] > div {
    border-radius: 12px;
    border: 1px solid;
}

/* Hyva mobile menu overlay */
#menu-mobile-overlay,
.mobile-menu-overlay {
    background: rgba(0, 0, 0, 0.6);
    /* backdrop-filter removed */
}

/* Hyva compare bar */
.block-compare {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    border-radius: 12px;
}

/* Hyva recently viewed */
.block-viewed-products-grid .product-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.block-viewed-products-grid .product-item {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border-subtle);
    border-radius: 12px;
    overflow: hidden;
}


/* ============================================================
   SECTION 33: CONTACT PAGE
   ============================================================ */
.contact-index-index .column.main {
    max-width: 700px;
    margin: 0 auto;
    padding: 48px var(--ff-container-pad);
}

.contact-index-index .column.main .card {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) !important;
    padding: 40px !important;
}

.contact-index-index .form.contact fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.contact-index-index .column.main h2 {
    font-family: var(--ff-font-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
    margin-bottom: 8px !important;
}

.contact-index-index .form.contact .field {
    margin-bottom: 20px;
}

.contact-index-index .form.contact .legend {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    color: #1d1d1f;
    margin-bottom: 24px;
}


/* ============================================================
   SECTION 34: 404 / NO ROUTE PAGE
   ============================================================ */
.cms-noroute-index .column.main {
    text-align: center;
    padding: 80px var(--ff-container-pad);
}

.cms-noroute-index .page-title {
    font-family: var(--ff-font-heading);
    font-size: clamp(3rem, 6vw, 5rem);
    color: var(--ff-text-muted);
    margin-bottom: 16px;
}

.cms-noroute-index .column.main p {
    font-size: 1.125rem;
    color: var(--ff-text-secondary);
    max-width: 500px;
    margin: 0 auto 32px;
}


/* ============================================================
   SECTION 35: PDP ENHANCEMENTS — PREMIUM CONVERSION UX
   Inspired by Apple, SIG Sauer, Staccato product pages
   ============================================================ */

/* PDP trust micro-signals — icons near add-to-cart */
.ff-pdp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--ff-border-subtle);
}

.ff-pdp-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--ff-text-muted);
    letter-spacing: 0.02em;
}

.ff-pdp-trust-item svg {
    width: 16px;
    height: 16px;
    color: var(--ff-green);
    flex-shrink: 0;
}

/* Sticky add-to-cart bar (mobile-only) — appears when main #product-addtocart-button
   scrolls out of view, so the customer can buy from anywhere on the page without
   scrolling back up. Premium white-bg w/ backdrop blur (Apple pattern). Desktop
   already has a sticky info column, so this is hidden on ≥769px viewports. */
.ff-sticky-atc {
    position: fixed;
    bottom: -120px;
    left: 0;
    right: 0;
    z-index: 45;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid #e8e8ed;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(10, 25, 41, 0.10);
    transition: bottom 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    display: none; /* Mobile-only — see @media (max-width:768px) below */
}

@media (max-width: 768px) {
    .ff-sticky-atc {
        display: block;
    }
}

.ff-sticky-atc.is-visible {
    bottom: 0;
}

.ff-sticky-atc-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ff-sticky-atc-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.ff-sticky-atc-name {
    font-family: var(--ff-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

.ff-sticky-atc-price {
    font-family: var(--ff-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ff-blue, #0071e3);
    line-height: 1.2;
}

.ff-sticky-atc__cta {
    flex: 0 0 auto;
    height: 48px;
    min-width: 132px;
    padding: 0 22px;
    background: #0a1929;
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    font-family: var(--ff-font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ff-sticky-atc__cta:hover {
    background: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30);
    outline: none;
}

/* Keyboard focus on PDP sticky add-to-cart bar CTA — split from
   :focus to :focus-visible so click-then-stay-focused doesn't
   leave a sticky brand-blue ring on mouse users. White outline
   ring contrasts cleanly against the brand-blue button bg. */
.ff-sticky-atc__cta:focus-visible {
    background: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30);
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.ff-sticky-atc__cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(10, 25, 41, 0.16);
}

/* PDP gallery zoom cursor */
#gallery-main img,
#gallery-main button {
    cursor: zoom-in;
}

/* PDP gallery image smooth transition */
#gallery-main img {
    transition: transform 0.5s var(--ff-ease);
}

#gallery-main:hover img {
    transform: scale(1.03);
}

/* PDP breadcrumb area tighter */
.catalog-product-view .breadcrumbs {
    padding: 12px 0 4px !important;
    margin-bottom: 0 !important;
}

/* PDP — reduce spacing between gallery and info on smaller screens */
@media (max-width: 1024px) {
    .catalog-product-view .product-info-main > section {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* Old mobile rule removed: now the sticky bar IS mobile-only by design,
   so we want the product name to stay visible (truncated via text-overflow)
   instead of hidden — the new rules above already handle layout correctly. */


/* ============================================================
   SECTION 36: ENHANCED PRODUCT CARD HOVER — PLP
   Quick-action reveal on hover, premium card feel
   ============================================================ */

/* Product card actions container — hidden by default, reveal on hover */
.product-item .product-item-inner {
    position: relative;
}

/* Quick-action buttons fade in from bottom on card hover */
.product-item .actions-secondary {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s var(--ff-ease), transform 0.3s var(--ff-ease);
}

.product-item:hover .actions-secondary {
    opacity: 1;
    transform: translateY(0);
}

/* "In Stock" label on product cards */
.product-item .stock.available {
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #34c759;
    margin-bottom: 8px;
}

.product-item .stock.available::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34c759;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: none;
}

/* Product card — subtle inner glow on hover */
.product-item:hover .product-item-details,
.product-item:hover .product-info {
    background: linear-gradient(180deg, transparent, rgba(0, 163, 255, 0.02));
}


/* ============================================================
   SECTION 37: SCROLL-REVEAL ANIMATIONS
   Intersection Observer driven — classes applied via JS
   ============================================================ */

/* Elements start hidden and slide up when they enter viewport */
.ff-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s var(--ff-ease), transform 0.7s var(--ff-ease);
}

.ff-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children */
.ff-reveal-children > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s var(--ff-ease), transform 0.5s var(--ff-ease);
}

.ff-reveal-children.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.ff-reveal-children.is-visible > *:nth-child(1) { transition-delay: 0s; }
.ff-reveal-children.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.ff-reveal-children.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.ff-reveal-children.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.ff-reveal-children.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.ff-reveal-children.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
.ff-reveal-children.is-visible > *:nth-child(7) { transition-delay: 0.48s; }
.ff-reveal-children.is-visible > *:nth-child(8) { transition-delay: 0.56s; }

/* Fade in from left */
.ff-reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.7s var(--ff-ease), transform 0.7s var(--ff-ease);
}

.ff-reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade in from right */
.ff-reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.7s var(--ff-ease), transform 0.7s var(--ff-ease);
}

.ff-reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale reveal */
.ff-reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s var(--ff-ease), transform 0.6s var(--ff-ease);
}

.ff-reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ff-reveal,
    .ff-reveal-left,
    .ff-reveal-right,
    .ff-reveal-scale,
    .ff-reveal-children > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ============================================================
   SECTION 38: MOBILE HERO FEATURED MODELS — HORIZONTAL SCROLL
   ============================================================ */

@media (max-width: 768px) {
    .ff-models-strip {
        display: flex !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 8px;
        padding-bottom: 8px;
        margin: 0 -20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .ff-models-strip > * {
        flex: 0 0 140px;
        scroll-snap-align: start;
    }

    /* Hide scrollbar but keep functionality */
    .ff-models-strip::-webkit-scrollbar {
        height: 0;
        display: none;
    }
    .ff-models-strip {
        scrollbar-width: none;
    }
}

@media (max-width: 480px) {
    .ff-models-strip > * {
        flex: 0 0 120px;
    }
}


/* ============================================================
   SECTION 39: FOOTER HOVER RULES (REPLACES INLINE HANDLERS)
   ============================================================ */

/* Footer link hover — replaces all inline onmouseover/onmouseout */
.ff-footer a.ff-footer-link:hover {
    color: var(--ff-text-primary) !important;
}

/* Footer social icon hover */
.ff-footer a.ff-footer-social:hover {
    color: #fff !important;
}

/* Footer heading — Apple-style small caps */
.ff-footer-heading {
    font-family: var(--ff-font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1d1d1f;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ff-border-subtle);
}

/* Footer bottom bar */
.ff-footer-bottom {
    border-top: 1px solid var(--ff-border-subtle);
    padding: 16px 0;
    font-size: 0.875rem;
    color: var(--ff-text-muted);
}


/* ============================================================
   SECTION 40: SHOP BY PURPOSE CARDS
   ============================================================ */

.ff-purpose-card {
    background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    transition: all 0.35s var(--ff-ease);
}

.ff-purpose-card:hover {
    border-color: rgba(0, 113, 227, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.ff-purpose-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 163, 255, 0.08);
    color: var(--ff-blue);
}

.ff-section-label {
    font-family: var(--ff-font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ff-blue);
    margin-bottom: 0.75rem;
}


/* ============================================================
   SECTION 41: NEWSLETTER SECTION CLASSES
   ============================================================ */

.ff-newsletter-section {
    padding: 40px 0;
    background: var(--ff-bg-secondary);
    border-top: 1px solid var(--ff-border-subtle);
    border-bottom: 1px solid var(--ff-border-subtle);
}

.ff-newsletter-title {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.04em;
    color: var(--ff-text-primary);
    margin-bottom: 4px;
}

.ff-newsletter-desc {
    font-size: 1rem;
    color: var(--ff-text-secondary);
}

.ff-newsletter-input {
    background: var(--ff-bg-primary);
    border: 1px solid var(--ff-border);
    color: var(--ff-text-primary);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.9375rem;
    min-width: 280px;
    outline: none;
    transition: border-color 0.3s var(--ff-ease);
}

.ff-newsletter-input:focus {
    border-color: var(--ff-blue);
    box-shadow: 0 0 0 3px rgba(0, 163, 255, 0.12);
}


/* ============================================================
   SECTION 42: SERVICES CTA ENHANCED
   ============================================================ */

.ff-services-highlight {
    padding: 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ff-border);
    transition: border-color 0.3s var(--ff-ease);
}

.ff-services-highlight:hover {
    border-color: rgba(0, 163, 255, 0.3);
}


/* ============================================================
   SECTION 43: CATEGORY PAGE (PLP) VISUAL POLISH
   Stronger card contrast, category hero, toolbar refinements
   ============================================================ */

/* Category page title — bold hero-style heading */
.page-title-wrapper h1.page-title,
.catalog-category-view .page-title-wrapper h1 {
    font-family: var(--ff-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--ff-text-primary);
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 163, 255, 0.2);
}

/* Product card — light theme border refinement */
.product-item,
.product-item.card,
.product-item.card-interactive {
    border: 1px solid #e8e8ed;
}

.product-item:hover {
    border-color: #d2d2d7;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Price styling refinement */
.product-item .price {
    color: #1d1d1f;
    font-weight: 700;
    font-size: 1.375rem;
}

/* Stock indicator — clearer visual */
.product-item .stock.unavailable {
    color: #6e6e73;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-item .stock.unavailable::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: none;
    flex-shrink: 0;
}

/* "Sold out" overlay badge on OOS PLP cards.
   Uses :has() to target only product-items that contain a .stock.unavailable
   marker — gracefully no-ops on older browsers (Safari < 15.4 / Chrome < 105
   / Firefox < 121) where customers still see the existing red-dot text pill
   below the price. The overlay is decorative-only (text "Sold out" is
   already announced via the .stock.unavailable child for screen readers),
   so no aria duplication. */
.product-item:has(.stock.unavailable) .product-item-photo {
    position: relative;
}

.product-item:has(.stock.unavailable) .product-item-photo::after {
    content: 'Sold out';
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 12px;
    background: rgba(10, 25, 41, 0.92);
    color: #ffffff;
    border-radius: 980px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(10, 25, 41, 0.18);
}

/* "Sale" badge on PLP cards with a special-price set.
   Hyvä emits `.price-box .old-price` (regular) + `.price-box .special-price`
   (sale) only when `special_price` is configured on the product, so :has()
   targets just those cards. Positioned top-right so a product that's
   simultaneously on sale AND out of stock still shows both — Sold out
   overlay (top-left) + Sale badge (top-right) don't collide. Decorative —
   the old/special-price spans are already screen-reader-announced, no aria
   duplication. .product-item-photo already has position:relative from the
   standard product-photo rule (line 3564), so no re-declaration needed.
   Gracefully no-ops on Safari < 15.4 / Chrome < 105 / Firefox < 121
   (the strikethrough on `.old-price` still signals the discount). */
.product-item:has(.price-box .old-price) .product-item-photo::before {
    content: 'Sale';
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 6px 12px;
    background: #d70015;
    color: #ffffff;
    border-radius: 980px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(215, 0, 21, 0.25);
}

/* When ff-sale-badge.js has computed the discount % from regular vs
   special price, it sets `data-sale-label="-25%"` (or whatever) on the
   .product-item-photo. The attr() override swaps the badge content
   from generic "Sale" to the specific discount. Specific % off badges
   are a documented conversion lift over generic "Sale" text — Amazon,
   Best Buy, Williams-Sonoma all use them. Falls back to "Sale" if JS
   fails to parse prices, hasn't run yet, or the product has no
   computable discount (e.g. malformed prices). */
.product-item:has(.price-box .old-price) .product-item-photo[data-sale-label]::before {
    content: attr(data-sale-label);
}

/* Rating stars — brighter gold */
.product-item .rating-summary .rating-result > span::before {
    color: #FFB800;
}

/* ============================================================
   SECTION 44: PDP VISUAL ENHANCEMENTS
   Gallery blending, product info spacing, tab improvements
   ============================================================ */

/* PDP gallery — no vignette needed for light theme */
#gallery-main::after {
    display: none;
}

#gallery-main {
    position: relative;
}

/* Product info — improved spacing and visual hierarchy */
/* PDP overview text — Apple clean */
.product-info-main .product.attribute.overview {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #6e6e73;
    padding: 1rem 0;
    border-bottom: 1px solid #e8e8ed;
    margin-bottom: 1rem;
}

/* PDP product title — large, bold like Apple */
.product-info-main .page-title {
    font-family: var(--ff-font-heading) !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
}

/* PDP price — prominent */
.product-info-main .price-box .price {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
}

/* PDP attribute labels (SKU, Size, etc.) */
.product-info-main .product-info-stock-sku .stock,
.product-info-main .product.attribute.sku .type,
.product-info-main .product-info-stock-sku {
    color: #6e6e73;
    font-size: 0.875rem;
}

/* PDP configurable options (dropdowns, swatches) — Apple clean */
.product-info-main .field.configurable label,
.product-info-main .swatch-attribute-label {
    font-family: var(--ff-font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1d1d1f;
}

.product-info-main select,
.product-info-main .field select {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    color: #1d1d1f !important;
    transition: border-color 0.2s ease;
    width: 100%;
}

.product-info-main select:focus,
.product-info-main .field select:focus {
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important;
    outline: none !important;
}

/* "Add to Cart" button — Apple-style full-width blue pill */
.product-info-main .box-tocart .action.tocart {
    font-size: 1.0625rem;
    padding: 16px 36px;
    border-radius: 980px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    background: #0071e3 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none;
    transition: all 0.3s ease;
    width: 100%;
    display: block;
    text-align: center;
    cursor: pointer;
}

.product-info-main .box-tocart .action.tocart:hover {
    background: #0077ed !important;
    box-shadow: none;
    transform: none;
}

/* Product tabs — polished dark styling */
.product.data.items > .item.title {
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.product.data.items > .item.title > .switch {
    color: var(--ff-text-muted);
    font-family: var(--ff-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.9375rem;
    padding: 12px 20px;
    transition: color 0.2s;
}

.product.data.items > .item.title:hover > .switch {
    color: var(--ff-text-primary);
}

.product.data.items > .item.title.active {
    border-bottom-color: var(--ff-blue);
}

.product.data.items > .item.title.active > .switch {
    color: var(--ff-blue);
}

.product.data.items > .item.content {
    background: #f5f5f7;
    border: 1px solid #e8e8ed;
    border-radius: 0 0 12px 12px;
    padding: 24px;
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* Related / Upsell products section */
.block.related .block-title strong,
.block.upsell .block-title strong,
.block.crosssell .block-title strong {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ff-text-primary);
}


/* ============================================================
   SECTION 45: BREADCRUMB & GLOBAL NAVIGATION POLISH
   ============================================================ */

/* Breadcrumbs — subtle, clean styling */
.breadcrumbs {
    padding: 12px 0;
    font-size: 0.875rem;
    color: var(--ff-text-muted);
}

.breadcrumbs a {
    color: var(--ff-text-muted);
    transition: color 0.2s;
}

.breadcrumbs a:hover {
    color: var(--ff-blue);
}

.breadcrumbs .delimiter {
    margin: 0 8px;
    opacity: 0.5;
}

/* Search results page — styled heading */
.catalogsearch-result-index .page-title-wrapper h1 {
    font-family: var(--ff-font-heading);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

/* Empty category / no results message */
.message.info.empty {
    background: #f5f5f7;
    border: 1px solid #e8e8ed;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    color: #6e6e73;
    font-size: 1.125rem;
}


/* ============================================================
   SECTION 46: APPLE STORE DESIGN SYSTEM
   Full-bleed hero sections, massive typography, minimal UI,
   product-first design matching Apple Store layout
   White/light backgrounds with Fusion blue & red accents
   ============================================================ */

/* ============================================================
   APPLE-STYLE HERO SECTIONS — billion-dollar brand presentation
   Full-bleed heroes with massive product photography
   ============================================================ */

.ff-apple-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    min-height: 720px;
    padding: 72px 24px 48px;
    overflow: hidden;
}

/* Primary hero (XP PRO) — more prominent */
.ff-apple-hero:first-of-type {
    min-height: 860px;
    padding-top: 96px;
}

/* Light hero = white bg, dark text (Apple Store default) */
.ff-apple-hero--light {
    background: #ffffff;
}

/* Dark hero = dark bg for contrast alternation */
.ff-apple-hero--dark {
    background: #1d1d1f;
}

/* Secondary = light gray (Apple Store #f5f5f7) */
.ff-apple-hero--secondary {
    background: #f5f5f7;
}

.ff-apple-hero--half {
    min-height: 520px;
    padding: 88px 24px;
}

/* Services / Gunsmithing hero gets subtle blue glow background */
.ff-apple-hero--dark.ff-apple-hero--half {
    background: radial-gradient(ellipse at center top, #2a2a2d 0%, #1d1d1f 70%);
}
.ff-apple-hero--dark.ff-apple-hero--half::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 800px 400px at center, rgba(0, 113, 227, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.ff-apple-hero--dark.ff-apple-hero--half > * {
    position: relative;
    z-index: 1;
}

.ff-apple-hero__content {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.ff-apple-hero__eyebrow {
    font-family: var(--ff-font-body);
    font-size: 1rem;
    font-weight: 500;
    color: #6e6e73;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 4px;
}

/* Brand-distinct pill styling for the --preorder and --new modifiers.
   Without this, all hero eyebrows look identical (muted grey body) and
   customers can't scan the homepage for "what's coming / what's fresh".
   --preorder → amber pill with pulsing dot (limited availability signal)
   --new → brand-blue pill with steady dot (fresh release signal)
   Default eyebrow ("The Flagship", "Professional Services") stays plain. */
.ff-apple-hero__eyebrow--preorder,
.ff-apple-hero__eyebrow--new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 980px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 auto 12px;
    width: fit-content;
}

.ff-apple-hero__eyebrow--preorder {
    background: rgba(245, 158, 11, 0.10);
    color: #b45309;
}

.ff-apple-hero__eyebrow--new {
    background: rgba(0, 113, 227, 0.10);
    color: var(--ff-blue, #0071e3);
}

/* Dark hero variants — pills get translucent surface + brighter text */
.ff-apple-hero--dark .ff-apple-hero__eyebrow--preorder,
.ff-apple-hero--secondary .ff-apple-hero__eyebrow--preorder {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

.ff-apple-hero--dark .ff-apple-hero__eyebrow--new,
.ff-apple-hero--secondary .ff-apple-hero__eyebrow--new {
    background: rgba(0, 163, 255, 0.18);
    color: #66c4ff;
}

/* Status dot — currentColor so it inherits the pill's text color */
.ff-apple-hero__eyebrow--preorder::before,
.ff-apple-hero__eyebrow--new::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
}

/* Subtle pulse on the preorder dot — signals "act soon" without being
   distracting. Steady on --new (already-released items don't need urgency). */
@media (prefers-reduced-motion: no-preference) {
    .ff-apple-hero__eyebrow--preorder::before {
        animation: ff-hero-eyebrow-pulse 2.4s ease-in-out infinite;
    }
}

@keyframes ff-hero-eyebrow-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
}

.ff-apple-hero__title {
    font-family: var(--ff-font-heading);
    font-size: clamp(3.25rem, 9vw, 6.5rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: #1d1d1f;
    margin: 0 0 12px 0;
    text-transform: none;
    animation: ffFadeUp 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

/* White text variant for dark hero backgrounds */
.ff-apple-hero--dark .ff-apple-hero__title {
    color: #f5f5f7;
}

.ff-apple-hero__title--dark {
    color: #1d1d1f;
}

.ff-apple-hero__subtitle {
    font-family: var(--ff-font-body);
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight: 400;
    line-height: 1.2;
    color: #1d1d1f;
    margin: 0 0 28px 0;
    text-transform: none;
    max-width: 640px;
    animation: ffFadeUp 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) both;
    animation-delay: 0.05s;
}

.ff-apple-hero--dark .ff-apple-hero__subtitle {
    color: #6e6e73;
}

.ff-apple-hero__subtitle--dark {
    color: #6e6e73;
}

.ff-apple-hero__links {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}

/* --- Hero CTA Buttons — clean pill buttons, not hyperlinks --- */
.ff-apple-link,
.ff-apple-link:visited,
.ff-apple-link:active {
    font-family: var(--ff-font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 32px;
    border-radius: 980px;
    background: #0071e3;
    border: none;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
    min-width: 140px;
}

.ff-apple-link:hover {
    text-decoration: none !important;
    color: #ffffff !important;
    background: #0077ed;
    transform: scale(1.02);
    outline: none;
}

/* Keyboard focus on hero CTAs — `.ff-apple-link` is the homepage's
   primary conversion path ("Reserve yours", "Learn more", "Shop XP
   COMP", etc). Hover-only feedback is a 1.02× scale + #0071e3 →
   #0077ed background hue shift — too subtle for keyboard users to
   notice. Split into a dedicated :focus-visible with a 3px brand-
   blue outline ring + 4px offset so the keyboard-tab cursor is
   unmistakable. Mirrored on `--dark` and `--buy` variants below. */
.ff-apple-link:focus-visible {
    text-decoration: none !important;
    color: #ffffff !important;
    background: #0077ed;
    transform: scale(1.02);
    outline: 3px solid var(--ff-blue, #0071e3);
    outline-offset: 4px;
}

/* Light link on dark backgrounds */
.ff-apple-hero--dark .ff-apple-link,
.ff-apple-hero--dark .ff-apple-link:visited {
    color: #ffffff !important;
    background: #0071e3;
}

.ff-apple-link--dark,
.ff-apple-link--dark:visited {
    color: #ffffff !important;
    background: #0071e3;
}

.ff-apple-link--dark:hover {
    color: #ffffff !important;
    background: #0077ed;
    outline: none;
}

.ff-apple-link--dark:focus-visible {
    color: #ffffff !important;
    background: #0077ed;
    outline: 3px solid var(--ff-blue, #0071e3);
    outline-offset: 4px;
}

/* Secondary/outline style for "Buy" button */
.ff-apple-link--buy,
.ff-apple-link--buy:visited {
    background: transparent;
    color: #0071e3 !important;
    border: 2px solid #0071e3;
}

.ff-apple-link--buy:hover {
    background: #0071e3;
    color: #ffffff !important;
    outline: none;
}

/* Outline-style "Buy" variant fills brand-blue on focus. Add the
   same 3px outline ring as the filled variants for keyboard-tab
   visibility — the transparent → filled transition is significant
   already, but the outline ring makes the focused state
   unambiguous. */
.ff-apple-link--buy:focus-visible {
    background: #0071e3;
    color: #ffffff !important;
    outline: 3px solid var(--ff-blue, #0071e3);
    outline-offset: 4px;
}

/* Inline SVG chevron on hero / services CTAs — nudges right 3px on hover.
   The chevron used to be a hidden text span (`>`); now it's a real
   stroke-width 2.5 polyline SVG that inherits currentColor (white on
   filled-blue hero buttons, brand-blue on ghost buttons). Subtle tactile
   detail like Apple/SIG/Williams-Sonoma — signals "this navigates" without
   shouting. Honors prefers-reduced-motion (transition disabled below). */
.ff-apple-link__chevron {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ff-apple-link:hover .ff-apple-link__chevron,
.ff-apple-link:focus-visible .ff-apple-link__chevron {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .ff-apple-link__chevron {
        transition: none;
    }
    .ff-apple-link:hover .ff-apple-link__chevron,
    .ff-apple-link:focus-visible .ff-apple-link__chevron {
        transform: none;
    }
}

/* ============================================================
   APPLE PRODUCT TILES — 2x2 grid with real product imagery
   Billion-dollar Apple-style presentation
   ============================================================ */
.ff-apple-tiles-section {
    background: #fbfbfd;
    padding: 12px;
}

.ff-apple-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 100%;
}

@media (max-width: 767px) {
    .ff-apple-tiles {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   HOMEPAGE BLOG POSTS (2026-05-27)
   "Latest Posts" section between the Services CTA and the
   Newsletter. Header has eyebrow + Oswald title + red->blue
   gradient rule + description + "View All Posts" pill. Below
   is a 3-card grid (1 col on mobile, 2 col on tablet, 3 col
   on desktop). Each card: image, category + date eyebrow,
   title, clamped excerpt, Read more affordance, gradient
   accent line at the bottom.
   ============================================================ */

.ff-home-blog {
    background: #ffffff;
    padding: 88px 0 80px;
}

.ff-home-blog__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Editorial-feel header: serif title, italic eyebrow, large
   breathing-room spacing matching the dedicated /blog landing
   so the homepage tease feels like a deliberate magazine module
   rather than another tile grid. */
.ff-home-blog__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin: 0 0 44px;
}

.ff-home-blog__intro {
    flex: 1 1 360px;
    max-width: 640px;
}

.ff-home-blog__eyebrow {
    display: block;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 0.9375rem;
    font-weight: 500;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.02em;
    color: #6e6e73;
    margin: 0 0 8px;
}

.ff-home-blog__title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #1d1d1f;
    margin: 0;
}

.ff-home-blog__rule {
    display: block;
    width: 72px;
    height: 2px;
    margin: 18px 0 18px;
    background: linear-gradient(90deg, #dc1f26 0%, #0071e3 100%);
    border-radius: 2px;
}

.ff-home-blog__desc {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.55;
    color: #424245;
    margin: 0;
    max-width: 560px;
}

.ff-home-blog__view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    background: var(--ff-blue, #00A3FF);
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 9999px;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 113, 227, 0.18);
    white-space: nowrap;
}

.ff-home-blog__view-all:hover {
    background: #0077ed;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.32);
    color: #ffffff !important;
    text-decoration: none !important;
}

.ff-home-blog__view-all:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--ff-blue, #0071e3);
}

.ff-home-blog__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ff-home-blog-card-wrap {
    min-width: 0;
}

/* Card markup uses the same ::after-overlay pattern as the parts
   carousel cards — full card is click-zoned to the post URL via
   the title-link, no nested anchors. */
.ff-home-blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 14px;
    overflow: hidden;
    color: #1d1d1f;
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ff-home-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.ff-home-blog-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f5f5f7;
    text-decoration: none !important;
}

.ff-home-blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ff-home-blog-card:hover .ff-home-blog-card__media img {
    transform: scale(1.04);
}

.ff-home-blog-card__media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
    text-align: center;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6e6e73;
    background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 100%);
}

.ff-home-blog-card__body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
}

.ff-home-blog-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6e6e73;
}

.ff-home-blog-card__category {
    color: var(--ff-blue, #0071e3);
}

.ff-home-blog-card__dot {
    color: #c7c7cc;
}

.ff-home-blog-card__title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-transform: none;
    color: #1d1d1f;
    margin: 0;
    /* 3-line clamp keeps all cards the same height regardless of
       title length. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ff-home-blog-card__title-link {
    color: inherit;
    text-decoration: none !important;
}

/* Full-card click overlay anchored to the title link. */
.ff-home-blog-card__title-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ff-home-blog-card__title-link:focus-visible {
    outline: none;
}
.ff-home-blog-card:has(.ff-home-blog-card__title-link:focus-visible) {
    outline: 3px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}

.ff-home-blog-card__excerpt {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e6e73;
    margin: 0;
    /* 3-line clamp for visual balance with the 3-line title. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ff-home-blog-card__read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;     /* push to bottom of card body */
    padding-top: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ff-blue, #0071e3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: gap 0.2s ease, color 0.2s ease;
}

.ff-home-blog-card:hover .ff-home-blog-card__read-more {
    gap: 8px;
    color: #0077ed;
}

/* Red-to-blue gradient accent at the bottom edge of each card. */
.ff-home-blog-card__rule {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #dc1f26 0%, #0071e3 100%);
    border-radius: 2px;
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ff-home-blog-card,
    .ff-home-blog-card__media img,
    .ff-home-blog-card__read-more,
    .ff-home-blog__view-all {
        transition: none !important;
    }
    .ff-home-blog-card:hover,
    .ff-home-blog-card:hover .ff-home-blog-card__media img {
        transform: none !important;
    }
}

@media (max-width: 1023px) {
    .ff-home-blog__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    /* Third card spans full width on tablet so we don't end up
       with a lonely orphaned card on the second row. */
    .ff-home-blog-card-wrap:nth-child(3) {
        grid-column: 1 / -1;
    }
    .ff-home-blog-card-wrap:nth-child(3) .ff-home-blog-card__media {
        aspect-ratio: 21 / 9;
    }
}

@media (max-width: 767px) {
    .ff-home-blog {
        padding: 40px 0;
    }
    .ff-home-blog__inner {
        padding: 0 16px;
    }
    .ff-home-blog__header {
        margin-bottom: 24px;
    }
    .ff-home-blog__title {
        font-size: 1.75rem;
    }
    .ff-home-blog__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ff-home-blog-card-wrap:nth-child(3) {
        grid-column: auto;
    }
    .ff-home-blog-card-wrap:nth-child(3) .ff-home-blog-card__media {
        aspect-ratio: 16 / 10;
    }
}


/* ============================================================
   PARTS CAROUSELS (2026-05-27) — three stacked rows replacing
   the flagship-tile grid. Each row has a left-column title +
   description + Shop All button, and a right-column horizontal
   product scroller with prev/next arrows.

   Shared red->white->blue wisp background image behind every
   row so the section reads as one cohesive showcase rather
   than three separate sections.
   ============================================================ */

.ff-parts-carousels {
    position: relative;
    padding: 0;
    background-color: #ffffff;
}

/* Each row is its own full-width "section": bg image stretched edge
   to edge, then a max-width 1440px inner grid centered inside it.
   Stretched (100% 100%) instead of cover so the wisps reach the
   row edges and we never see plain white at the sides; the art is
   abstract enough that mild axis stretching reads fine.

   Each carousel gets its own backdrop via the .ff-parts-row--<slug>
   modifier below. The base rule sets shared positioning. */
.ff-parts-row {
    position: relative;
    padding: 56px 0;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.ff-parts-row--xp {
    background-image: url('../images/brand/parts-carousel-bg.webp');
}

.ff-parts-row--xf {
    background-image: url('../images/brand/xf-parts-bg.webp');
    background-color: #0a1929;     /* navy fallback under the dark art */
}

.ff-parts-row--bestsellers {
    background-image: url('../images/brand/bestsellers-bg.webp');
}

/* XF row is dark — intro text + arrow controls need light treatment
   so they stay readable. Cards themselves stay white so the product
   imagery still pops. */
.ff-parts-row--xf .ff-parts-row__eyebrow {
    color: #c7c7cc !important;
}
.ff-parts-row--xf .ff-parts-row__title {
    color: #f5f5f7 !important;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}
.ff-parts-row--xf .ff-parts-row__desc {
    color: #d2d2d7 !important;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}
.ff-parts-row--xf .ff-parts-row__arrow {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.ff-parts-row--xf .ff-parts-row__arrow:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
}

.ff-parts-row__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: minmax(240px, 280px) 1fr;
    gap: 40px;
    align-items: center;
}

/* Left column — title + desc + Shop All button */
.ff-parts-row__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 280px;
}

.ff-parts-row__eyebrow {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #6e6e73;
    margin: 0 0 6px;
}

.ff-parts-row__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #1d1d1f;
    margin: 0;
}

/* Red-to-blue gradient underline — same brand accent used on the
   trust-bar tiles, ties the two sections together visually. */
.ff-parts-row__rule {
    display: block;
    width: 56px;
    height: 2px;
    margin: 12px 0 16px;
    background: linear-gradient(90deg, #dc1f26 0%, #0071e3 100%);
    border-radius: 2px;
}

.ff-parts-row__desc {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.45;
    color: #424245;
    margin: 0 0 20px;
}

.ff-parts-row__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    background: var(--ff-blue, #00A3FF);
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 9999px;
    border: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 113, 227, 0.18);
    white-space: nowrap;
}

.ff-parts-row__cta:hover {
    background: #0077ed;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.32);
    text-decoration: none !important;
    color: #ffffff !important;
}

.ff-parts-row__cta:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--ff-blue, #0071e3);
}

.ff-parts-row__cta svg {
    flex: 0 0 auto;
}

/* Right column — horizontal product scroller + arrows */
.ff-parts-row__scroller-wrap {
    position: relative;
    min-width: 0;     /* required so the inner grid can shrink */
}

/* Flex-based scroller — exact card widths so the visible row always
   contains a whole number of cards (no partial cards at rest). Cards
   sized via flex-basis as a percentage of container width minus the
   total gap; updating --cards-visible at breakpoints changes how many
   fit per page. scroll-snap-stop: always reinforces snap during touch
   scroll so we land cleanly on the next batch. */
.ff-parts-row__scroller {
    list-style: none;
    margin: 0;
    padding: 8px 8px 24px;     /* bottom padding clears card shadow */
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/old Edge */
    scroll-padding-left: 8px;
    --cards-visible: 5;
    --card-gap: 20px;
}

.ff-parts-row__scroller::-webkit-scrollbar {
    display: none;
}

.ff-parts-card-wrap {
    /* width = (100% - (gaps between visible cards)) / cards-visible.
       Subtracting 0.1px nudges below the math-perfect width so sub-
       pixel rounding never overflows the container and creates a
       partial card peek on the right edge. */
    flex: 0 0 calc((100% - (var(--cards-visible) - 1) * var(--card-gap)) / var(--cards-visible) - 0.1px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
}

/* Product card — image / title / desc / price / ATC, with the whole
   card click-zoned to the PDP via the title-link's ::after overlay.
   ATC button sits above the overlay (relative + z-index) so it can
   capture its own click for add-to-cart. This pattern avoids nested
   anchors while keeping the entire card clickable. */
.ff-parts-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 14px;
    overflow: hidden;
    color: #1d1d1f;
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
}

.ff-parts-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.ff-parts-card__media {
    display: block;
    background: #ffffff;
    aspect-ratio: 1 / 1;
    padding: 20px;
    overflow: hidden;
    text-decoration: none !important;
}

.ff-parts-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ff-parts-card:hover .ff-parts-card__media img {
    transform: scale(1.04);
}

.ff-parts-card__body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
}

.ff-parts-card__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: #1d1d1f;
    margin: 0;
}

.ff-parts-card__title-link {
    color: inherit;
    text-decoration: none !important;
}

/* The full-card click overlay — anchored to the title-link so the
   semantic primary link is the product title. ATC button lifts itself
   above this overlay with position: relative + z-index. */
.ff-parts-card__title-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ff-parts-card__title-link:focus-visible {
    outline: none;
}
.ff-parts-card:has(.ff-parts-card__title-link:focus-visible) {
    outline: 3px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}

.ff-parts-card__desc {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: #6e6e73;
    margin: 0;
    /* Two-line clamp keeps every card the same height regardless of
       description length. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price row — sale price gets the brand-blue color, regular price
   line-through. Single price renders cleanly on its own. */
.ff-parts-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 8px;
    flex-wrap: wrap;
}

.ff-parts-card__price {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1;
    letter-spacing: -0.01em;
}

.ff-parts-card__price--sale {
    color: #d70015;
}

.ff-parts-card__price-old {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #86868b;
    text-decoration: line-through;
    line-height: 1;
}

/* ATC button — full-width pill at the bottom of the card. Sits above
   the title-link::after overlay so clicking it submits the form. */
.ff-parts-card__actions {
    margin-top: auto;     /* push to bottom of card body */
    position: relative;
    z-index: 2;
}

.ff-parts-card__form {
    margin: 0;
}

.ff-parts-card__atc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    background: #1d1d1f;
    color: #ffffff !important;
    border: none;
    border-radius: 9999px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.ff-parts-card__atc:hover,
.ff-parts-card__atc:focus-visible {
    background: var(--ff-blue, #00A3FF);
    transform: translateY(-1px);
}

.ff-parts-card__atc:focus-visible {
    outline: 3px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}

.ff-parts-card__atc:disabled,
.ff-parts-card__atc[aria-busy="true"] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* OOS variant — muted grey instead of black, signals not-buyable */
.ff-parts-card__atc--oos {
    background: #6e6e73;
}

.ff-parts-card__atc--oos:hover,
.ff-parts-card__atc--oos:focus-visible {
    background: #424245;
}

/* Red-to-blue gradient accent at the bottom edge of each card. */
.ff-parts-card__rule {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #dc1f26 0%, #0071e3 100%);
    border-radius: 2px;
    z-index: 0;
}

/* Arrow controls — Apple-style circular ghost buttons floating
   over the right edge of the scroller. */
.ff-parts-row__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.ff-parts-row__arrow:hover {
    background: #f5f5f7;
    transform: translateY(-50%) scale(1.06);
}

.ff-parts-row__arrow:focus-visible {
    outline: 3px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}

.ff-parts-row__arrow[aria-disabled="true"] {
    opacity: 0;
    pointer-events: none;
}

.ff-parts-row__arrow svg {
    width: 18px;
    height: 18px;
}

.ff-parts-row__arrow--prev { left: -12px; }
.ff-parts-row__arrow--next { right: -12px; }

@media (prefers-reduced-motion: reduce) {
    .ff-parts-card,
    .ff-parts-card__media img,
    .ff-parts-row__arrow,
    .ff-parts-row__cta {
        transition: none !important;
    }
    .ff-parts-card:hover,
    .ff-parts-card:hover .ff-parts-card__media img {
        transform: none !important;
    }
}

/* Tablet — drop to 3 visible cards, narrower left column */
@media (max-width: 1199px) {
    .ff-parts-row__scroller { --cards-visible: 4; }
}
@media (max-width: 1023px) {
    .ff-parts-row__inner {
        grid-template-columns: 240px 1fr;
        gap: 24px;
        padding: 0 24px;
    }
    .ff-parts-row {
        padding: 40px 0;
    }
    .ff-parts-row__scroller { --cards-visible: 3; }
}

/* Mobile — stack vertically, intro on top, cards scroll below */
@media (max-width: 767px) {
    .ff-parts-row {
        padding: 28px 0;
    }
    .ff-parts-row__inner {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 16px;
    }
    .ff-parts-row__intro {
        max-width: 100%;
    }
    .ff-parts-row__title {
        font-size: 1.75rem;
    }
    .ff-parts-row__scroller {
        --cards-visible: 2;
        --card-gap: 14px;
        gap: 14px;
        padding: 4px 4px 18px;
    }
    /* Arrows are subtler on mobile — touch users swipe directly */
    .ff-parts-row__arrow {
        display: none;
    }
}

.ff-apple-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    text-decoration: none !important;
    min-height: 580px;
    padding: 60px 40px 0;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

.ff-apple-tile:hover {
    opacity: 1;
    outline: none;
}

/* Keyboard focus on hero tiles — these are the largest interactive
   surfaces on the homepage (Apple-style product showcase), so they
   need a clear indicator beyond the subtle 1.04× image-scale that
   triggers on hover/focus. 3px brand-blue outline ring with 4px
   offset clears the tile content cleanly without overlapping the
   image-scale animation. */
.ff-apple-tile:focus-visible {
    opacity: 1;
    outline: 3px solid var(--ff-blue, #0071e3);
    outline-offset: 4px;
}

.ff-apple-tile:hover .ff-apple-tile__media img,
.ff-apple-tile:focus-visible .ff-apple-tile__media img {
    transform: scale(1.04);
}

.ff-apple-tile--dark {
    background: linear-gradient(180deg, #1d1d1f 0%, #2a2a2d 100%);
}

.ff-apple-tile--light {
    background: #f5f5f7;
}

.ff-apple-tile__text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 640px;
    margin: 0 auto;
}

.ff-apple-tile__eyebrow {
    font-family: var(--ff-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: 6px;
    color: #0071e3;
}

.ff-apple-tile--dark .ff-apple-tile__eyebrow {
    color: #2997ff;
}

.ff-apple-tile__title {
    font-family: var(--ff-font-heading);
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 10px 0;
    text-transform: none;
}

.ff-apple-tile--dark .ff-apple-tile__title {
    color: #f5f5f7;
}

.ff-apple-tile--light .ff-apple-tile__title {
    color: #1d1d1f;
}

.ff-apple-tile__subtitle {
    font-family: var(--ff-font-body);
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 20px 0;
    max-width: 520px;
}

.ff-apple-tile--dark .ff-apple-tile__subtitle {
    color: #a1a1a6;
}

.ff-apple-tile--light .ff-apple-tile__subtitle {
    color: #424245;
}

/* Tile CTA — Apple "Learn more ›" text link style */
.ff-apple-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--ff-font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    letter-spacing: 0;
    padding: 10px 24px;
    border-radius: 980px;
    background: #0071e3;
    color: #ffffff !important;
    transition: background 0.2s ease, transform 0.2s ease;
}

.ff-apple-tile__cta:hover {
    background: #0077ed;
    color: #ffffff !important;
}

.ff-apple-tile__chevron {
    display: inline-block;
    margin-left: 2px;
    transform: translateY(0);
    transition: transform 0.2s ease;
}

.ff-apple-tile:hover .ff-apple-tile__chevron,
.ff-apple-tile:focus-visible .ff-apple-tile__chevron {
    transform: translateX(2px);
}

/* Media area — the product image at the bottom of the tile */
.ff-apple-tile__media {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin-top: 32px;
    margin-bottom: -40px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.ff-apple-tile__media img {
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

.ff-apple-tile--dark .ff-apple-tile__media img {
    filter: drop-shadow(0 20px 40px rgba(0, 113, 227, 0.2)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

/* Mobile tile adjustments */
@media (max-width: 767px) {
    .ff-apple-tile {
        min-height: 480px;
        padding: 48px 24px 0;
    }
    .ff-apple-tile__media {
        max-width: 100%;
    }
    .ff-apple-tile__media img {
        max-height: 280px;
    }
}

/* --- Apple Store Category Strip (product image + label) --- */
.ff-store-categories {
    background: #f5f5f7;
    padding: 60px 24px 48px;
}

.ff-store-categories__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.ff-store-categories__title {
    font-family: var(--ff-font-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 36px 0;
    text-transform: none;
    letter-spacing: -0.015em;
}

.ff-store-categories__strip {
    display: flex;
    justify-content: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 8px 8px;
}
.ff-store-categories__strip::-webkit-scrollbar {
    display: none;
}

.ff-store-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: 10px 12px 14px;
    border-radius: 16px;
    transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    min-width: 0;
    flex: 1 1 0;
    max-width: 150px;
}

.ff-store-cat:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Keyboard focus on Shop Fusion Firearms category cards (Pistols /
   1911 Parts / Sights / etc) — keyboard users tabbing through the
   strip on the homepage need both the background tint (parity with
   mouse hover) and a clear brand-blue outline ring. 2px outline +
   3px offset clears the 16px-radius card edge cleanly. */
.ff-store-cat:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
    border-radius: 16px;
}

.ff-store-cat__img {
    width: 110px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.ff-store-cat__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ff-store-cat:hover .ff-store-cat__img img,
.ff-store-cat:focus-visible .ff-store-cat__img img {
    transform: scale(1.06);
}

.ff-store-cat__name {
    font-family: var(--ff-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: #1d1d1f;
    white-space: nowrap;
    letter-spacing: 0;
}

/* Legacy pill links (kept for backward compat) */
.ff-apple-categories { display: none; }

/* --- Product card refinements: mobile full-width, uniform sizing --- */
@media (max-width: 767px) {
    .product-item .product-item-photo,
    .product-item .product-image-container {
        border-radius: 20px;
    }

    /* Larger typography on mobile for readability */
    .product-item .product-item-name a,
    .product-item-link {
        font-size: 1.5rem;
    }

    .product-item .price,
    .price-box .price {
        font-size: 1.0625rem;
    }

    /* More generous padding inside mobile cards */
    .product-item .product-info,
    .product-item .product-item-details {
        padding: 24px 8px 8px;
    }

    /* Wider Add to Cart button on mobile — easier to tap */
    .product-item .action.tocart,
    .product-item .btn-primary,
    .product-item button.action.primary {
        padding: 12px 32px !important;
        font-size: 1rem !important;
    }
}

/* Hide the duplicate "Category" filter pills — we have the image strip instead */
dl#narrow-by-list2,
dl#narrow-by-list,
.filter-options-item[aria-label="Category filter"] {
    display: none !important;
}

/* --- Subcategory Navigation Strip (category pages) — clean, no gray box --- */
.ff-subcat-strip {
    background: transparent;
    border-radius: 0;
    padding: 8px 0 24px;
    margin: 0 auto 16px;
    max-width: 1280px;
    text-align: left;
    position: relative;
    border-bottom: 1px solid #e8e8ed;
    box-sizing: border-box;
}

/* Fade indicators on edges to hint at scrollability — use white so they blend with page */
.ff-subcat-strip::before,
.ff-subcat-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.2s ease;
}
.ff-subcat-strip::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
    opacity: 0;
}
.ff-subcat-strip::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}
.ff-subcat-strip.ff-scrolled::before {
    opacity: 1;
}
.ff-subcat-strip.ff-scroll-end::after {
    opacity: 0;
}

/* Scroll arrow buttons — only visible when the content overflows */
.ff-subcat-strip__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    color: #1d1d1f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.ff-subcat-strip__arrow:hover {
    background: rgba(0, 113, 227, 0.10);
    color: var(--ff-blue, #0071e3);
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.18);
    outline: none;
}
.ff-subcat-strip__arrow:focus-visible {
    background: rgba(0, 113, 227, 0.10);
    color: var(--ff-blue, #0071e3);
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.18);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

.ff-subcat-strip__arrow:active {
    transform: translateY(-50%) scale(0.94);
    transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    .ff-subcat-strip__arrow:active {
        transform: translateY(-50%);
    }
}
.ff-subcat-strip__arrow--prev { left: 8px; }
.ff-subcat-strip__arrow--next { right: 8px; }

/* Show arrows when content overflows */
.ff-subcat-strip.ff-can-scroll .ff-subcat-strip__arrow {
    opacity: 1;
    pointer-events: auto;
}
/* Hide prev when at start */
.ff-subcat-strip:not(.ff-scrolled) .ff-subcat-strip__arrow--prev {
    opacity: 0;
    pointer-events: none;
}
/* Hide next when at end */
.ff-subcat-strip.ff-scroll-end .ff-subcat-strip__arrow--next {
    opacity: 0;
    pointer-events: none;
}

.ff-subcat-strip__inner {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    /* Breathing room on left/right so items aren't clipped by arrows */
    padding: 0 56px;
    box-sizing: border-box;
    scroll-snap-type: x proximity;
}
.ff-subcat-strip__inner::-webkit-scrollbar {
    display: none;
}

.ff-subcat-strip__scroll {
    display: flex;
    gap: 8px;
    padding: 0;
    min-width: min-content;
    justify-content: flex-start;
    width: max-content;
    margin: 0;
}

.ff-subcat-strip__scroll > * {
    scroll-snap-align: start;
}

.ff-subcat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: 8px 10px 10px;
    border-radius: 12px;
    transition: background 0.2s ease;
    min-width: 96px;
    flex: 0 0 auto;
    text-align: center;
}

.ff-subcat-card:hover {
    background: rgba(0, 0, 0, 0.05);
}

.ff-subcat-card__img {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 14px;
    overflow: hidden;
    background: #f5f5f7;
}

.ff-subcat-card__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.ff-subcat-card:hover .ff-subcat-card__img img {
    transform: scale(1.06);
}

.ff-subcat-card__placeholder {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6e6e73;
}

.ff-subcat-card__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.3;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-subcat-card__count {
    font-size: 0.6875rem;
    color: #6e6e73;
    margin-top: 2px;
}

/* --- Apple Store Values Row --- */
.ff-apple-values {
    background: #ffffff;
    border-top: none;
    padding: 56px 24px;
}

.ff-apple-values__inner {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

@media (max-width: 734px) {
    .ff-apple-values__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ff-apple-value__title {
    font-family: var(--ff-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 4px 0;
    text-transform: none;
    letter-spacing: 0.01em;
}

.ff-apple-value__desc {
    font-family: var(--ff-font-body);
    font-size: 0.875rem;
    color: #6e6e73;
    margin: 0;
    line-height: 1.4;
}

/* --- Override old section styles so they don't conflict --- */
.ff-section,
.ff-section-alt,
.ff-lineup-section {
    padding: 0;
}

.ff-section-header {
    margin-bottom: 0;
}

/* Hide old trust bar — replaced by ff-apple-values */
/* ============================================================
   FUSION MEGAMENU PHASE 2 — UPPERCASE, spaced, Parts hover-reveal
   7 top-level items, hardcoded structure, Schema.org + ARIA
   ============================================================ */

/* STICKY HEADER — stays pinned on scroll so nav is always accessible */
.page-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ff-bg-header, #1c2a35);
    min-height: 72px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ff-megamenu {
    /* No positioning context — the .ff-megamenu__panel is `position: fixed`
       and pinned to viewport coords, so it doesn't need this element as a
       containing block. Tried `position: relative` + `top: 100%` on the
       panel previously — that anchored to nav-bottom correctly but the
       full-width transform trick (`left: 50%; translateX(-50%); width:
       100vw`) shrank visibly when an ancestor created a containing block.
       Reverting to fixed + a hardcoded top that matches the bottom edge
       of the header nav (was 108px when the free-ship banner sat above;
       dropped to 72px when the banner was removed 2026-05-08). */
    display: flex;
    justify-content: center;
}

/* Ensure parent containers don't clip the megamenu */
.page-header .navigation {
    overflow: visible !important;
}
.page-header {
    overflow: visible !important;
}

.ff-megamenu__top {
    display: flex;
    gap: 2.75rem;
    padding: 0;
    margin: 0;
    list-style: none;
    align-items: center;
}

.ff-megamenu__item {
    position: static;
}

/* Top-level links — UPPERCASE, bigger for readability */
.ff-megamenu__link {
    display: inline-block;
    color: #f5f5f7 !important;
    font-family: var(--ff-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    padding: 1.5rem 1rem;
    transition: color 0.2s ease, opacity 0.2s ease;
    position: relative;
}

/* Give the header itself more breathing room so the nav isn't squished */
.page-header {
    min-height: 68px;
}
.page-header > *,
.page-header .container,
.page-header .header.content {
    min-height: 68px;
}

/* ============================================================
   HEADER LAYOUT: logo LEFT | menu CENTER | icons RIGHT
   Widens container on big viewports so nothing is crammed.
   Uses flex spacers for 3-zone layout — keeps megamenus working
   since nav stays in normal document flow (no absolute positioning).
   ============================================================ */
.page-header .container {
    max-width: min(100%, 1720px) !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    position: relative !important;
    justify-content: space-between !important;
}

/* Logo lockup — far left, fixed width */
.page-header .container > div:first-of-type[class*="sm:order-1"],
.page-header .container > div[class*="sm:order-1"][class*="lg:order-0"] {
    flex: 0 0 auto !important;
    order: 1 !important;
}

/* Nav — takes remaining space, content centered via justify-content */
@media (min-width: 1024px) {
    .page-header .container > .navigation,
    .page-header .container > div.navigation.hidden.lg\:block {
        flex: 1 1 auto !important;
        display: flex !important;
        justify-content: center !important;
        order: 2 !important;
        margin: 0 !important;
        position: static !important; /* no absolute positioning — keeps megamenu working */
        transform: none !important;
    }

    /* Pin the ff-megamenu at the exact horizontal center of the nav container via
       absolute positioning + margin:auto (NO transform — transform creates a containing block
       that traps position:fixed dropdown panels and shrinks them). This keeps the menu titles
       rock-solid still when dropdowns open, AND lets the fixed-width (100vw) dropdown panels
       render at full viewport width as intended. */
    .page-header .container > .navigation,
    .page-header .container > div.navigation {
        position: relative !important;
        min-height: 44px !important;
    }

    .page-header .container > .navigation > .ff-megamenu,
    .page-header .container > div.navigation > .ff-megamenu {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 50% !important;
        margin-top: -22px !important; /* half of min-height 44px */
        margin-left: auto !important;
        margin-right: auto !important;
        width: max-content !important;
        max-width: 100% !important;
        transform: none !important;
        justify-content: center !important;
    }
}

/* Icons (search / account / cart) — far right, fixed width */
.page-header .container > div.flex.items-center[class*="order-1"],
.page-header .container > div[class*="order-1"][class*="lg:order-0"]:last-of-type {
    flex: 0 0 auto !important;
    gap: 16px !important;
    order: 3 !important;
}

/* Logo — prevent flex shrink and size it properly */
.page-header a[aria-label*="Home"] {
    flex: 0 0 auto !important;
    min-width: 160px;
}

.page-header a[aria-label*="Home"] img {
    height: 48px !important;
    max-height: 48px !important;
    min-height: 40px !important;
    width: auto !important;
    max-width: 200px !important;
    min-width: unset !important;
    object-fit: contain !important;
    display: block !important;
}

/* Logo container — don't let flexbox squish it */
.page-header .container > div:first-child,
.page-header .sm\:order-1,
.page-header [class*="order-1"] {
    flex: 0 0 auto !important;
    min-width: 160px;
}

/* Responsive: smaller logo on tablet */
@media (max-width: 1023px) {
    .page-header a[aria-label*="Home"] img {
        height: 42px !important;
        max-height: 42px !important;
        max-width: 180px !important;
    }
}

.ff-megamenu__link:hover,
.ff-megamenu__link:focus-visible,
.ff-megamenu__link.is-active {
    color: #ffffff !important;
    opacity: 1;
    outline: none;
}

.ff-megamenu__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: transparent;
    transition: background 0.2s ease;
}

.ff-megamenu__link:hover::after,
.ff-megamenu__link.is-active::after,
.ff-megamenu__link:focus-visible::after {
    /* Treven: items with a megamenu telegraph "you're hovering me"
       by dropping the panel down. Items WITHOUT a megamenu (Sale,
       Shotguns when they don't have one configured, etc.) had no
       hover signal at all — you had to guess they were clickable.
       Add the brand-blue underline on :hover so every top-level
       nav link gets a consistent indicator. */
    background: #0071e3;
}

/* Megamenu panel — pinned to viewport with `position: fixed` so it
   spans the full window width regardless of any centered/narrower
   ancestors. `top: 72px` clears the sticky page-header. (Was 108px
   when a free-shipping banner sat above the header — that banner was
   removed 2026-05-08.) If the layout changes or a banner is added back,
   adjust this single value plus the matching `.ff-megamenu__backdrop`
   rule below. The fixed strategy is preferred over `position: absolute`
   + transform-centering because absolute elements can be constrained
   by ancestor containing blocks (transform, filter, will-change),
   which made the panel render narrower than expected. */
.ff-megamenu__panel {
    position: fixed !important;
    top: 72px;
    left: 0;
    right: 0;
    width: 100vw;
    background: #ffffff !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    z-index: 9999 !important;
    overflow: hidden;
}

/* Apple-authentic megamenu inner — 3 clean text columns */
.ff-megamenu__inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 32px var(--ff-container-pad, 32px) 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

/* 4-column variant — used by SERVICES panel since the addition of a
   CUSTOMER FORMS column. Wider max-width keeps each column readable
   and gap is slightly tighter to fit four columns at the same scale. */
.ff-megamenu__inner.ff-megamenu__inner--cols-4 {
    max-width: 1280px;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
}

.ff-megamenu__col {
    display: flex;
    flex-direction: column;
}

/* Column heading eyebrow — Apple-style muted label */
.ff-megamenu__eyebrow {
    font-family: var(--ff-font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    color: #6e6e73;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 18px 0;
    line-height: 1;
}

.ff-megamenu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ff-megamenu__list li {
    margin: 0;
}

/* Menu links — UPPERCASE, Apple-style subtle weight */
.ff-megamenu__list-link {
    display: block;
    font-family: var(--ff-font-heading);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1d1d1f !important;
    text-decoration: none !important;
    line-height: 1.45;
    padding: 8px 0;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.ff-megamenu__list-link:hover {
    color: #0071e3 !important;
    padding-left: 4px;
    outline: none;
}

/* Keyboard focus on megamenu list links — the megamenu fans out 30+
   anchors per panel (Pistols / Sights / Parts / Accessories /
   Services / Shotguns), so keyboard users tabbing through need a
   clearer indicator than the subtle 4px padding-shift + color.
   2px brand-blue outline + 2px offset clears the link text without
   interfering with the indent animation. */
.ff-megamenu__list-link:focus-visible {
    color: #0071e3 !important;
    padding-left: 4px;
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
    border-radius: 3px;
}

/* "Shop All" / primary link — has divider above */
.ff-megamenu__list-link--primary,
.ff-megamenu__list-link--all {
    color: #0071e3 !important;
    font-weight: 700;
    margin-top: 10px;
    padding-top: 14px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Current-page indicator on megamenu list-links — when desktop.phtml's
   Alpine init() sets aria-current="page" on the link matching the
   current URL pathname, give it brand-blue color + bold weight so SR +
   sighted users both see the active category at a glance when they
   open the megamenu while browsing a category. Pairs with the equivalent
   mobile drawer styling shipped in commit 796c9e46. */
.ff-megamenu__list-link[aria-current="page"] {
    color: var(--ff-blue, #0071e3) !important;
    font-weight: 700 !important;
}

.ff-megamenu__sublist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ff-megamenu__item-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ff-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: #1d1d1f !important;
    text-decoration: none !important;
    letter-spacing: -0.015em;
    padding: 6px 0;
    transition: color 0.2s ease, gap 0.2s ease;
}

.ff-megamenu__item-link:hover {
    color: #0071e3 !important;
}

.ff-megamenu__item-link:hover svg {
    transform: translateX(2px);
}

.ff-megamenu__item-link svg {
    transition: transform 0.2s ease;
    opacity: 0.6;
}

/* "All X" link stands out with blue color */
.ff-megamenu__item-link--all {
    color: #0071e3 !important;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ff-megamenu__item-link--all:hover {
    color: #0077ed !important;
}

/* Featured column — bigger visual tile */
.ff-megamenu__col--featured {
    position: relative;
}

.ff-megamenu__featured {
    display: flex;
    flex-direction: column;
    background: #f5f5f7;
    border-radius: 16px;
    padding: 24px;
    text-decoration: none !important;
    transition: transform 0.25s ease, background 0.25s ease;
    width: 100%;
}

.ff-megamenu__featured:hover {
    background: #ebebf0;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Keyboard focus on megamenu featured tile (the large product spotlight
   in dropdowns — XP COMP, XP PRO, etc). Same hover treatment plus 2px
   brand-blue outline at 3px offset. Consolidates the duplicate :hover
   rules that previously sat side-by-side at this line. */
.ff-megamenu__featured:focus-visible {
    background: #ebebf0;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}

.ff-megamenu__featured-title {
    font-family: var(--ff-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    margin: 0 0 4px 0;
    text-transform: none;
}

.ff-megamenu__featured-subtitle {
    font-size: 0.9375rem;
    color: #6e6e73;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.ff-megamenu__featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0071e3;
    letter-spacing: 0;
    transition: gap 0.2s ease;
}

.ff-megamenu__featured:hover .ff-megamenu__featured-cta {
    gap: 6px;
}

.ff-megamenu__featured-img {
    position: relative;
    width: 100%;
    height: 180px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(0, 113, 227, 0.06) 0%, transparent 70%);
    border-radius: 12px;
}

.ff-megamenu__featured-img img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.ff-megamenu__featured:hover .ff-megamenu__featured-img img {
    transform: scale(1.04);
}

/* Quick links column */
.ff-megamenu__col--quick .ff-megamenu__item-link {
    font-size: 1rem;
    font-weight: 500;
}

/* Backdrop behind menu that dims the page */
.ff-megamenu__backdrop {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 9998 !important;
    pointer-events: auto;
}

/* Fade transitions — quick snap-in so users never see a half-opaque panel */
.ff-mm-enter {
    transition: opacity 0.12s ease, transform 0.18s ease;
}
.ff-mm-enter-start {
    opacity: 0;
    transform: translateY(-4px);
}
.ff-mm-enter-end {
    opacity: 1;
    transform: translateY(0);
}
.ff-mm-leave {
    transition: opacity 0.08s ease;
}
.ff-mm-leave-start {
    opacity: 1;
}
.ff-mm-leave-end {
    opacity: 0;
}

/* Tablet: collapse quick links column into the featured column */
@media (max-width: 1100px) {
    .ff-megamenu__inner {
        grid-template-columns: 1fr 1.2fr;
        gap: 40px;
    }
    .ff-megamenu__col--quick {
        display: none;
    }
    /* 4-col SERVICES panel collapses to 2 columns at the tablet breakpoint
       so CUSTOMER FORMS doesn't squash next to the other three columns. */
    .ff-megamenu__inner.ff-megamenu__inner--cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px;
    }
}

/* ============================================================
   PHASE 2: PARTS MEGA MENU — left categories + right dynamic content
   ============================================================ */
.ff-megamenu__panel--parts {
    /* Inherits ff-megamenu__panel base styles */
}

.ff-megamenu__parts-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px var(--ff-container-pad, 32px) 28px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 36px;
}

/* LEFT COLUMN — category list */
.ff-megamenu__parts-left {
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    padding-right: 32px;
}

.ff-megamenu__parts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ff-megamenu__parts-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--ff-font-heading);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1d1d1f !important;
    text-decoration: none !important;
    padding: 14px 18px;
    border-radius: 10px;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.ff-megamenu__parts-link:hover,
.ff-megamenu__parts-link.is-hovered {
    background: rgba(0, 113, 227, 0.06);
    color: #0071e3 !important;
}

.ff-megamenu__parts-chevron {
    opacity: 0.5;
    transition: transform 0.15s ease, opacity 0.15s ease;
    flex: 0 0 auto;
}

.ff-megamenu__parts-link:hover .ff-megamenu__parts-chevron,
.ff-megamenu__parts-link.is-hovered .ff-megamenu__parts-chevron {
    opacity: 1;
    transform: translateX(3px);
}

/* RIGHT AREA — popular parts (default) OR subcategories (on hover) */
.ff-megamenu__parts-right {
    position: relative;
    min-height: 320px;
}

/* Relative positioning — x-show handles visibility, no overlap needed */
.ff-megamenu__parts-default,
.ff-megamenu__parts-subcats,
.ff-megamenu__parts-hover-panel {
    position: relative;
}

/* Popular parts grid — 5 cards in a single horizontal row to match
   the Pistols panel's exact 5-card layout. Each track gets 1fr so
   the row spans the full Parts-panel right pane. Treven 2026-05-22
   r4: "Make them more similar to the Pistol category cards" — same
   count, wider per-card real estate, better breathing room. */
.ff-megamenu__popular-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

/* Parts megamenu — Most Popular product cards. Vertical card
   mirroring the Pistol-section design: image on top, body below
   with product name + Shop → CTA. The card chrome below was
   strengthened on r4 (Treven 2026-05-22) — the prior subtle
   #e8e8ed border + zero shadow disappeared on the white parts
   panel, making each card read as just a floating image with text
   underneath instead of a unified container. Now: slightly darker
   border, always-on soft shadow, more body padding so the card
   feels substantial like the pistol cards. */
.ff-megamenu__popular-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                0 4px 12px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.ff-megamenu__popular-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 113, 227, 0.30);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.10),
                0 4px 12px rgba(0, 113, 227, 0.08);
}

/* Keyboard focus on Most Popular Parts cards — parity with hover
   lift plus a brand-blue outline ring. Spark-border animation still
   triggers on :focus-visible::before (line 13783). */
.ff-megamenu__popular-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(0, 113, 227, 0.30);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08),
                0 4px 10px rgba(0, 113, 227, 0.05);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

.ff-megamenu__popular-img {
    width: 100%;
    /* 4:3 gives more vertical room than 16:10 — tall product
       photos (recoil springs, slide-rod assemblies) get centered
       without the visible content feeling crammed against the
       top/bottom edges. Treven 2026-05-22 r5: "make sure the
       pictures are properly sized so no words or images are cut
       off." */
    aspect-ratio: 4 / 3;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 16px;
    border-radius: 0;
}

.ff-megamenu__popular-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* No drop-shadow on the image itself — pistol cards keep their
       photos clean inside the card frame. The card-level box-shadow
       is what does the visual grounding. */
}

.ff-megamenu__popular-card:hover .ff-megamenu__popular-img img,
.ff-megamenu__popular-card:focus-visible .ff-megamenu__popular-img img {
    transform: scale(1.04);
}

.ff-megamenu__popular-name {
    /* Card body — bottom strip of the vertical card holding the
       product name. The "Shop →" CTA underneath is rendered by the
       card-level ::after so this stays a single-purpose title node.
       4-line clamp on r5 so long products like "XP PRO and XP COMP
       4" Recoil Spring Kit - Stainless Steel (7LB, 9LB, 10LB,
       13LB)" don't have their tail (the "10LB, 13LB)" tail) cut
       off. min-height reserves 4-line space so 1- or 2-line titles
       still produce cards of uniform height across the row. */
    padding: 14px 16px 8px;
    border-top: 1px solid #e8e8ed;
    background: #ffffff;
    font-family: var(--ff-font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #1d1d1f;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 5.2em;
}

/* "Shop →" CTA strip rendered via ::after below the product name.
   Pure CSS — keeps the card markup unchanged. Brand-blue text with
   letter-spacing that widens on hover (same micro-interaction as the
   Pistol cards' CTA).

   Scoped under .ff-megamenu__popular-grid because the
   .ff-megamenu__popular-card class is also compounded onto the
   Pistol-section cards and Sale-tab cards as a spark-border carrier.
   Those already have their own CTAs in body content — adding a
   second "Shop →" via ::after would duplicate. The parent-grid
   selector restricts the pseudo-element to the Parts-panel cards. */
.ff-megamenu__popular-grid > .ff-megamenu__popular-card::after {
    content: "Shop \2192";
    display: block;
    padding: 0 16px 14px;
    margin-top: 4px;
    font-family: var(--ff-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ff-blue, #0071e3);
    transition: letter-spacing 0.25s ease;
}

.ff-megamenu__popular-grid > .ff-megamenu__popular-card:hover::after,
.ff-megamenu__popular-grid > .ff-megamenu__popular-card:focus-visible::after {
    letter-spacing: 0.16em;
}

/* Hover panel wrapper — relative positioning so container grows with content */
.ff-megamenu__parts-hover-panel {
    position: relative;
}

/* 2-LEVEL SUBCATEGORY — CARD-BASED GRID
   Each parent category gets its own card with clean background,
   parent name as heading + all children listed cleanly.
*/
/* Flexbox with flex-grow — cards auto-fill the row width,
   wide cards get 2x the space, never any empty grid cells */
.ff-megamenu__tree-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}

/* Each card — now a clickable <a> with image + heading + sublist */
.ff-megamenu__tree-col {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 200px;
    background: #f5f5f7;
    border-radius: 14px;
    padding: 14px;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none !important;
    color: inherit !important;
    cursor: default;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* Inner anchor wrapping the image + heading of each tree column. Used
   so the L2 sublist sibling can be its own anchors (nesting <a> inside
   <a> is invalid HTML and was eating sub-link clicks — Treven
   2026-05-22). Mirrors the column's text/decoration treatment so the
   visual is identical to the old wrap-everything-in-an-anchor pattern. */
.ff-megamenu__tree-col__main {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    border-radius: 8px;
}

.ff-megamenu__tree-col__main:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

.ff-megamenu__tree-col:hover {
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Keyboard focus on megamenu Sights/Accessories tree-column anchors —
   keyboard users tabbing through the L1 column links need both the
   lift (parity with mouse hover) and a brand-blue outline ring. The
   spark-border animation already triggers on :focus-visible::before
   (line 13809) — this rule adds the lift and outline on the base
   element. */
.ff-megamenu__tree-col:focus-visible {
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

/* Image area on top of each card — tall enough to show full firearm parts */
.ff-megamenu__tree-image {
    width: 100%;
    height: 140px;
    margin: -2px 0 14px 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: border-color 0.3s ease;
}

.ff-megamenu__tree-col:hover .ff-megamenu__tree-image,
.ff-megamenu__tree-col:focus-visible .ff-megamenu__tree-image {
    border-color: rgba(0, 113, 227, 0.25);
}

/* Picture wrapper from Hyvä's webp extension — fill the container so img can use the full space */
.ff-megamenu__tree-image picture {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ff-megamenu__tree-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
    transition: transform 0.35s ease;
}

/* Gentle hover — no cropping, just a subtle lift */
.ff-megamenu__tree-col:hover .ff-megamenu__tree-image img,
.ff-megamenu__tree-col:focus-visible .ff-megamenu__tree-image img {
    transform: scale(1.03);
}

/* Card heading — parent category name, clickable */
.ff-megamenu__tree-heading {
    font-family: var(--ff-font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #1d1d1f !important;
    text-decoration: none !important;
    padding: 0 0 8px 0;
    margin: 0 0 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: block;
    transition: color 0.15s ease;
}

.ff-megamenu__tree-heading:hover {
    color: #0071e3 !important;
}

/* Children list — 2 columns if many children fit, else 1 column */
.ff-megamenu__tree-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px 16px;
}

/* Wide cards (6+ children) take 2x the flex space AND use 2-column inner list */
.ff-megamenu__tree-col--wide {
    flex: 2 1 420px;
}

.ff-megamenu__tree-col--wide .ff-megamenu__tree-sublist {
    grid-template-columns: repeat(2, 1fr);
}

.ff-megamenu__tree-sublist li {
    margin: 0;
}

.ff-megamenu__tree-sublink {
    display: block;
    font-family: var(--ff-font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6e6e73 !important;
    text-decoration: none !important;
    line-height: 1.45;
    padding: 3px 0;
    transition: color 0.15s ease, padding-left 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ff-megamenu__tree-sublink:hover {
    color: #0071e3 !important;
    padding-left: 4px;
}

.ff-megamenu__tree-sublink:focus-visible {
    color: #0071e3 !important;
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
    border-radius: 4px;
}

/* If a card has no children (only parent), style differently */
.ff-megamenu__tree-col--no-children .ff-megamenu__tree-heading {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Footer "Shop All" bar */
.ff-megamenu__parts-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ============================================================
   FULL-WIDTH PANEL + BACKDROP
   ============================================================ */
/* Megamenu panel — duplicate ruleset (same selector as the block at
   line ~11357) kept here only to inherit max-height + scroll behavior
   when the panel content is taller than the viewport. The positioning
   props (position / top / left / width) are set authoritatively above
   via top: 100% relative to the .ff-megamenu nav. Don't re-declare
   them here or one rule will shadow the other again — that's the bug
   Treven flagged. */
.ff-megamenu__panel {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Backdrop behind menu — fixed so it covers everything from the
   megamenu's top edge down. Matches .ff-megamenu__panel `top: 72px`
   so the nav above stays clear (not dimmed). Was 108px when the
   free-ship banner sat above the header. */
.ff-megamenu__backdrop {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 9998 !important;
    pointer-events: auto;
}

/* Tablet: drop Parts layout to 2-col */
@media (max-width: 1100px) {
    .ff-megamenu__parts-inner {
        grid-template-columns: 220px 1fr;
        gap: 32px;
    }
    .ff-megamenu__popular-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ff-megamenu__subcats-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Below lg, the desktop menu is hidden by Hyvä; mobile menu takes over */

/* ============================================================
   APPLE-STYLE FILLED CART — clean line items, sticky summary
   ============================================================ */
.checkout-cart-index .page-title-wrapper h1 {
    font-family: var(--ff-font-heading) !important;
    font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #1d1d1f !important;
    text-align: center;
    margin-bottom: 32px !important;
}

.checkout-cart-index .cart.table-wrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.checkout-cart-index .cart.table-wrapper table {
    background: transparent !important;
    border-collapse: collapse !important;
}

.checkout-cart-index .cart.table-wrapper thead {
    display: none !important;
}

/* Cart line item: Hyvä uses <article class="cart item flex gap-4"> — work WITH it */
.checkout-cart-index article.cart.item {
    display: flex !important;
    gap: 24px !important;
    align-items: flex-start !important;
}

/* Product image on the LEFT — PURE WHITE backdrop per design standard
   ("product photos always sit on pure white backdrops"); thin border
   replaces the old grey fill so the product reads as a real product
   shot instead of sitting in a grey tile. */
.checkout-cart-index article.cart.item .product-item-photo {
    flex: 0 0 120px !important;
    width: 120px !important;
    height: 120px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    padding: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
}

.checkout-cart-index article.cart.item .product-item-photo img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* Content column */
.checkout-cart-index article.cart.item > .flex.flex-col {
    flex: 1;
    min-width: 0;
}

/* Product name — allow wrapping, no break-all. Clamp to 2 lines so
   long titles like "XP Pro and XP COMP 4″ Recoil Spring Kit – Stainless
   Steel (7LB, 9LB, 10LB, 13LB)" don't wrap to 4-5 lines and bloat the
   cart row height (companion to .ff-cart-item__name in cart drawer). */
.checkout-cart-index article.cart.item .product-item-name,
.checkout-cart-index article.cart.item h3.product-item-name {
    font-family: var(--ff-font-heading) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
    margin: 0 0 8px 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.checkout-cart-index article.cart.item .product-item-name a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.18s ease !important;
}

/* Hover/focus on cart-page item name — brand-blue tint signals "this
   navigates to the PDP" so customers know the name is clickable.
   No underline (would clash with the line-clamp ellipsis); just a
   color shift in the same family as our footer/header anchor hovers. */
.checkout-cart-index article.cart.item .product-item-name a:hover,
.checkout-cart-index article.cart.item .product-item-name a:focus-visible {
    color: var(--ff-blue, #0071e3) !important;
}

.checkout-cart-index article.cart.item .product-item-name a:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Qty input — premium pill replaced with a 52 px tall, 12 px radius,
   1.5 px border field that matches the design system used everywhere
   else (contact, login, dealer). Focus ring is brand-blue with the
   standard 4 px rgba glow. */
.checkout-cart-index article.cart.item input[name*="qty"],
.checkout-cart-index article.cart.item .input-text.qty,
.checkout-cart-index .cart.table-wrapper input[name*="qty"],
.checkout-cart-index .cart.table-wrapper .input-text.qty {
    width: 88px !important;
    height: 52px !important;
    padding: 0 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #d2d2d7 !important;
    border-radius: 12px !important;
    color: #1d1d1f !important;
    text-align: center !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.checkout-cart-index article.cart.item input[name*="qty"]:focus,
.checkout-cart-index article.cart.item .input-text.qty:focus,
.checkout-cart-index .cart.table-wrapper input[name*="qty"]:focus,
.checkout-cart-index .cart.table-wrapper .input-text.qty:focus {
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
    outline: none !important;
}

/* Price display */
.checkout-cart-index article.cart.item .price {
    font-family: var(--ff-font-heading) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
}

.checkout-cart-index article.cart.item .price-excluding-tax,
.checkout-cart-index article.cart.item .price-including-tax {
    font-size: 0.875rem !important;
    color: #6e6e73 !important;
}

/* Edit/Delete icons — subtle */
.checkout-cart-index article.cart.item .action.action-edit,
.checkout-cart-index article.cart.item .action.action-delete {
    color: #6e6e73 !important;
    transition: color 0.2s ease;
}

.checkout-cart-index article.cart.item .action.action-delete:hover {
    color: #FF3B30 !important;
}

/* Cart actions — clean text links */
.checkout-cart-index .cart.table-wrapper .action.action-edit,
.checkout-cart-index .cart.table-wrapper .action.action-delete,
.checkout-cart-index .cart.table-wrapper .actions-toolbar a {
    color: #0071e3 !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    padding: 6px 0 !important;
}

.checkout-cart-index .cart.table-wrapper .action.action-delete:hover {
    color: #FF3B30 !important;
}

/* Cart summary sidebar — premium white card per the site design
   standard (white bg, 14-16 px radius, 1 px border #e8e8ed, subtle
   shadow). Sticky on desktop so the totals + Checkout CTA stay in
   view as the customer scrolls a long line-item list. */
.checkout-cart-index .cart-summary {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    padding: 28px !important;
    position: sticky;
    top: 90px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

/* All children of summary — block-level, no floats, no weird sizing */
.checkout-cart-index .cart-summary > *:not(script) {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    position: static !important;
}

/* Scripts must stay hidden */
.checkout-cart-index .cart-summary script,
.checkout-cart-index script {
    display: none !important;
}

/* Force sidebar column to keep its sizing */
.checkout-cart-index .card.lg\:w-80,
.checkout-cart-index .card.\32 xl\:w-96,
.checkout-cart-index [class*="lg:w-80"] {
    width: 384px !important;
    min-width: 320px !important;
    flex: 0 0 384px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Sticky behavior keeps sidebar in view as you scroll */
@media (min-width: 1024px) {
    .checkout-cart-index [class*="lg:sticky"] {
        position: sticky;
        top: 90px;
    }
}

/* Summary title — Apple */
.checkout-cart-index .cart-summary .summary.title,
.checkout-cart-index .cart-summary > .title,
.checkout-cart-index .cart-summary h2,
.checkout-cart-index .cart-summary h3 {
    font-family: var(--ff-font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.015em !important;
    color: #1d1d1f !important;
    margin: 0 0 20px 0 !important;
    padding: 0 0 14px 0 !important;
    border-bottom: 1px solid #d2d2d7 !important;
    text-align: left !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* Totals rows — Subtotal, Tax, Shipping, etc. — clean two-column layout */
.checkout-cart-index .cart-totals {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.checkout-cart-index .cart-totals table,
.checkout-cart-index .cart-totals .totals {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}

.checkout-cart-index .cart-totals tbody {
    display: table-row-group !important;
}

.checkout-cart-index .cart-totals tr,
.checkout-cart-index .cart-totals .totals.sub,
.checkout-cart-index .cart-totals .totals.grand,
.checkout-cart-index .cart-totals .totals-tax {
    display: table-row !important;
}

.checkout-cart-index .cart-totals th,
.checkout-cart-index .cart-totals td {
    display: table-cell !important;
    padding: 8px 0 !important;
    border: none !important;
    text-align: left !important;
    font-size: 0.9375rem !important;
    color: #6e6e73 !important;
    vertical-align: middle;
}

.checkout-cart-index .cart-totals td {
    text-align: right !important;
    color: #1d1d1f !important;
    font-weight: 500 !important;
}

.checkout-cart-index .cart-totals .grand.totals th,
.checkout-cart-index .cart-totals .grand.totals td {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    padding-top: 14px !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* Collapsible sections (Apply Discount, Estimate Shipping) */
.checkout-cart-index .cart-summary [x-data],
.checkout-cart-index .cart-summary details,
.checkout-cart-index .cart-summary .cart-summary-actions,
.checkout-cart-index .cart-summary-actions {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* The summary headings (Apply Discount, Estimate Shipping) */
.checkout-cart-index .cart-summary summary,
.checkout-cart-index .cart-summary [role="button"]:not(.action) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0 !important;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1d1d1f;
    list-style: none;
    border-bottom: 1px solid #e8e8ed;
}

/* Checkout button — premium navy default → brand-blue hover with
   translateY lift + shadow. 56 px tall, 12 px radius, Oswald uppercase.
   Same primary-CTA treatment used on contact, login, register, and
   PDP add-to-cart so every "next step" CTA reads as the same control. */
.checkout-cart-index .cart-summary nav,
.checkout-cart-index .cart-summary .checkout-methods-items {
    width: 100% !important;
    margin-top: 24px !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
}

.checkout-cart-index .cart-summary button.action.primary.checkout,
.checkout-cart-index .cart-summary .action.primary.checkout,
.checkout-cart-index .cart-summary [href*="checkout"] button,
.checkout-cart-index .cart-summary button[type="submit"],
.checkout-cart-index .checkout-methods-items .action.primary {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    background: #0a1929 !important;
    color: #ffffff !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    border: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16) !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    margin: 0 !important;
}

.checkout-cart-index .cart-summary button.action.primary.checkout:hover,
.checkout-cart-index .cart-summary .action.primary.checkout:hover,
.checkout-cart-index .cart-summary button[type="submit"]:hover,
.checkout-cart-index .checkout-methods-items .action.primary:hover {
    background: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30) !important;
}

/* "Update Cart" + "Empty Cart" secondary buttons — outline treatment
   with thin navy border so they feel secondary to the primary
   Checkout CTA but still tappable as a 48 px control. */
.checkout-cart-index .cart.main.actions .action.update,
.checkout-cart-index .cart.main.actions .action.continue,
.checkout-cart-index .cart.main.actions .action.clear,
.checkout-cart-index .cart.main.actions button[name="update_cart_action"],
.checkout-cart-index button[name="update_cart_action"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    padding: 0 24px !important;
    background: #ffffff !important;
    color: #0a1929 !important;
    border: 1.5px solid #d2d2d7 !important;
    border-radius: 12px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important;
}
.checkout-cart-index .cart.main.actions .action.update:hover,
.checkout-cart-index .cart.main.actions .action.continue:hover,
.checkout-cart-index .cart.main.actions .action.clear:hover,
.checkout-cart-index button[name="update_cart_action"]:hover {
    border-color: var(--ff-blue, #0071e3) !important;
    color: var(--ff-blue, #0071e3) !important;
    background: rgba(0, 113, 227, 0.04) !important;
}

.checkout-cart-index .cart-summary .summary.title,
.checkout-cart-index .cart-summary > .title {
    font-family: var(--ff-font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.015em !important;
    color: #1d1d1f !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #d2d2d7 !important;
}

.checkout-cart-index .cart-summary .totals th,
.checkout-cart-index .cart-summary .totals td {
    padding: 10px 0 !important;
    color: #6e6e73 !important;
    border: none !important;
    font-size: 0.9375rem !important;
}

.checkout-cart-index .cart-summary .totals .grand.totals th,
.checkout-cart-index .cart-summary .totals .grand.totals td {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    padding-top: 16px !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* (Duplicated rule from earlier in this section is now consolidated
   into the navy → brand-blue treatment above. This block is left as
   a margin-top tweak only so the older selector still adds the
   spacing without re-asserting old colors.) */
.checkout-cart-index .cart-summary .action.primary.checkout {
    margin-top: 20px !important;
}

/* ============================================================
   APPLE-STYLE CHECKOUT — clean form flow
   ============================================================ */
.checkout-index-index .page-title-wrapper h1,
.checkout-onepage-index .page-title-wrapper h1 {
    font-family: var(--ff-font-heading) !important;
    font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #1d1d1f !important;
    text-align: center;
    margin-bottom: 32px !important;
}

.checkout-index-index .opc-wrapper .step-title,
.checkout-index-index .opc-block-summary > .title {
    font-family: var(--ff-font-heading) !important;
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.015em !important;
    color: #1d1d1f !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e8e8ed !important;
}

.checkout-index-index .opc-progress-bar {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px !important;
}

.checkout-index-index .opc-progress-bar-item {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #6e6e73 !important;
}

.checkout-index-index .opc-progress-bar-item._active,
.checkout-index-index .opc-progress-bar-item._complete {
    color: #0071e3 !important;
}

.checkout-index-index .opc-summary-wrapper,
.checkout-index-index .opc-block-summary {
    background: #f5f5f7 !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 32px !important;
}

/* ============================================================
   APPLE-STYLE EMPTY CART STATE
   ============================================================ */
.ff-cart-empty {
    max-width: 640px;
    margin: 80px auto;
    padding: 48px 32px;
    text-align: center;
}

.ff-cart-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(0, 113, 227, 0.08);
    color: #0071e3;
    margin: 0 auto 24px;
}

.ff-cart-empty__title {
    font-family: var(--ff-font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    line-height: 1.05;
    text-transform: none;
}

.ff-cart-empty__subtitle {
    font-size: 1.125rem;
    line-height: 1.5;
    color: #6e6e73;
    margin: 0 0 32px 0;
}

.ff-cart-empty__actions {
    margin-bottom: 48px;
}

.ff-cart-empty__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 36px;
    background: #0a1929;
    color: #ffffff !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    border-radius: 12px;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.ff-cart-empty__cta:hover {
    background: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30);
    outline: none;
}
.ff-cart-empty__cta:focus-visible {
    background: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3);
    outline: none;
}

.ff-cart-empty__suggestions {
    padding-top: 40px;
    border-top: 1px solid #e8e8ed;
}

.ff-cart-empty__suggestions-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6e6e73;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 20px 0;
}

.ff-cart-empty__suggestions-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ff-cart-empty__suggestion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: #f5f5f7;
    border-radius: 980px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1d1d1f !important;
    text-decoration: none !important;
    transition: background 0.2s ease, gap 0.2s ease;
}

.ff-cart-empty__suggestion:hover {
    background: #e8e8ed;
    gap: 8px;
    outline: none;
}
.ff-cart-empty__suggestion:focus-visible {
    background: #e8e8ed;
    gap: 8px;
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

.ff-cart-empty__suggestion svg {
    opacity: 0.5;
    transition: transform 0.2s ease;
}

.ff-cart-empty__suggestion:hover svg,
.ff-cart-empty__suggestion:focus-visible svg {
    transform: translateX(2px);
    opacity: 0.8;
}

/* ============================================================
   404 / ERROR PAGE — Apple-style
   ============================================================ */
.cms-no-route .page-main,
.cms-no-route .columns,
.cms-no-route .column.main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    flex-direction: column;
}

.cms-no-route .page-title-wrapper h1 {
    font-family: var(--ff-font-heading) !important;
    font-size: clamp(2.5rem, 6vw, 4rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: #1d1d1f !important;
    text-transform: none !important;
    margin-bottom: 16px !important;
}

/* ============================================================
   CONTACT PAGE — Apple-style refinement
   ============================================================ */
.contact-index-index .page-title-wrapper h1 {
    font-family: var(--ff-font-heading) !important;
    font-size: clamp(2.25rem, 4.5vw, 3.25rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    margin-bottom: 32px !important;
    text-align: center;
}

.contact-index-index .form.contact {
    max-width: 720px;
    margin: 0 auto;
}

/* Contact form — premium inputs matching the design standard
   (52 px tall, 12 px radius, 1.5 px border, brand-blue focus ring).
   Hyvä's stock .form-input is too thin and small for a brand of this
   tier — these overrides make the contact form look like it belongs
   alongside the polished login / register / dealer-signup forms. */
.contact-index-index .form.contact .field > label,
.contact-index-index .form.contact .field > .label {
    display: block !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    color: #1d1d1f !important;
    margin: 0 0 8px !important;
}
.contact-index-index .form.contact .field > label > span,
.contact-index-index .form.contact .field > .label > span {
    /* Hyva wraps the label text in <span>; let the label class handle styling */
    font: inherit !important;
    color: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
}

.contact-index-index .form.contact input[type="text"],
.contact-index-index .form.contact input[type="email"],
.contact-index-index .form.contact input[type="tel"],
.contact-index-index .form.contact input.form-input,
.contact-index-index .form.contact textarea,
.contact-index-index .form.contact textarea.form-input {
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1rem !important;
    color: #1d1d1f !important;
    background: #ffffff !important;
    border: 1.5px solid #d2d2d7 !important;
    border-radius: 12px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: none !important;
    margin-top: 0 !important;
}
.contact-index-index .form.contact textarea,
.contact-index-index .form.contact textarea.form-input {
    height: auto !important;
    min-height: 160px !important;
    padding: 14px 16px !important;
    line-height: 1.55 !important;
    resize: vertical !important;
}

.contact-index-index .form.contact input::placeholder,
.contact-index-index .form.contact textarea::placeholder {
    color: #6e6e73 !important;
    opacity: 1 !important;
}

.contact-index-index .form.contact input:focus,
.contact-index-index .form.contact textarea:focus {
    border-color: var(--ff-blue, #0071e3) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
}

/* Required-field asterisk — subtle red on the label */
.contact-index-index .form.contact .field.required > label::after,
.contact-index-index .form.contact .field._required > label::after {
    content: ' *';
    color: #d70101;
}

/* Submit button — premium navy default → brand blue hover */
.contact-index-index .form.contact button[type="submit"],
.contact-index-index .form.contact button.btn-primary,
.contact-index-index .form.contact .actions-toolbar .action.primary,
.contact-index-index .form.contact .actions-toolbar .action.submit {
    width: auto !important;
    min-width: 200px !important;
    height: 56px !important;
    padding: 0 32px !important;
    background: #0a1929 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16) !important;
    margin: 24px auto 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.contact-index-index .form.contact button[type="submit"]:hover,
.contact-index-index .form.contact button.btn-primary:hover,
.contact-index-index .form.contact .actions-toolbar .action.primary:hover {
    background: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30) !important;
}

/* Keyboard focus on /contact/ form Submit button — same navy →
   brand-blue lift as hover plus a 2px white outline ring (visible
   on the brand-blue filled button) with 3px offset. */
.contact-index-index .form.contact button[type="submit"]:focus-visible,
.contact-index-index .form.contact button.btn-primary:focus-visible,
.contact-index-index .form.contact .actions-toolbar .action.primary:focus-visible {
    background: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30) !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 3px !important;
}

/* Tighten up the half-width name/email row on desktop */
.contact-index-index .form.contact .flex-wrap {
    gap: 16px !important;
    margin: 0 !important;
}
.contact-index-index .form.contact .field.p-2 {
    padding: 0 !important;
}

/* Center the actions-toolbar / submit row */
.contact-index-index .form.contact + div,
.contact-index-index .form.contact .actions-toolbar {
    text-align: center !important;
}

/* ============================================================
   ACCOUNT PAGES — polished sidebar and content
   ============================================================ */
.account .page-title-wrapper h1 {
    font-family: var(--ff-font-heading) !important;
    font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    margin-bottom: 32px !important;
}

.account .sidebar .items,
.account .account-nav-content,
.account .block-collapsible-nav-content {
    background: #fbfbfd;
    border-radius: 16px;
    padding: 12px;
}

.account .account-nav-content li,
.account .sidebar .items li {
    margin-bottom: 2px;
}

.account .account-nav-content li a,
.account .sidebar .items li a,
.account .block-collapsible-nav-content a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    color: #1d1d1f !important;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.2s ease;
}

.account .account-nav-content li.current a,
.account .sidebar .items li.current a,
.account .block-collapsible-nav-content li.current a,
.account .account-nav-content li a:hover,
.account .sidebar .items li a:hover {
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3 !important;
    outline: none;
}
.account .account-nav-content li a:focus-visible,
.account .sidebar .items li a:focus-visible {
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3 !important;
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

/* ============================================================
   SEARCH — Apple-style clean input
   ============================================================ */
#search-content input[type="search"],
#search-content input[type="text"],
.search-content input[type="search"] {
    font-size: 1.125rem !important;
    padding: 16px 24px !important;
    border-radius: 14px !important;
    background: #f5f5f7 !important;
    border: none !important;
}

#search-content input[type="search"]:focus {
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
    outline: none !important;
}

/* ============================================================
   SHOP BY PURPOSE — Apple-style use-case navigation
   ============================================================ */
.ff-purpose-section {
    background: #ffffff;
    padding: 96px 24px;
}

.ff-purpose-inner {
    max-width: 1240px;
    margin: 0 auto;
}

.ff-purpose-header {
    text-align: center;
    margin-bottom: 56px;
}

.ff-purpose-eyebrow {
    font-family: var(--ff-font-body);
    font-size: 1rem;
    font-weight: 500;
    color: #0071e3;
    margin: 0 0 8px 0;
    letter-spacing: 0;
}

.ff-purpose-title {
    font-family: var(--ff-font-heading);
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 12px 0;
    text-transform: none;
}

.ff-purpose-subtitle {
    font-family: var(--ff-font-body);
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 400;
    color: #424245;
    margin: 0;
    line-height: 1.3;
}

.ff-purpose-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .ff-purpose-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ff-purpose-grid {
        grid-template-columns: 1fr;
    }
    .ff-purpose-section {
        padding: 64px 20px;
    }
}

.ff-purpose-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    background: #fbfbfd;
    border-radius: 24px;
    padding: 40px 28px;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.3s ease;
}

.ff-purpose-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Keyboard focus on Shop-by-Purpose homepage cards — keyboard
   users tabbing through Home Defense / Competition / Concealed
   Carry / Range need both the lift (parity with mouse hover)
   and a clear brand-blue outline ring. 3px outline + 4px offset
   clears the 24px-radius card edge cleanly. */
.ff-purpose-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    outline: 3px solid var(--ff-blue, #0071e3);
    outline-offset: 4px;
}

/* Honor prefers-reduced-motion on card-lift translateY transforms.
   Sister fix to commits 4c257be5 (spark-border) + c33534ef + df9a3b35
   (image zooms). Disables the translateY hover/focus lift on every
   card grid that uses it. Visual end-state (border, shadow, focus
   ring) stays intact; only the animated lift is suppressed. Covers
   the homepage primary grids (Shop by Purpose, lineup, category,
   model) plus the blog newsroom cards/hero and the megamenu Sights
   brand-tile grid. */
@media (prefers-reduced-motion: reduce) {
    .ff-purpose-card,
    .ff-lineup-card,
    .ff-category-card,
    .ff-model-card,
    .ff-newsroom-hero,
    .ff-newsroom-card,
    .ff-megamenu__brand-tile {
        transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    }
    .ff-purpose-card:hover,
    .ff-purpose-card:focus-visible,
    .ff-lineup-card:hover,
    .ff-lineup-card:focus-visible,
    .ff-category-card:hover,
    .ff-category-card:focus-visible,
    .ff-model-card:hover,
    .ff-model-card:focus-visible,
    .ff-newsroom-hero:hover,
    .ff-newsroom-hero:focus-visible,
    .ff-newsroom-card:hover,
    .ff-newsroom-card:focus-visible,
    .ff-megamenu__brand-tile:hover,
    .ff-megamenu__brand-tile:focus-visible {
        transform: none !important;
    }
}

.ff-purpose-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3;
    border-radius: 50%;
    margin-bottom: 20px;
}

.ff-purpose-icon svg {
    width: 28px;
    height: 28px;
}

.ff-purpose-card-title {
    font-family: var(--ff-font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
    text-transform: none;
}

.ff-purpose-card-desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #6e6e73;
    margin: 0 0 20px 0;
    flex: 1;
}

.ff-purpose-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #0071e3;
    transition: gap 0.2s ease;
}

.ff-purpose-card:hover .ff-purpose-cta,
.ff-purpose-card:focus-visible .ff-purpose-cta {
    gap: 6px;
}

/* ============================================================
   FINAL POLISH — billion-dollar finishing touches
   ============================================================ */

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Prefer reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Scroll-triggered fade for sections that enter viewport
   Only first hero animates on load; other sections fade-in via IntersectionObserver */
.ff-apple-hero:first-of-type {
    animation: ffSectionFade 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

/* Sections below fold start invisible and fade in on scroll via JS */
.ff-apple-hero:not(:first-of-type),
.ff-apple-tile,
.ff-trust-bar,
.ff-newsletter-section,
.ff-purpose-section,
.ff-subcat-strip {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: opacity, transform;
}

.ff-apple-hero.ff-in-view,
.ff-apple-tile.ff-in-view,
.ff-trust-bar.ff-in-view,
.ff-newsletter-section.ff-in-view,
.ff-purpose-section.ff-in-view,
.ff-subcat-strip.ff-in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Staggered tile entrance */
.ff-apple-tile:nth-child(2).ff-in-view { transition-delay: 0.1s; }
.ff-apple-tile:nth-child(3).ff-in-view { transition-delay: 0.2s; }
.ff-apple-tile:nth-child(4).ff-in-view { transition-delay: 0.3s; }

@keyframes ffSectionFade {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header: Apple-style frosted/glass effect, subtle shadow when scrolled.
   z-index: 1000 keeps the sticky header above the .ff-bg-fx atmospheric layer
   (which sits at z-index: 999) so the nav stays visible when scrolling. */
.page-header {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
    position: sticky !important;
    top: 0;
    z-index: 1000;
}

.page-header.is-scrolled {
    background: rgba(29, 29, 31, 0.8) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Subtle smooth motion for hero images on scroll (parallax-ish) */
.ff-apple-hero__image img {
    will-change: transform;
}

/* Back-to-top floating button — Apple-style circle */
.ff-back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(29, 29, 31, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
    z-index: 90;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.ff-back-to-top:hover {
    background: rgba(0, 113, 227, 0.9);
}

.ff-back-to-top.ff-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (max-width: 767px) {
    .ff-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

/* Trust bar — old override block neutralized 2026-05-27 when the
   bar was rebuilt with the new .ff-trust-tile structure (see line
   ~1800). The selectors below (.ff-trust-bar .grid, .ff-trust-icon-color,
   .ff-trust-title, .ff-trust-desc) no longer exist in the markup,
   so only the .ff-trust-bar rule itself still applies — and that
   needs to match the new design (light gray surface). */
.ff-trust-bar {
    display: block !important;
}

/* Newsletter section — Apple Store centered layout, elegant */
.ff-newsletter-section {
    background: #fbfbfd !important;
    padding: 96px 24px !important;
    border-top: none !important;
    border-bottom: none !important;
    text-align: center !important;
}

.ff-newsletter-section .flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
}

.ff-newsletter-section .text-center,
.ff-newsletter-section div:first-child {
    text-align: center !important;
}

/* Newsletter text — Apple style */
.ff-newsletter-title {
    font-family: var(--ff-font-heading) !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
}
.ff-newsletter-desc {
    font-size: 1.0625rem !important;
    color: #6e6e73 !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

/* Newsletter form — premium pill pair: 52 px tall input + 52 px tall
   pill submit. Heights match exactly so the inline form reads as one
   unified control. Input keeps the Apple-style pill radius for
   minimal email-only feel; submit picks up the navy → brand-blue
   hover treatment used everywhere else (login, cart, contact). */
.ff-newsletter-section form {
    align-items: stretch !important;
}
.ff-newsletter-input {
    height: 52px !important;
    padding: 0 24px !important;
    background: #ffffff !important;
    border: 1.5px solid #d2d2d7 !important;
    color: #1d1d1f !important;
    border-radius: 980px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1rem !important;
    min-width: 320px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.ff-newsletter-input::placeholder {
    color: #6e6e73 !important;
    opacity: 1 !important;
}
.ff-newsletter-input:focus {
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
}

/* Subscribe button — pill matches input, navy default → brand-blue
   hover with translateY + shadow. Oswald uppercase so it reads as a
   primary CTA, consistent with Sign In / Send Message / Proceed to
   Checkout. */
.ff-newsletter-section .ff-btn-primary,
.ff-newsletter-section button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    padding: 0 32px !important;
    border-radius: 980px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    background: #0a1929 !important;
    color: #ffffff !important;
    border: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16) !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
.ff-newsletter-section .ff-btn-primary:hover,
.ff-newsletter-section button[type="submit"]:hover {
    background: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30) !important;
}

/* Keyboard focus on homepage newsletter Subscribe button — same
   navy → brand-blue lift as hover plus a 2px white outline ring
   (visible on the brand-blue filled button) with 3px offset for
   clear keyboard nav from the email input to submit. */
.ff-newsletter-section .ff-btn-primary:focus-visible,
.ff-newsletter-section button[type="submit"]:focus-visible {
    background: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30) !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 3px !important;
}

/* On narrow screens the form drops to a column — give the input
   full width and add some breathing room above the button. */
@media (max-width: 640px) {
    .ff-newsletter-section form {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .ff-newsletter-input {
        min-width: 0 !important;
        width: 100% !important;
    }
    .ff-newsletter-section .ff-btn-primary,
    .ff-newsletter-section button[type="submit"] {
        width: 100% !important;
    }
}

/* --- Apple-style dark navigation bar --- */
.page-header {
    background: rgba(29, 29, 31, 0.92) !important;
    border-bottom: none !important;
    border-top: none !important;
}

/* Hero product images — MASSIVE, Apple billion-dollar style */
.ff-apple-hero__image {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    position: relative;
    animation: ffFadeUp 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
    animation-delay: 0.1s;
}

/* Subtle radial gradient behind product creates depth */
.ff-apple-hero__image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 113, 227, 0.08) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.ff-apple-hero__image img {
    position: relative;
    z-index: 1;
    max-width: 900px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.15)) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.08));
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ff-apple-hero:hover .ff-apple-hero__image img,
.ff-apple-hero:focus-within .ff-apple-hero__image img {
    transform: translateY(-4px);
}

/* Primary hero gets the biggest image treatment */
.ff-apple-hero:first-of-type .ff-apple-hero__image img {
    max-width: 1100px;
    filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.18)) drop-shadow(0 16px 32px rgba(0, 0, 0, 0.1));
}

/* XP 3C + XF PRO centered marquees (Treven 2026-05-29): the 1.78:1 pistol
   renders ~620px tall at full width and on laptop viewports sat hard
   against the dark section below it, so the bottom of the firearm read as
   "cut off." Cap the pistol height so the whole gun always shows, and add
   clear breathing room beneath it before the next hero. Desktop only —
   mobile stacks and already fits. (XP COMP / XP PRO are the row-grid heroes
   and carry their own max-height.) */
@media (min-width: 900px) {
    body.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] .ff-apple-hero__image img,
    body.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-hero__image img {
        max-height: 460px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    body.cms-index-index .ff-apple-hero[aria-label*="XP 3C"],
    body.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] {
        padding-bottom: 96px !important;
    }
}

/* Dark hero images get a blue tint glow for dramatic presentation */
.ff-apple-hero--dark .ff-apple-hero__image::before {
    background: radial-gradient(ellipse at center, rgba(0, 113, 227, 0.18) 0%, transparent 65%);
}

.ff-apple-hero--dark .ff-apple-hero__image img {
    filter: drop-shadow(0 30px 60px rgba(0, 113, 227, 0.25)) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
}

/* Responsive sizing */
@media (max-width: 1024px) {
    .ff-apple-hero__image img {
        max-width: 720px;
    }
    .ff-apple-hero:first-of-type .ff-apple-hero__image img {
        max-width: 800px;
    }
}

@media (max-width: 767px) {
    .ff-apple-hero {
        min-height: 600px;
        padding: 56px 20px 40px;
    }
    .ff-apple-hero:first-of-type {
        min-height: 680px;
        padding-top: 64px;
    }
    .ff-apple-hero__image img,
    .ff-apple-hero:first-of-type .ff-apple-hero__image img {
        max-width: 100%;
    }
    .ff-apple-hero__image::before {
        background: radial-gradient(ellipse at center, rgba(0, 113, 227, 0.1) 0%, transparent 55%);
    }
}

/* Scroll fade-in animation for subsequent heroes */
@keyframes ffFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ffFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Promo bar — hide (removed from layout, CSS fallback) */
.ff-promo-bar {
    display: none !important;
}

/* Global: Apple-tight letter-spacing on headings */
h1, h2, h3, h4 {
    letter-spacing: -0.01em;
}

/* Footer — Apple Store light gray */
.ff-footer {
    background: #f5f5f7 !important;
    border-top: 1px solid #d2d2d7;
}

/* Footer grid: force 5-column layout (Tailwind lg:grid-cols-5 not generated) */
@media (min-width: 1024px) {
    .ff-footer .grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .ff-footer .grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Fix Tailwind .block class collision — Magento overrides float on .block */
.ff-footer .block {
    float: none !important;
    display: block !important;
}

/* Footer contact spacing and typography */
.ff-footer .space-y-3 > * + * {
    margin-top: 0.75rem;
}
.ff-footer .space-y-3 p {
    margin-bottom: 0 !important;
}
.ff-footer .space-y-3 span.block {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #1d1d1f !important;
    margin-bottom: 2px !important;
}
.ff-footer .space-y-3 a.ff-footer-link {
    font-size: 0.9375rem !important;
}

/* Footer text colors for light background */
.ff-footer-heading {
    color: #1d1d1f !important;
}

.ff-footer-link {
    color: #6e6e73 !important;
}

.ff-footer-link:hover {
    color: #1d1d1f !important;
}

.ff-footer-social {
    color: #6e6e73 !important;
}

.ff-footer-social:hover {
    color: #1d1d1f !important;
}

.ff-footer-bottom {
    border-top-color: #d2d2d7 !important;
    color: #6e6e73 !important;
}

/* Override body background to white */
body {
    background: #ffffff !important;
}

/* --- Apple Store Megamenu Enhancement --- */
/* Full-width dropdown for categories with many items */
/* Smooth dropdown animation for Hyva nav */
.navigation .level-0 > ul,
.navigation .level-0 ul[x-show] {
    animation: appleMenuFade 0.2s ease-out;
}

@keyframes appleMenuFade {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Services CTA — Apple Store light with dark accent */
.ff-apple-hero--dark.ff-apple-hero--half {
    background: #1d1d1f;
}


/* ============================================================
   SECTION 47: OLEGNAX MEGAMENU — APPLE.COM STYLE
   Dark nav bar, small white text, full-width white dropdowns
   Matches apple.com navigation exactly
   ============================================================ */

/* Root megamenu wrapper — transparent (inherits dark header bg) */
nav.ox-megamenu,
nav.ox-megamenu.ox-megamenu {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Top-level menu list — centered, Apple spacing */
.ox-megamenu-navigation,
nav.ox-megamenu .ox-megamenu-navigation {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 44px !important;
}

/* Top-level menu items */
.ox-megamenu-navigation > li,
.ox-megamenu-navigation > li.level-top {
    position: relative !important;
    list-style: none !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
}

/* Top-level links — Apple.com: 12px white text */
.ox-megamenu-navigation > li > a,
.ox-megamenu-navigation > li > .ox-mm-a-wrap > a,
.ox-megamenu-navigation > li > a.level-top,
.ox-megamenu-navigation > li.level-top > a {
    font-family: var(--ff-font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 0 10px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    line-height: 44px !important;
    background: transparent !important;
    border: none !important;
}

/* Hover — brightens to pure white */
.ox-megamenu-navigation > li:hover > a,
.ox-megamenu-navigation > li:hover > .ox-mm-a-wrap > a,
.ox-megamenu-navigation > li.active > a,
.ox-megamenu-navigation > li.has-active > a,
.ox-megamenu-navigation > li:hover > a.level-top,
.ox-megamenu-navigation > li.level-top:hover > a {
    color: #ffffff !important;
}

/* Hide dropdown arrows — Apple doesn't show them */
.ox-megamenu-navigation > li .ox-menu-arrow,
.ox-megamenu-navigation .ox-menu-arrow {
    display: none !important;
}

/* A-wrap container — transparent, no background */
.ox-megamenu-navigation > li > .ox-mm-a-wrap,
.ox-megamenu .ox-mm-a-wrap {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
}

/* --- Dropdown/Submenu — Apple-style white panel --- */
.ox-megamenu-navigation > li > .ox-megamenu__dropdown,
.ox-megamenu .ox-megamenu__dropdown,
.ox-megamenu-navigation > li > ul {
    background: #fbfbfd !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    padding: 24px 32px 28px !important;
    min-width: 200px;
    z-index: 100 !important;
}

/* Full-width megamenu dropdowns */
.ox-dropdown--megamenu > .ox-megamenu__dropdown,
li.ox-dropdown--megamenu > .ox-megamenu__dropdown {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 28px 40px 36px !important;
    position: fixed !important;
    top: 44px !important;
    max-width: 100vw !important;
}

/* Simple dropdown positioning */
.ox-dropdown--simple > .ox-megamenu__dropdown,
li.ox-dropdown--simple > .ox-megamenu__dropdown {
    min-width: 200px;
    max-width: 260px;
}

/* Dropdown columns */
.ox-megamenu__dropdown .ox-menu-col {
    padding: 0 16px !important;
}

/* Dropdown column headers */
.ox-megamenu__dropdown .category-item.parent > a,
.ox-megamenu__dropdown .ox-megamenu-list > .category-item > a {
    font-family: var(--ff-font-body) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    color: #6e6e73 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 0 0 8px !important;
    display: block !important;
    border: none !important;
    background: transparent !important;
}

/* Dropdown links — Apple-style */
.ox-megamenu__dropdown a,
.ox-megamenu__dropdown .category-item > a {
    font-family: var(--ff-font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: #1d1d1f !important;
    padding: 4px 0 !important;
    display: block !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
    border: none !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
}

.ox-megamenu__dropdown a:hover,
.ox-megamenu__dropdown .category-item > a:hover {
    color: #0066cc !important;
    background: transparent !important;
}

/* Dropdown list items — clean */
.ox-megamenu__dropdown .category-item,
.ox-megamenu__dropdown li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Nested submenu lists */
.ox-megamenu__dropdown .ox-megamenu-list,
.ox-megamenu__dropdown ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Labels/badges */
.ox-megamenu-label {
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    margin-left: 4px !important;
}

/* Animation — smooth Apple fade-in */
.ox-megamenu .ox-megamenu__dropdown.opened {
    opacity: 1 !important;
}

.ox-megamenu .ox-megamenu__dropdown.animate {
    opacity: 0;
    transition: opacity 0.25s ease !important;
}

/* Column separators */
.ox-megamenu__dropdown .ox-vertical-separator {
    border-color: #e8e8ed !important;
}

.ox-megamenu__dropdown .ox-border-bottom {
    border-bottom-color: #e8e8ed !important;
}

.ox-megamenu__dropdown .ox-border-top {
    border-top-color: #e8e8ed !important;
}


/* ============================================================
   PREMIUM PRODUCT CARDS — Fusion signature effect
   - Clean pill-shaped Add to Cart button
   - Animated moving "spark" border on hover (blue ↔ red)
   - Same effect on button hover
   Uses conic-gradient + @property for smooth custom property animation
   ============================================================ */

/* Register animatable custom properties (modern browsers) */
@property --ff-card-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --ff-card-line-color {
    syntax: '<color>';
    initial-value: #0071e3;
    inherits: false;
}

/* --- PRODUCT CARD CONTAINER --- */
form.product-item.product_addtocart_form,
.products-grid .product-item.card,
.products-grid li.product-item {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 16px 20px;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    isolation: isolate; /* create stacking context so ::before stays on card */
}

form.product-item.product_addtocart_form:hover,
.products-grid .product-item.card:hover,
.products-grid li.product-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08),
                0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Animated moving spark border (blue ↔ red) */
form.product-item.product_addtocart_form::before,
.products-grid .product-item.card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    padding: 2px;
    background: conic-gradient(
        from var(--ff-card-angle),
        transparent 0%,
        transparent 50%,
        var(--ff-card-line-color) 62%,
        var(--ff-card-line-color) 68%,
        transparent 78%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

form.product-item.product_addtocart_form:hover::before,
.products-grid .product-item.card:hover::before {
    opacity: 1;
    animation: ff-card-spin 3.2s linear infinite,
               ff-card-color-cycle 4s ease-in-out infinite;
}

@keyframes ff-card-spin {
    to { --ff-card-angle: 360deg; }
}

@keyframes ff-card-color-cycle {
    0%, 100% { --ff-card-line-color: #0071e3; }  /* Fusion blue */
    50%      { --ff-card-line-color: #e11d48; }  /* Fusion red */
}

/* Honor prefers-reduced-motion — the spark-border conic-gradient
   animation (continuous spin + color cycle blue↔red) plays on every
   product card hover/focus across PLP, PDP, megamenu, flagship tiles.
   Continuous spinning animations can trigger vestibular issues and
   distract users who've explicitly opted out of motion. Stop the
   animation but keep the visible static border (a frozen blue ring)
   so the keyboard focus indicator remains intact. */
@media (prefers-reduced-motion: reduce) {
    form.product-item.product_addtocart_form:hover::before,
    form.product-item.product_addtocart_form:focus-visible::before,
    .products-grid .product-item.card:hover::before,
    .products-grid .product-item.card:focus-visible::before,
    .ff-store-cat:hover::before,
    .ff-store-cat:focus-visible::before,
    .ff-flagship-card:hover::before,
    .ff-flagship-card:focus-visible::before,
    .ff-model-card:hover::before,
    .ff-model-card:focus-visible::before,
    .ff-category-card:hover::before,
    .ff-category-card:focus-visible::before,
    .ff-megamenu__popular-card:hover::before,
    .ff-megamenu__popular-card:focus-visible::before,
    .ff-megamenu__tree-col:hover::before,
    .ff-megamenu__tree-col:focus-visible::before,
    body.catalog-product-view .ff-smart-picks__card:hover::before,
    body.catalog-product-view .ff-smart-picks__card:focus-visible::before {
        animation: none !important;
        --ff-card-line-color: #0071e3;
    }

    /* Round 2 — primary CTA buttons + hero links also use the spark-
       border animation but were missing from the original guard above.
       Same treatment: keep the static brand-blue ring (so focus
       indicator still works) but stop the spin + color-cycle cycle.
       Covers: PLP "Add to Cart" buttons, PDP main ATC, cart-page btn-
       primary, and the homepage hero CTA links (Reserve / Shop /
       Learn more variants). */
    form.product-item .btn.btn-primary:hover::before,
    form.product-item .btn.btn-primary:focus-visible::before,
    .products-grid .action.tocart:hover::before,
    .products-grid .action.tocart:focus-visible::before,
    .ff-apple-hero__links a.ff-apple-link.ff-apple-link--dark:hover::before,
    .ff-apple-hero__links a.ff-apple-link.ff-apple-link--dark:focus-visible::before,
    a.ff-apple-link.ff-apple-link--primary:hover::before,
    a.ff-apple-link.ff-apple-link--primary:focus-visible::before,
    .ff-section a.ff-apple-link--dark:hover::before,
    .ff-section a.ff-apple-link--dark:focus-visible::before,
    .ff-apple-hero__links a.ff-apple-link--buy:hover::before,
    .ff-apple-hero__links a.ff-apple-link--buy:focus-visible::before,
    body.catalog-product-view #product-addtocart-button:hover::before,
    body.catalog-product-view #product-addtocart-button:focus-visible::before,
    body.catalog-product-view button.action.tocart:hover::before,
    body.catalog-product-view button.action.tocart:focus-visible::before,
    body.catalog-product-view button[type="submit"].action.primary:hover::before,
    body.catalog-product-view button[type="submit"].action.primary:focus-visible::before,
    body.checkout-cart-index #product-addtocart-button:hover::before,
    body.checkout-cart-index #product-addtocart-button:focus-visible::before,
    body.checkout-cart-index button.btn-primary:hover::before,
    body.checkout-cart-index button.btn-primary:focus-visible::before {
        animation: none !important;
        --ff-card-line-color: #0071e3;
    }
}

/* --- PILL-SHAPED ADD TO CART BUTTON — Fusion brand blue that POPS --- */
form.product-item .btn.btn-primary,
form.product-item button[type="submit"].btn-primary,
.products-grid .action.tocart,
.products-grid .tocart.action {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 9999px !important;
    padding: 10px 24px !important;
    min-height: auto !important;
    font-family: var(--ff-font-heading) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    /* Subtle blue gradient for depth (brand-forward) */
    background: linear-gradient(135deg, #0090ff 0%, #0071e3 50%, #0060c8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    white-space: nowrap !important;
    /* Layered shadows — inner highlight + blue glow + soft drop */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 4px 14px rgba(0, 113, 227, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: background 0.25s ease,
                box-shadow 0.3s ease,
                transform 0.25s ease;
    overflow: visible !important;
    isolation: isolate;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

form.product-item .btn.btn-primary:hover,
form.product-item button[type="submit"].btn-primary:hover,
.products-grid .action.tocart:hover {
    /* Brighter gradient on hover — button lights up */
    background: linear-gradient(135deg, #00a3ff 0%, #0077ed 50%, #0071e3 100%) !important;
    /* Amplified glow — signal "click me" */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 6px 20px rgba(0, 113, 227, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
    outline: none !important;
}
/* Keyboard focus — same hover treatment plus double-ring (white inner +
   brand-blue outer) since the button surface is brand-blue gradient.
   Single-color outline would be invisible on the filled button. */
form.product-item .btn.btn-primary:focus-visible,
form.product-item button[type="submit"].btn-primary:focus-visible,
.products-grid .action.tocart:focus-visible {
    background: linear-gradient(135deg, #00a3ff 0%, #0077ed 50%, #0071e3 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 6px 20px rgba(0, 113, 227, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.1),
        0 0 0 2px #ffffff,
        0 0 0 5px var(--ff-blue, #0071e3) !important;
    transform: translateY(-2px);
    outline: none !important;
}

form.product-item .btn.btn-primary:active,
.products-grid .action.tocart:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 113, 227, 0.4) !important;
}

/* Shrink the cart icon — make it a small accent, not dominant */
form.product-item .btn.btn-primary svg,
.products-grid .action.tocart svg {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
}

/* Animated border on button hover — same spark effect, smaller scale */
form.product-item .btn.btn-primary::before,
.products-grid .action.tocart::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    padding: 2px;
    background: conic-gradient(
        from var(--ff-card-angle),
        transparent 0%,
        transparent 50%,
        var(--ff-card-line-color) 62%,
        var(--ff-card-line-color) 68%,
        transparent 78%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

form.product-item .btn.btn-primary:hover::before,
.products-grid .action.tocart:hover::before {
    opacity: 1;
    animation: ff-card-spin 2.2s linear infinite,
               ff-card-color-cycle 3s ease-in-out infinite;
}

/* Wishlist + Compare icons — softer, more Apple-refined */
form.product-item .btn.p-2.rounded-full,
form.product-item button[class*="rounded-full"] {
    color: #6e6e73 !important;
    background: transparent !important;
    transition: color 0.2s ease, background 0.2s ease;
    padding: 8px !important;
}

form.product-item .btn.p-2.rounded-full:hover,
form.product-item button[class*="rounded-full"]:hover {
    /* Brand-blue tint to match the PDP wishlist hover (line 4795+) and
       the cart/account/megamenu language. Was previously red #e11d48
       — leftover from an earlier design iteration that had wishlist as
       a destructive action. Brand-blue is the unified hover signal
       across PLP + PDP + cart-drawer + footer wishlist surfaces. */
    color: var(--ff-blue, #0071e3) !important;
    background: rgba(0, 113, 227, 0.10) !important;
    outline: none;
}
form.product-item .btn.p-2.rounded-full:focus-visible,
form.product-item button[class*="rounded-full"]:focus-visible {
    color: var(--ff-blue, #0071e3) !important;
    background: rgba(0, 113, 227, 0.10) !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

/* Product name: cleaner typography */
form.product-item .product-item-name,
form.product-item a.product-item-link {
    font-family: var(--ff-font-heading) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
    line-height: 1.35;
}

/* Price: tighter, bolder */
form.product-item .price {
    font-family: var(--ff-font-heading) !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.01em;
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
    form.product-item.product_addtocart_form:hover::before,
    .products-grid .product-item.card:hover::before,
    form.product-item .btn.btn-primary:hover::before,
    .products-grid .action.tocart:hover::before {
        animation: none;
        opacity: 0.6;
    }
}

/* ============================================================
   HOMEPAGE BUTTONS — Fusion blue gradient + glow (hero continuity)
   Uses same premium feel as Add to Cart button, but LARGER sizing
   ============================================================ */

/* Primary hero button (filled blue) — "Learn more" on heroes */
.ff-apple-hero__links a.ff-apple-link.ff-apple-link--dark:not(.ff-apple-link--buy),
a.ff-apple-link.ff-apple-link--primary,
.ff-section a.ff-apple-link--dark:not(.ff-apple-link--buy) {
    position: relative;
    /* Keep existing large hero sizing — 14px × 32px padding, 17px font */
    background: linear-gradient(135deg, #0090ff 0%, #0071e3 50%, #0060c8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 18px rgba(0, 113, 227, 0.30),
        0 2px 4px rgba(0, 0, 0, 0.08);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    overflow: visible !important;
    isolation: isolate;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.ff-apple-hero__links a.ff-apple-link.ff-apple-link--dark:not(.ff-apple-link--buy):hover,
a.ff-apple-link.ff-apple-link--primary:hover,
.ff-section a.ff-apple-link--dark:not(.ff-apple-link--buy):hover {
    background: linear-gradient(135deg, #00a3ff 0%, #0077ed 50%, #0071e3 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 10px 28px rgba(0, 113, 227, 0.50),
        0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Spark border animation on hero primary buttons */
.ff-apple-hero__links a.ff-apple-link.ff-apple-link--dark::before,
a.ff-apple-link.ff-apple-link--primary::before,
.ff-section a.ff-apple-link--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--ff-card-angle),
        transparent 0%,
        transparent 50%,
        var(--ff-card-line-color) 62%,
        var(--ff-card-line-color) 68%,
        transparent 78%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.ff-apple-hero__links a.ff-apple-link.ff-apple-link--dark:hover::before,
a.ff-apple-link.ff-apple-link--primary:hover::before,
.ff-section a.ff-apple-link--dark:hover::before,
.ff-apple-hero__links a.ff-apple-link--buy:hover::before {
    opacity: 1 !important;
    animation: ff-card-spin 2.2s linear infinite,
               ff-card-color-cycle 3s ease-in-out infinite !important;
}

/* Also apply spark border to OUTLINED buttons (Reserve yours, Shop XF PRO, etc.) */
.ff-apple-hero__links a.ff-apple-link--buy::before,
.ff-section a.ff-apple-link--buy::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--ff-card-angle),
        transparent 0%,
        transparent 50%,
        var(--ff-card-line-color) 62%,
        var(--ff-card-line-color) 68%,
        transparent 78%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

/* Secondary outlined "Buy" button — blue outline, fills on hover */
.ff-apple-hero__links a.ff-apple-link.ff-apple-link--buy,
.ff-section a.ff-apple-link--buy {
    position: relative;
    background: transparent !important;
    color: #0071e3 !important;
    border: 2px solid #0071e3 !important;
    box-shadow:
        0 2px 8px rgba(0, 113, 227, 0.08);
    transition: all 0.3s ease;
    overflow: visible !important;
    isolation: isolate;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.ff-apple-hero__links a.ff-apple-link.ff-apple-link--buy:hover,
.ff-section a.ff-apple-link--buy:hover {
    background: linear-gradient(135deg, #0090ff 0%, #0071e3 50%, #0060c8 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 10px 28px rgba(0, 113, 227, 0.45),
        0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   FUSION SIGNATURE — Animated spark border on all interactive cards
   Applied to: flagship tiles, shop-by-purpose cards, category strip,
   services cards. Premium continuity throughout the site.
   ============================================================ */

/* All cards that should get the spark-border treatment */
.ff-apple-tile,
.ff-purpose-card,
.ff-store-cat,
.ff-flagship-card,
.ff-model-card,
.ff-category-card,
.ff-megamenu__popular-card,
.ff-megamenu__tree-col {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

/* Shared spark border pseudo-element — inset:0 + inherit radius
   ensures spark perfectly follows each card's actual shape
   (square cards stay square, rounded cards stay rounded) */
.ff-apple-tile::before,
.ff-purpose-card::before,
.ff-store-cat::before,
.ff-flagship-card::before,
.ff-model-card::before,
.ff-category-card::before,
.ff-megamenu__popular-card::before,
.ff-megamenu__tree-col::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--ff-card-angle),
        transparent 0%,
        transparent 50%,
        var(--ff-card-line-color) 62%,
        var(--ff-card-line-color) 68%,
        transparent 78%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.ff-apple-tile:hover::before,
.ff-apple-tile:focus-visible::before,
.ff-purpose-card:hover::before,
.ff-purpose-card:focus-visible::before,
.ff-store-cat:hover::before,
.ff-store-cat:focus-visible::before,
.ff-flagship-card:hover::before,
.ff-flagship-card:focus-visible::before,
.ff-model-card:hover::before,
.ff-model-card:focus-visible::before,
.ff-category-card:hover::before,
.ff-category-card:focus-visible::before,
.ff-megamenu__popular-card:hover::before,
.ff-megamenu__popular-card:focus-visible::before,
.ff-megamenu__tree-col:hover::before,
.ff-megamenu__tree-col:focus-visible::before {
    opacity: 1;
    animation: ff-card-spin 3.2s linear infinite,
               ff-card-color-cycle 4s ease-in-out infinite;
}

/* Gentle lift on hover (on top of existing transforms) */
.ff-store-cat {
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ff-store-cat:hover {
    transform: translateY(-4px);
}

/* ============================================================
   HERO PISTOL IMAGES — clickable + "breathe" scale on hover
   ============================================================ */
.ff-apple-hero__image-link {
    display: block;
    text-decoration: none !important;
    cursor: pointer;
    overflow: visible;
    outline: none;
}

.ff-apple-hero__image-link img {
    transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease;
    transform-origin: center center;
    will-change: transform;
}

.ff-apple-hero__image-link:hover img {
    transform: scale(1.035);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.10));
}

.ff-apple-hero__image-link:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 8px;
    border-radius: 12px;
}

/* Honor prefers-reduced-motion on homepage hero image hover-zoom and
   similar Ken Burns scale effects across cards. Users who've opted out
   of motion at the OS level shouldn't see scale animations on hover.
   Disables transform + filter shifts; keeps the visual end-state
   visible (just without the animated transition). Covers:
     - .ff-apple-hero__image-link (homepage hero pistol photos)
     - .ff-subcat-card (PLP subcategory card image)
     - .ff-megamenu__featured (megamenu featured-tile image)
     - #gallery-main (PDP main gallery image)
     - .ff-apple-tile (homepage flagship-product tile)
     - .ff-store-cat (homepage Apple-style category strip) */
@media (prefers-reduced-motion: reduce) {
    .ff-apple-hero__image-link img,
    .ff-subcat-card .ff-subcat-card__img img,
    .ff-megamenu__featured .ff-megamenu__featured-img img,
    #gallery-main img,
    .ff-apple-tile .ff-apple-tile__media img,
    .ff-store-cat .ff-store-cat__img img {
        transition: none !important;
    }
    .ff-apple-hero__image-link:hover img,
    .ff-subcat-card:hover .ff-subcat-card__img img,
    .ff-megamenu__featured:hover .ff-megamenu__featured-img img,
    #gallery-main:hover img,
    .ff-apple-tile:hover .ff-apple-tile__media img,
    .ff-apple-tile:focus-visible .ff-apple-tile__media img,
    .ff-store-cat:hover .ff-store-cat__img img,
    .ff-store-cat:focus-visible .ff-store-cat__img img {
        transform: none !important;
        filter: none !important;
    }
}

/* ============================================================
   SPARK BORDER ON ALL PRIMARY CTAs (site-wide continuity)
   Covers: tile CTAs, button links, generic ff-btn-primary, etc.
   ============================================================ */
.ff-btn-primary,
.ff-btn.ff-btn--primary,
a.ff-btn-primary,
button.ff-btn-primary,
.ff-apple-tile__cta,
.ff-services-cta-btn {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

/* Apply spark animation to any remaining primary CTAs (on hover) */
.ff-btn-primary::before,
.ff-btn.ff-btn--primary::before,
a.ff-btn-primary::before,
button.ff-btn-primary::before,
body.catalog-product-view #product-addtocart-button::before,
body.catalog-product-view button.action.tocart::before,
body.catalog-product-view button[type="submit"].action.primary::before,
body.checkout-cart-index #product-addtocart-button::before,
body.checkout-cart-index button.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--ff-card-angle),
        transparent 0%,
        transparent 50%,
        var(--ff-card-line-color) 62%,
        var(--ff-card-line-color) 68%,
        transparent 78%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.ff-btn-primary:hover::before,
.ff-btn.ff-btn--primary:hover::before,
a.ff-btn-primary:hover::before,
button.ff-btn-primary:hover::before,
body.catalog-product-view #product-addtocart-button:hover::before,
body.catalog-product-view button.action.tocart:hover::before,
body.catalog-product-view button[type="submit"].action.primary:hover::before,
body.checkout-cart-index #product-addtocart-button:hover::before,
body.checkout-cart-index button.btn-primary:hover::before {
    opacity: 1;
    animation: ff-card-spin 2.2s linear infinite,
               ff-card-color-cycle 3s ease-in-out infinite;
}

/* The ATC needs `position: relative` + `isolation` for the spark ::before.
   It also needs the border-radius preserved for the inset:0 mask. */
body.catalog-product-view #product-addtocart-button,
body.catalog-product-view button.action.tocart,
body.catalog-product-view button[type="submit"].action.primary {
    position: relative !important;
    isolation: isolate;
    overflow: visible !important;
}

/* ============================================================
   ANIMATED UNDERLINE ON HERO TITLES (XP 3C, XP COMP, XP PRO, XF PRO)
   Always visible, color shifts continuously blue ↔ red via
   gradient-position animation. Signature Fusion premium touch.
   ============================================================ */
.ff-apple-hero__title {
    position: relative;
    display: inline-block !important;
}

.ff-apple-hero__title {
    line-height: 1.05 !important;
}

.ff-apple-hero__title::after {
    content: '';
    display: block;
    /* Match title width — shrinks/grows with each hero's title */
    width: 100%;
    height: 4px;
    margin: 8px 0 0;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        #0071e3 0%,
        #e11d48 25%,
        #0071e3 50%,
        #e11d48 75%,
        #0071e3 100%
    );
    background-size: 200% 100%;
    animation: ff-title-underline-flow 4s linear infinite;
    box-shadow: 0 0 14px rgba(0, 113, 227, 0.35),
                0 0 22px rgba(225, 29, 72, 0.18);
}

@keyframes ff-title-underline-flow {
    0%   { background-position: 0% 0%; }
    100% { background-position: -200% 0%; }
}

/* Vestibular-sensitive users with prefers-reduced-motion: reduce get the
   static blue→red→blue gradient with no flow animation. The brand-accent
   stripe still appears beneath each hero title; just stops moving. Same
   motion-respect pattern as the cart-badge-pulse @keyframes override
   (line 26648) and the JS-side guards in ff-card-spotlight, sticky-atc,
   ff-back-to-top, and the promo-bar template. */
@media (prefers-reduced-motion: reduce) {
    .ff-apple-hero__title::after {
        animation: none !important;
    }
}

/* Ensure ff-apple-hero__content children center properly with new title layout */
.ff-apple-hero__content {
    text-align: center;
}

/* ============================================================
   MOBILE FIXES — 60% of traffic; this MUST be perfect
   ============================================================ */

/* Hard stop against horizontal scroll / empty white box on right.
   IMPORTANT: only HTML gets overflow-x: hidden — body must keep overflow visible
   or position: sticky breaks on the page header (body becomes a scroll container,
   the header tries to stick to the body's scroll which never moves, so it
   scrolls off the page instead of pinning). */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
body {
    max-width: 100vw !important;
    /* overflow-x explicitly NOT set so position:sticky works on .page-header */
}

/* Prevent any element from creating horizontal overflow */
* {
    max-width: 100%;
    box-sizing: border-box;
}

/* BUT: preserve images and special elements that need to scale */
img, svg, video, iframe, table {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {

    /* Header — compact icons on mobile so they don't overflow */
    .page-header {
        min-height: 60px;
    }

    /* CRITICAL: Override Hyvä's `w-full` on logo wrapper so icons fit
       The logo wrapper has Tailwind classes: w-full sm:w-auto
       On mobile (<sm=640px), w-full takes 100% width, pushing icons off-screen
       This forces the logo column to only take what it needs */
    .page-header .container > div.sm\:order-1.w-full,
    .page-header .container > div[class*="w-full"][class*="sm:w-auto"],
    .page-header .container > div:first-child[class*="w-full"] {
        width: auto !important;
        max-width: none !important;
        flex: 0 1 auto !important;
        padding-bottom: 0 !important;
    }

    /* Ensure header container doesn't wrap — keep icons inline */
    .page-header .container.flex-wrap {
        flex-wrap: nowrap !important;
        gap: 8px;
    }

    /* Hide compare link on small mobile (non-essential) */
    #compare-link {
        display: none !important;
    }

    /* Reduce icon button padding on mobile */
    .page-header button.btn,
    .page-header a.btn {
        padding: 6px !important;
        flex-shrink: 0;
    }

    /* Shrink header icons a touch */
    .page-header svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Logo scales down on mobile */
    .page-header a[aria-label*="Home"] {
        min-width: auto !important;
        flex: 0 0 auto !important;
    }

    .page-header a[aria-label*="Home"] img {
        height: 36px !important;
        max-height: 36px !important;
        max-width: 140px !important;
        width: auto !important;
        min-width: unset !important;
    }

    /* Right-side action cluster — prevent collapse */
    .page-header [class*="order-1"][class*="lg:order-0"],
    .page-header .flex.items-center.gap-2 {
        flex: 0 0 auto !important;
        display: flex !important;
    }

    /* Ensure cart icon + badge are always visible */
    #menu-cart-icon,
    [aria-label*="Cart"],
    [aria-label*="cart"] {
        display: inline-flex !important;
        flex-shrink: 0 !important;
    }

    /* Hero — tighten padding and text sizing for mobile */
    .ff-apple-hero {
        padding: 40px 16px !important;
        min-height: auto !important;
    }

    .ff-apple-hero__content {
        max-width: 100%;
        padding: 0 8px;
    }

    .ff-apple-hero__title {
        font-size: clamp(2.5rem, 10vw, 4rem) !important;
        line-height: 1.05 !important;
    }

    .ff-apple-hero__subtitle {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }

    /* Hero buttons — stack vertically on mobile for tap-friendly sizing */
    .ff-apple-hero__links {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100%;
    }

    .ff-apple-hero__links a.ff-apple-link {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }

    /* Hero image — cap at viewport width */
    .ff-apple-hero__image,
    .ff-apple-hero__image-link,
    .ff-apple-hero__image img {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Flagship tiles — stack vertically on mobile */
    .ff-apple-tiles,
    .ff-apple-tiles-section .ff-apple-tiles {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 16px;
    }

    .ff-apple-tile {
        min-height: auto !important;
        padding: 24px !important;
    }

    /* Shop by Purpose — stack vertically on mobile */
    .ff-purpose-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 16px;
    }

    /* Category strip — horizontal scrollable row on mobile */
    .ff-store-categories__strip {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        padding: 0 16px 16px;
        /* Hide scrollbar */
        scrollbar-width: none;
    }
    .ff-store-categories__strip::-webkit-scrollbar {
        display: none;
    }

    .ff-store-cat {
        scroll-snap-align: start;
        flex: 0 0 140px !important;
    }

    /* Section headings — reduce font size on mobile */
    .ff-section-title,
    .ff-purpose-title,
    .ff-store-categories__title {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    }

    /* Trust signals — old mobile override removed 2026-05-27 when the
       bar was rebuilt with the new .ff-trust-tile structure. Mobile
       layout now lives in the trust-bar block near line ~1880. */

    /* Footer — responsive columns on mobile */
    .ff-footer .grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Product cards on category pages — stack nicer */
    .products-grid,
    .products.list.items.product-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Single-column on very narrow mobile */
    @media (max-width: 400px) {
        .products-grid,
        .products.list.items.product-items {
            grid-template-columns: 1fr !important;
        }
    }

    /* Add to Cart button on mobile product cards — full width */
    form.product-item .btn.btn-primary,
    .products-grid .action.tocart {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 0.875rem !important;
    }

    /* Promo bar — hide secondary content on mobile if present */
    .ff-promo-bar__secondary {
        display: none !important;
    }

    /* Newsletter section — single-column on mobile */
    .ff-newsletter {
        padding: 32px 16px !important;
    }
    .ff-newsletter form {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .ff-newsletter input[type="email"],
    .ff-newsletter button {
        width: 100% !important;
    }

    /* Category page subcategory cards — stack on mobile */
    .category-subcategories,
    .subcategory-strip {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
}

/* Extra-narrow mobile (iPhone SE / small Androids) */
@media (max-width: 380px) {
    .ff-apple-hero__title {
        font-size: 2.25rem !important;
    }
    .page-header a[aria-label*="Home"] img {
        height: 32px !important;
        max-height: 32px !important;
        max-width: 120px !important;
        width: auto !important;
    }
    .page-header svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ============================================================
   CATEGORY NAMES — UPPERCASE EVERYWHERE (site-wide consistency)
   Some category names in the DB are title case, others are all-caps.
   Force them all to display UPPERCASE via CSS so they're congruent.
   ============================================================ */

/* Category page H1 title */
.category-view .page-title,
.category-view h1.page-title,
.catalog-category-view .page-title span,
.catalog-category-view h1 {
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

/* Breadcrumbs — category links */
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs .item,
.breadcrumbs strong,
nav[aria-label*="breadcrumb"],
nav[aria-label*="breadcrumb"] a,
nav[aria-label*="breadcrumb"] span {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Mobile nav drawer/dialog — category list items */
dialog[class*="open:flex"] nav ul li,
dialog[class*="open:flex"] nav ul li button,
dialog[class*="open:flex"] nav ul li a,
dialog[class*="open:flex"] nav ul li span {
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Subcategory cards on category landing pages */
.subcategories a,
.subcategories span,
.category-subcategories a,
.category-subcategories .cat-name,
[class*="subcategory"] .cat-name,
[class*="subcategory"] a .text {
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Category page sort/filter related labels */
.category-view .filter-title,
.category-view .toolbar-amount,
.category-view .sorter-label {
    text-transform: uppercase !important;
}

/* Hyva specific: category nav dropdowns + mobile drawer */
.ff-mobile-menu a,
.ff-mobile-menu button,
.ff-mobile-menu span,
[data-role="mobile-menu"] a,
[data-role="mobile-menu"] button,
[data-role="mobile-menu"] span {
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Hero-style section / generic category navigation strips */
.category-breadcrumb,
.category-nav a,
.category-nav button {
    text-transform: uppercase !important;
}

/* Subcategory strip on category pages (top row with icon + name + item count) */
.category-top-nav a,
[class*="subcat-strip"] a,
[class*="category-item"] .cat-name,
[class*="category-item"] .name,
a[class*="cat-item"] .label,
a[class*="cat-item"] .text {
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* ============================================================
   MOBILE MENU DRAWER — clear close button + polish
   ============================================================ */

/* Make sure the mobile menu dialog has a visible close button at top */
dialog[class*="open:flex"] {
    padding: 0 !important;
    background: #ffffff;
}

/* REMOVED: ::before pseudo-element that was injecting a 68px dark FUSION FIREARMS bar
 * onto EVERY dialog with open:flex class (hit both cart and mobile menu drawers).
 * Each drawer now manages its own header directly in the template. */

/* Make the menu items nicely padded and tap-friendly */
dialog[class*="open:flex"] nav ul li > button,
dialog[class*="open:flex"] nav ul li > a,
dialog[class*="open:flex"] nav ul li > span {
    padding: 16px 20px !important;
    font-size: 0.9375rem !important;
    min-height: 48px !important;
}

/* Highlight on tap for clarity */
dialog[class*="open:flex"] nav ul li button:active,
dialog[class*="open:flex"] nav ul li a:active {
    background: rgba(0, 113, 227, 0.08) !important;
}

/* Remove the random divider at top of menu drawer */
dialog[class*="open:flex"] nav ul:first-child > li:first-child {
    border-top: none !important;
}

dialog[class*="open:flex"] nav ul:first-child {
    border-top: none !important;
    padding-top: 8px !important;
}

/* Also reset any standalone divider at top of dialog content area */
dialog[class*="open:flex"] > div:first-child,
dialog[class*="open:flex"] > nav:first-child,
dialog[class*="open:flex"] > ul:first-child {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ============================================================
   ACCOUNT DROPDOWN (Sign in) + CART DROPDOWN on mobile
   Squished by default — force full width and clear exit
   ============================================================ */

@media (max-width: 767px) {

    /* OLD account dropdown styles — now replaced by full drawer template
       Kept here commented-out in case we need them
       (The new template at Magento_Customer/templates/header/customer-menu.phtml
       uses Tailwind classes directly and doesn't need these overrides) */
    /* REMOVED: old dropdown styles that conflicted with new drawer */

    /* Close button for dropdowns — injected via ::before */
    #customer-menu-dropdown::before,
    [aria-labelledby*="customer-menu"]::before,
    [x-ref*="customer"] > [x-show]::before {
        content: '✕';
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 12px;
        right: 16px;
        width: 36px;
        height: 36px;
        border-radius: 9999px;
        background: #f5f5f7;
        color: #1d1d1f;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        z-index: 10;
        pointer-events: auto;
        font-family: system-ui, sans-serif;
    }

    /* Menu items inside account dropdown — readable, tap-friendly */
    .page-header nav.absolute a,
    .page-header nav.absolute button,
    #customer-menu-dropdown a,
    #customer-menu-dropdown button,
    .customer-menu-dropdown a,
    .customer-menu-dropdown button,
    [aria-labelledby*="customer-menu"] a,
    [aria-labelledby*="customer-menu"] button {
        display: block !important;
        width: 100% !important;
        padding: 16px 20px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #1d1d1f !important;
        white-space: nowrap !important;
        text-align: left !important;
        border-radius: 10px;
        margin-bottom: 4px;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        border: 1px solid transparent;
    }

    .page-header nav.absolute a:first-child {
        color: #ffffff !important;
        background: linear-gradient(135deg, #0090ff 0%, #0071e3 50%, #0060c8 100%) !important;
        box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35);
    }

    .page-header nav.absolute a:not(:first-child) {
        background: #f5f5f7 !important;
    }

    .page-header nav.absolute a:active,
    #customer-menu-dropdown a:active,
    [aria-labelledby*="customer-menu"] a:active {
        background: rgba(0, 113, 227, 0.08) !important;
    }

    /* Backdrop when dropdown is open to dim the rest of the page */
    .page-header nav.absolute::after {
        content: '';
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: -1;
        pointer-events: none;
    }

    /* Mini cart dropdown — same treatment: full-width drawer with close.
       Treven feedback (2026-05-21): the previous selector list included
       `[x-ref*="cart"] > [x-show]` and `[aria-labelledby*="cart-icon"]`,
       which were catastrophically broad. The Hyva header cart button has
       `x-ref="cartButton"` and its direct child is the count-badge
       `<span x-show="summaryCount">`. That made the selector match the
       count-badge whenever the cart had items, blowing it up into a
       100vw white box pinned `top: 60px` across the page — and since
       the badge is inside the cart button, clicking the white box
       bubbled to `@click="toggleCart"` and opened the cart drawer.
       Removed those two selectors. The legacy Luma minicart-dropdown
       selectors stay (no-ops on Hyva but harmless). */
    #menu-cart-icon-dropdown,
    .minicart-dropdown,
    [aria-labelledby*="menu-cart-icon"],
    .minicart-wrapper .block-minicart {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 24px 20px 32px !important;
        background: #ffffff !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
        border-radius: 0 0 16px 16px !important;
        z-index: 9999 !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
    }

    /* Close button for cart too */
    #menu-cart-icon-dropdown::before,
    [aria-labelledby*="menu-cart-icon"]::before,
    .minicart-wrapper .block-minicart::before {
        content: '✕';
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 12px;
        right: 16px;
        width: 36px;
        height: 36px;
        border-radius: 9999px;
        background: #f5f5f7;
        color: #1d1d1f;
        font-size: 18px;
        cursor: pointer;
        z-index: 10;
        font-family: system-ui, sans-serif;
    }
}

/* ============================================================
   ACCOUNT DRAWER — force styling (Tailwind may not rebuild)
   ============================================================ */

/* Drawer title (SIGN IN / MY ACCOUNT / NOT A MEMBER YET?) */
#ff-account-title,
[role="dialog"][aria-labelledby="ff-account-title"] h2,
[role="dialog"][aria-labelledby="ff-account-title"] h3 {
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 800 !important;
}

/* Form field labels (EMAIL / PASSWORD) */
[role="dialog"][aria-labelledby="ff-account-title"] label {
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
}

/* Form inputs — readable */
[role="dialog"][aria-labelledby="ff-account-title"] input[type="email"],
[role="dialog"][aria-labelledby="ff-account-title"] input[type="password"] {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    background: #ffffff !important;
}

[role="dialog"][aria-labelledby="ff-account-title"] input[type="email"]:focus,
[role="dialog"][aria-labelledby="ff-account-title"] input[type="password"]:focus {
    border-color: #0071e3 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important;
}

/* Primary SIGN IN button inside the drawer */
[role="dialog"][aria-labelledby="ff-account-title"] button[type="submit"].ff-apple-link {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 24px !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* Create Account CTA button */
[role="dialog"][aria-labelledby="ff-account-title"] a.ff-apple-link--buy {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 24px !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* Forgot password link */
[role="dialog"][aria-labelledby="ff-account-title"] a[href*="forgotpassword"] {
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
}

/* Helper text + subtitle */
[role="dialog"][aria-labelledby="ff-account-title"] p {
    color: #6b7280;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Section divider style for "Not a member yet?" */
[role="dialog"][aria-labelledby="ff-account-title"] .bg-gray-50 {
    background: #f5f5f7 !important;
}

/* Close button on drawer — make it pop */
[role="dialog"][aria-labelledby="ff-account-title"] button[aria-label="Close"] {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 9999px !important;
    background: #f5f5f7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s, transform 0.2s !important;
}

[role="dialog"][aria-labelledby="ff-account-title"] button[aria-label="Close"]:hover {
    background: #e5e7eb !important;
    transform: rotate(90deg);
}

/* ============================================================
   ACCOUNT DRAWER — premium slide-in sidebar (440px desktop, full-width mobile)
   ============================================================ */
.ff-account-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 100% !important;
    max-width: 100vw !important;
    background: #ffffff !important;
    z-index: 10001 !important;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

@media (min-width: 640px) {
    .ff-account-drawer {
        width: 440px !important;
        max-width: 440px !important;
    }
}

@media (min-width: 1024px) {
    .ff-account-drawer {
        width: 460px !important;
        max-width: 460px !important;
    }
}

/* Legacy selectors kept for backward-compat */
[role="dialog"][aria-labelledby="ff-account-title"] {
    z-index: 10001 !important;
    width: 100% !important;
    max-width: 100vw !important;
}
@media (min-width: 640px) {
    [role="dialog"][aria-labelledby="ff-account-title"] {
        width: 440px !important;
        max-width: 440px !important;
    }
}
@media (min-width: 1024px) {
    [role="dialog"][aria-labelledby="ff-account-title"] {
        width: 460px !important;
        max-width: 460px !important;
    }
}

/* Drawer logo bar — dark navy header, 72px, space for logo */
.ff-drawer-logo-bar {
    height: 72px !important;
    background: #1c2a35 !important;
    padding: 0 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Close button on logo bar — white-filled circle with dark X for maximum visibility
   Positioned absolutely to far right of logo bar */
.ff-drawer-close {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    left: auto !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    background: #ffffff !important;
    color: #1d1d1f !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
}

.ff-drawer-close svg {
    color: #1d1d1f !important;
    stroke: #1d1d1f !important;
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.5 !important;
}

.ff-drawer-close:hover {
    background: #1d1d1f !important;
    color: #ffffff !important;
    transform: translateY(-50%) rotate(90deg) scale(1.08) !important;
}

.ff-drawer-close:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* SIGN IN button — extra margin-top so it doesn't crowd the password field */
.ff-drawer-signin-btn {
    margin-top: 20px !important;
    margin-bottom: 4px !important;
}

/* "Not a member yet?" section — more breathing room */
.ff-drawer-signup-section {
    margin-top: 40px !important;
    padding: 40px 32px !important;
    background: #f5f5f7 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.ff-drawer-signup-section h3 {
    margin-bottom: 8px !important;
    letter-spacing: 0.08em !important;
}

.ff-drawer-signup-section p {
    margin-bottom: 20px !important;
    padding: 0 8px !important;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
}

/* Form inputs + labels — more generous padding inside drawer */
[role="dialog"][aria-labelledby="ff-account-title"] form {
    padding: 0 !important;
}

[role="dialog"][aria-labelledby="ff-account-title"] .flex-1 {
    padding-top: 0 !important;
}

/* Inner content areas — 32px horizontal padding for breathing room */
[role="dialog"][aria-labelledby="ff-account-title"] > .flex-1 > div {
    /* Already 32px via px-8 class from Tailwind if loaded,
       but forcing it in case Tailwind didn't rebuild */
    padding-left: 32px !important;
    padding-right: 32px !important;
}

[role="dialog"][aria-labelledby="ff-account-title"] .ff-drawer-signup-section {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* ============================================================
   MOBILE MENU DRAWER — accordion dropdowns matching desktop mega menu
   ============================================================ */

.ff-mobile-menu-drawer {
    /* Full width on mobile, 400px on sm+ (matches Tailwind class) */
}

/* Mobile menu header — clean white bar matching cart + account drawers */
.ff-mobile-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 24px 16px !important;
    border-bottom: 1px solid #e8e8ed !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
}

.ff-mobile-menu-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: #1d1d1f !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.ff-mobile-menu-title strong {
    font-weight: 700 !important;
}

/* Kill the old dark logo bar if any legacy template uses it */
.ff-mobile-menu-logo-bar {
    display: none !important;
}

.ff-mobile-menu-nav {
    padding-bottom: 40px;
}

.ff-mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ff-mobile-menu-item {
    border-bottom: 1px solid #f0f0f2;
}

/* Top-level link — UPPERCASE, big tap target */
.ff-mobile-menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    font-family: var(--ff-font-heading, system-ui) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    min-height: 56px;
    transition: background 0.15s ease;
    cursor: pointer;
}

.ff-mobile-menu-link:hover,
.ff-mobile-menu-link:active {
    background: #f5f5f7 !important;
    outline: none;
}

/* Keyboard focus on mobile drawer top-level link — bg shift to
   #f5f5f7 plus a 2px brand-blue outline ring. inset offset is
   negative so the outline draws inside the link's padding (the
   link is full-width with no margin, so positive offset would
   bleed into adjacent items). */
.ff-mobile-menu-link:focus-visible {
    background: #f5f5f7 !important;
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: -2px;
}

/* Current-page indicator — when JS init sets aria-current="page"
   on the link matching the current URL (mirrors desktop megamenu
   logic), give it a brand-blue inset border + medium-weight text
   so SR + sighted users both see the active category. */
.ff-mobile-menu-link[aria-current="page"] {
    color: var(--ff-blue, #0071e3) !important;
    box-shadow: inset 3px 0 0 var(--ff-blue, #0071e3);
    background: rgba(0, 113, 227, 0.04) !important;
}

.ff-mobile-menu-link--direct .ff-mobile-menu-arrow {
    color: #6e6e73;
    opacity: 0.5;
    flex-shrink: 0;
}

.ff-mobile-menu-chevron {
    color: #6e6e73;
    transition: transform 0.25s ease;
    display: inline-flex;
    flex-shrink: 0;
}

.ff-mobile-menu-chevron.is-open {
    transform: rotate(180deg);
    color: #0071e3;
}

/* Submenu — indented, subtle background */
.ff-mobile-menu-sublist {
    background: #fafafa;
    padding: 8px 0 16px;
    border-top: 1px solid #f0f0f2;
}

.ff-mobile-menu-sublink {
    display: block !important;
    padding: 14px 24px 14px 36px !important;
    font-family: var(--ff-font-heading, system-ui) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #4b5563 !important;
    text-decoration: none !important;
    transition: color 0.15s ease, background 0.15s ease, padding-left 0.15s ease;
    min-height: 44px;
    line-height: 1.4;
}

.ff-mobile-menu-sublink:hover,
.ff-mobile-menu-sublink:focus-visible,
.ff-mobile-menu-sublink:active {
    color: #0071e3 !important;
    background: rgba(0, 113, 227, 0.04) !important;
    padding-left: 40px !important;
    outline: none;
}

.ff-mobile-menu-sublink--all {
    color: #0071e3 !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #e5e5e7;
    margin-bottom: 4px;
}

/* SECTION TITLES inside mobile menu dropdown (e.g. "XP SERIES" in Pistols) */
.ff-mobile-menu-section {
    padding-top: 4px;
    margin-top: 4px;
}

.ff-mobile-menu-section:first-child {
    margin-top: 0;
}

.ff-mobile-menu-section-title {
    font-family: var(--ff-font-heading, system-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #0071e3;
    padding: 14px 24px 8px 24px;
    background: #fafafa;
    border-top: 1px solid #f0f0f2;
}

.ff-mobile-menu-section:first-child .ff-mobile-menu-section-title {
    border-top: none;
    padding-top: 8px;
}

/* Nested accordion - Level 2 (e.g. 1911 Parts inside Parts) */
.ff-mobile-menu-sublink--expandable {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #1d1d1f !important;
    font-weight: 700 !important;
}

.ff-mobile-menu-sublink--expandable:hover,
.ff-mobile-menu-sublink--expandable:focus-visible,
.ff-mobile-menu-sublink--expandable:active {
    background: #ffffff !important;
    padding-left: 36px !important;
    outline: none;
}

.ff-mobile-menu-chevron--small {
    color: #6e6e73;
    transition: transform 0.25s ease;
    display: inline-flex;
    flex-shrink: 0;
}

.ff-mobile-menu-chevron--small.is-open {
    transform: rotate(180deg);
    color: #0071e3;
}

/* Level 3 - Sub-sublist (e.g. Frame Parts inside 1911 Parts) */
.ff-mobile-menu-subsublist {
    background: #ffffff;
    padding: 4px 0 12px;
    border-top: 1px solid #f0f0f2;
    border-bottom: 1px solid #f0f0f2;
}

.ff-mobile-menu-subsublink {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 24px 12px 48px !important;
    font-family: var(--ff-font-heading, system-ui) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #4b5563 !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
    min-height: 40px;
    background: transparent !important;
    border: none !important;
    width: 100%;
    cursor: pointer;
}

.ff-mobile-menu-subsublink:hover,
.ff-mobile-menu-subsublink:focus-visible,
.ff-mobile-menu-subsublink:active {
    color: #0071e3 !important;
    background: #f5f5f7 !important;
    padding-left: 52px !important;
    outline: none;
}

.ff-mobile-menu-subsublink--expandable {
    font-weight: 600 !important;
    color: #1d1d1f !important;
}

.ff-mobile-menu-subsublink--all {
    color: #0071e3 !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #e5e5e7;
    margin-bottom: 4px;
}

/* Level 4 - for deeply nested items (e.g. Frames/Grips inside Frame Parts) */
.ff-mobile-menu-l4list {
    background: #fafafa;
    padding: 4px 0 10px;
    border-top: 1px solid #f0f0f2;
}

.ff-mobile-menu-l4link {
    display: block !important;
    padding: 10px 24px 10px 64px !important;
    font-family: var(--ff-font-heading, system-ui) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
    min-height: 36px;
}

.ff-mobile-menu-l4link:hover,
.ff-mobile-menu-l4link:focus-visible,
.ff-mobile-menu-l4link:active {
    color: #0071e3 !important;
    background: #ffffff !important;
    padding-left: 68px !important;
    outline: none;
}

.ff-mobile-menu-l4link--all {
    color: #0071e3 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    border-bottom: 1px solid #e5e5e7;
}

/* Footer actions in menu */
.ff-mobile-menu-footer {
    /* +3px top padding to clear the brand accent line drawn via the layered
       background below. Treven 2026-05-29: "add some color at the bottom so
       the buttons pop more." */
    padding: 27px 24px 24px;
    border-top: none;
    margin-top: 16px;
    /* light base + a thin blue→red brand accent line across the very top */
    background:
        linear-gradient(90deg, var(--ff-blue, #00A3FF), var(--ff-red, #FF2D2D)) top / 100% 3px no-repeat,
        #f5f5f7;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ff-mobile-menu-footer-link {
    display: block;
    padding: 14px 16px;
    text-align: center;
    font-family: var(--ff-font-heading, system-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 10px;
    /* Brand-blue fill so the buttons pop on the light footer (was a plain
       white button that only colored on hover — invisible affordance on a
       touch device with no hover). */
    background: var(--ff-blue, #00A3FF);
    border: 1px solid var(--ff-blue, #00A3FF);
    box-shadow: 0 6px 18px rgba(0, 163, 255, 0.30);
    transition: all 0.2s ease;
}

.ff-mobile-menu-footer-link:hover {
    background: #0a1929;
    color: #ffffff !important;
    border-color: #0a1929;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(10, 25, 41, 0.35);
    outline: none;
}
.ff-mobile-menu-footer-link:focus-visible {
    background: #0071e3;
    color: #ffffff !important;
    border-color: #0071e3;
    /* Double-ring focus indicator (white inner + brand-blue outer) since
       the focus state has a brand-blue surface — single-color outline
       would be invisible. */
    box-shadow: 0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3);
    outline: none;
}

/* ============================================================
   UNIFIED CLOSE BUTTON — IDENTICAL across account, mobile menu, and cart drawers
   All three use: white circle, 40x40, light gray border, dark X, shadow
   Positioned top-right-ish in their respective header/bar
   ============================================================ */

.ff-mobile-menu-close,
.ff-drawer-close,
.ff-cart-drawer__close,
.ff-account-drawer__close,
[aria-label="Close menu"].btn,
[aria-label="Close"].w-10,
dialog[class*="open:flex"] [aria-label="Close menu"] {
    width: 40px !important;
    height: 40px !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #1d1d1f !important;
    border: 2px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

/* All three close buttons now sit INLINE in flex headers — no absolute positioning */
.ff-mobile-menu-close,
.ff-cart-drawer__close,
.ff-account-drawer__close,
.ff-drawer-close,
[aria-label="Close menu"].btn,
dialog[class*="open:flex"] [aria-label="Close menu"] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
}

/* SVG icon (dark X) inside every close button */
.ff-mobile-menu-close svg,
.ff-drawer-close svg,
.ff-cart-drawer__close svg,
.ff-account-drawer__close svg,
dialog[class*="open:flex"] [aria-label="Close menu"] svg {
    color: #1d1d1f !important;
    stroke: #1d1d1f !important;
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.5 !important;
}

/* Hover: fill dark, rotate 90° */
.ff-mobile-menu-close:hover,
.ff-drawer-close:hover,
.ff-cart-drawer__close:hover,
.ff-account-drawer__close:hover,
dialog[class*="open:flex"] [aria-label="Close menu"]:hover {
    background: #1d1d1f !important;
    border-color: #1d1d1f !important;
}

/* All three close buttons now use the same rotate hover (all inline/relative) */
.ff-mobile-menu-close:hover,
.ff-cart-drawer__close:hover,
.ff-account-drawer__close:hover,
.ff-drawer-close:hover,
dialog[class*="open:flex"] [aria-label="Close menu"]:hover {
    transform: rotate(90deg) scale(1.08) !important;
}

/* Hover SVG → white */
.ff-mobile-menu-close:hover svg,
.ff-drawer-close:hover svg,
.ff-cart-drawer__close:hover svg,
.ff-account-drawer__close:hover svg,
dialog[class*="open:flex"] [aria-label="Close menu"]:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ============================================================
   ACCOUNT DRAWER — FINAL, clean, self-contained, matches cart drawer
   (this block appears LAST in the file so it beats all earlier rules)
   ============================================================ */

/* Backdrop — dims the page behind the drawer */
/* NOTE: display intentionally not !important so Alpine x-show can toggle it */
.ff-account-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    z-index: 10000 !important;
}

.ff-account-backdrop[style*="display: none"],
.ff-account-backdrop[style*="display:none"] {
    display: none !important;
}

/* Drawer container — slides in from the right */
/* NOTE: display is intentionally NOT !important so Alpine x-show="open" can toggle it */
.ff-account-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 100% !important;
    max-width: 100vw !important;
    background: #ffffff !important;
    z-index: 10001 !important;
    display: flex;
    flex-direction: column !important;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden !important;
    color: #1d1d1f !important;
}

/* Alpine's x-cloak hides the drawer before JS loads — prevents flash on page load */
.ff-account-drawer[x-cloak],
.ff-account-backdrop[x-cloak] {
    display: none !important;
}

/* When Alpine's x-show sets display:none, honor it */
.ff-account-drawer[style*="display: none"],
.ff-account-drawer[style*="display:none"] {
    display: none !important;
}

@media (min-width: 640px) {
    .ff-account-drawer {
        width: 480px !important;
        max-width: 480px !important;
    }
}

/* Slide-in animation — transform toggled by .is-open class (added by Alpine :class binding) */
.ff-account-drawer {
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-account-drawer.is-open {
    transform: translateX(0);
}

/* Header — title on left, X on right (EXACTLY matches cart drawer) */
.ff-account-drawer__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 24px 16px !important;
    border-bottom: 1px solid #e8e8ed !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
}

.ff-account-drawer__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: #1d1d1f !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.ff-account-drawer__title strong {
    font-weight: 700 !important;
}

/* Close button — IDENTICAL to .ff-cart-drawer__close */
.ff-account-drawer__close {
    background: #ffffff !important;
    border: 2px solid rgba(0, 0, 0, 0.08) !important;
    color: #1d1d1f !important;
    padding: 0 !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
}

.ff-account-drawer__close svg {
    width: 22px !important;
    height: 22px !important;
    color: #1d1d1f !important;
    stroke: #1d1d1f !important;
    stroke-width: 2.5 !important;
}

.ff-account-drawer__close:hover {
    background: #1d1d1f !important;
    border-color: #1d1d1f !important;
    transform: rotate(90deg) scale(1.08) !important;
}

.ff-account-drawer__close:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Body — scrollable middle section */
.ff-account-drawer__body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 24px !important;
    background: #ffffff !important;
}

.ff-account-drawer__intro {
    color: #6e6e73 !important;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
    margin: 0 0 24px 0 !important;
}

/* Form layout */
.ff-account-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin: 0 !important;
}

.ff-account-form__field {
    display: block !important;
}

.ff-account-form__field label {
    display: block !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #1d1d1f !important;
    margin: 0 0 8px 0 !important;
}

.ff-account-form__required {
    color: #d70015 !important;
    margin-left: 2px !important;
}

.ff-account-form__field input {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #e8e8ed !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    color: #1d1d1f !important;
    background: #f5f5f7 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.ff-account-form__field input::placeholder {
    color: #a1a1a6 !important;
}

.ff-account-form__field input:focus {
    outline: none !important;
    border-color: #0071e3 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important;
}

/* Submit button — solid dark pill, same as Apple/cart checkout button */
.ff-account-form__submit {
    margin-top: 12px !important;
    padding: 16px 24px !important;
    background: #1d1d1f !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ff-account-form__submit:hover {
    background: #0071e3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.3) !important;
}

/* Keyboard focus on account drawer Sign In button — matches the
   hover state visually so keyboard users get the same lift signal
   as mouse users, plus a 2px white outline ring (visible against
   the brand-blue filled button) with 3px offset. */
.ff-account-form__submit:focus-visible {
    background: #0071e3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.3) !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 3px !important;
}

/* Forgot link */
.ff-account-form__forgot {
    display: block !important;
    text-align: center !important;
    margin-top: 10px !important;
    padding: 8px !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #0071e3 !important;
    text-decoration: none !important;
}

.ff-account-form__forgot:hover {
    color: #0051a2 !important;
    text-decoration: underline !important;
    outline: none !important;
}

.ff-account-form__forgot:focus-visible {
    color: #0051a2 !important;
    text-decoration: underline !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
    border-radius: 3px !important;
}

/* Footer — Create Account section, light-gray band at bottom */
.ff-account-drawer__footer {
    background: #f5f5f7 !important;
    padding: 28px 24px !important;
    border-top: 1px solid #e8e8ed !important;
    flex-shrink: 0 !important;
}

.ff-account-drawer__footer h3 {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #1d1d1f !important;
    text-align: center !important;
    margin: 0 0 6px 0 !important;
}

.ff-account-drawer__footer p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #6e6e73 !important;
    text-align: center !important;
    margin: 0 0 16px 0 !important;
}

/* Create Account button — outlined pill */
.ff-account-form__create {
    display: block !important;
    width: 100% !important;
    padding: 14px 24px !important;
    background: #ffffff !important;
    color: #0071e3 !important;
    border: 2px solid #0071e3 !important;
    border-radius: 9999px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.ff-account-form__create:hover {
    background: #0071e3 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.3) !important;
    outline: none !important;
}
.ff-account-form__create:focus-visible {
    background: #0071e3 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    /* Double-ring (white inner + brand-blue outer) since the focus
       surface is brand-blue. */
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.3),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3) !important;
    outline: none !important;
}

/* Logged-in menu */
.ff-account-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.ff-account-menu__link {
    display: block !important;
    padding: 14px 16px !important;
    background: #f5f5f7 !important;
    border-radius: 10px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.ff-account-menu__link:hover {
    background: #e8e8ed !important;
    transform: translateX(3px) !important;
    outline: none !important;
}

/* Keyboard focus on logged-in account drawer menu links (My
   Dashboard / My Orders / Address Book / Account Information
   / Wish List / etc.) — same bg + indent as hover plus a 2px
   brand-blue outline ring with -2px (inset) offset so the ring
   draws inside the row rather than bleeding into adjacent
   stacked rows. */
.ff-account-menu__link:focus-visible {
    background: #e8e8ed !important;
    transform: translateX(3px) !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: -2px !important;
}

/* Current-page indicator inside the account drawer. Customer-menu's
   Alpine init() tags the matching link with aria-current="page" on
   mount; this rule visualizes it so sighted users also see at a
   glance which section they're already on. Brand-navy left bar +
   slightly heavier text. Hover/focus still wins (transform applied
   to the right) so the indication doesn't feel "stuck". */
.ff-account-menu__link[aria-current="page"] {
    background: #ffffff !important;
    box-shadow: inset 4px 0 0 var(--ff-blue, #0071e3) !important;
    color: var(--ff-bg-footer, #0a1929) !important;
    padding-left: 20px !important;
}

.ff-account-menu__logout {
    display: block !important;
    margin-top: 16px !important;
    padding: 14px 16px !important;
    text-align: center !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #6e6e73 !important;
    text-decoration: none !important;
    border-top: 1px solid #e8e8ed !important;
    transition: color 0.2s ease !important;
}

.ff-account-menu__logout:hover {
    color: #d70015 !important;
    outline: none !important;
}
.ff-account-menu__logout:focus-visible {
    color: #d70015 !important;
    /* Red outline matches the destructive intent (Sign Out clears the
       authenticated session). Reinforces "this clears state, careful". */
    outline: 2px solid #d70015 !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* ============================================================
   UNIFIED DRAWER HEADERS — black bar, white text, white circle X close
   Applies to cart, mobile menu, and account drawers
   ============================================================ */

.ff-cart-drawer__header,
.ff-mobile-menu-header,
.ff-account-drawer__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 20px !important;
    background: #1d1d1f !important;
    border-bottom: none !important;
    flex-shrink: 0 !important;
    min-height: 72px !important;
    box-sizing: border-box !important;
}

/* Titles — uppercase white heading font, bold, large enough to be prominent */
.ff-cart-drawer__title,
.ff-mobile-menu-title,
.ff-account-drawer__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.ff-cart-drawer__title strong,
.ff-mobile-menu-title strong,
.ff-account-drawer__title strong {
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* Items count next to cart title */
.ff-cart-drawer__title .items-total {
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin-left: 10px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Close buttons stay exactly as they are — white circle with dark X (unchanged).
 * The border on a white circle needs to be slightly stronger on a dark bg so it still reads. */
.ff-cart-drawer__close,
.ff-mobile-menu-close,
.ff-account-drawer__close {
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* ============================================================
   PREMIUM PRODUCT DETAIL PAGE (PDP) — Apple / Nike aesthetic
   Clean typography, generous whitespace, no visible dividers.
   Every element meticulously placed.
   ============================================================ */

/* --- Overall page: generous top/side breathing room --- */
.catalog-product-view main {
    background: #ffffff !important;
}

/* Old PDP 1280px cap removed — fights the full-width design. The current
   width rules live in the "PDP — PREMIUM REDESIGN" block below (max-width
   1760px on >=1280, 1920px on >=1680). */
.catalog-product-view .columns,
.catalog-product-view .page-main,
.catalog-product-view .column.main {
    padding-bottom: 80px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Breadcrumbs: subtle, tiny, elegant --- */
.catalog-product-view .breadcrumbs {
    background: transparent !important;
    box-shadow: none !important;
    padding: 16px 24px !important;
    border: none !important;
}

.catalog-product-view .breadcrumbs a,
.catalog-product-view .breadcrumbs span,
.catalog-product-view .breadcrumbs strong {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #6e6e73 !important;
    text-decoration: none !important;
}

.catalog-product-view .breadcrumbs a:hover {
    color: #1d1d1f !important;
    text-decoration: underline !important;
}

.catalog-product-view .breadcrumbs strong,
.catalog-product-view .breadcrumbs .item:last-child {
    color: #1d1d1f !important;
    font-weight: 600 !important;
}

/* --- Two-column PDP layout: more space between gallery and info --- */
.catalog-product-view .product.media,
.catalog-product-view .product-info-main {
    padding: 0 24px !important;
}

/* --- Product info column: KILL ALL dividers on every descendent div/section --- */
.catalog-product-view .product-info-main div,
.catalog-product-view .product-info-main section,
.catalog-product-view .product-info-main article,
.catalog-product-view .product-info-main .flex,
.catalog-product-view .product-info-main .border-t,
.catalog-product-view .product-info-main .border-b,
.catalog-product-view .product-info-main [class*="border-"] {
    border-top: 0 none transparent !important;
    border-bottom: 0 none transparent !important;
    border-left: 0 none transparent !important;
    border-right: 0 none transparent !important;
}

/* Also kill borders on top-level section wrappers (Description / More Info / Reviews) */
.catalog-product-view section.product-section,
.catalog-product-view section[class*="section"],
.catalog-product-view main section > div[class*="border"],
.catalog-product-view main > section {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Also kill borders between product.info.detailed children */
.catalog-product-view .product.info.detailed > *,
.catalog-product-view .product.info.detailed section,
.catalog-product-view .product.info.detailed div {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* HOWEVER — preserve borders on buttons (gallery arrows, thumbs, addto links, qty stepper) */
.catalog-product-view button,
.catalog-product-view input,
.catalog-product-view select,
.catalog-product-view textarea {
    /* buttons/inputs keep their borders via their OWN rules — don't reset here */
}

/* --- Hide duplicate page-title outside info column (Hyvä puts two, one mobile-only, one desktop-only).
       Since we override sr-only, both show up. Hide the sr-only one entirely on all sizes. --- */
.catalog-product-view h1.page-title.sr-only,
.catalog-product-view h1.page-title.md\:sr-only,
.catalog-product-view h1.page-title[class*="sr-only"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* But do NOT hide the one inside product-info-main */
.catalog-product-view .product-info-main h1.page-title,
.catalog-product-view .product-info-main .page-title,
.catalog-product-view .hidden.md\:block .page-title {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    margin: 0 0 12px 0 !important;
}

/* --- Product title: Apple-style large, confident, heavy --- */
.catalog-product-view .product-info-main .page-title-wrapper,
.catalog-product-view .product-info-main h1 {
    margin: 0 0 20px 0 !important;
}

.catalog-product-view h1.page-title,
.catalog-product-view .product-info-main h1,
.catalog-product-view .product-info-main .page-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
    text-align: left !important;
    text-transform: uppercase !important;
    margin: 0 0 12px 0 !important;
    display: block !important;
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* Undo Hyvä's `md:sr-only` that hides title on desktop */
@media (min-width: 768px) {
    .catalog-product-view h1.page-title {
        position: static !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
    }
}

/* --- Short description / sub-title right under product name --- */
.catalog-product-view .product.attribute.overview,
.catalog-product-view .product-info-main .overview,
.catalog-product-view .product-info-main .short-description {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1.0625rem !important;
    line-height: 1.55 !important;
    color: #424245 !important;
    margin: 0 0 28px 0 !important;
    max-width: 540px !important;
}

/* --- Price: prominent, clean, premium --- */
.catalog-product-view .price-box {
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    border: none !important;
}

.catalog-product-view .price-box .price,
.catalog-product-view .price-box .price-wrapper,
.catalog-product-view .product-info-main .price {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
}

.catalog-product-view .price-box .old-price .price {
    font-size: 1.125rem !important;
    color: #6e6e73 !important;
    text-decoration: line-through !important;
    margin-right: 12px !important;
    font-weight: 400 !important;
}

.catalog-product-view .price-box .special-price .price {
    color: #d70015 !important;
}

/* --- Stock indicator: subtle pill, not cluttered --- */
.catalog-product-view .stock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    background: #f5f5f7 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    margin: 0 0 24px 0 !important;
    border: none !important;
}

.catalog-product-view .stock.available,
.catalog-product-view .stock.in-stock,
.catalog-product-view .stock[title*="In stock" i] {
    background: #e8f5e9 !important;
    color: #1b5e20 !important;
}

.catalog-product-view .stock.unavailable,
.catalog-product-view .stock.out-of-stock,
.catalog-product-view .stock[title*="Out of stock" i] {
    background: #fdecea !important;
    color: #b71c1c !important;
}

/* "Notify me when this product is in stock" — full-width dark pill,
   matches the Add-to-Cart button on in-stock PDPs.

   IMPORTANT — Magento ships the wrapper as `<div class="product alert stock
   text-right">` (three space-separated classes), NOT `product-alert`. The
   earlier `[class*="product-alert"]` selector never matched, so the wrapper
   kept its default Hyvä styling: a light-grey rounded card backer that
   peeked out around the narrower navy pill, and `text-right` shoved the
   pill to the right edge instead of letting it span the column. Targeting
   the actual `.product.alert.stock` selector + overriding `text-align`
   makes the pill render as a single clean full-width navy bar. */
.catalog-product-view .product.alert,
.catalog-product-view .product.alert.stock,
.catalog-product-view .product-alert,
.catalog-product-view [class*="product-alert"] {
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
    width: 100% !important;
}

/* Notify-me / out-of-stock alert link — full-width filled pill so the
   "NOTIFY ME WHEN THIS PRODUCT IS IN STOCK" label fits cleanly on a
   single line and the wrapper's default grey backer is fully covered. */
.catalog-product-view a[href*="productalert"],
.catalog-product-view .product.alert a,
.catalog-product-view .product-alert a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    background: #0a1929 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.18) !important;
}

.catalog-product-view a[href*="productalert"]:hover,
.catalog-product-view .product.alert a:hover,
.catalog-product-view .product-alert a:hover {
    background: #0071e3 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.30) !important;
    text-decoration: none !important;
    outline: none !important;
}

/* Keyboard focus on PDP "Notify me when in stock" button (OOS
   product replacement for Add-to-Cart). Same brand-blue lift as
   hover plus a 2px white outline ring (visible on the brand-blue
   filled button) with 3px offset for clear keyboard nav. */
.catalog-product-view a[href*="productalert"]:focus-visible,
.catalog-product-view .product.alert a:focus-visible,
.catalog-product-view .product-alert a:focus-visible {
    background: #0071e3 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.30) !important;
    text-decoration: none !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 3px !important;
}

/* Bell icon inside the notify link — sized down from Hyvä's default
   24px to 18px so it pairs with the 0.875rem label without dominating. */
.catalog-product-view a[href*="productalert"] svg,
.catalog-product-view .product.alert a svg,
.catalog-product-view .product-alert a svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

/* Strip Tailwind's `.underline` from the text span inside the notify-me
   pill — it's a filled button now, not a text link, so an underlined
   label inside the navy pill looks broken. text-decoration-line isn't
   inherited from the parent <a>, so we have to explicitly reset on the
   descendants. Also neutralize the legacy `text-orange-400` color
   wrapper so the icon stays white-on-navy (matches the button text
   color) and doesn't fight the white SVG stroke we already set above. */
.catalog-product-view a[href*="productalert"] .underline,
.catalog-product-view .product.alert a .underline,
.catalog-product-view .product-alert a .underline,
.catalog-product-view a[href*="productalert"] span,
.catalog-product-view .product.alert a span,
.catalog-product-view .product-alert a span {
    text-decoration: none !important;
    text-decoration-line: none !important;
    color: #ffffff !important;
}

/* --- SKU: tiny, grey, single-line (inline "SKU: Freedom-Riptide") --- */
.catalog-product-view .product-info-main .product.attribute.sku,
.catalog-product-view .product-info-main [itemprop="sku"],
.catalog-product-view .product-info-main .sku {
    display: block !important;
    font-size: 0.75rem !important;
    color: #6e6e73 !important;
    margin: 24px 0 0 0 !important;
    padding: 0 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-align: left !important;
}

.catalog-product-view .product-info-main .product.attribute.sku .type,
.catalog-product-view .product-info-main .sku .type,
.catalog-product-view .product-info-main .sku-label {
    font-weight: 600 !important;
    color: #1d1d1f !important;
    margin-right: 6px !important;
    display: inline !important;
}

.catalog-product-view .product-info-main .product.attribute.sku .value,
.catalog-product-view .product-info-main .sku .value {
    color: #424245 !important;
    display: inline !important;
}

/* Kill the huge empty space between "SKU" label and value caused by flex-between layout */
.catalog-product-view .product-info-main .product.attribute.sku,
.catalog-product-view .product-info-main .sku {
    justify-content: flex-start !important;
    gap: 6px !important;
}

/* --- Primary action button: dark pill, full-width, confident --- */
.catalog-product-view #product-addtocart-button,
.catalog-product-view button.action.tocart,
.catalog-product-view button[type="submit"].action.primary {
    width: 100% !important;
    padding: 18px 32px !important;
    background: #1d1d1f !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    margin: 24px 0 0 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

.catalog-product-view #product-addtocart-button:hover,
.catalog-product-view button.action.tocart:hover {
    background: #0071e3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.35) !important;
    outline: none !important;
}
/* Keyboard focus — same hover lift plus high-contrast double-ring (2px
   white inner + 2px brand-blue outer) since the focus surface is
   brand-blue. Mirrors the .ff-pdp-info scoped rule at line 21263. */
.catalog-product-view #product-addtocart-button:focus-visible,
.catalog-product-view button.action.tocart:focus-visible {
    background: #0071e3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.35),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3) !important;
    outline: none !important;
}

/* --- Quantity input: minimal, tasteful --- */
.catalog-product-view .field.qty {
    margin: 20px 0 0 0 !important;
}

.catalog-product-view .field.qty label {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #1d1d1f !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.catalog-product-view .field.qty input[type="number"],
.catalog-product-view input.qty {
    width: 100px !important;
    padding: 12px 14px !important;
    border: 2px solid #e8e8ed !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    background: #ffffff !important;
    text-align: center !important;
}

/* --- Wishlist / compare icons: tiny, tucked bottom-right, not distracting --- */
.catalog-product-view .product-addto-links,
.catalog-product-view .product-social-links {
    display: flex !important;
    gap: 16px !important;
    justify-content: flex-start !important;
    margin: 24px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}

.catalog-product-view .product-addto-links a,
.catalog-product-view .product-addto-links button,
.catalog-product-view .product-social-links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: transparent !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 9999px !important;
    color: #1d1d1f !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.catalog-product-view .product-addto-links a:hover,
.catalog-product-view .product-addto-links button:hover {
    background: #f5f5f7 !important;
    border-color: #1d1d1f !important;
}

/* --- Gallery: clean, premium, Apple-style --- */
.catalog-product-view .product.media {
    position: relative !important;
}

/* Legacy Luma selectors — Hyvä emits #gallery-main not .gallery-placeholder,
   so these are typically no-ops, but kept (transparent + zeroed) so any
   stray fallback markup also blends into the page instead of reverting
   to the old grey-card look. */
.catalog-product-view .product.media .main-image,
.catalog-product-view [data-role="product-gallery"] img,
.catalog-product-view .gallery-placeholder img {
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    transition: transform 0.4s ease !important;
}

/* Mobile gallery — edge-to-edge + larger aspect so the firearm
   reads as a dramatic hero photo instead of a small landscape strip.
   Treven feedback (2026-05-21): "fix the mobile size of the image as
   well this looks horrible and small."

   Two changes that compound:
   1. Kill the 24px side padding on .product.media so the photo
      extends to the viewport edges (full ~390px on iPhone vs the
      previous ~342px content width).
   2. Switch aspect-ratio from 3:2 landscape (~260px tall on a 390px
      iPhone) to 1:1 square (~390px tall) — the firearm still renders
      via object-fit: contain at its native aspect, but the container
      gives it more vertical real estate and reads as a hero photo. */
@media (max-width: 767px) {
    .catalog-product-view .product.media {
        padding: 0 !important;
        margin: 0 !important;
    }

    .catalog-product-view #gallery-main {
        aspect-ratio: 1 / 1 !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    /* Pull the title + price column back into the 16px gutter the
       rest of the page uses now that the image is full-bleed. */
    .catalog-product-view .product-info-main {
        padding: 0 16px !important;
    }
}

/* Thumbnail strip below main image — Apple style */
.catalog-product-view .product-image-thumbs,
.catalog-product-view .gallery-thumbs,
.catalog-product-view [class*="thumbs"] {
    margin-top: 12px !important;
    gap: 8px !important;
}

/* Thumbnail backdrop — was grey #f5f5f7 (broke brand spec "product
   photos always sit on PURE WHITE backdrops"). White surface +
   subtle 1px hairline border so each thumb still reads as a framed
   tile against the PDP white background. */
.catalog-product-view .product-image-thumbs button,
.catalog-product-view .gallery-thumbs button,
.catalog-product-view .gallery-thumbs img {
    border-radius: 10px !important;
    background: #ffffff !important;
    padding: 8px !important;
    border: 2px solid #e8e8ed !important;
    transition: all 0.2s ease !important;
}

/* Active thumbnail — brand-blue ring instead of near-black. Signals
   the current image more strongly and matches the design language
   used for active states elsewhere (focus rings, current page in
   pagination, current breadcrumb). */
.catalog-product-view .product-image-thumbs button.active,
.catalog-product-view .product-image-thumbs button[aria-selected="true"] {
    border-color: var(--ff-blue, #0071e3) !important;
}

/* Gallery nav arrows (prev/next) — subtle, not clunky */
.catalog-product-view .product.media button[aria-label*="Prev" i],
.catalog-product-view .product.media button[aria-label*="Next" i],
.catalog-product-view .gallery-nav-prev,
.catalog-product-view .gallery-nav-next {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 9999px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s ease !important;
}

.catalog-product-view .product.media button[aria-label*="Prev" i]:hover,
.catalog-product-view .product.media button[aria-label*="Next" i]:hover {
    background: #1d1d1f !important;
    color: #ffffff !important;
    border-color: #1d1d1f !important;
}

/* Hide broken thumbnail placeholders (empty gallery tiles) */
.catalog-product-view [class*="thumbs"] img[src=""],
.catalog-product-view [class*="thumbs"] img:not([src]),
.catalog-product-view [class*="thumbs"] button:not(:has(img[src])) {
    display: none !important;
}

/* --- DESCRIPTION SECTION --- */
/* Remove divider lines above/below description, give it generous spacing */
.catalog-product-view .product.info.detailed,
.catalog-product-view [data-role="content"].product-view-description,
.catalog-product-view .product-section-title,
.catalog-product-view [class*="product-info-"] {
    border: none !important;
}

.catalog-product-view .product.info.detailed {
    margin-top: 64px !important;
    padding: 0 24px !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Description title — clean, underlined ONLY with letter-spacing treatment */
.catalog-product-view .product-section-title,
.catalog-product-view [data-role="title"],
.catalog-product-view .product.info.detailed h2:first-of-type {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: #6e6e73 !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: center !important;
    position: relative !important;
}

/* Description body — narrow column, great typography, generous line-height */
.catalog-product-view .product.info.detailed .value,
.catalog-product-view .product.info.detailed .product.attribute.description,
.catalog-product-view [data-role="content"] {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 32px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
    color: #1d1d1f !important;
}

.catalog-product-view .product.info.detailed h1,
.catalog-product-view .product.info.detailed h2,
.catalog-product-view .product.info.detailed h3 {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    margin: 32px 0 16px 0 !important;
    letter-spacing: -0.01em !important;
}

.catalog-product-view .product.info.detailed h1 {
    font-size: 2rem !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
}

.catalog-product-view .product.info.detailed h2 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.catalog-product-view .product.info.detailed h3 {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.catalog-product-view .product.info.detailed p {
    margin: 0 0 16px 0 !important;
}

.catalog-product-view .product.info.detailed ul,
.catalog-product-view .product.info.detailed ol {
    margin: 0 0 16px 24px !important;
    padding: 0 !important;
}

.catalog-product-view .product.info.detailed li {
    margin: 6px 0 !important;
    line-height: 1.65 !important;
}

.catalog-product-view .product.info.detailed strong,
.catalog-product-view .product.info.detailed b {
    font-weight: 700 !important;
    color: #1d1d1f !important;
}

/* Hide the "Description /" label prefix if template adds it redundantly */
.catalog-product-view .product.info.detailed h1:first-of-type:first-letter {
    /* no change */
}

/* --- Product attribute tables: clean, no harsh borders --- */
.catalog-product-view .product-attributes,
.catalog-product-view .product.attribute.description,
.catalog-product-view table.additional-attributes {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 32px auto !important;
}

.catalog-product-view table.additional-attributes tr,
.catalog-product-view .product-attributes tr {
    border-bottom: 1px solid #f5f5f7 !important;
}

.catalog-product-view table.additional-attributes th,
.catalog-product-view .product-attributes .label {
    text-align: left !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #6e6e73 !important;
    padding: 16px 0 !important;
    border: none !important;
}

.catalog-product-view table.additional-attributes td,
.catalog-product-view .product-attributes .data {
    text-align: right !important;
    font-size: 0.9375rem !important;
    color: #1d1d1f !important;
    padding: 16px 0 !important;
    border: none !important;
}

/* Hide the redundant "Product Name" row in the More Information /
   additional-attributes table — it duplicates the H1 product title at
   the top of the page. Magento adds it whenever the `name` attribute
   has visible_on_front=1 (admin default) which is the wrong default for
   a customer-facing spec table; SKU + real specs are what shoppers want.
   Uses :has() so older browsers (Safari < 15.4 / Chrome < 105 / Firefox
   < 121) gracefully degrade — they still see the row. i18n note: targets
   data-th="Product Name" which only matches the English store; localize
   if expanding. */
.catalog-product-view table.additional-attributes tr:has(td[data-th="Product Name"]),
.catalog-product-view .product-attributes tr:has(td[data-th="Product Name"]) {
    display: none !important;
}

/* --- Related / Upsell product slider --- */
.catalog-product-view .block.related,
.catalog-product-view .block.upsell,
.catalog-product-view .block-products-list {
    margin-top: 80px !important;
    padding: 0 24px !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: none !important;
}

.catalog-product-view .block.related .block-title,
.catalog-product-view .block.upsell .block-title,
.catalog-product-view .block-products-list .block-title {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 40px 0 !important;
    text-align: center !important;
}

.catalog-product-view .block.related .block-title strong,
.catalog-product-view .block.upsell .block-title strong,
.catalog-product-view .block.related .block-title h2,
.catalog-product-view .block.upsell .block-title h2 {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #1d1d1f !important;
    margin: 0 !important;
}

/* Related product cards */
.catalog-product-view .block.related .product-item,
.catalog-product-view .block.upsell .product-item {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

.catalog-product-view .block.related .product-item:hover,
.catalog-product-view .block.related .product-item:focus-within,
.catalog-product-view .block.upsell .product-item:hover,
.catalog-product-view .block.upsell .product-item:focus-within {
    border-color: #e8e8ed !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
}

/* --- Newsletter / 10% off popup: less intrusive positioning --- */
.catalog-product-view .popup-newsletter,
.catalog-product-view [class*="get-10"],
.catalog-product-view [class*="newsletter-popup"] {
    z-index: 50 !important;
}

/* --- Hide redundant elements --- */
/* Redundant "Description /" prefix text patterns */
.catalog-product-view .product.info.detailed .description-section-title {
    display: none !important;
}

/* --- Mobile responsive refinements --- */
@media (max-width: 767px) {
    .catalog-product-view h1.page-title,
    .catalog-product-view .product-info-main h1 {
        font-size: 1.75rem !important;
        margin-bottom: 8px !important;
    }
    .catalog-product-view .price-box .price,
    .catalog-product-view .product-info-main .price {
        font-size: 1.5rem !important;
    }
    .catalog-product-view .columns,
    .catalog-product-view .page-main {
        padding-top: 0 !important;
    }
    .catalog-product-view .product.media,
    .catalog-product-view .product-info-main {
        padding: 0 16px !important;
    }
    .catalog-product-view .product.info.detailed {
        padding: 0 16px !important;
        margin-top: 40px !important;
    }
}

/* ============================================================
   PREMIUM PDP INFO COLUMN — new BEM structure (.ff-pdp-info__*)
   Overrides the old .card .mb-6 styling with a clean visual rhythm.
   ============================================================ */

.ff-pdp-info {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 540px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Reset any inherited card styles */
.ff-pdp-info.card,
.product-info-main .ff-pdp-info {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* --- EYEBROW PILL (above title) ---
   Small uppercase brand-blue pill labelling product positioning.
   Source comes from the `ff_eyebrow` attribute or a "LATEST RELEASE"
   fallback for recently-created products (see product-info.phtml). */
.ff-pdp-info__eyebrow {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.ff-pdp-info__eyebrow-pill {
    display: inline-block !important;
    padding: 6px 12px !important;
    background: rgba(0, 163, 255, 0.08) !important;
    color: var(--ff-blue, #00A3FF) !important;
    border: 1px solid rgba(0, 163, 255, 0.20) !important;
    border-radius: 9999px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* --- TITLE --- */
.ff-pdp-info__title {
    margin: 0 0 6px 0 !important;
}

/* --- SUBTITLE (below title) ---
   Letter-spaced uppercase descriptor, e.g. "COMPENSATED 1911 PISTOL".
   Pulled from `ff_subtitle` attribute or the deepest category name. */
.ff-pdp-info__subtitle {
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #6e6e73 !important;
    line-height: 1.2 !important;
}

.ff-pdp-info__title h1,
.ff-pdp-info__title .page-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
    text-align: left !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Undo any sr-only */
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    display: block !important;
}

/* --- REVIEWS BAR --- */
.ff-pdp-info__reviews {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 0.875rem !important;
}

.ff-pdp-info__reviews a {
    color: #0071e3 !important;
    text-decoration: none !important;
}

.ff-pdp-info__reviews a:hover {
    text-decoration: underline !important;
}

/* Keyboard focus on PDP review-count link (e.g. "5 reviews") —
   underline alone is too subtle for keyboard users; add a 2px
   brand-blue outline ring on focus-visible only. */
.ff-pdp-info__reviews a:focus-visible {
    text-decoration: underline !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* --- SHORT DESCRIPTION --- */
.ff-pdp-info__short-desc {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1.0625rem !important;
    line-height: 1.55 !important;
    color: #424245 !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    border: none !important;
    max-width: 100% !important;
}

.ff-pdp-info__short-desc p {
    margin: 0 0 12px 0 !important;
}

.ff-pdp-info__short-desc p:last-child {
    margin-bottom: 0 !important;
}

/* Mobile overflow guard (Treven 2026-05-28 — PDP scrolled right into
   white space on mobile). The short description is admin/PageBuilder HTML
   that can carry inline widths, fixed-width tables, or oversized images
   that push the whole page wider than the viewport. Clip + force every
   descendant to fit the column so it can never overflow horizontally. */
.ff-pdp-info { max-width: 100% !important; min-width: 0 !important; }
.ff-pdp-info__short-desc { overflow: hidden !important; max-width: 100% !important; }
.ff-pdp-info__short-desc * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}
.ff-pdp-info__short-desc img { height: auto !important; }
.ff-pdp-info__short-desc table,
.ff-pdp-info__short-desc [data-content-type="row"],
.ff-pdp-info__short-desc [data-element="inner"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Highlight values must wrap, never force the row wide */
.ff-pdp-info__highlight-value { overflow-wrap: break-word !important; min-width: 0 !important; }
.ff-pdp-info__highlight-row { min-width: 0 !important; }

/* --- MOBILE: title under the picture (Treven 2026-05-28) ---
   Hyvä renders TWO product titles: a top <h1 class="page-title md:sr-only">
   that is visible ABOVE the gallery on mobile (and sr-only on desktop),
   and the in-column title (.ff-pdp-info__title > .hidden.md:block) that
   shows on desktop only. On mobile the top one sat above the photo and was
   cramped/hard to read. Swap them on mobile: visually hide the top H1
   (keep it in the DOM as the semantic H1 for SEO/screen-readers) and
   reveal the in-column title, which sits directly UNDER the gallery in the
   stacked mobile layout. */
@media (max-width: 767px) {
    .catalog-product-view h1.page-title {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    /* Reveal the in-column visual title on mobile (it's `hidden md:block`) */
    .ff-pdp-info__title .hidden {
        display: block !important;
    }
}

/* --- PRICE --- */
.ff-pdp-info__price {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
}

.ff-pdp-info__price .price-box {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
}

.ff-pdp-info__price .price,
.ff-pdp-info__price .price-wrapper {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.01em !important;
}

.ff-pdp-info__price .old-price .price {
    font-size: 1.25rem !important;
    color: #6e6e73 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

.ff-pdp-info__price .special-price .price {
    color: #d70015 !important;
}

.ff-pdp-info__bundle-note {
    font-size: 0.8125rem !important;
    color: #6e6e73 !important;
    margin-left: 8px !important;
}

/* --- PDP PAYMENT ICONS STRIP (under ATC) ---
   Reuses the .ff-pay BEM pattern from the footer payment marks so the
   brand colors stay in one place (see line ~25830). Parent class
   .ff-pdp-info__payments scopes a smaller pill size + tighter spacing
   for the info column. The brand colors (stripes + word-marks)
   inherit from the unscoped .ff-pay--visa .ff-pay__stripe rules. */
.ff-pdp-info__payments {
    list-style: none !important;
    margin: 12px 0 4px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.ff-pdp-info__payments .ff-pay {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 24px !important;
    min-width: 44px !important;
    padding: 0 8px !important;
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.ff-pdp-info__payments .ff-pay__stripe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    pointer-events: none !important;
}

.ff-pdp-info__payments .ff-pay__mark {
    margin-top: 2px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #0a1929 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* --- STOCK STATUS --- */
.ff-pdp-info__stock {
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.ff-pdp-info__stock .stock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border: none !important;
    margin: 0 !important;
}

.ff-pdp-info__stock .stock.available,
.ff-pdp-info__stock .stock[title*="In stock" i] {
    background: #e8f5e9 !important;
    color: #1b5e20 !important;
}

.ff-pdp-info__stock .stock.unavailable,
.ff-pdp-info__stock .stock[title*="Out of stock" i] {
    background: #fdecea !important;
    color: #b71c1c !important;
}

/* --- FACTS BLOCK (price + Sezzle + stock + SKU grouped) ---
   Treven 2026-05-28: the price / financing / availability / SKU were
   floating loosely and read as a mess. Grouping them with controlled,
   tight internal spacing + a hairline below makes them one clean unit
   directly under the title/subtitle. Child margins are forced here so
   the block's internal rhythm is consistent regardless of the elements'
   standalone margins elsewhere in the file. */
.ff-pdp-info__facts {
    margin: 4px 0 18px 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid #e8e8ed !important;
}
.ff-pdp-info__facts > .ff-pdp-info__price {
    margin: 0 0 10px 0 !important;   /* price → Sezzle: tight, they relate */
}
.ff-pdp-info__facts > .ff-pdp-installment-wrap {
    margin: 0 0 16px 0 !important;   /* Sezzle → status row */
}
.ff-pdp-info__facts > .ff-pdp-info__status-row {
    margin: 0 !important;
}
.ff-pdp-info__facts > .ff-pdp-info__urgency {
    margin: 12px 0 0 0 !important;   /* urgency sits just under the status row */
}

/* Stock pill + SKU on one line */
.ff-pdp-info__status-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
    margin: 0 !important;
}
.ff-pdp-info__status-row .ff-pdp-info__stock {
    margin: 0 !important;            /* spacing handled by the row */
}

/* SKU — muted, secondary to the stock pill */
.ff-pdp-info__sku {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    line-height: 1.2 !important;
}
.ff-pdp-info__sku-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #86868b !important;
}
.ff-pdp-info__sku-value {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #424245 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.01em !important;
}

/* --- CTA AREA --- */
.ff-pdp-info__cta {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.ff-pdp-info__cta-row {
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin: 0 !important;
}

/* Qty input wrapper */
.ff-pdp-info__cta-row .field.qty,
.ff-pdp-info__cta-row [class*="qty"] {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.ff-pdp-info__cta-row .field.qty label {
    display: none !important; /* qty label takes too much space; input placeholder/aria-label carries meaning */
}

.ff-pdp-info__cta-row input[type="number"],
.ff-pdp-info__cta-row input.qty {
    width: 72px !important;
    height: 58px !important;
    padding: 0 10px !important;
    border: 2px solid #e8e8ed !important;
    border-radius: 9999px !important;
    background: #f5f5f7 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #1d1d1f !important;
}

/* Brand-spec alignment: focus brings border-color to brand-blue +
   4px rgba(0,113,227,0.12) box-shadow ring (matches every other
   form-input on the site). Was border #1d1d1f near-black with no
   ring — off-brand. The duplicate rule at line ~20919 has the
   correct values via !important; updating this rule too so source-
   order dependency isn't a footgun for future refactors. */
.ff-pdp-info__cta-row input[type="number"]:focus,
.ff-pdp-info__cta-row input.qty:focus {
    outline: none !important;
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
    background: #ffffff !important;
}

/* Add to Cart button fills the row */
.ff-pdp-info__cta-row button[type="submit"],
.ff-pdp-info__cta-row button.action.tocart,
.ff-pdp-info__cta-row #product-addtocart-button {
    flex: 1 1 auto !important;
    height: 58px !important;
    padding: 0 32px !important;
    background: #1d1d1f !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    margin: 0 !important;
}

.ff-pdp-info__cta-row button[type="submit"]:hover,
.ff-pdp-info__cta-row button.action.tocart:hover {
    background: #0071e3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.35) !important;
}

/* Keyboard focus on PDP Add-to-Cart button — the primary conversion
   CTA. Mouse hover already lifts + brand-blues; keyboard users need
   the same visual signal plus a clear outline ring. White outline
   contrasts cleanly against the brand-blue button surface. */
.ff-pdp-info__cta-row button[type="submit"]:focus-visible,
.ff-pdp-info__cta-row button.action.tocart:focus-visible {
    background: #0071e3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.35) !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 3px !important;
}

/* Shortcut buttons (Amazon Pay, PayPal, etc.) */
.ff-pdp-info__shortcut-actions {
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Wishlist/Compare shortcuts — tiny outlined pills */
.ff-pdp-info__extra-actions,
.ff-pdp-info__shortcut-actions .product-social-links,
.ff-pdp-info__extra-actions .product-addto-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
    justify-content: flex-start !important;
}

.ff-pdp-info__extra-actions a,
.ff-pdp-info__extra-actions button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: transparent !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 9999px !important;
    color: #1d1d1f !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.ff-pdp-info__extra-actions a:hover,
.ff-pdp-info__extra-actions button:hover {
    border-color: var(--ff-blue, #0071e3) !important;
    background: rgba(0, 113, 227, 0.08) !important;
    color: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.10);
    outline: none;
}

/* Keyboard focus on PDP extra-actions (Add-to-Wishlist + Add-to-
   Compare pill buttons). Same brand-blue ghost treatment as hover
   plus a 2px brand-blue outline ring with 2px offset for clear
   keyboard nav. */
.ff-pdp-info__extra-actions a:focus-visible,
.ff-pdp-info__extra-actions button:focus-visible {
    border-color: var(--ff-blue, #0071e3) !important;
    background: rgba(0, 113, 227, 0.08) !important;
    color: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.10);
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

.ff-pdp-info__extra-actions a:active,
.ff-pdp-info__extra-actions button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 113, 227, 0.16);
    transition-duration: 0.08s !important;
}

/* Heart fills on hover/focus to preview the "added to wishlist" state.
   Scoped to PDP `.ff-pdp-info__extra-actions` + data-addto="wishlist"
   so the compare button (different icon, shares the .btn.p-2.rounded-
   full class) keeps its outline glyph. Mirrors the PLP-card behavior
   set at line 4795+ — same brand language across PLP + PDP. */
.ff-pdp-info__extra-actions button[data-addto="wishlist"]:hover svg,
.ff-pdp-info__extra-actions button[data-addto="wishlist"]:focus-visible svg {
    fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .ff-pdp-info__extra-actions a:hover,
    .ff-pdp-info__extra-actions a:active,
    .ff-pdp-info__extra-actions button:hover,
    .ff-pdp-info__extra-actions button:active {
        transform: none;
    }
}

/* --- TIER PRICES --- */
.ff-pdp-info__tier-prices {
    margin: 16px 0 0 0 !important;
    padding: 16px !important;
    background: #f5f5f7 !important;
    border-radius: 12px !important;
    font-size: 0.875rem !important;
    color: #424245 !important;
}

/* --- META (SKU, attributes below CTA) --- */
.ff-pdp-info__meta {
    margin: 32px 0 0 0 !important;
    padding: 24px 0 0 0 !important;
    border-top: 1px solid #f5f5f7 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.ff-pdp-info__meta-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 16px !important;
    padding: 4px 0 !important;
    border: none !important;
    margin: 0 !important;
}

.ff-pdp-info__meta-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #6e6e73 !important;
    margin: 0 !important;
}

.ff-pdp-info__meta-value {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #1d1d1f !important;
    margin: 0 !important;
    text-align: right !important;
}

/* --- Responsive refinements --- */
@media (max-width: 767px) {
    .ff-pdp-info__title h1,
    .ff-pdp-info__title .page-title {
        font-size: 1.75rem !important;
    }
    .ff-pdp-info__price .price {
        font-size: 1.5rem !important;
    }
    .ff-pdp-info__cta-row {
        flex-direction: column !important;
    }
    .ff-pdp-info__cta-row input.qty,
    .ff-pdp-info__cta-row input[type="number"] {
        width: 100% !important;
    }
}

/* ============================================================
   PDP SECTION TITLES & DESCRIPTION AREA
   "Product Details" / "More Information" / "Reviews"
   Clean minimal: small caps heading with subtle underline accent
   ============================================================ */

.ff-pdp-section-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: #6e6e73 !important;
    text-align: center !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.ff-pdp-section-title::after {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 2px !important;
    background: #0071e3 !important;
    margin: 16px auto 0 !important;
    border-radius: 2px !important;
}

/* Description content wrapper */
.catalog-product-view .product.info.detailed > section,
.catalog-product-view section.product-view-description,
.catalog-product-view [data-role="content"] {
    background: transparent !important;
    border: none !important;
    padding: 56px 24px !important;
}

.catalog-product-view .product.info.detailed > section + section {
    border-top: 1px solid #f5f5f7 !important; /* subtle between sections only */
    margin-top: 0 !important;
}

/* Description body text */
.catalog-product-view .product.info.detailed .value,
.catalog-product-view [data-role="content"] .value,
.catalog-product-view .product.attribute.description .value {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
    color: #1d1d1f !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

.catalog-product-view .product.attribute.description {
    max-width: 720px !important;
    margin: 0 auto !important;
}

/* Headings inside description body */
.catalog-product-view .product.info.detailed .value h1,
.catalog-product-view .product.attribute.description h1 {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.15 !important;
}

.catalog-product-view .product.info.detailed .value h2,
.catalog-product-view .product.attribute.description h2 {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #1d1d1f !important;
    margin: 32px 0 16px 0 !important;
    line-height: 1.2 !important;
}

.catalog-product-view .product.info.detailed .value h3,
.catalog-product-view .product.attribute.description h3 {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #1d1d1f !important;
    margin: 28px 0 12px 0 !important;
}

.catalog-product-view .product.info.detailed .value p,
.catalog-product-view .product.attribute.description p {
    margin: 0 0 16px 0 !important;
}

.catalog-product-view .product.info.detailed .value ul,
.catalog-product-view .product.info.detailed .value ol,
.catalog-product-view .product.attribute.description ul,
.catalog-product-view .product.attribute.description ol {
    margin: 0 0 20px 24px !important;
}

.catalog-product-view .product.info.detailed .value li {
    margin: 6px 0 !important;
    line-height: 1.65 !important;
}

.catalog-product-view .product.info.detailed .value strong,
.catalog-product-view .product.info.detailed .value b {
    font-weight: 700 !important;
    color: #1d1d1f !important;
}

/* ============================================================
   PREMIUM CART PAGE (/checkout/cart/)
   Apple / Nike aesthetic — clean table, sticky summary, premium CTAs
   ============================================================ */

.checkout-cart-index main,
.checkout-cart-index .page-main {
    background: #ffffff !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 24px !important;
}

.checkout-cart-index .page-title-wrapper h1,
.checkout-cart-index .page-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
    margin: 0 0 32px 0 !important;
    text-align: left !important;
}

.checkout-cart-index .cart.main.actions,
.checkout-cart-index .cart-summary,
.checkout-cart-index .cart-container {
    background: transparent !important;
    border: none !important;
}

/* Cart table — clean rows, no harsh borders */
.checkout-cart-index .cart.items,
.checkout-cart-index table.cart {
    border: none !important;
    background: transparent !important;
    width: 100% !important;
}

.checkout-cart-index .cart.items thead,
.checkout-cart-index table.cart thead {
    background: transparent !important;
    border-bottom: 2px solid #e8e8ed !important;
}

.checkout-cart-index .cart.items thead th,
.checkout-cart-index table.cart thead th {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #6e6e73 !important;
    padding: 16px 12px !important;
    border: none !important;
    background: transparent !important;
}

.checkout-cart-index .cart.items tbody tr,
.checkout-cart-index table.cart tbody tr {
    border-bottom: 1px solid #f5f5f7 !important;
    background: transparent !important;
}

.checkout-cart-index .cart.items tbody td,
.checkout-cart-index table.cart tbody td {
    padding: 24px 12px !important;
    border: none !important;
    vertical-align: top !important;
}

/* Product image in cart */
.checkout-cart-index .product-image-container {
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #f5f5f7 !important;
}

/* Product name */
.checkout-cart-index .product-item-name a {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
}

.checkout-cart-index .product-item-name a:hover {
    color: #0071e3 !important;
    outline: none;
}
.checkout-cart-index .product-item-name a:focus-visible {
    color: #0071e3 !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Prices */
.checkout-cart-index .cart.items .price,
.checkout-cart-index .cart.items .col.price .price {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
}

/* Qty input */
.checkout-cart-index input.qty,
.checkout-cart-index .qty input[type="number"] {
    width: 72px !important;
    height: 44px !important;
    padding: 0 10px !important;
    border: 2px solid #e8e8ed !important;
    border-radius: 9999px !important;
    background: #f5f5f7 !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* Brand-spec alignment: focus brings border-color to brand-blue +
   4px rgba(0,113,227,0.12) box-shadow ring (matches every other
   form-input on the site). Was border #1d1d1f near-black with no
   ring — off-brand. Companion to commit 73c18e3e (PDP qty input)
   and e377dcb0 (checkout form fields). */
.checkout-cart-index input.qty:focus {
    outline: none !important;
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
    background: #ffffff !important;
}

/* Remove button (trash) — clean, subtle, red on hover */
.checkout-cart-index .action.delete,
.checkout-cart-index .action-delete,
.checkout-cart-index button[title="Remove item"] {
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 8px !important;
    border-radius: 9999px !important;
    color: #6e6e73 !important;
    transition: all 0.2s ease !important;
}

.checkout-cart-index .action.delete:hover,
.checkout-cart-index .action-delete:hover,
.checkout-cart-index button[title="Remove item"]:hover {
    background: #fdecea !important;
    border-color: #d70015 !important;
    color: #d70015 !important;
}

/* Keyboard focus on cart-page item remove (trash) button —
   destructive-intent action so it gets a red outline ring matching
   the soft-red filled bg + red border state. 2px red outline ring
   with 2px offset for clear keyboard nav. */
.checkout-cart-index .action.delete:focus-visible,
.checkout-cart-index .action-delete:focus-visible,
.checkout-cart-index button[title="Remove item"]:focus-visible {
    background: #fdecea !important;
    border-color: #d70015 !important;
    color: #d70015 !important;
    outline: 2px solid #d70015 !important;
    outline-offset: 2px !important;
}

/* Cart summary (right sidebar) */
.checkout-cart-index .cart-summary,
.checkout-cart-index .cart-totals {
    background: #f5f5f7 !important;
    border-radius: 16px !important;
    padding: 32px 28px !important;
    border: none !important;
    position: sticky !important;
    top: 100px !important;
}

.checkout-cart-index .cart-summary .title,
.checkout-cart-index .cart-summary > .summary {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #1d1d1f !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    border: none !important;
}

.checkout-cart-index .cart-totals .table-wrapper {
    background: transparent !important;
    border: none !important;
}

.checkout-cart-index .cart-totals tr,
.checkout-cart-index .cart-totals th,
.checkout-cart-index .cart-totals td {
    border: none !important;
    background: transparent !important;
    padding: 6px 0 !important;
}

.checkout-cart-index .cart-totals .grand.totals {
    border-top: 2px solid #d2d2d7 !important;
    padding-top: 16px !important;
    margin-top: 12px !important;
}

.checkout-cart-index .cart-totals .grand.totals th,
.checkout-cart-index .cart-totals .grand.totals td {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    padding-top: 16px !important;
}

/* Checkout button — big dark pill (multiple selectors for Hyvä cart) */
.checkout-cart-index #checkout-link-button,
.checkout-cart-index a.btn-checkout,
.checkout-cart-index a.btn-primary.btn-checkout,
.checkout-cart-index .action.primary.checkout,
.checkout-cart-index .cart-summary .primary,
.checkout-cart-index button.checkout {
    width: 100% !important;
    padding: 18px 32px !important;
    background: #1d1d1f !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    margin: 24px 0 0 0 !important;
}

.checkout-cart-index #checkout-link-button:hover,
.checkout-cart-index a.btn-checkout:hover,
.checkout-cart-index .action.primary.checkout:hover,
.checkout-cart-index .cart-summary .primary:hover,
.checkout-cart-index button.checkout:hover {
    background: #0071e3 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.35) !important;
    text-decoration: none !important;
}

/* Coupon / discount code area */
.checkout-cart-index .block.discount,
.checkout-cart-index .cart-discount {
    background: transparent !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 20px 0 !important;
}

.checkout-cart-index .block.discount .title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #1d1d1f !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    cursor: pointer !important;
}

/* ============================================================
   PREMIUM ONE-PAGE CHECKOUT (/checkout/)
   Flatten steps into one scrollable form + sticky summary
   ============================================================ */

.checkout-index-index main,
.checkout-index-index .page-main {
    background: #ffffff !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 24px !important;
}

/* Checkout page: body must NOT be a scroll container (otherwise position: sticky breaks
   on .ff-checkout__summary-inner). Overflow clipping still happens on html. */
body.checkout-index-index {
    overflow-x: visible !important;
    max-width: none !important;
}
html:has(body.checkout-index-index) {
    overflow-x: hidden !important;
}

/* Hide the step progress bar — we're making it single-page */
.checkout-index-index .opc-progress-bar,
.checkout-index-index #checkout-progress-wrapper {
    display: none !important;
}

/* Page title */
.checkout-index-index .page-title-wrapper h1,
.checkout-index-index .page-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
    margin: 0 0 32px 0 !important;
    text-align: left !important;
}

/* Main checkout grid layout */
.checkout-index-index .checkout-container,
.checkout-index-index .opc-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr) !important;
    gap: 48px !important;
    align-items: start !important;
}

@media (max-width: 1023px) {
    .checkout-index-index .checkout-container,
    .checkout-index-index .opc-wrapper {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* Left column: form steps — stack all steps as accordions, not gated */
.checkout-index-index .opc,
.checkout-index-index .opc-wrapper .opc {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

/* Each step as a clean card */
.checkout-index-index .opc .checkout-shipping-address,
.checkout-index-index .opc .checkout-shipping-method,
.checkout-index-index .opc .checkout-payment-method,
.checkout-index-index .opc > li {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    padding: 32px !important;
    margin: 0 !important;
}

/* Step title */
.checkout-index-index .opc .step-title,
.checkout-index-index .opc legend.step-title,
.checkout-index-index .opc > li > .step-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #1d1d1f !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Step number indicator (small numbered circle) */
.checkout-index-index .opc .step-title::before,
.checkout-index-index .opc > li > .step-title::before {
    content: counter(step-counter) !important;
    counter-increment: step-counter !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: #1d1d1f !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.checkout-index-index .opc {
    counter-reset: step-counter !important;
}

/* Email / login input field (scoped to legacy Luma-style fields only;
   .ff-checkout__field inputs have their own floating-label padding and are excluded
   via :not() to prevent overriding them). */
.checkout-index-index .customer-email input:not(.ff-checkout__field *),
.checkout-index-index .fieldset input[type="email"]:not(.ff-checkout__field *),
.checkout-index-index .fieldset input[type="text"]:not(.ff-checkout__field *),
.checkout-index-index .fieldset input[type="tel"]:not(.ff-checkout__field *),
.checkout-index-index .fieldset input[type="password"]:not(.ff-checkout__field *),
.checkout-index-index .fieldset select:not(.ff-checkout__field *),
.checkout-index-index .fieldset textarea:not(.ff-checkout__field *) {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #e8e8ed !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    color: #1d1d1f !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

/* Focus rule scoped to legacy fields only, NOT .ff-checkout__field inputs */
.checkout-index-index .fieldset input:focus,
.checkout-index-index .fieldset select:focus,
.checkout-index-index .fieldset textarea:focus {
    outline: none !important;
    border-color: #0071e3 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important;
}

/* Field labels (legacy Luma-style only — excludes .ff-checkout__field-label which has its own
   floating-label styles) */
.checkout-index-index .fieldset .field label,
.checkout-index-index .fieldset .label {
    display: block !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #1d1d1f !important;
    margin: 0 0 8px 0 !important;
}

.checkout-index-index .field._required > .label::after,
.checkout-index-index label._required::after {
    content: ' *' !important;
    color: #d70015 !important;
}

/* Field groups (name, email, phone side-by-side) */
.checkout-index-index .fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

.checkout-index-index .fieldset > .field {
    margin: 0 0 16px 0 !important;
}

/* Shipping method cards — radio cards */
.checkout-index-index .checkout-shipping-method .table-checkout-shipping-method,
.checkout-index-index #checkout-shipping-method-load {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
}

.checkout-index-index .checkout-shipping-method tbody tr {
    border: 1px solid #e8e8ed !important;
    border-radius: 12px !important;
    margin: 8px 0 !important;
    padding: 16px !important;
    display: block !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.checkout-index-index .checkout-shipping-method tbody tr:hover,
.checkout-index-index .checkout-shipping-method tbody tr.selected,
.checkout-index-index .checkout-shipping-method tbody tr.row-selected {
    border-color: #1d1d1f !important;
    background: #f5f5f7 !important;
}

.checkout-index-index .checkout-shipping-method tbody td {
    border: none !important;
    padding: 4px !important;
    background: transparent !important;
}

/* Payment method cards */
.checkout-index-index .payment-method,
.checkout-index-index .checkout-payment-method .payment-methods .payment-method {
    background: transparent !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 12px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

.checkout-index-index .payment-method._active,
.checkout-index-index .payment-method:hover {
    border-color: #1d1d1f !important;
}

.checkout-index-index .payment-method .payment-method-title {
    padding: 16px 20px !important;
    margin: 0 !important;
    border: none !important;
    cursor: pointer !important;
}

.checkout-index-index .payment-method .payment-method-content {
    padding: 0 20px 20px !important;
    border: none !important;
    background: transparent !important;
}

/* Place Order button — hero dark pill */
.checkout-index-index .checkout-payment-method .action.primary.checkout,
.checkout-index-index button.action.primary[type="submit"],
.checkout-index-index .payment-method-content .action-update,
.checkout-index-index button.action.checkout {
    width: 100% !important;
    padding: 20px 40px !important;
    background: #1d1d1f !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2) !important;
    margin: 24px 0 0 0 !important;
}

.checkout-index-index .checkout-payment-method .action.primary.checkout:hover {
    background: #0071e3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 28px rgba(0, 113, 227, 0.4) !important;
}

/* Right column: Order summary (sticky) */
.checkout-index-index .opc-sidebar,
.checkout-index-index .opc-block-summary {
    background: #f5f5f7 !important;
    border-radius: 16px !important;
    padding: 32px 28px !important;
    border: none !important;
    position: sticky !important;
    top: 100px !important;
}

.checkout-index-index .opc-block-summary > .title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #1d1d1f !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Summary items list (product thumbnails) */
.checkout-index-index .opc-block-summary .items-in-cart {
    border: none !important;
    background: transparent !important;
    margin: 0 0 20px 0 !important;
}

.checkout-index-index .minicart-items .product-item {
    padding: 12px 0 !important;
    border-top: 1px solid #e8e8ed !important;
}

.checkout-index-index .minicart-items .product-item:first-child {
    border-top: none !important;
}

.checkout-index-index .minicart-items .product-item-name {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    margin: 0 0 4px 0 !important;
}

.checkout-index-index .minicart-items .price {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
}

/* Totals table */
.checkout-index-index .opc-block-summary .table-totals,
.checkout-index-index .totals-table {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
}

.checkout-index-index .table-totals tr,
.checkout-index-index .table-totals th,
.checkout-index-index .table-totals td {
    border: none !important;
    background: transparent !important;
    padding: 6px 0 !important;
    font-size: 0.9375rem !important;
}

.checkout-index-index .table-totals .grand.totals {
    border-top: 2px solid #d2d2d7 !important;
    padding-top: 16px !important;
    margin-top: 12px !important;
}

.checkout-index-index .table-totals .grand.totals th,
.checkout-index-index .table-totals .grand.totals td,
.checkout-index-index .table-totals .grand.totals .price {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    padding-top: 16px !important;
}

/* Error/validation messages */
.checkout-index-index .mage-error,
.checkout-index-index .field-error {
    color: #d70015 !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
    display: block !important;
}

/* Checkboxes / radios in checkout */
.checkout-index-index input[type="checkbox"],
.checkout-index-index input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: #1d1d1f !important;
    margin-right: 10px !important;
}

/* ============================================================
   PDP DESCRIPTION CENTERING FIX
   Description uses Magento PageBuilder columns (.pagebuilder-column).
   Constrain the prose container to a readable 720px, centered.
   ============================================================ */

.catalog-product-view .prose,
.catalog-product-view .card.w-full > .prose,
.catalog-product-view section .card.w-full {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px !important;
}

/* PageBuilder column wrapper — also center */
.catalog-product-view .pagebuilder-column-group,
.catalog-product-view .pagebuilder-column-line,
.catalog-product-view .pagebuilder-column {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Prose content (Tailwind Typography plugin) — enforce premium typography */
.catalog-product-view .prose {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
    color: #1d1d1f !important;
}

.catalog-product-view .prose h1,
.catalog-product-view .prose h2,
.catalog-product-view .prose h3 {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    text-transform: uppercase !important;
    letter-spacing: -0.005em !important;
}

.catalog-product-view .prose h1 {
    font-size: 2rem !important;
    line-height: 1.15 !important;
    margin: 0 0 20px 0 !important;
}

.catalog-product-view .prose h2 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin: 32px 0 16px 0 !important;
    letter-spacing: 0.02em !important;
}

.catalog-product-view .prose h3 {
    font-size: 1.125rem !important;
    margin: 28px 0 12px 0 !important;
    letter-spacing: 0.05em !important;
}

.catalog-product-view .prose p {
    margin: 0 0 18px 0 !important;
}

.catalog-product-view .prose p:last-child {
    margin-bottom: 0 !important;
}

.catalog-product-view .prose ul,
.catalog-product-view .prose ol {
    margin: 0 0 20px 28px !important;
    padding: 0 !important;
}

.catalog-product-view .prose li {
    margin: 6px 0 !important;
    line-height: 1.65 !important;
}

.catalog-product-view .prose strong,
.catalog-product-view .prose b {
    font-weight: 700 !important;
    color: #1d1d1f !important;
}

/* Description section wrapper — generous top spacing, NO border (kill divider above Product Details).
   The previous `main section` catch-all was too broad: it matched both the
   <section id="gallery"> AND the outer grid section that contains the
   gallery + info column, pushing the entire PDP top section down by 72px.
   Replaced with explicit selectors that target only the description /
   detailed-info sections that actually need the top spacing. */
.catalog-product-view .product-info-main > section[aria-label*="Product Info"] + div,
.catalog-product-view .product-info-main > .grid.lg\:grid-cols-2,
.catalog-product-view section.product-view-description,
.catalog-product-view .product.info.detailed,
.catalog-product-view #product-additional-info,
.catalog-product-view #product-attribute-specs-table {
    margin-top: 48px !important;
    padding-top: 24px !important;
    border-top: 0 none transparent !important;
}

/* Hide broken thumbnail buttons that have invalid image src (sibling duplicates) */
.catalog-product-view button.ff-broken-thumb {
    display: none !important;
}

/* Also dim the "broken image" native browser placeholder so it looks cleaner */
.catalog-product-view [class*="thumbs"] img,
.catalog-product-view button.relative.block.border img {
    background: #f5f5f7 !important;
}

/* Hide redundant heading in description body (was "1911 Pistol - 4.25" Commander") */
.catalog-product-view .prose h1:first-of-type + h1,
.catalog-product-view .prose h2:first-of-type + h2 {
    /* If double titles appear, keep only the first */
}

/* --- Notify button: remove underline from its text --- */
.catalog-product-view a[href*="productalert"],
.catalog-product-view a[href*="productalert"]:hover,
.catalog-product-view .product.alert a,
.catalog-product-view .product.alert a:hover,
.catalog-product-view .product-alert a,
.catalog-product-view .product-alert a:hover,
.ff-pdp-info__cta a[href*="productalert"],
.ff-pdp-info__cta a[href*="productalert"]:hover {
    text-decoration: none !important;
}

.catalog-product-view a[href*="productalert"] *,
.catalog-product-view .product.alert a *,
.catalog-product-view .product-alert a * {
    text-decoration: none !important;
}

/* --- Tighten: product info column width & layout --- */
.catalog-product-view .product-info-main .ff-pdp-info {
    max-width: 540px !important;
}

/* --- Hide broken thumbnail placeholders that show empty gray squares --- */
.catalog-product-view button.relative.block.border img[src=""],
.catalog-product-view button.relative.block.border img:not([src]),
.catalog-product-view button.relative.block.border:not(:has(img[src])) picture,
.catalog-product-view [class*="thumbs"] button:not(:has(img[src^="http"])),
.catalog-product-view [class*="thumbs"] button:empty {
    display: none !important;
}

.catalog-product-view button.relative.block.border:not(:has(img[src^="http"])) {
    display: none !important;
}

/* --- Hero gallery zoom/pan on main image hover (Apple-style subtle) --- */
.catalog-product-view .gallery-main img:hover,
.catalog-product-view [data-role="gallery"] img:hover {
    transform: scale(1.02);
}

/* ============================================================
   CART PAGE POLISH — refined alerts, edit/delete buttons, qty input
   ============================================================ */

/* Dealer shipping alert — cleaner, less alarming */
.checkout-cart-index .message.notice,
.checkout-cart-index .message.warning,
.checkout-cart-index [role="alert"] {
    background: #fff3e0 !important;
    color: #7a4f00 !important;
    border: 1px solid #ffb74d !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    margin: 0 0 32px 0 !important;
}

.checkout-cart-index .message.notice > *,
.checkout-cart-index [role="alert"] > * {
    color: #7a4f00 !important;
    font-weight: 500 !important;
}

/* Cart item row background — clean white, not gray */
.checkout-cart-index .cart-form .item.wrapper,
.checkout-cart-index .cart.items .cart-item,
.checkout-cart-index .cart-form [class*="product-item"] {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin: 0 0 12px 0 !important;
    transition: all 0.2s ease !important;
}

.checkout-cart-index .cart-form .item.wrapper:hover {
    border-color: #d2d2d7 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Product image in cart — softer rounding, white bg */
.checkout-cart-index .cart.items img,
.checkout-cart-index .cart-form .product-image-photo {
    border-radius: 10px !important;
    background: #f5f5f7 !important;
    padding: 8px !important;
}

/* Edit (pencil) and Delete (trash) buttons — Apple-style action icons */
.checkout-cart-index button.action.edit,
.checkout-cart-index a.action-edit,
.checkout-cart-index button[title*="Edit"],
.checkout-cart-index button.action.delete,
.checkout-cart-index a.action-delete,
.checkout-cart-index button[title*="Remove"] {
    background: transparent !important;
    border: 1px solid #e8e8ed !important;
    color: #6e6e73 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 9999px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.checkout-cart-index button.action.edit:hover,
.checkout-cart-index a.action-edit:hover,
.checkout-cart-index button[title*="Edit"]:hover {
    background: #f5f5f7 !important;
    border-color: #1d1d1f !important;
    color: #1d1d1f !important;
}

.checkout-cart-index button.action.delete:hover,
.checkout-cart-index a.action-delete:hover,
.checkout-cart-index button[title*="Remove"]:hover {
    background: #fdecea !important;
    border-color: #d70015 !important;
    color: #d70015 !important;
}

/* Qty input on cart — bigger, more premium */
.checkout-cart-index .field.qty input.qty,
.checkout-cart-index input.qty {
    width: 60px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 2px solid #e8e8ed !important;
    border-radius: 9999px !important;
    background: #f5f5f7 !important;
    text-align: center !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
}

/* Brand-spec alignment: focus brings border-color to brand-blue +
   4px rgba(0,113,227,0.12) box-shadow ring (matches every other
   form-input on the site). Was border #1d1d1f near-black with no
   ring — off-brand. Companion to commit 73c18e3e (PDP qty input)
   and e377dcb0 (checkout form fields). */
.checkout-cart-index input.qty:focus {
    outline: none !important;
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
    background: #ffffff !important;
}

/* "1" counter below product image - that's actually the qty input */
.checkout-cart-index .cart-item .field.qty {
    margin-top: 12px !important;
}

/* Excl. Tax text — smaller, lighter */
.checkout-cart-index .subtotal .price-excluding-tax,
.checkout-cart-index .price-excluding-tax,
.checkout-cart-index td .price span:not(.price-wrapper) {
    font-size: 0.75rem !important;
    color: #6e6e73 !important;
    font-weight: 400 !important;
    display: inline-block !important;
    margin-left: 4px !important;
}

/* Update Shopping Cart button — secondary style */
.checkout-cart-index button[name="update_cart_action"],
.checkout-cart-index .action.update {
    background: transparent !important;
    color: #1d1d1f !important;
    border: 2px solid #d2d2d7 !important;
    border-radius: 9999px !important;
    padding: 10px 20px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.checkout-cart-index button[name="update_cart_action"]:hover,
.checkout-cart-index .action.update:hover {
    border-color: #1d1d1f !important;
    background: #f5f5f7 !important;
}

/* Keyboard focus on cart-page Update Cart button — same dark
   border + light bg as hover plus a 2px brand-blue outline ring
   so keyboard users can spot the focused secondary action when
   tabbing through the cart's actions-toolbar. */
.checkout-cart-index button[name="update_cart_action"]:focus-visible,
.checkout-cart-index .action.update:focus-visible {
    border-color: var(--ff-blue, #0071e3) !important;
    background: #f5f5f7 !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

/* Summary sidebar — stronger premium treatment */
.checkout-cart-index .cart-summary-container,
.checkout-cart-index aside,
.checkout-cart-index .cart-summary {
    background: #fafafa !important;
    border-radius: 20px !important;
    padding: 32px !important;
    position: sticky !important;
    top: 100px !important;
    border: 1px solid #f0f0f2 !important;
}

/* "Summary" heading — more prominent */
.checkout-cart-index .cart-summary h2,
.checkout-cart-index .summary-title,
.checkout-cart-index aside h2 {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #1d1d1f !important;
    margin: 0 0 24px 0 !important;
    text-align: left !important;
}

/* Summary line items */
.checkout-cart-index .cart-summary .totals,
.checkout-cart-index .totals tr {
    border: none !important;
}

/* Apply discount / Estimate shipping dropdowns */
.checkout-cart-index details,
.checkout-cart-index .discount-toggle,
.checkout-cart-index .estimate-shipping-toggle {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin: 0 0 12px 0 !important;
}

.checkout-cart-index details summary,
.checkout-cart-index .discount-title,
.checkout-cart-index .estimate-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    cursor: pointer !important;
    list-style: none !important;
}

/* ============================================================
   PDP CUSTOMER REVIEWS — match other section titles
   ============================================================ */

/* Customer Reviews section title — unified with Product Details / More Information */
.catalog-product-view section[aria-label*="Review" i] h2,
.catalog-product-view .review-list .block-title,
.catalog-product-view .block.review-add h2,
.catalog-product-view .block-reviews-list h2,
.catalog-product-view .review-list h2.review-title,
.catalog-product-view [id*="review"] h2:first-child {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: #6e6e73 !important;
    text-align: center !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.catalog-product-view section[aria-label*="Review" i] h2::after,
.catalog-product-view .review-list .block-title::after,
.catalog-product-view .block.review-add h2::after,
.catalog-product-view .review-list h2.review-title::after,
.catalog-product-view [id*="review"] h2:first-child::after {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 2px !important;
    background: #0071e3 !important;
    margin: 16px auto 0 !important;
    border-radius: 2px !important;
}

/* Review items — clean card layout */
.catalog-product-view .review-items .review-item,
.catalog-product-view .review-list li {
    background: #fafafa !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    padding: 28px !important;
    margin: 0 0 16px 0 !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Review title (the headline "NOT AN EXPENSIVE...") */
.catalog-product-view .review-title,
.catalog-product-view .review-details strong {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #1d1d1f !important;
    margin: 0 0 8px 0 !important;
}

/* Review author + date */
.catalog-product-view .review-author,
.catalog-product-view .review-details {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.8125rem !important;
    color: #6e6e73 !important;
    margin: 0 0 16px 0 !important;
}

/* Review body */
.catalog-product-view .review-content,
.catalog-product-view .review-description {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
    color: #1d1d1f !important;
    text-transform: none !important; /* Don't force UPPERCASE */
}

/* Quality / Rating labels (star labels) */
.catalog-product-view .rating-label,
.catalog-product-view .rating-summary .label {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #6e6e73 !important;
}

/* Pagination & show count */
.catalog-product-view .toolbar-products select,
.catalog-product-view #show-review-limiter {
    padding: 8px 14px !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 9999px !important;
    font-size: 0.875rem !important;
    color: #1d1d1f !important;
    background: #ffffff !important;
}

/* "Write Your Own Review" section */
.catalog-product-view .block.review-add .block-title,
.catalog-product-view .review-form-actions,
.catalog-product-view .write-review {
    max-width: 800px !important;
    margin: 32px auto !important;
    text-align: center !important;
}

.catalog-product-view .write-review,
.catalog-product-view .block.review-add .actions-toolbar {
    font-size: 0.9375rem !important;
    color: #424245 !important;
}

.catalog-product-view .write-review a,
.catalog-product-view .block.review-add a {
    color: #0071e3 !important;
    font-weight: 600 !important;
}

/* ============================================================
   DRAWER LOGO — Fusion Firearms logo in all 3 drawer headers
   Replaces the text-only title rows with the actual brand mark
   ============================================================ */

.ff-drawer-logo {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.ff-drawer-logo__img {
    height: 48px !important;
    width: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
    display: block !important;
    filter: brightness(1.1) !important;
}

/* Subtitle row (e.g., "My Cart" / "Sign In") sits below the black header with logo */
.ff-cart-drawer__subtitle,
.ff-account-drawer__subtitle {
    padding: 16px 24px 8px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f0f0f2 !important;
    flex-shrink: 0 !important;
}

.ff-cart-drawer__subtitle > span,
.ff-account-drawer__subtitle > span,
.ff-cart-drawer__subtitle #cart-drawer-title,
.ff-account-drawer__subtitle #ff-account-drawer-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: #1d1d1f !important;
    display: block !important;
}

.ff-cart-drawer__subtitle .items-total,
.ff-account-drawer__subtitle .items-total {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #6e6e73 !important;
    margin-left: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Footer logo: make it bigger than the old 80px and proper aspect ratio */
.ff-footer .ff-logo img,
.ff-footer a.ff-logo img {
    width: 160px !important;
    height: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
}

/* Main site header logo — contain at 48px so it sits INSIDE the dark header bar */
.page-header .logo,
header .logo,
a.logo {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    max-height: 64px !important;
}

.page-header .logo img,
header .logo img,
a.logo img {
    max-height: 48px !important;
    height: 48px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Dark navy header bar — ensure it has consistent height */
.page-header,
.page-header .header,
header .header.panel {
    min-height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}

/* Header container (where logo + nav + cart icons live) — align items properly */
.page-header .header,
header .header.panel {
    display: flex !important;
    align-items: center !important;
}

/* ============================================================
   FUSION FIREARMS BRAND LOCKUP
   Neon diamond + "FUSION FIREARMS" text side by side.
   Text rendered as HTML so it's pixel-perfect at any size.
   ============================================================ */

.ff-brand-lockup {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-decoration: none !important;
    height: 100% !important;
    padding: 6px 0 !important;
    flex-shrink: 0 !important;
    /* No background, no border — pure transparent lockup */
    background: transparent !important;
    border: none !important;
}

.ff-brand-lockup:hover,
.ff-brand-lockup:focus {
    text-decoration: none !important;
    outline: none !important;
}
/* Keyboard focus on logo lockup — header logo is on every page and is
   often the first/last keyboard tab stop. Brand-blue outline with 4px
   offset wraps the diamond + wordmark cleanly without clashing with
   the hover scale-up animation defined below. */
.ff-brand-lockup:focus-visible {
    text-decoration: none !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 4px !important;
    border-radius: 6px !important;
}

/* Diamond image — sized to match text height. Subtle scale-up on hover/
   focus-visible for tactile feedback (premium pattern: Apple, SIG, Williams-
   Sonoma all give the brand mark a hover state, even if it's just a scale).
   Smooth cubic-bezier so it feels analog, not snappy. */
.ff-brand-lockup__diamond {
    height: 56px !important;
    max-height: 56px !important;
    min-height: 44px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                filter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.ff-brand-lockup:hover .ff-brand-lockup__diamond,
.ff-brand-lockup:focus-visible .ff-brand-lockup__diamond {
    transform: scale(1.06);
    filter: drop-shadow(0 0 6px rgba(0, 163, 255, 0.35));
}

/* Wordmark gets a subtle brand-blue text-glow on hover — same accent as
   the diamond drop-shadow so they read as one connected lockup. */
.ff-brand-lockup:hover .ff-brand-lockup__wordmark,
.ff-brand-lockup:focus-visible .ff-brand-lockup__wordmark {
    text-shadow: 0 0 12px rgba(0, 163, 255, 0.30);
}

@media (prefers-reduced-motion: reduce) {
    .ff-brand-lockup__diamond {
        transition: none !important;
    }
    .ff-brand-lockup:hover .ff-brand-lockup__diamond,
    .ff-brand-lockup:focus-visible .ff-brand-lockup__diamond {
        transform: none;
    }
}

/* Wordmark — SINGLE LINE "FUSION FIREARMS" */
.ff-brand-lockup__wordmark {
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--ff-font-heading, 'Oswald', Impact, sans-serif) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    /* Subtle downward baseline shift to optically center with diamond */
    padding-top: 2px !important;
}

/* Drawer variant — slightly smaller */
.ff-brand-lockup--drawer .ff-brand-lockup__diamond {
    height: 44px !important;
    max-height: 44px !important;
}

.ff-brand-lockup--drawer .ff-brand-lockup__wordmark {
    font-size: 1rem !important;
    letter-spacing: 0.2em !important;
}

/* Responsive: on tablet, slightly smaller */
@media (max-width: 1023px) {
    .ff-brand-lockup__diamond {
        height: 48px !important;
    }
    .ff-brand-lockup__wordmark {
        font-size: 1.0625rem !important;
        letter-spacing: 0.18em !important;
    }
    /* Mobile header fit: the Hyvä logo wrapper carries `w-full` below the
       `sm` breakpoint (it assumes a two-row mobile header). Our header is a
       single flex-nowrap row, so that w-full made the logo block hog the
       whole row and pushed the cart icon off the right edge (clipped by the
       html-level overflow guard, so it just vanished). Shrink the wrapper to
       its content width so the search / account / cart icons stay on-screen
       at every phone width. justify-between keeps the icons pinned right.
       Desktop (>=1024px) is untouched. */
    #header > .container > div:first-child,
    #header > div:first-child > div:first-child {
        width: auto !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        padding-bottom: 0 !important;
    }
    /* Round 2 (Treven 2026-05-29, real Galaxy S22): logo no longer hogs the
       row, but the cart still clipped off the right edge — the header row
       was overflowing the viewport. Force the row + its wrappers to fit the
       screen exactly (border-box, max-width 100%), trim the side padding for
       more room, keep the desktop mega-menu out of the flow on mobile, and
       give the cart icon clearance so it (and its count badge) never clip. */
    #header,
    #header > .container,
    #header > div:first-child {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #header > .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow: visible !important;
    }
    #header .navigation {
        display: none !important;
    }
    #header #menu-cart-icon,
    #header [aria-label*="cart" i],
    #header [aria-label*="minicart" i] {
        margin-right: 4px !important;
        flex: 0 0 auto !important;
    }
    /* Treven 2026-05-29: the logo should be the furthest-left item, with the
       hamburger menu directly to its right (it was rendering reversed). */
    #header > .container > div:first-child,
    #header > div:first-child > div:first-child {
        order: -10 !important;
    }
    #header [x-data*="initFfMobileMenu"] {
        order: -9 !important;
        /* Absorb all free space on the hamburger's RIGHT so the logo +
           hamburger sit together at the far left (no gap between them) and
           the search/account/cart icons are pushed to the right edge.
           Overrides the row's justify-between, which was floating the
           hamburger out into the middle. Treven 2026-05-29. */
        margin-right: auto !important;
    }
    /* When the mobile menu drawer is open, hide the sticky header's
       right-side icons so they don't overlap the drawer's close (X) button.
       The cart icon sits at the same top-right spot as the X, so tapping to
       close was hitting the cart and opening it (a confusing second view).
       Hidden = invisible AND non-clickable, so the X is the only target. */
    html.ff-mm-open .page-header #menu-search-icon,
    html.ff-mm-open .page-header #menu-cart-icon,
    html.ff-mm-open .page-header [aria-label*="cart" i],
    html.ff-mm-open .page-header [aria-label*="minicart" i],
    html.ff-mm-open .page-header [aria-label*="account" i],
    html.ff-mm-open .page-header [aria-label*="sign in" i] {
        visibility: hidden !important;
    }
}

/* Mobile: hide text, show just diamond */
@media (max-width: 540px) {
    .ff-brand-lockup {
        gap: 0 !important;
    }
    .ff-brand-lockup__diamond {
        height: 44px !important;
    }
    .page-header .ff-brand-lockup__wordmark {
        display: none !important;
    }
    /* In drawers, still show text since drawer has more space */
    .ff-brand-lockup--drawer .ff-brand-lockup__wordmark {
        display: flex !important;
    }
}

/* Ensure the header wrapper has enough room for the lockup */
.page-header a[aria-label*="Home"],
.page-header a[aria-label*="Fusion"],
.page-header .ff-brand-lockup {
    flex: 0 0 auto !important;
    min-width: unset !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
}

/* Override earlier rules that constrained the img */
.page-header a[aria-label*="Home"] img.ff-brand-lockup__diamond,
.page-header a[aria-label*="Fusion"] img.ff-brand-lockup__diamond,
.page-header .ff-brand-lockup img.ff-brand-lockup__diamond {
    height: 56px !important;
    max-height: 56px !important;
    min-height: 44px !important;
    width: auto !important;
    max-width: none !important;
    min-width: unset !important;
    mix-blend-mode: normal !important;
}

@media (max-width: 1023px) {
    .page-header .ff-brand-lockup img.ff-brand-lockup__diamond {
        height: 48px !important;
        max-height: 48px !important;
    }
}

@media (max-width: 540px) {
    .page-header .ff-brand-lockup img.ff-brand-lockup__diamond {
        height: 44px !important;
        max-height: 44px !important;
    }
}

/* Also override the old .ff-drawer-logo CSS since we replaced those with ff-brand-lockup */
.ff-drawer-logo,
.ff-drawer-logo__img {
    /* Kept for backwards-compat; not used anymore */
}

/* ============================================================
   SIGHTS MEGA MENU — manufacturer logo grid + sub-categories
   ============================================================ */

/* Sights panel uses the default full-width bar; center the inner grid */
.ff-megamenu__panel--sights {
    /* Inherits full-width .ff-megamenu__panel */
    padding: 0 !important;
}

.ff-megamenu__sights {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 32px var(--ff-container-pad, 32px) 24px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 40px !important;
    align-items: start !important;
}

/* Center the bottom "Shop All Sights" footer too */
.ff-megamenu__panel--sights .ff-megamenu__parts-footer {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 var(--ff-container-pad, 32px) 28px !important;
}

@media (max-width: 1100px) {
    .ff-megamenu__sights {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* Left: Manufacturer brand grid */
.ff-megamenu__sights-brands {
    min-width: 0 !important;
}

.ff-megamenu__brand-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

@media (max-width: 900px) {
    .ff-megamenu__brand-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

.ff-megamenu__brand-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 10px !important;
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    min-height: 88px !important;
    position: relative !important;
    overflow: hidden !important;
}

.ff-megamenu__brand-tile:hover {
    border-color: #1d1d1f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
    background: #fafafa !important;
}

/* Keyboard focus on megamenu Sights manufacturer brand tiles
   (Trijicon / Mepro / Holosun / etc) — keyboard users tabbing
   through the brand grid need lift + brand-blue outline ring.
   border-color: brand-blue (instead of #1d1d1f near-black) for a
   stronger active-state signal that matches the rest of the
   site's focus-visible language. */
.ff-megamenu__brand-tile:focus-visible {
    border-color: var(--ff-blue, #0071e3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 113, 227, 0.18) !important;
    background: #fafafa !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

.ff-megamenu__brand-tile img {
    max-width: 100% !important;
    max-height: 44px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    filter: grayscale(100%) contrast(1.1) !important;
    opacity: 0.75 !important;
    transition: filter 0.25s ease, opacity 0.25s ease !important;
}

.ff-megamenu__brand-tile:hover img,
.ff-megamenu__brand-tile:focus-visible img {
    filter: grayscale(0%) contrast(1) !important;
    opacity: 1 !important;
}

.ff-megamenu__brand-name {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    color: #6e6e73 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    transition: color 0.2s ease !important;
}

.ff-megamenu__brand-tile:hover .ff-megamenu__brand-name,
.ff-megamenu__brand-tile:focus-visible .ff-megamenu__brand-name {
    color: #1d1d1f !important;
}

/* Right: Sub-category columns */
.ff-megamenu__sights-cats {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding-left: 32px !important;
    border-left: 1px solid #f0f0f2 !important;
}

@media (max-width: 1100px) {
    .ff-megamenu__sights-cats {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 24px !important;
        padding-left: 0 !important;
        border-left: none !important;
        padding-top: 24px !important;
        border-top: 1px solid #f0f0f2 !important;
    }
    .ff-megamenu__sights-cats .ff-megamenu__col {
        flex: 1 1 140px !important;
    }
}

.ff-megamenu__sights-cats .ff-megamenu__col {
    padding: 0 !important;
}

.ff-megamenu__sights-cats .ff-megamenu__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.ff-megamenu__sights-cats .ff-megamenu__list-link {
    display: block !important;
    padding: 6px 0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}

.ff-megamenu__sights-cats .ff-megamenu__list-link:hover {
    color: #0071e3 !important;
    transform: translateX(2px) !important;
    outline: none;
}

/* Keyboard focus on Sights sub-cat list-links — keyboard users
   tabbing through sub-category names need a clearer indicator
   than the subtle 2px translateX + color shift. 2px brand-blue
   outline + 2px offset ensures the focused list-item is
   unambiguous. */
.ff-megamenu__sights-cats .ff-megamenu__list-link:focus-visible {
    color: #0071e3 !important;
    transform: translateX(2px) !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
    border-radius: 3px !important;
}

/* ============================================================
   SUBCATEGORY STRIP — MANUFACTURER LOGO VARIANT
   On /sights/pistol-sights etc., show logos instead of product images
   ============================================================ */

.ff-subcat-strip--logos .ff-subcat-card__img {
    background: #ffffff !important;
    padding: 14px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    border: 1px solid #e8e8ed !important;
    transition: all 0.2s ease !important;
}

.ff-subcat-strip--logos .ff-subcat-card:hover .ff-subcat-card__img {
    border-color: #1d1d1f !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.ff-subcat-strip--logos .ff-subcat-card__img img {
    max-width: 100% !important;
    max-height: 56px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    filter: grayscale(100%) contrast(1.1) !important;
    opacity: 0.75 !important;
    transition: filter 0.25s ease, opacity 0.25s ease !important;
}

.ff-subcat-strip--logos .ff-subcat-card:hover .ff-subcat-card__img img {
    filter: grayscale(0%) contrast(1) !important;
    opacity: 1 !important;
}

.ff-subcat-strip--logos .ff-subcat-card__name {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-top: 8px !important;
}

.ff-subcat-strip--logos .ff-subcat-card__count {
    font-size: 0.75rem !important;
    color: #6e6e73 !important;
    font-weight: 500 !important;
}

/* ============================================================
   FUSION FIREARMS CUSTOM ONE-PAGE CHECKOUT
   Inspired by Intelligent Change — minimal, premium, two-column
   ============================================================ */

/* Page-wide: remove main site header footer clutter from checkout.
   Zero top/bottom padding here — .ff-checkout handles its own tight spacing. */
body.checkout-index-index .page-main,
body.checkout-index-index main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
}

/* FULL-HEIGHT GRAY PANEL on the right side — fixed, spanning top to bottom of the viewport.
   Starts at top:0 so when the user scrolls past the (static) header, the gray is still there
   with no white strip. While the header is visible, the header's opaque white bg naturally
   covers the gray behind it, so visually the gray appears to start below the header divider. */
body.checkout-index-index::before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    /* Left edge tracks the cart-summary card's actual rendered left edge —
       set as a CSS custom property by JS on load + resize (see
       _updateGreyPanelPosition in ff-checkout.js). This is bulletproof
       against viewport-math edge cases that bit us before. Falls back to
       50vw if the JS hasn't run yet (cleaner than encroaching into the
       form column). */
    left: var(--ff-summary-left, 50vw);
    background: #f6f6f6;
    border-left: 1px solid #e5e5e5;
    z-index: 0;
    pointer-events: none;
}

/* Ensure the checkout header has opaque white bg & full width so it covers the fixed gray
   panel behind it while visible. */
.checkout-index-index .page-header,
.checkout-index-index .page-header > div {
    background: #ffffff !important;
    position: relative;
    z-index: 10;
}

/* On narrow viewports (below 1440px where ff-checkout is no longer at max-width centered
   with 160px gutter, or below 1024 where layout stacks), disable the fixed gray panel. */
@media (max-width: 1439px) {
    body.checkout-index-index::before {
        display: none;
    }
}

/* Desktop: hide the mobile-only accordion toggle button (it's only for mobile). */
.ff-checkout__summary-toggle {
    display: none;
}

/* ============================================================
   MOBILE-ONLY CHECKOUT LAYOUT (≤1023px)
   — Summary becomes a collapsible accordion at the TOP
   — Form/sections below
   — Matches Intelligent Change mobile checkout pattern
   ============================================================ */
@media (max-width: 1023px) {
    /* Grid reorder: aside FIRST (accordion at top), main form SECOND */
    .ff-checkout__grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .ff-checkout__summary {
        order: -1 !important;
        background: transparent !important;
        align-self: auto !important;
        width: 100% !important;
        margin: 0 0 16px !important;
        z-index: auto !important;
    }

    /* Collapsed accordion header — shows when closed AND stays visible when open */
    .ff-checkout__summary-toggle {
        display: flex !important;
        width: 100%;
        background: #f6f6f6;
        border: none;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        padding: 14px 20px;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        font-family: inherit;
        color: #1d1d1f;
        -webkit-appearance: none;
        appearance: none;
    }
    .ff-checkout__summary-toggle:hover {
        background: #efefef;
        outline: none;
    }

    /* Keyboard focus on mobile order-summary toggle — split from
       :focus to :focus-visible so click-tap doesn't leave a sticky
       focus state on mouse users. Brand-blue outline ring matches
       the global focus-visible language. */
    .ff-checkout__summary-toggle:focus-visible {
        background: #efefef;
        outline: 2px solid var(--ff-blue, #0071e3);
        outline-offset: 2px;
    }

    .ff-checkout__summary-toggle-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9375rem;
        font-weight: 500;
    }
    .ff-checkout__summary-toggle-cart {
        width: 18px;
        height: 18px;
        color: #1d1d1f;
    }
    .ff-checkout__summary-toggle-chevron {
        width: 16px;
        height: 16px;
        color: #1d1d1f;
        transition: transform 0.2s ease;
    }
    .ff-checkout__summary-toggle-chevron.is-open {
        transform: rotate(180deg);
    }
    .ff-checkout__summary-toggle-total {
        font-size: 1rem;
        font-weight: 700;
        color: #1d1d1f;
    }

    /* Summary body collapses when closed. !important needed because the generic
       .ff-checkout__summary-inner rule (for desktop sticky) is declared later in the file
       with same specificity and would otherwise win the cascade. */
    .ff-checkout__summary-inner {
        position: static !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 20px !important;
        transition: max-height 0.35s ease, padding 0.35s ease !important;
        background: #f6f6f6 !important;
        border-bottom: 1px solid #e5e5e5 !important;
        top: auto !important;
    }
    .ff-checkout__summary.is-open .ff-checkout__summary-inner {
        max-height: 1200px !important; /* plenty of room for items */
        padding: 20px 20px 24px !important;
    }

    /* Hide the duplicated "Your Cart / N items" heading on mobile since
       the accordion toggle already labels this section. */
    .ff-checkout__summary-head {
        display: none !important;
    }

    /* Mobile: NO horizontal padding on ff-checkout so the aside can span full viewport;
       the form column gets its own padding instead. */
    .ff-checkout {
        padding: 0 0 40px !important;
    }
    .ff-checkout__main {
        max-width: none !important;
        margin: 0 !important;
        padding: 16px 20px 0 !important;
    }

    /* Section headings on mobile */
    .ff-checkout__section h2 {
        font-size: 1.375rem !important;
    }

    /* Sticky "Pay Now" CTA — keeps the submit button reachable while the
       user scrolls a long shipping/billing form on mobile. Apple-Pay /
       iOS-Mail pattern. Sticks 16px above viewport bottom while scrolling
       and resolves to its natural position when the form ends. */
    .ff-checkout__submit {
        position: sticky !important;
        bottom: 16px !important;
        z-index: 20 !important;
        /* Stronger shadow than the desktop variant so the button reads as
           floating above the form content underneath. */
        box-shadow:
            0 12px 32px rgba(10, 25, 41, 0.18),
            0 4px 10px rgba(10, 25, 41, 0.10),
            0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
        /* Add safe-area inset so iPhone home-indicator doesn't sit under
           the button. Falls back to 16px on browsers without env(). */
        margin-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
    /* Subtle backdrop fade above the sticky button so the form content
       gradient-fades behind it instead of cutting off mid-line — visual
       affordance that there's more content above. Implemented as a
       sibling pseudo via wrapper (sticky button is direct flow), so we
       use the button's own ::before to draw a thin gradient bar at top. */
    .ff-checkout__submit::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 18px;
        background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
    }

    /* Push the legal copy below the sticky button so it's not covered. */
    .ff-checkout__legal {
        margin-top: 12px !important;
    }
}

/* Kill any spacing that Hyvä/Luma injects above/below the content area on checkout */
body.checkout-index-index .columns,
body.checkout-index-index .column.main,
body.checkout-index-index #maincontent {
    padding: 0 !important;
    margin: 0 !important;
}

/* The grid should start right under the header, no extra wrapper space */
body.checkout-index-index .page-wrapper > main,
body.checkout-index-index .page-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* Last section/element on the form shouldn't add trailing margin */
.ff-checkout__main > .ff-checkout__section:last-of-type {
    margin-bottom: 0 !important;
}

.ff-checkout__legal {
    margin-bottom: 0 !important;
}

.checkout-index-index .page-wrapper {
    background: #ffffff !important;
}

/* Hide breadcrumbs, promo bar, free-shipping banner, and page title on checkout
   (clean like Intelligent Change). The free-shipping banner is marketing chrome —
   it was rendering with right-aligned text + lots of empty navy bar space on
   checkout, which read as broken. Customers in checkout already saw the banner
   on every page leading up to it; hiding it here matches the "clean transactional
   surface" treatment the rest of the chrome already gets. */
.checkout-index-index .breadcrumbs,
.checkout-index-index .ff-promo-bar,
.checkout-index-index .ff-free-ship-banner,
.checkout-index-index .page-title-wrapper,
.checkout-index-index h1.page-title {
    display: none !important;
}

/* Minimal checkout header — hide nav, search, account. KEEP cart icon visible
   to match Intelligent Change's clean top bar.
   HIGHER SPECIFICITY to defeat the global header flex rules that force display:flex on .navigation. */
body.checkout-index-index .page-header .container > .navigation,
body.checkout-index-index .page-header .container > div.navigation,
body.checkout-index-index .page-header .navigation,
body.checkout-index-index .page-header [aria-label*="Open menu"],
body.checkout-index-index .page-header [aria-label*="Search"],
body.checkout-index-index .page-header button[id="customer-menu"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    flex: 0 0 0 !important;
}

/* Cart icon on checkout: simple black bag icon */
.checkout-index-index .page-header [aria-label*="Toggle minicart"] {
    color: #1d1d1f !important;
}
.checkout-index-index .page-header [aria-label*="Toggle minicart"] svg {
    width: 22px !important;
    height: 22px !important;
    color: #1d1d1f !important;
}

/* Fix the cart count badge — on mobile it was rendering as a huge fixed-position
   white strip across the viewport. Force it back to a small red circle. */
.checkout-index-index .page-header button .absolute.rounded-full,
.checkout-index-index .page-header [aria-label*="Toggle minicart"] .rounded-full,
.checkout-index-index .page-header button span.rounded-full {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    width: auto !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #d70015 !important;
    color: #ffffff !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

.checkout-index-index .page-header .header.panel,
.checkout-index-index .page-header .header {
    justify-content: center !important;
    padding: 18px 0 !important;
    min-height: 76px !important;
}

.checkout-index-index .page-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    /* Don't stick on checkout — we want clean page flow matching Intelligent Change */
    position: static !important;
}

/* Checkout page: center the brand lockup with ABSOLUTE positioning so cart icon stays right
   but logo is visually centered in the header (like Intelligent Change). */
.checkout-index-index .page-header .container {
    position: relative !important;
}

.checkout-index-index .page-header .container > div:first-of-type[class*="sm:order-1"],
.checkout-index-index .page-header .container > div[class*="sm:order-1"][class*="lg:order-0"] {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
}

.checkout-index-index .page-header .ff-brand-lockup {
    justify-content: center !important;
    padding: 0 !important;
}

/* BIGGER logo on checkout — diamond + wordmark both scale up */
.checkout-index-index .page-header .ff-brand-lockup__diamond,
.checkout-index-index .page-header .ff-brand-lockup img.ff-brand-lockup__diamond {
    height: 72px !important;
    max-height: 72px !important;
    min-height: 56px !important;
}

.checkout-index-index .page-header .ff-brand-lockup__wordmark {
    color: #1d1d1f !important;
    font-size: 1.5rem !important;
    letter-spacing: 0.22em !important;
}

.checkout-index-index .page-header .ff-brand-lockup__wordmark,
.checkout-index-index .page-header .ff-brand-lockup__wordmark * {
    color: #1d1d1f !important;
}

/* Make checkout header a bit taller so the larger logo isn't cramped */
.checkout-index-index .page-header .container {
    min-height: 92px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* Mobile (≤600px) checkout header — the desktop "bigger logo" (72px diamond,
   1.5rem wordmark) + tall 92px header crowd narrow phones (Galaxy S22 ≈ 360px)
   and were pushing the cart icon off the right edge so customers couldn't see
   or tap it. Scale the lockup down, shorten the header, and give the container
   side padding so the cart icon + its count badge always sit fully within the
   viewport. Mobile cart-cutoff fix — desktop is unaffected. */
@media (max-width: 600px) {
    .checkout-index-index .page-header .container,
    .checkout-index-index .page-header .header.panel,
    .checkout-index-index .page-header .header {
        min-height: 58px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .checkout-index-index .page-header .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .checkout-index-index .page-header .ff-brand-lockup__diamond,
    .checkout-index-index .page-header .ff-brand-lockup img.ff-brand-lockup__diamond {
        height: 36px !important;
        max-height: 36px !important;
        min-height: 36px !important;
    }
    .checkout-index-index .page-header .ff-brand-lockup__wordmark {
        font-size: 0.9rem !important;
        letter-spacing: 0.08em !important;
    }
    /* Belt-and-suspenders: keep the cart icon clear of the right edge so its
       red count badge (positioned right:-6px) never clips at the viewport. */
    .checkout-index-index .page-header [aria-label*="Toggle minicart"] {
        margin-right: 6px !important;
    }
}

.checkout-index-index .page-footer,
.checkout-index-index footer {
    display: none !important;
}

/* Checkout container — two column grid */
.ff-checkout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 40px 24px; /* tight: minimal space above Contact, small breathing room at the bottom */
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}

.ff-checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 64px;
    align-items: start;
    position: relative;
}

@media (max-width: 1023px) {
    .ff-checkout {
        padding: 12px 20px 24px;
    }
    .ff-checkout__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Force .ff-checkout to have transparent background so the fixed gray panel on the right
   shows through behind the summary column. The left form column still reads on white because
   the body/page-main below it is white. */
.ff-checkout {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* Form column */
.ff-checkout__main {
    max-width: 560px;
    width: 100%;
    /* Push form to the right edge of its grid track so it sits closer to the divider
       (matches the Intelligent Change layout where form is right-aligned in its column). */
    margin-left: auto;
    margin-right: 0;
}

.ff-checkout__section {
    margin-bottom: 32px;
}

.ff-checkout__section h2 {
    font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    margin: 0 0 20px 0 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    line-height: 1.15 !important;
}

/* Subtitle note under a section heading — used to explain the "Your
   information" address fields when the cart contains a firearm. Sits between
   the h2 and the first input. Muted color + tighter type to read as helper
   text, not a primary message. Pull the h2 closer when this note is rendered
   so the visual block reads as one unit. */
.ff-checkout__section h2 + .ff-checkout__section-note {
    margin-top: -12px;
}

.ff-checkout__section-note {
    margin: 0 0 20px 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4a4a4d;
    max-width: 560px;
}

.ff-checkout__section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.ff-checkout__section-head h2 {
    margin: 0 !important;
}

.ff-checkout__signin {
    font-size: 0.875rem;
    color: #1d1d1f;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ========= Express checkout ========= */
.ff-checkout__express {
    text-align: center;
}

.ff-checkout__express-label {
    font-size: 0.875rem;
    color: #6d6d6d;
    margin: 0 0 12px;
}

.ff-checkout__express-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}

.ff-express-btn {
    height: 48px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding: 0 12px;
}

.ff-express-btn:hover {
    opacity: 0.88;
}

.ff-express-btn:active {
    transform: translateY(1px);
}

.ff-express-btn--shop   { background: #5A31F4; color: #ffffff; }
.ff-express-btn--shop svg { height: 16px; }
.ff-express-btn--paypal { background: #FFC439; color: #003087; }
.ff-express-btn--paypal .ff-express-btn__pp { font-family: 'Arial', sans-serif; font-size: 15px; font-style: italic; }
.ff-express-btn--paypal .ff-express-btn__pp strong { color: #003087; }
.ff-express-btn--amazon { background: #FFD814; color: #000000; }
.ff-express-btn--amazon .ff-express-btn__label { font-size: 13px; font-weight: 500; }
.ff-express-btn--gpay   { background: #000000; color: #ffffff; }
.ff-express-btn--gpay .ff-express-btn__gpay { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }

.ff-checkout__divider {
    text-align: center;
    border-top: 1px solid #e5e5e5;
    margin: 8px 0 24px;
    position: relative;
}

.ff-checkout__divider span {
    position: relative;
    top: -10px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 0.8125rem;
    color: #6d6d6d;
}

/* ========= Form fields — floating label style ========= */
.ff-checkout__field {
    position: relative;
    display: block;
    margin-bottom: 10px;
}

.ff-checkout__field input,
.ff-checkout__field select,
.ff-checkout__field textarea {
    /* Brand spec: 1.5px border #d2d2d7. Was 1px solid #c9c9c9 —
       slightly off-brand. Border-radius stays 6px because this is
       the Apple-style floating-label pattern (Apple checkout uses
       a tighter radius for stacked field rhythm; Apple Pay sheet
       same). 56px height accommodates the floating label. */
    width: 100%;
    height: 56px;
    padding: 22px 14px 6px;
    border: 1.5px solid #d2d2d7;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.25;
    background: #ffffff;
    color: #1d1d1f;
    transition: border-color 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
}

/* Brand-spec alignment: focus brings border-color to brand-blue +
   4px rgba(0,113,227,0.12) box-shadow ring (matches every other
   form-input on the site — login, dealer, contact, forgot, cart
   coupon, etc.). Was #1d1d1f near-black + 1px shadow which felt
   off-brand against the rest of the design language. */
.ff-checkout__field input:focus,
.ff-checkout__field select:focus,
.ff-checkout__field textarea:focus {
    outline: none !important;
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
}

.ff-checkout__field input::placeholder,
.ff-checkout__field textarea::placeholder {
    color: transparent;
}

/* Floating label */
.ff-checkout__field-label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9375rem;
    color: #767676;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, transform 0.15s ease;
    background: transparent;
    padding: 0;
    /* Keep proper case — override any parent text-transform */
    text-transform: none !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
}

/* Raise the floating label when field has focus OR has content.
   For select fields, we always raise it because native <select> always shows its current option,
   so a centered label would overlap the value text. */
.ff-checkout__field input:focus ~ .ff-checkout__field-label,
.ff-checkout__field input:not(:placeholder-shown) ~ .ff-checkout__field-label,
.ff-checkout__field textarea:focus ~ .ff-checkout__field-label,
.ff-checkout__field textarea:not(:placeholder-shown) ~ .ff-checkout__field-label,
.ff-checkout__field--select .ff-checkout__field-label,
.ff-checkout__field--has-value .ff-checkout__field-label,
label.ff-checkout__field--select > .ff-checkout__field-label,
label.ff-checkout__field:has(select) > .ff-checkout__field-label {
    top: 8px !important;
    transform: translateY(0) !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    color: #6d6d6d !important;
    letter-spacing: 0.02em !important;
}

/* When select has a value (which is always for native selects), push the visible option text down so
   it doesn't collide with the raised label. */
.ff-checkout__field--select select,
.ff-checkout__field:has(select) select {
    padding-top: 22px !important;
    padding-bottom: 6px !important;
}

.ff-checkout__field--select select {
    padding-right: 36px;
}

.ff-checkout__field--select::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid #767676;
    border-bottom: 2px solid #767676;
    pointer-events: none;
    margin-top: -2px;
}

.ff-checkout__field-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #767676;
    pointer-events: none;
}

/* Row layouts */
.ff-checkout__row {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.ff-checkout__row--2 { grid-template-columns: 1fr 1fr; }
.ff-checkout__row--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Checkboxes */
.ff-checkout__check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: #1d1d1f;
    margin: 12px 0;
    cursor: pointer;
}

.ff-checkout__check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1d1d1f;
    cursor: pointer;
    flex-shrink: 0;
}

.ff-checkout__check--billing {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}

/* Billing address form — shown when 'Use shipping as billing' is unchecked */
.ff-checkout__billing-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.ff-checkout__billing-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 14px 0;
    letter-spacing: -0.005em;
}

/* ========= Shipping method ========= */
.ff-checkout__shipping-box {
    background: #f6f6f6;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 14px 18px;
    font-size: 0.9375rem;
    color: #6d6d6d;
}

.ff-checkout__methods {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
}

.ff-checkout__method {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ff-checkout__method:last-child { border-bottom: none; }
.ff-checkout__method:hover { background: #fafafa; }
.ff-checkout__method.is-selected { background: #f0f6ff; }

.ff-checkout__method input[type="radio"] {
    width: 20px; height: 20px; accent-color: #1d1d1f;
}

.ff-checkout__method-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ff-checkout__method-name {
    font-size: 0.9375rem;
    color: #1d1d1f;
}

.ff-checkout__method-price {
    font-weight: 600;
    color: #1d1d1f;
}

/* ========= Payment ========= */
.ff-checkout__note {
    font-size: 0.875rem;
    color: #6d6d6d;
    margin: 0 0 16px;
}

.ff-checkout__payments {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
}

.ff-checkout__payment {
    display: block;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ff-checkout__payment:last-child { border-bottom: none; }
.ff-checkout__payment.is-selected { background: #f0f6ff; }

.ff-checkout__payment-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.ff-checkout__payment-head input[type="radio"] {
    width: 20px; height: 20px; accent-color: #1d1d1f;
}

.ff-checkout__payment-name {
    flex: 1;
    font-size: 0.9375rem;
    color: #1d1d1f;
}

.ff-checkout__payment-sub {
    color: #6d6d6d;
    font-size: 0.875rem;
}

.ff-checkout__payment-brands {
    display: flex;
    gap: 4px;
}

.cc-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 38px;
    padding: 0 6px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 800;
    background: #ffffff;
}

.cc-brand--visa { color: #1A1F71; }
.cc-brand--mc   { color: #EB001B; background: linear-gradient(90deg, #EB001B 50%, #F79E1B 50%); color: #ffffff; }
.cc-brand--amex { color: #006FCF; background: #006FCF; color: #ffffff; }
.cc-brand--plus { color: #6d6d6d; font-weight: 500; }

.ff-checkout__payment-logo {
    font-size: 0.9375rem;
    font-weight: 800;
}

.ff-checkout__payment-logo--shop { color: #5A31F4; font-style: italic; }
.ff-checkout__payment-logo--pp { color: #003087; font-style: italic; }
.ff-checkout__payment-logo--pp strong { color: #003087; }

/* Sezzle brand pill — used when plugin injects its payment row */
.ff-checkout__payment-logo--sezzle,
.ff-checkout__payment-plugin-slot .sezzle-logo {
    color: #ffffff !important;
    background: #00C58A;
    padding: 4px 10px;
    border-radius: 4px;
    font-style: normal;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.01em;
    font-weight: 800;
}

.ff-checkout__payment-body {
    padding: 20px 18px;
    border-top: 1px solid #e5e5e5;
    background: #ffffff;
}

/* ========= Place order button ========= */
.ff-checkout__submit {
    width: 100%;
    height: 60px;
    background: #1d1d1f;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    margin-top: 28px;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

.ff-checkout__submit:hover:not(:disabled) {
    background: #000000;
    transform: translateY(-1px);
}

.ff-checkout__submit:disabled {
    background: #c9c9c9;
    cursor: not-allowed;
}

.ff-checkout__error {
    margin-top: 16px;
    padding: 12px 16px;
    background: #fff3f3;
    border: 1px solid #e5818c;
    border-radius: 6px;
    color: #b7001a;
    font-size: 0.875rem;
}

.ff-checkout__legal {
    margin-top: 16px;
    font-size: 0.75rem;
    color: #6d6d6d;
    line-height: 1.5;
}

.ff-checkout__legal a {
    color: #1d1d1f;
    text-decoration: underline;
}

/* ============================================================
   ORDER SUMMARY (right column)
   ============================================================ */

/* Aside is just a positioning container — the gray "fills entire right side" visual
   comes from a fixed pseudo-element on the body below. Aside itself is transparent so
   its content sits on top of the full-height gray panel. */
.ff-checkout__summary {
    align-self: stretch;
    background: transparent;
    border-radius: 0;
    position: relative;
    z-index: 1; /* above the fixed gray panel */
}

/* Sticky inner wrapper — keeps summary content visible at the top while left column scrolls */
.ff-checkout__summary-inner {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 28px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

/* Hide scrollbar on summary for cleaner look (but keep it scrollable) */
.ff-checkout__summary-inner::-webkit-scrollbar {
    width: 6px;
}
.ff-checkout__summary-inner::-webkit-scrollbar-thumb {
    background: #d1d1d1;
    border-radius: 9999px;
}
.ff-checkout__summary-inner::-webkit-scrollbar-track {
    background: transparent;
}

/* Obsolete mobile rule removed — mobile accordion layout is now handled in the dedicated
   mobile block further up (see "MOBILE-ONLY CHECKOUT LAYOUT") which collapses the inner
   via max-height + .is-open toggle. */

/* Summary heading — "Your Cart" + item count */
.ff-checkout__summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 4px;
}

.ff-checkout__summary-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.ff-checkout__summary-count {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6d6d6d;
    letter-spacing: 0.02em;
}

.ff-checkout__summary-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 24px;
}

.ff-summary-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 14px;
}

.ff-summary-item__image {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: visible;
    background: #ffffff;
    border: 1px solid #e5e5e5;
}

.ff-summary-item__image > img,
.ff-summary-item__image > picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.ff-summary-item__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ff-summary-item__qty {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #000000;
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 9999px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.ff-summary-item__body { flex: 1; min-width: 0; }

.ff-summary-item__name {
    font-size: 0.875rem;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.35;
}

.ff-summary-item__price {
    font-size: 0.875rem;
    color: #1d1d1f;
    font-weight: 500;
    white-space: nowrap;
}

/* Inline qty stepper inside each summary line item.
   Layout: [-] [qty] [+] ... [trash]
   The trash sits at the end with a small left margin so it's a
   distinct destructive control, not part of the +/- run. */
.ff-summary-item__qty-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.ff-summary-item__qty-btn,
.ff-summary-item__remove {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    color: #1d1d1f;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    padding: 0;
}

.ff-summary-item__qty-btn:hover,
.ff-summary-item__remove:hover {
    background: #f5f5f7;
    border-color: #1d1d1f;
}

.ff-summary-item__qty-btn:focus-visible,
.ff-summary-item__remove:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

.ff-summary-item__qty-btn:disabled,
.ff-summary-item__remove:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #ffffff;
    border-color: #d2d2d7;
}

.ff-summary-item__qty-value {
    min-width: 22px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1d1d1f;
}

.ff-summary-item__remove {
    margin-left: 6px;
    color: #6e6e73;
}

.ff-summary-item__remove:hover {
    color: #d70015;
    border-color: #d70015;
    background: #fff5f5;
}

/* Hide the qty badge on the image when controls are present —
   the visible qty number is now in the stepper below the name. */
.ff-summary-item:has(.ff-summary-item__qty-controls) .ff-summary-item__qty {
    display: none;
}

/* Discount code */
.ff-checkout__discount {
    display: flex;
    gap: 8px;
}

.ff-checkout__discount input {
    flex: 1;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #c9c9c9;
    border-radius: 6px;
    font-size: 0.875rem;
    background: #ffffff;
}

.ff-checkout__discount input:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 1px #1d1d1f;
}

.ff-checkout__discount button {
    height: 44px;
    padding: 0 20px;
    background: #e5e5e5;
    color: #1d1d1f;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ff-checkout__discount button:hover:not(:disabled) { background: #d1d1d1; }
.ff-checkout__discount button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Totals */
.ff-checkout__totals {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #e5e5e5;
    padding-top: 24px;
}

.ff-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9375rem;
    color: #1d1d1f;
}

.ff-totals-row__q {
    background: transparent;
    border: 1px solid #c9c9c9;
    border-radius: 9999px;
    width: 18px;
    height: 18px;
    font-size: 0.625rem;
    color: #6d6d6d;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    vertical-align: middle;
}

.ff-totals-row--total {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 10px;
    padding-top: 10px;
}

.ff-totals-row--total .ff-totals-row__currency {
    font-size: 0.75rem;
    color: #6d6d6d;
    font-weight: 400;
    margin-right: 8px;
}

/* ============================================================
   SEZZLE WIDGETS — styled to match premium aesthetic
   Sezzle auto-injects widgets on product pages, cart, checkout.
   This block styles whatever the plugin emits so it looks native.
   ============================================================ */

/* -- Sezzle product-page widget ("or 4 interest-free payments of $X.XX with Sezzle") -- */
.sezzle-checkout-button-wrapper,
.sezzle-shopify-info-button,
.sezzle-widget,
.sezzle-button-widget,
.sezzlewidgetindex-index,
.sezzle-payment-widget,
div[class*="sezzle-checkout-button"],
[data-sezzle-widget] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 14px 0 !important;
    padding: 12px 14px !important;
    background: #fafafa !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 10px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.8125rem !important;
    color: #1d1d1f !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Logo inside widget — Sezzle's brand green text */
.sezzle-checkout-button-wrapper .sezzle-button,
.sezzle-checkout-button-wrapper [class*="brand"],
.sezzle-widget .sezzle-button-text,
.sezzle-button-widget strong,
.ff-sezzle-brand {
    color: #00C58A !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}

/* "Learn more" / tooltip link in Sezzle widget */
.sezzle-checkout-button-wrapper a,
.sezzle-widget a,
.sezzle-button-widget a {
    color: #0071e3 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.sezzle-checkout-button-wrapper a:hover,
.sezzle-widget a:hover {
    color: #0051a2 !important;
    text-decoration: underline !important;
}

/* The "?" info icon inside widget */
.sezzle-checkout-button-wrapper .sezzle-learn-more-link,
.sezzle-widget .sezzle-info-icon,
[class*="sezzle-modal-link"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    background: transparent !important;
    border: 1px solid #c9c9c9 !important;
    border-radius: 9999px !important;
    color: #6d6d6d !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Sezzle widget on PDP — sits right under the price */
.catalog-product-view .sezzle-checkout-button-wrapper,
.catalog-product-view .sezzle-shopify-info-button,
.catalog-product-view .sezzle-widget,
.catalog-product-view [data-sezzle-widget],
.ff-pdp-info .sezzle-checkout-button-wrapper,
.ff-pdp-info .sezzle-widget {
    margin: 12px 0 0 0 !important;
    background: #f5f5f7 !important;
}

/* Sezzle widget on cart sidebar */
.checkout-cart-index .sezzle-checkout-button-wrapper,
.checkout-cart-index .sezzle-widget,
.checkout-cart-index [data-sezzle-widget] {
    margin: 12px 0 !important;
    background: #ffffff !important;
}

/* Sezzle payment-method row in checkout — matches .ff-checkout__payment */
.ff-checkout__payment-plugin-slot .sezzle-payment-method,
.ff-checkout__payment-plugin-slot [class*="sezzle"],
#ff-payment-plugin-slot .payment-method,
.ff-checkout .sezzle-payment-method {
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #e5e5e5 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ff-checkout__payment-plugin-slot .payment-method .payment-method-title,
.ff-checkout .sezzle-payment-method .payment-method-title {
    padding: 16px 18px !important;
    font-size: 0.9375rem !important;
    color: #1d1d1f !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    cursor: pointer !important;
}

/* Sezzle promo messaging modal (when user clicks "?") */
.sezzle-modal,
.sezzle-checkout-modal {
    border-radius: 12px !important;
    padding: 24px !important;
    max-width: 520px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25) !important;
}

/* Defensive: remove any oversized/ugly default Sezzle assets */
.sezzle-checkout-button-wrapper img,
.sezzle-widget img {
    max-height: 20px !important;
    width: auto !important;
    vertical-align: middle !important;
}

/* ============================================================
   FUSION FIREARMS NEWSROOM (blog landing — Apple Newsroom-inspired)
   ============================================================ */

/* Full-bleed white background on newsroom pages (overrides the dark theme bg) */
body.blog-page,
body.blog-page-list,
body.blog-index-index,
body.blog-post-view {
    background: #ffffff !important;
    color: #1d1d1f !important;
}

body.blog-page .page-main,
body.blog-index-index .page-main,
body.blog-post-view .page-main {
    background: #ffffff !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.ff-newsroom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 32px 96px;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}

@media (max-width: 768px) {
    .ff-newsroom {
        padding: 32px 20px 60px;
    }
}

/* ---------- Newsroom header ---------- */
.ff-newsroom__header {
    text-align: center;
    margin-bottom: 56px;
}

.ff-newsroom__eyebrow {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 0.875rem;
    font-weight: 500;
    font-style: italic;
    color: #6e6e73;
    margin: 0 0 8px 0;
    letter-spacing: 0.02em;
}

.ff-newsroom__title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 4rem;
    font-weight: 800;
    color: #1d1d1f;
    margin: 0 0 18px 0;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: none;
}

@media (max-width: 768px) {
    .ff-newsroom__title { font-size: 2.5rem; }
}

.ff-newsroom__subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    color: #4d4d52;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .ff-newsroom__subtitle { font-size: 1.0625rem; }
}

/* ---------- Search box — minimal editorial style ----------
   Apple-Newsroom-style: thin-bordered white input, search icon
   on the left, no separate submit pill (Enter key submits). Sits
   centered under the page title at a moderate width. Pairs better
   with the Playfair Display title than the previous brand-blue
   pill button which read as ecommerce-y in the editorial context. */
.ff-newsroom__search {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 480px;
    margin: 32px auto 0;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 9999px;
    padding: 0 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ff-newsroom__search:focus-within {
    border-color: #1d1d1f;
    box-shadow: 0 0 0 4px rgba(29, 29, 31, 0.06);
}

.ff-newsroom__search-label {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #6e6e73;
    cursor: text;
}

.ff-newsroom__search-icon { display: block; }

.ff-newsroom__search-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.ff-newsroom__search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: 14px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 1rem;
    color: #1d1d1f;
}

.ff-newsroom__search-input::placeholder { color: #a1a1a6; }

/* Hide the default submit button — Enter submits the form */
.ff-newsroom__search-submit {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Search-results meta strip ---------- */
.ff-newsroom-search-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 32px;
    max-width: 1280px;
    padding: 16px 20px;
    background: #f5f5f7;
    border-radius: 12px;
}

.ff-newsroom-search-meta__line {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    color: #424245;
}

.ff-newsroom-search-meta__line strong {
    color: #1d1d1f;
    font-weight: 700;
}

.ff-newsroom-search-meta__count {
    margin-left: 10px;
    color: #6e6e73;
    font-size: 0.875rem;
}

.ff-newsroom-search-meta__clear {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 9999px;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ff-newsroom-search-meta__clear:hover,
.ff-newsroom-search-meta__clear:focus-visible {
    background: #f5f5f7;
    border-color: var(--ff-blue, #0071e3);
    color: #1d1d1f;
}

/* ---------- Toolbar / pagination ---------- */
.ff-newsroom-toolbar {
    margin: 56px auto 0;
    max-width: 1280px;
    padding: 0 20px;
}

.ff-newsroom-toolbar .toolbar,
.ff-newsroom-toolbar .pages {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.ff-newsroom-toolbar .pages-items {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ff-newsroom-toolbar .pages-items .item {
    margin: 0;
}

.ff-newsroom-toolbar .pages-items a.page,
.ff-newsroom-toolbar .pages-items strong.page,
.ff-newsroom-toolbar .pages-items a.action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 9999px;
    border: 1px solid #e5e5ea;
    background: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1d1d1f;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ff-newsroom-toolbar .pages-items a.page:hover,
.ff-newsroom-toolbar .pages-items a.action:hover {
    background: #f5f5f7;
    border-color: var(--ff-blue, #0071e3);
}

.ff-newsroom-toolbar .pages-items strong.page,
.ff-newsroom-toolbar .pages-items .current strong {
    background: var(--ff-blue, #00A3FF);
    border-color: var(--ff-blue, #00A3FF);
    color: #ffffff;
}

.ff-newsroom-toolbar .label {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Hero featured post ---------- */
.ff-newsroom-hero {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 64px;
    background: #ffffff;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 64px;
    transition: transform 0.35s ease;
    align-items: center;
}

.ff-newsroom-hero:hover {
    transform: translateY(-2px);
}

/* Keyboard focus on blog newsroom hero card — keyboard users need
   the same lift parity as mouse hover plus a brand-blue outline ring
   so they can spot the focused card on the long blog list page. */
.ff-newsroom-hero:focus-visible {
    transform: translateY(-2px);
    outline: 3px solid var(--ff-blue, #0071e3);
    outline-offset: 4px;
    border-radius: 16px;
}

@media (max-width: 1023px) {
    .ff-newsroom-hero {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.ff-newsroom-hero__image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 16px;
    background: #f5f5f7;
}

.ff-newsroom-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.ff-newsroom-hero:hover .ff-newsroom-hero__image img,
.ff-newsroom-hero:focus-visible .ff-newsroom-hero__image img {
    transform: scale(1.03);
}

.ff-newsroom-hero__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #6e6e73;
    background: linear-gradient(145deg, #f5f5f7, #eaeaee);
}

/* Fallback text shown when the image fails to load (onerror handler reveals it) */
.ff-newsroom-hero__image-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #6e6e73;
    background: linear-gradient(145deg, #f5f5f7, #eaeaee);
    z-index: 1;
}
.ff-newsroom-hero__image-fallback.is-visible {
    display: flex !important;
}

.ff-newsroom-hero__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.ff-newsroom-hero__category {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #d70015;
}

.ff-newsroom-hero__title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: #1d1d1f;
    margin: 0;
    letter-spacing: -0.015em;
}

@media (max-width: 768px) {
    .ff-newsroom-hero__title { font-size: 1.875rem; }
}

.ff-newsroom-hero__excerpt {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #4d4d52;
    margin: 0;
}

.ff-newsroom-hero__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}

.ff-newsroom-hero__date {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6e6e73;
    letter-spacing: 0.04em;
}

.ff-newsroom-hero__readmore {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0071e3;
    margin-left: auto;
}

.ff-newsroom-hero:hover .ff-newsroom-hero__readmore,
.ff-newsroom-hero:focus-visible .ff-newsroom-hero__readmore {
    color: #0058b0;
}

/* ---------- Category filter tabs ---------- */
.ff-newsroom-filters {
    display: flex;
    gap: 8px;
    padding: 12px 0 16px;
    margin-bottom: 48px;
    overflow-x: auto;
    border-bottom: 1px solid #e5e5e5;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ff-newsroom-filters::-webkit-scrollbar { display: none; }

.ff-newsroom-filter {
    flex-shrink: 0;
    display: inline-block;
    padding: 8px 18px;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid #d2d2d7;
    color: #1d1d1f;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ff-newsroom-filter:hover {
    background: #f5f5f7;
    border-color: #1d1d1f;
}

/* Keyboard focus on blog category filter pills (All Stories /
   News / Reviews / Stories / Tutorials etc) — keyboard users
   tabbing through the filter row need both the bg + border
   parity with hover and a brand-blue outline ring. 2px outline
   + 2px offset clears the 9999px pill edge. */
.ff-newsroom-filter:focus-visible {
    background: #f5f5f7;
    border-color: var(--ff-blue, #0071e3);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
}

.ff-newsroom-filter.is-active {
    background: #1d1d1f;
    border-color: #1d1d1f;
    color: #ffffff;
}

/* ---------- Article grid ---------- */
.ff-newsroom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
    margin-bottom: 48px;
}

@media (max-width: 1023px) {
    .ff-newsroom-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
    }
}

@media (max-width: 640px) {
    .ff-newsroom-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ---------- Search results list layout ----------
   On /blog/search?q=..., switch from the image-dominant 3-column
   grid to a dense vertical list so customers can scan many results
   quickly. Each row: small fixed-size thumbnail on the left,
   category + title + excerpt + date stacked on the right. */
.ff-newsroom-grid--search {
    grid-template-columns: 1fr;
    max-width: 880px;
    margin: 0 auto 48px;
    gap: 20px;
}

@media (max-width: 1023px) {
    .ff-newsroom-grid--search {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.ff-newsroom-grid--search .ff-newsroom-card {
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ff-newsroom-grid--search .ff-newsroom-card:hover {
    border-color: #d2d2d7;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* Thumbnail: small fixed-size image on the left, no aspect-ratio
   blowout from the regular grid card. */
.ff-newsroom-grid--search .ff-newsroom-card__image {
    flex: 0 0 180px;
    width: 180px;
    height: 120px;
    aspect-ratio: auto;
    border-radius: 8px;
}

.ff-newsroom-grid--search .ff-newsroom-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.ff-newsroom-grid--search .ff-newsroom-card__category {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--ff-blue, #0071e3);
}

.ff-newsroom-grid--search .ff-newsroom-card__title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1d1d1f;
    margin: 0;
    /* Two-line clamp keeps row height consistent. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ff-newsroom-grid--search .ff-newsroom-card__excerpt {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #6e6e73;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ff-newsroom-grid--search .ff-newsroom-card__date {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #86868b;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .ff-newsroom-grid--search .ff-newsroom-card {
        flex-direction: column;
        padding: 12px;
        gap: 12px;
    }
    .ff-newsroom-grid--search .ff-newsroom-card__image {
        flex: 0 0 auto;
        width: 100%;
        height: 180px;
    }
}

.ff-newsroom-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.ff-newsroom-card:hover {
    transform: translateY(-3px);
}

.ff-newsroom-card:focus-visible {
    transform: translateY(-3px);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 4px;
    border-radius: 12px;
}

.ff-newsroom-card__image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 12px;
    background: #f5f5f7;
}

.ff-newsroom-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.ff-newsroom-card:hover .ff-newsroom-card__image img,
.ff-newsroom-card:focus-visible .ff-newsroom-card__image img {
    transform: scale(1.04);
}

.ff-newsroom-card__placeholder {
    position: absolute;
    inset: 0;
    display: none; /* hidden by default; onerror handler sets display:flex when img fails */
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #6e6e73;
    background: linear-gradient(145deg, #f5f5f7, #eaeaee);
    z-index: 0;
}

.ff-newsroom-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ff-newsroom-card__category {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #d70015;
}

.ff-newsroom-card__title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1d1d1f;
    margin: 0;
    letter-spacing: -0.005em;
}

.ff-newsroom-card__excerpt {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #4d4d52;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ff-newsroom-card__date {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6e6e73;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

/* ---------- Empty + Toolbar ---------- */
.ff-newsroom-empty {
    padding: 80px 32px;
    text-align: center;
    color: #6e6e73;
    font-size: 1.125rem;
}

.ff-newsroom-toolbar {
    display: flex;
    justify-content: center;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
}

.ff-newsroom-toolbar .pages,
.ff-newsroom-toolbar .pager {
    background: transparent !important;
    border: none !important;
}

/* ============================================================
   BLOG POST DETAIL PAGE — Apple Newsroom-inspired article layout
   ============================================================ */

body.blog-post-view .column.main {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 32px 96px;
}

body.blog-post-view .post-view {
    max-width: 760px;
    margin: 0 auto;
}

body.blog-post-view .post-title,
body.blog-post-view .post-view h1.post-title {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 3rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #1d1d1f !important;
    margin: 0 0 24px 0 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    text-align: left !important;
}

@media (max-width: 768px) {
    body.blog-post-view .post-title {
        font-size: 2.125rem !important;
    }
}

body.blog-post-view .post-info {
    font-size: 0.875rem;
    color: #6e6e73;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e5e5;
}

body.blog-post-view .post-ftimg-hld {
    margin: 0 -32px 40px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
}

body.blog-post-view .post-ftimg-hld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

@media (max-width: 768px) {
    body.blog-post-view .post-ftimg-hld {
        margin: 0 -20px 32px;
    }
}

body.blog-post-view .post-description,
body.blog-post-view .post-content,
body.blog-post-view .post-content-body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', Georgia, serif !important;
    font-size: 1.125rem !important;
    line-height: 1.7 !important;
    color: #1d1d1f !important;
}

body.blog-post-view .post-description p,
body.blog-post-view .post-content p {
    margin: 0 0 20px 0 !important;
}

body.blog-post-view .post-description h2,
body.blog-post-view .post-description h3,
body.blog-post-view .post-description h4,
body.blog-post-view .post-content h2,
body.blog-post-view .post-content h3,
body.blog-post-view .post-content h4 {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    color: #1d1d1f !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    margin: 40px 0 16px 0 !important;
}

body.blog-post-view .post-description h2,
body.blog-post-view .post-content h2 {
    font-size: 1.75rem !important;
}
body.blog-post-view .post-description h3,
body.blog-post-view .post-content h3 {
    font-size: 1.375rem !important;
}

body.blog-post-view .post-description img,
body.blog-post-view .post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

body.blog-post-view .post-description a,
body.blog-post-view .post-content a {
    color: #0071e3;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.blog-post-view .post-description a:hover,
body.blog-post-view .post-content a:hover {
    color: #0058b0;
}

body.blog-post-view .post-description blockquote,
body.blog-post-view .post-content blockquote {
    border-left: 4px solid #d70015 !important;
    padding: 4px 0 4px 24px !important;
    margin: 32px 0 !important;
    font-style: italic !important;
    font-size: 1.25rem !important;
    color: #1d1d1f !important;
    line-height: 1.5 !important;
}

/* Hide the sidebar on post detail, clean reading experience */
body.blog-post-view .sidebar,
body.blog-post-view .sidebar-main,
body.blog-post-view .sidebar-additional {
    display: none !important;
}

body.blog-post-view .columns,
body.blog-post-view .column.main {
    grid-template-columns: 1fr !important;
    width: 100% !important;
}

/* Related posts at bottom */
body.blog-post-view .block.related,
body.blog-post-view .related-posts {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid #e5e5e5;
}

body.blog-post-view .block.related .title,
body.blog-post-view .related-posts-title {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    margin: 0 0 24px 0 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
}

/* ============================================================
   END FUSION FIREARMS NEWSROOM STYLES
   ============================================================ */

/* ============================================================
   FUSION FIREARMS — ATMOSPHERIC BACKGROUND FX
   Subtle particle field with mouse repel — see ff-bg-fx.js
   Pure decorative layer behind content. Does NOT modify any
   existing styles, layouts, sections, or backgrounds.
   ============================================================ */

/* Atmospheric background FX disabled per Treven 2026-05-01 — focusing
   on launch-critical work (PDP polish, account pages, performance,
   SEO). Re-enable by removing this `display: none` and tuning the
   wrapper opacity. JS still loads but renders into a hidden canvas
   so it doesn't paint anything. */
.ff-bg-fx {
    display: none !important;
}

/* HIDE the fx layer when the megamenu nav is hovered (which opens a dropdown).
   Single clean :has() rule — no dot field competing with the menu. */
body:has(.ff-megamenu:hover) .ff-bg-fx,
body:has(.ff-megamenu__panel:hover) .ff-bg-fx {
    opacity: 0;
}

/* Category pages: dialed back since product grids are busy on their own,
   but still visible enough to notice */
body.catalog-category-view .ff-bg-fx {
    opacity: 0.3;
}

/* Product detail pages: a bit lighter than homepage so the product image stays the star */
body.catalog-product-view .ff-bg-fx {
    opacity: 0.42;
}

.ff-fx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Hide entirely on reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .ff-bg-fx { display: none !important; }
}

/* Hide on mobile — touch users can't interact with the mouse-repel effect, so
   the field would just be visual noise. Cleaner without it on small screens. */
@media (max-width: 1023px) {
    .ff-bg-fx { display: none !important; }
}

/* Megamenu cards inherit the SAME signature spark-border treatment used on
   flagship tiles, purpose cards, and product cards (see "FUSION SIGNATURE"
   block above). The selectors are added to that block so all cards on the
   site share the identical animated border-on-hover effect. */

/* ============================================================
   END BG FX
   ============================================================ */

/* ============================================================
   PDP — PRODUCT DETAIL PAGE — Premium overhaul
   Sticky gallery + clean info column + custom backdrop spark
   Replaces the dot-field bg fx on this page type only.
   ============================================================ */

/* --- 1. NO decorative backdrop on PDP (premium = product is the star) --- */
body.catalog-product-view .ff-bg-fx { display: none !important; }
body.catalog-product-view .ff-pdp-bg,
body.catalog-product-view .ff-pdp-bg__grid,
body.catalog-product-view .ff-pdp-globe { display: none !important; }

/* --- 2. NUCLEAR top-whitespace kill ---
   Every Tailwind/Hyvä/Magento class between </header> and <picture> has its
   top padding/margin overridden to 0. The breadcrumbs themselves provide
   the only vertical breathing room (8px). */

/* Top container wrapping the breadcrumbs */
body.catalog-product-view .top-container {
    margin: 0 !important;
    padding: 0 !important;
}
/* Breadcrumbs nav + container + ol — Tailwind py-4 was 16px top + 16px bottom */
body.catalog-product-view .breadcrumbs {
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
body.catalog-product-view .breadcrumbs .container {
    padding: 0 24px !important;
    margin: 0 !important;
}
body.catalog-product-view .breadcrumbs .items,
body.catalog-product-view .breadcrumbs ol {
    padding: 6px 0 4px !important;
    margin: 0 !important;
}

/* Page main + messages + columns + column.main — collapse to 0 */
body.catalog-product-view main.page-main,
body.catalog-product-view .page-main {
    padding: 0 !important;
    margin: 0 !important;
}
body.catalog-product-view .page-main > .page.messages,
body.catalog-product-view .page-main > .page.messages > div,
body.catalog-product-view .page-main > .page.messages > [x-data] {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
body.catalog-product-view .page-main > .page.messages:empty {
    display: none !important;
}
body.catalog-product-view .columns {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}
/* FULL-WIDTH on desktop: column.main spans the whole viewport with side padding.
   Centered properly via margin auto + max-width unset. Generous side gutter on
   wide screens so content doesn't touch the edges. */
body.catalog-product-view .column.main {
    padding: 0 32px !important;
    margin: 0 auto !important;
    max-width: none !important;
    width: 100% !important;
}
@media (min-width: 1280px) {
    body.catalog-product-view .column.main {
        padding: 0 56px !important;
        max-width: 1760px !important;
    }
}
@media (min-width: 1680px) {
    body.catalog-product-view .column.main {
        padding: 0 72px !important;
        max-width: 1920px !important;
    }
}
body.catalog-product-view .product-info-main {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Mobile-only H1 wrapper — Magento renders `<div class="container flex...">`
   with sr-only H1 inside before the columns div on desktop. Hide entirely
   on md+ since the desktop H1 lives inside the info column. */
@media (min-width: 768px) {
    body.catalog-product-view .product-info-main > .container.flex.flex-col,
    body.catalog-product-view .product-info-main > div[class*="flex-col"][class*="md:flex-row"] {
        display: none !important;
    }
}

/* Tailwind's `pb-6 md:py-6` on the Product Info section adds 24px top.
   Kill it. Section starts flush against breadcrumbs. */
body.catalog-product-view .product-info-main > section[aria-label*="Product"]:first-of-type,
body.catalog-product-view .product-info-main > section.pb-6,
body.catalog-product-view .product-info-main > section.md\:py-6 {
    padding-top: 8px !important;
    padding-bottom: 32px !important;
    margin-top: 0 !important;
}

/* Gallery main image wrapper has Tailwind mb-6 — keep it but tighten */
body.catalog-product-view #gallery-main {
    margin-bottom: 12px !important;
    margin-top: 0 !important;
}

/* GALLERY-DOMINANT desktop layout — image takes ~62% of width.
   Sticky column so info stays in view as you scroll. Info column is bounded
   to a comfortable reading width (max 540px) and pinned to the right edge of
   the layout for premium feel. */
@media (min-width: 1024px) {
    body.catalog-product-view .product-info-main > section:first-of-type {
        grid-template-columns: minmax(0, 62%) minmax(0, 1fr) !important;
        gap: 56px !important;
        align-items: start !important;
    }
    body.catalog-product-view .product-info-main > section:first-of-type > *:first-child {
        position: sticky;
        top: 92px;
        align-self: start;
    }
    body.catalog-product-view .product-info-main > section:first-of-type > *:first-child img,
    body.catalog-product-view .product-info-main > section:first-of-type > *:first-child picture {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        /* Cap gallery image height so it never dominates vertically and
           creates whitespace next to the title/info column. */
        max-height: 70vh !important;
        object-fit: contain !important;
        display: block;
    }
    body.catalog-product-view .product-info-main [class*="gallery"],
    body.catalog-product-view .product-info-main [class*="media"] {
        max-width: 100% !important;
    }
    /* Info column: room for the title to breathe. 560 px was making 30+
       character product names wrap to 3+ lines with squished line-height. */
    body.catalog-product-view .product-info-main > section:first-of-type > *:last-child {
        max-width: 660px !important;
    }
}

/* Wide viewports: even bigger image */
@media (min-width: 1440px) {
    body.catalog-product-view .product-info-main > section:first-of-type {
        grid-template-columns: minmax(0, 65%) minmax(0, 1fr) !important;
        gap: 72px !important;
    }
}
@media (min-width: 1680px) {
    body.catalog-product-view .product-info-main > section:first-of-type {
        grid-template-columns: minmax(0, 68%) minmax(0, 1fr) !important;
    }
}

/* --- 5. Info column polish --- */
.ff-pdp-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: #1d1d1f;
}

.ff-pdp-info__title,
.ff-pdp-info__title .page-title-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.ff-pdp-info__title h1,
.ff-pdp-info__title .page-title,
.ff-pdp-info__title .page-title-wrapper h1 {
    font-family: var(--ff-font-heading, 'Oswald', Impact, sans-serif) !important;
    font-size: clamp(1.75rem, 3vw, 2.625rem) !important;   /* 28–42 px */
    font-weight: 700 !important;
    line-height: 1.10 !important;
    letter-spacing: -0.005em !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #1d1d1f !important;
    /* Drop the all-caps transform — model names like "XP PRO™ Pistol -
       9MM - Chrome" already have caps where they need them; uppercasing
       the rest makes the title noisy and ™ symbol awkward. */
    text-transform: none !important;
    text-align: left !important;
}

@media (max-width: 768px) {
    /* Shrink + WRAP the product title on mobile. Confirmed via on-screen
       inspection (2026-05-28): the in-column title is a
       <div class="page-title">, and a higher-specificity rule
       (.catalog-product-view .ff-pdp-info__title .page-title { 1.75rem })
       was beating the plain selector AND its word-break, so "ULTRA MATCH
       GRADE" couldn't break and forced the info column wider than the
       viewport → page-level sideways scroll + white space.
       This rule uses body.catalog-product-view (specificity 0,3,1) so it
       OUT-WEIGHS that rule, shrinks the font, and forces wrapping with
       overflow-wrap:anywhere + min-width:0 so the title's min-content can
       never push an ancestor past the screen width. */
    body.catalog-product-view .ff-pdp-info__title,
    body.catalog-product-view .ff-pdp-info__title h1,
    body.catalog-product-view .ff-pdp-info__title .page-title,
    body.catalog-product-view .ff-pdp-info__title .page-title-wrapper {
        font-size: 1.5rem !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    /* Let the info column + its grid ancestors shrink below content
       min-width so nothing forces the page wider than the viewport. */
    body.catalog-product-view .ff-pdp-info,
    body.catalog-product-view .product-info-main,
    body.catalog-product-view .product-info-main > div,
    body.catalog-product-view .product-info-main > div > div {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* GUARANTEED stop for the sideways-scroll / white-space bug: clip any
       horizontal overflow at the page level on mobile, whatever element
       causes it. `clip` (not `hidden`) does NOT create a scroll container,
       so the sticky add-to-cart and the Sezzle fixed modal still work.
       This is the belt; the title-wrap above is the suspenders. */
    body.catalog-product-view,
    body.catalog-product-view .page-wrapper,
    body.catalog-product-view #maincontent,
    body.catalog-product-view .columns {
        overflow-x: clip !important;
        max-width: 100vw !important;
    }
}

/* Root-level horizontal-overflow guard for mobile (all pages). The actual
   scroll container for a sideways-scrolling page is usually <html>/<body>,
   so clipping a descendant isn't enough — the clip must be on the root.
   `overflow-x: clip` leaves vertical scrolling intact and does NOT break
   position: sticky / fixed (unlike `hidden`). Safe site-wide: internal
   horizontal scrollers (e.g. the homepage parts carousels) have their own
   overflow-x containers and are unaffected by clipping the root.
   (Treven 2026-05-28 — sideways-scroll bug persisted until clipped at root.) */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: clip !important;
        max-width: 100% !important;
    }
}

/* Short-description wrapper — holds the clamped body + "Show more" toggle.
   New class so it never collides with the legacy `-wrap` (still hidden). */
.ff-pdp-shortdesc {
    margin: 2px 0 20px 0 !important;
}

.ff-pdp-info__short-desc {
    /* Match the rest of the site's body copy (Treven 2026-05-28: it
       "looked out of place / not formatted like the rest of the site"). */
    font-family: var(--ff-font-body, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #424245 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    /* Clamp to 5 lines by default so long descriptions don't overflow the
       column; Alpine adds the --expanded modifier when "Show more" is
       clicked (toggle only appears when the text actually overflows, so a
       1-2 line description like a barrel lead-time never shows it). No
       fade gradient — the old one whited-out short text (Treven). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

/* Expanded — reveal the full description when "Show more" is clicked. */
.ff-pdp-info__short-desc--expanded {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

/* Kill the leftover fade-out gradient that was whiting-out short text. */
.ff-pdp-info__short-desc::after {
    content: none !important;
    display: none !important;
}

.ff-pdp-info__short-desc p {
    margin: 0 0 8px 0 !important;
}

/* "Show more" toggle button (injected by JS only when content overflows) */
.ff-pdp-info__short-desc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 6px 0;
    background: none;
    border: none;
    color: #0071e3;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.ff-pdp-info__short-desc-toggle:hover {
    color: #0058b0;
    text-decoration: underline;
}

/* Specifically style spec-list-style content (CALIBER\n9MM\nSLIDE...) so it reads
   as a proper key/value spec table instead of a wall of text. The Magento short
   description plugin renders bold labels followed by values — we add subtle
   spacing to differentiate them. */
.ff-pdp-info__short-desc strong,
.ff-pdp-info__short-desc b {
    display: inline-block !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem !important;
    margin-right: 8px;
}

/* Price block — large, bold, confident */
.ff-pdp-info__price {
    margin: 8px 0 0 0;
}
.ff-pdp-info__price .price-wrapper .price,
.ff-pdp-info__price .price {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.015em !important;
    line-height: 1 !important;
}
@media (max-width: 768px) {
    .ff-pdp-info__price .price-wrapper .price,
    .ff-pdp-info__price .price { font-size: 2rem !important; }
}

/* Custom Sezzle installment messaging — clean replacement for Sezzle's
   own widget which doesn't render reliably on Hyvä (no RequireJS chain,
   widget chrome has internal constraints CSS can't reach). The PHP block
   in product-info.phtml computes the per-payment amount server-side and
   we render it inline with Sezzle's logo. Single line of text, plays
   nice with the surrounding info-column rhythm. Clicking opens a small
   info modal — see .ff-sezzle-modal rules below. */
.ff-pdp-installment-wrap {
    margin: 12px 0 4px 0;
}
.ff-pdp-installment-msg {
    /* Reset button defaults */
    background: none;
    border: none;
    padding: 4px 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    /* Layout */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #4a4a4d;
    transition: color 0.15s ease;
}
.ff-pdp-installment-msg:hover,
.ff-pdp-installment-msg:focus-visible {
    color: #1d1d1f;
    outline: none;
}
.ff-pdp-installment-msg:focus-visible {
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 3px;
    border-radius: 4px;
}
.ff-pdp-installment-msg__text strong {
    color: #1d1d1f;
    font-weight: 700;
}
.ff-pdp-installment-msg__logo {
    height: 16px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
.ff-pdp-installment-msg__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 14px;
    color: #6e6e73;
    margin-left: 2px;
    line-height: 1;
}
.ff-pdp-installment-msg:hover .ff-pdp-installment-msg__info {
    color: var(--ff-blue, #00A3FF);
}

/* ==========================================================================
   Sezzle info modal — opens when the installment message is clicked.
   Shows the full payment schedule + a link to sezzle.com for full details.
   Backdrop is a fixed-position scrim; modal is a centered card with a soft
   shadow. Closes on backdrop click, ESC keypress, the X button, or "Got it".
   ========================================================================== */
.ff-sezzle-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.ff-sezzle-modal {
    position: relative;
    background: #ffffff;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 32px 28px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    color: #1d1d1f;
}
.ff-sezzle-modal__close-x {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    font-size: 24px;
    line-height: 1;
    color: #6e6e73;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.ff-sezzle-modal__close-x:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}
.ff-sezzle-modal__close-x:focus-visible {
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 2px;
}
.ff-sezzle-modal__logo {
    height: 28px;
    width: auto;
    display: block;
    margin: 0 0 16px 0;
}
.ff-sezzle-modal__title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    line-height: 1.2;
}
.ff-sezzle-modal__intro {
    margin: 0 0 20px 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #4a4a4d;
}
.ff-sezzle-modal__intro strong {
    color: #1d1d1f;
    font-weight: 700;
}
.ff-sezzle-modal__schedule {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    counter-reset: payment;
}
.ff-sezzle-modal__payment {
    padding: 12px 8px;
    background: #f7f7f8;
    border: 1px solid #e8e8ed;
    border-radius: 10px;
    text-align: center;
    counter-increment: payment;
    position: relative;
}
.ff-sezzle-modal__payment::before {
    content: counter(payment);
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6e6e73;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.ff-sezzle-modal__payment-amount {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 2px;
}
.ff-sezzle-modal__payment-date {
    display: block;
    font-size: 0.75rem;
    color: #6e6e73;
}
.ff-sezzle-modal__note {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #6e6e73;
    margin: 0 0 20px 0;
}
.ff-sezzle-modal__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ff-sezzle-modal__learn-more {
    color: #1d1d1f;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ff-sezzle-modal__learn-more:hover {
    color: var(--ff-blue, #00A3FF);
}
.ff-sezzle-modal__close {
    background: #1d1d1f;
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.ff-sezzle-modal__close:hover {
    background: #000000;
    transform: translateY(-1px);
}
.ff-sezzle-modal__close:focus-visible {
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 2px;
}
@media (max-width: 480px) {
    .ff-sezzle-modal {
        padding: 24px 20px 20px;
    }
    .ff-sezzle-modal__schedule {
        grid-template-columns: repeat(2, 1fr);
    }
    .ff-sezzle-modal__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .ff-sezzle-modal__close {
        width: 100%;
        padding: 12px 24px;
    }
    .ff-sezzle-modal__learn-more {
        text-align: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ff-sezzle-modal__close:hover {
        transform: none;
    }
}

/* Belt-and-suspenders: if Sezzle's own widget script ever loads and
   tries to inject its pill into the price area, hide it. The custom
   .ff-pdp-installment-msg above is the canonical UX. The :not selector
   prevents this rule from accidentally catching our own element since
   it doesn't include "sezzle" / "szl-" in its class name. */
.ff-pdp-info__price [class*="sezzle"],
.ff-pdp-info__price [class*="Sezzle"],
.ff-pdp-info__price [class*="szl-"] {
    display: none !important;
}

/* Stock pill */
.ff-pdp-info__stock .stock,
.ff-pdp-info__stock .available {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    background: rgba(52, 199, 89, 0.12) !important;
    color: #008f3a !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.ff-pdp-info__stock .stock.unavailable,
.ff-pdp-info__stock .out-of-stock {
    background: rgba(215, 1, 1, 0.08) !important;
    color: #b30000 !important;
}

/* SKU and meta — compact, premium */
.ff-pdp-info__meta {
    margin: 24px 0 0 0 !important;
    padding: 16px 0 0 0 !important;
    border-top: 1px solid #e5e5e5 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 8px 24px !important;
}
.ff-pdp-info__meta-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.ff-pdp-info__meta-label {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #6e6e73 !important;
    margin: 0 !important;
}
.ff-pdp-info__meta-value {
    font-size: 0.9375rem !important;
    color: #1d1d1f !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* CTA row: qty + ATC button — premium, full-width, confident */
.ff-pdp-info__cta-row {
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 12px !important;
}

/* Quantity input — premium, large, clean */
.ff-pdp-info__cta-row .field.qty,
.ff-pdp-info__cta-row [class*="qty"] {
    flex: 0 0 110px !important;
}
.ff-pdp-info__cta-row input[type="number"],
.ff-pdp-info__cta-row input.qty,
body.catalog-product-view .ff-pdp-info input[name="qty"] {
    height: 56px !important;
    padding: 0 12px !important;
    border: 1.5px solid #d2d2d7 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    text-align: center !important;
    transition: border-color 0.2s ease !important;
}
.ff-pdp-info__cta-row input[type="number"]:focus,
.ff-pdp-info__cta-row input.qty:focus,
body.catalog-product-view .ff-pdp-info input[name="qty"]:focus {
    border-color: var(--ff-blue, #00A3FF) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(0, 163, 255, 0.12) !important;
}

/* Add-to-Cart button — cap-and-grow primary CTA. `flex: 0 1 auto` + `max-width`
   so it grows to fit content + breathing room but never spans the full info
   column width (which previously made it look comically huge on wide viewports). */
.ff-pdp-info__cta-row button[type="submit"],
.ff-pdp-info__cta-row button.action.tocart,
.ff-pdp-info__cta-row #product-addtocart-button,
body.catalog-product-view .ff-pdp-info button.action.tocart,
body.catalog-product-view .ff-pdp-info #product-addtocart-button {
    flex: 1 1 280px !important;
    max-width: 360px !important;
    min-height: 52px !important;
    padding: 0 28px !important;
    background: #0a1929 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.18) !important;
    position: relative !important;
    overflow: visible !important;
    isolation: isolate;
}
.ff-pdp-info__cta-row button[type="submit"]:hover,
.ff-pdp-info__cta-row button.action.tocart:hover,
.ff-pdp-info__cta-row #product-addtocart-button:hover,
body.catalog-product-view .ff-pdp-info button.action.tocart:hover,
body.catalog-product-view .ff-pdp-info #product-addtocart-button:hover {
    background: var(--ff-blue, #00A3FF) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 22px rgba(0, 163, 255, 0.32) !important;
    outline: none !important;
}
/* Keyboard focus on the PDP main ATC button — same hover lift plus a
   high-contrast double-ring (2px white inner + 2px brand-blue outer)
   via box-shadow stacking. Single-color outline would be invisible on
   the brand-blue hover surface. This is the most-used CTA on the
   entire site (renders on every PDP), so a clear keyboard focus state
   matters disproportionately. */
.ff-pdp-info__cta-row button[type="submit"]:focus-visible,
.ff-pdp-info__cta-row button.action.tocart:focus-visible,
.ff-pdp-info__cta-row #product-addtocart-button:focus-visible,
body.catalog-product-view .ff-pdp-info button.action.tocart:focus-visible,
body.catalog-product-view .ff-pdp-info #product-addtocart-button:focus-visible {
    background: var(--ff-blue, #00A3FF) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 22px rgba(0, 163, 255, 0.32),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #00A3FF) !important;
    outline: none !important;
}
.ff-pdp-info__cta-row button[type="submit"]:active,
.ff-pdp-info__cta-row button.action.tocart:active,
.ff-pdp-info__cta-row #product-addtocart-button:active,
body.catalog-product-view .ff-pdp-info button.action.tocart:active,
body.catalog-product-view .ff-pdp-info #product-addtocart-button:active {
    transform: translateY(0) !important;
}

/* MOBILE: kill the giant ATC button on phones.
   --------------------------------------------------------------------
   The desktop rule above sets `flex: 1 1 280px` + `max-width: 360px` on
   the ATC button — fine on desktop where .ff-pdp-info__cta-row is
   row-flex. On ≤767px the row flips to flex-direction:column (see the
   earlier mobile media block ~19770), and `flex-basis: 280px` is then
   interpreted along the COLUMN axis = "be at least 280px TALL." That
   produced the ~350px-tall dark-navy square Treven reported as
   "insanely large and looks terrible." First fix attempt put this
   override inside the earlier media block but it lost the cascade
   battle to the desktop rule above (same specificity, later wins).
   Placing the override AFTER the desktop rule fixes that. */
@media (max-width: 767px) {
    .ff-pdp-info__cta-row button[type="submit"],
    .ff-pdp-info__cta-row button.action.tocart,
    .ff-pdp-info__cta-row #product-addtocart-button,
    body.catalog-product-view .ff-pdp-info button.action.tocart,
    body.catalog-product-view .ff-pdp-info #product-addtocart-button {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 56px !important;
        min-height: 56px !important;
    }
}

/* SHOW the Qty label visibly above the input on desktop. Hyvä's default
   gives it `class="sr-only"` (visually hidden); we override that here so
   the input is actually labeled. Treven flagged that the input was
   unclear without a visible label. */
@media (min-width: 768px) {
    body.catalog-product-view .ff-pdp-info .field.qty > label,
    body.catalog-product-view .ff-pdp-info [class*="qty"] > label,
    body.catalog-product-view .ff-pdp-info__cta-row label[for*="qty"] {
        position: static !important;
        clip: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 0 8px !important;
        white-space: normal !important;
        display: block !important;
        font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
        font-size: 0.6875rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.10em !important;
        color: #6e6e73 !important;
        text-align: center !important;
        font-variant: small-caps !important;
    }
    /* Display the literal "QTY" text in case the rendered label says
       "Quantity" or is empty. */
    body.catalog-product-view .ff-pdp-info .field.qty {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* Make the qty number unmissable: bigger font, clear color, white bg */
body.catalog-product-view .ff-pdp-info input[name="qty"],
body.catalog-product-view .ff-pdp-info input.qty,
body.catalog-product-view .ff-pdp-info input[type="number"] {
    color: #1d1d1f !important;
    background: #ffffff !important;
    text-align: center !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #1d1d1f !important;
    opacity: 1 !important;
}

/* Short description (lead-time / made-to-order info) IS shown in the info
   column — Treven 2026-05-28 explicitly wants it under the facts block.
   The earlier "cut-off / Show more toggle crowding the column" problem
   that prompted hiding it was fixed when the block was rebuilt (max-height
   clamp + white fade gradient + Show-more toggle all removed). Only the
   legacy `-wrap` wrapper stays hidden, in case a Magento/Hyvä default
   short-description duplicate renders; our `.ff-pdp-info__short-desc`
   block is now visible. */
body.catalog-product-view .ff-pdp-info__short-desc-wrap {
    display: none !important;
}

/* Wishlist + compare links inside CTA — softer, secondary */
body.catalog-product-view .ff-pdp-info .product-addto-links,
body.catalog-product-view .ff-pdp-info .product-social-links {
    display: flex !important;
    gap: 14px !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
body.catalog-product-view .ff-pdp-info .product-addto-links a,
body.catalog-product-view .ff-pdp-info .product-addto-links button,
body.catalog-product-view .ff-pdp-info .product-social-links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: transparent !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 9999px !important;
    color: #4d4d52 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
body.catalog-product-view .ff-pdp-info .product-addto-links a:hover,
body.catalog-product-view .ff-pdp-info .product-addto-links button:hover {
    border-color: var(--ff-blue, #00A3FF) !important;
    color: var(--ff-blue, #00A3FF) !important;
    background: rgba(0, 163, 255, 0.04) !important;
}

/* Stock pill — refined, subtle */
.ff-pdp-info__stock {
    margin: 4px 0 0 0 !important;
}
.ff-pdp-info__stock .stock,
.ff-pdp-info__stock .available {
    background: rgba(52, 199, 89, 0.10) !important;
    color: #008f3a !important;
    padding: 6px 12px !important;
    border-radius: 9999px !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    border: 1px solid rgba(52, 199, 89, 0.25) !important;
}
.ff-pdp-info__stock .stock::before,
.ff-pdp-info__stock .available::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #008f3a;
    margin-right: 6px;
    box-shadow: 0 0 0 3px rgba(0, 143, 58, 0.16);
}

/* Reviews stars block — subtle, italic-y */
.ff-pdp-info__reviews {
    margin: 0 0 -4px 0 !important;
    font-size: 0.875rem !important;
    color: #4d4d52 !important;
}
.ff-pdp-info__reviews a {
    color: #4d4d52 !important;
    text-decoration: none !important;
}
.ff-pdp-info__reviews a:hover {
    color: var(--ff-blue, #00A3FF) !important;
    text-decoration: underline !important;
}

/* Info column gap tighter for premium density */
.ff-pdp-info {
    gap: 14px !important;
}

/* Customizable options — labeled, clear */
body.catalog-product-view .product-options-wrapper,
body.catalog-product-view .fieldset.product-options-wrapper {
    margin: 8px 0 !important;
    padding: 16px 0 !important;
    border: none !important;
    border-top: 1px solid #e5e5e5 !important;
}
body.catalog-product-view .product-options-wrapper > .legend,
body.catalog-product-view .fieldset.product-options-wrapper > legend {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #1d1d1f !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    border: none !important;
}

body.catalog-product-view .product-options-wrapper .field {
    margin-bottom: 14px !important;
}
body.catalog-product-view .product-options-wrapper .field > .label,
body.catalog-product-view .product-options-wrapper .field > label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 6px 0 !important;
    display: block !important;
}

/* --- 6. Description / tabs section — premium clean ---
   The .product-info-main wraps several sibling blocks. The middle DIV is a 2-col grid
   that originally had empty right column. We collapse to single-col centered readable
   layout for premium magazine feel. */

/* Description / Specifications / Reviews — FULL VIEWPORT WIDTH on desktop.
   Treven's note: the previous 2-column grid (lg:grid-cols-2 from Hyvä) +
   1280 px cap was making the description look like the middle of a 3-col
   layout with empty gutters. Now: kill the 2-col grid (display: block),
   kill the 1280 px cap (max-width: none), let each section span full
   viewport with sensible side padding so content can breathe. */
body.catalog-product-view .product-info-main > div.grid {
    display: block !important;
    max-width: none !important;
    width: 100% !important;
    margin: 64px 0 0 !important;
    padding: 0 32px !important;
    border-top: 0 !important;
}

@media (min-width: 1280px) {
    body.catalog-product-view .product-info-main > div.grid {
        padding: 0 56px !important;
    }
}

body.catalog-product-view .product-info-main > div.grid > section,
body.catalog-product-view .product.info.detailed,
body.catalog-product-view .product-info-main > section[id="description"],
body.catalog-product-view .product-info-main > section[id="product.attributes"],
body.catalog-product-view .product-info-main > section[aria-label*="Reviews"] {
    max-width: none !important;
    width: 100% !important;
    margin: 0 0 48px !important;
    padding: 48px 0 0 !important;
    border-top: 1px solid #e5e5e5 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Description heading */
.ff-pdp-section-title,
body.catalog-product-view h2.product-info-detailed-title,
body.catalog-product-view section h2:first-child {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.005em !important;
    color: #1d1d1f !important;
    margin: 0 0 24px 0 !important;
}

/* Description body — premium typography */
body.catalog-product-view .product.attribute.description,
body.catalog-product-view .product.attribute.overview,
body.catalog-product-view [data-content-type="text"] {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
    color: #1d1d1f !important;
}

body.catalog-product-view .product.attribute.description p,
body.catalog-product-view .product.attribute.overview p {
    margin: 0 0 16px 0 !important;
}

body.catalog-product-view .product.attribute.description h2,
body.catalog-product-view .product.attribute.description h3 {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    text-transform: uppercase !important;
    letter-spacing: -0.005em !important;
    margin: 32px 0 14px 0 !important;
}
body.catalog-product-view .product.attribute.description h2 { font-size: 1.5rem !important; }
body.catalog-product-view .product.attribute.description h3 { font-size: 1.25rem !important; }

body.catalog-product-view .product.attribute.description img {
    border-radius: 12px !important;
    margin: 20px 0 !important;
    max-width: 100% !important;
    height: auto !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

body.catalog-product-view .product.attribute.description ul,
body.catalog-product-view .product.attribute.description ol {
    margin: 0 0 16px 24px !important;
    padding: 0 !important;
}
body.catalog-product-view .product.attribute.description li {
    margin-bottom: 6px !important;
}

/* Description blockquote — accent style */
body.catalog-product-view .product.attribute.description blockquote {
    border-left: 4px solid #0071e3 !important;
    padding: 4px 0 4px 24px !important;
    margin: 24px 0 !important;
    font-size: 1.125rem !important;
    font-style: italic !important;
    color: #1d1d1f !important;
}

/* --- 7. Mobile-specific tweaks --- */
@media (max-width: 1023px) {
    body.catalog-product-view .product-info-main > section:first-of-type {
        gap: 24px !important;
    }
    /* Disable sticky on mobile so user scrolls naturally */
    body.catalog-product-view .product-info-main > section:first-of-type > *:first-child {
        position: static !important;
        top: auto !important;
    }
}

/* ============================================================
   END PDP OVERHAUL
   ============================================================ */

/* ============================================================
   PDP BOTTOM TABS — Description / Specifications / Reviews
   Built dynamically by ff-pdp-tabs.js. Premium underline-style
   tab bar with smooth panel switching.
   ============================================================ */

body.catalog-product-view .ff-pdp-tabs {
    /* Full-width on desktop — match column.main's 1760/1920px caps so
       the description / specs / reviews tab area spans the whole layout
       instead of being a narrow centered strip. Internal text gets a
       comfortable readability width via `.ff-pdp-tabs__panel p/li` rules
       below. */
    margin: 80px 0 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

body.catalog-product-view .ff-pdp-tabs__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid #d2d2d7;
    margin: 0 0 32px;
    padding: 0;
    overflow-x: auto;
}

body.catalog-product-view .ff-pdp-tabs__tab {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 16px 28px;
    margin: 0 0 -1px 0;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6e6e73;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    position: relative;
    white-space: nowrap;
}

body.catalog-product-view .ff-pdp-tabs__tab:hover {
    color: #1d1d1f;
}

body.catalog-product-view .ff-pdp-tabs__tab.is-active,
body.catalog-product-view .ff-pdp-tabs__tab[aria-selected="true"] {
    color: #1d1d1f;
    border-bottom-color: var(--ff-blue, #00A3FF);
}

body.catalog-product-view .ff-pdp-tabs__tab:focus-visible {
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 2px;
    border-radius: 4px;
}

body.catalog-product-view .ff-pdp-tabs__panels {
    padding: 0;
    margin: 0;
}

body.catalog-product-view .ff-pdp-tabs__panel {
    padding: 16px 0 0;
    margin: 0;
    animation: ff-pdp-tabs-fade 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.catalog-product-view .ff-pdp-tabs__panel[hidden] {
    display: none !important;
}

@keyframes ff-pdp-tabs-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tab-switch panel fade-in respects reduced-motion. The 350ms
   slide-and-fade is decorative — content swap should still feel
   instant when reduce-motion is on. Same single-source-of-truth
   as the other animation guards (cart-badge, smart-pulse,
   tracker-pulse, hero title underline, spark-border). */
@media (prefers-reduced-motion: reduce) {
    body.catalog-product-view .ff-pdp-tabs__panel {
        animation: none !important;
    }
}

/* Inside each panel, the section's redundant H2 — the tab label already
   names what this is. Keep it visible but tone it down. */
body.catalog-product-view .ff-pdp-tabs__panel > * > h2:first-child,
body.catalog-product-view .ff-pdp-tabs__panel > * > h3:first-child,
body.catalog-product-view .ff-pdp-tabs__panel > section > h2:first-child {
    margin-top: 0 !important;
    font-size: 1.5rem !important;
    color: #1d1d1f !important;
}

/* Reset the OLD `.product-info-main > div.grid { max-width: 880px }` rule
   ONLY for sections that the tabs JS has moved into a panel. We target
   the panel + its direct `<section>` children, NOT every nested element
   (we don't want to break Magento Page Builder's flex/grid columns
   inside the description). */
body.catalog-product-view .ff-pdp-tabs__panel > section {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
}

/* Card wrapper inside description sections — Hyvä uses .card for the
   prose container. Strip its inline padding so content goes full bleed. */
body.catalog-product-view .ff-pdp-tabs__panel .card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Description text typography — bigger + more confident on desktop */
body.catalog-product-view .ff-pdp-tabs__panel .product.attribute.description,
body.catalog-product-view .ff-pdp-tabs__panel .product.attribute.overview,
body.catalog-product-view .ff-pdp-tabs__panel [data-content-type="text"] {
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
    color: #1d1d1f !important;
}

@media (min-width: 1280px) {
    body.catalog-product-view .ff-pdp-tabs__panel .product.attribute.description,
    body.catalog-product-view .ff-pdp-tabs__panel .product.attribute.overview {
        font-size: 1.125rem !important;
        line-height: 1.75 !important;
    }
}

/* Specs / attributes table — full panel width. Premium spec-sheet feel. */
body.catalog-product-view .ff-pdp-tabs__panel table.additional-attributes,
body.catalog-product-view .ff-pdp-tabs__panel table {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 0 32px !important;
    border-collapse: collapse !important;
    font-size: 1rem !important;
}
body.catalog-product-view .ff-pdp-tabs__panel table th,
body.catalog-product-view .ff-pdp-tabs__panel table td {
    padding: 14px 18px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    text-align: left !important;
}
body.catalog-product-view .ff-pdp-tabs__panel table th {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    color: #6e6e73 !important;
    width: 32% !important;
    background: transparent !important;
}
body.catalog-product-view .ff-pdp-tabs__panel table td {
    color: #1d1d1f !important;
    font-weight: 500 !important;
}

/* Stop the description / Smart Picks / reviews from crashing into the
   footer. Generous bottom padding on column.main below the gallery
   makes sure the last visible content has breathing room. */
body.catalog-product-view .column.main {
    padding-bottom: 120px !important;
}
@media (min-width: 1280px) {
    body.catalog-product-view .column.main {
        padding-bottom: 160px !important;
    }
}


/* ============================================================
   PDP — SMART PICKS (AI-recommended related products)
   Renders Magento's native Related Products with premium
   "Smart Picks" branding. Backend AI engine: TODO (currently
   uses admin-configured related products as the data source).
   ============================================================ */

body.catalog-product-view .ff-smart-picks {
    margin: 80px auto 0 !important;
    padding: 0 !important;
    max-width: 1760px;
    width: 100%;
}

body.catalog-product-view .ff-smart-picks__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 32px;
    padding: 0 32px;
}

body.catalog-product-view .ff-smart-picks__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ff-blue, #00A3FF);
    margin: 0;
}

body.catalog-product-view .ff-smart-picks__eyebrow::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ff-blue, #00A3FF);
    box-shadow: 0 0 0 4px rgba(0, 163, 255, 0.18);
    animation: ff-smart-pulse 2.4s ease-in-out infinite;
}

@keyframes ff-smart-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 163, 255, 0.18); }
    50%      { box-shadow: 0 0 0 7px rgba(0, 163, 255, 0.06); }
}

/* Disable the Smart Picks eyebrow dot pulse for vestibular-sensitive
   users. The dot still appears as a static brand-blue circle with a
   soft halo — just no breathing. Companion to the same guard for the
   hero title underline (commit 22e430ef). */
@media (prefers-reduced-motion: reduce) {
    body.catalog-product-view .ff-smart-picks__eyebrow::before {
        animation: none !important;
    }
}

body.catalog-product-view .ff-smart-picks__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: clamp(1.75rem, 2.4vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
    color: #1d1d1f;
    margin: 0;
}

body.catalog-product-view .ff-smart-picks__subtitle {
    font-size: 1rem;
    color: #4d4d52;
    margin: 0;
}

body.catalog-product-view .ff-smart-picks__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    padding: 0 32px;
}

@media (min-width: 1024px) {
    body.catalog-product-view .ff-smart-picks__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
}

body.catalog-product-view .ff-smart-picks__card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 20px;
    text-decoration: none !important;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.35s ease;
    overflow: visible;
}

body.catalog-product-view .ff-smart-picks__card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 163, 255, 0.28);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08),
                0 4px 12px rgba(0, 163, 255, 0.06);
    outline: none;
}
body.catalog-product-view .ff-smart-picks__card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(0, 163, 255, 0.28);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08),
                0 4px 12px rgba(0, 163, 255, 0.06);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}

body.catalog-product-view .ff-smart-picks__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--ff-card-angle),
        transparent 0%,
        transparent 50%,
        var(--ff-card-line-color) 62%,
        var(--ff-card-line-color) 68%,
        transparent 78%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}
body.catalog-product-view .ff-smart-picks__card:hover::before,
body.catalog-product-view .ff-smart-picks__card:focus-visible::before {
    opacity: 1;
    animation: ff-card-spin 3.2s linear infinite,
               ff-card-color-cycle 4s ease-in-out infinite;
}

body.catalog-product-view .ff-smart-picks__match {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 163, 255, 0.10);
    color: var(--ff-blue, #00A3FF);
    border: 1px solid rgba(0, 163, 255, 0.25);
    border-radius: 9999px;
    padding: 4px 10px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

body.catalog-product-view .ff-smart-picks__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    margin: 0 auto 16px;
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.10));
}

body.catalog-product-view .ff-smart-picks__name {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 6px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    /* Clamp long names like "1911 RECOIL SPRING 4 PACK FOR 5&6 INCH
       PISTOLS - STAINLESS STEEL, HIGHER CALIBERS" to 2 lines so they
       don't break the carousel grid alignment vs shorter neighbors.
       min-height reserves 2-line space so 1-line titles still leave
       the price + reason on consistent y across cards. Matches the
       Recently Viewed cards on the same PDP. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
    word-break: break-word;
}

body.catalog-product-view .ff-smart-picks__reason {
    font-size: 0.8125rem;
    color: #6e6e73;
    margin: 0 0 12px;
    line-height: 1.4;
}

body.catalog-product-view .ff-smart-picks__price {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: auto 0 0;
}

/* ============================================================
   PRE-ORDER labelling — Amasty pre-order products (PRO-200)
   Brand blue→red treatment (the site's signature --ff-gradient-blue-red)
   so a pre-order reads as a premium, custom, on-brand state — never a plain
   in-stock product. Used by:
     - PDP stock pill   .ff-preorder-status  (product/view/stock-status.phtml)
     - category badge   .ff-preorder-badge   (product/list/item.phtml)
     - buy button       .ff-preorder-btn     (PDP addtocart.phtml + card item.phtml)
   ============================================================ */
/* PDP availability — a gradient chip, not the green/blue in-stock dot. */
.ff-preorder-status {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: var(--ff-gradient-blue-red, linear-gradient(135deg, #00A3FF, #FF2D2D));
    color: #ffffff !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    border-radius: 9999px;
    box-shadow: 0 2px 10px rgba(255, 45, 45, 0.18);
}
/* Drop the inherited status dot — the gradient chip IS the indicator. */
.ff-preorder-status::before {
    display: none !important;
}

.ff-preorder-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: var(--ff-gradient-blue-red, linear-gradient(135deg, #00A3FF, #FF2D2D));
    color: #ffffff;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(255, 45, 45, 0.25);
    pointer-events: none;
}

/* Pre-order buy button — brand blue→red gradient so the "reserve yours" action
   pops vs the navy in-stock Add to Cart. Applies on PDP + category cards. */
.ff-preorder-btn,
button.ff-preorder-btn {
    background: var(--ff-gradient-blue-red, linear-gradient(135deg, #00A3FF, #FF2D2D)) !important;
    border: none !important;
    color: #ffffff !important;
    transition: filter 0.2s var(--ff-ease, ease), transform 0.2s var(--ff-ease, ease) !important;
}
.ff-preorder-btn:hover:not(:disabled),
button.ff-preorder-btn:hover:not(:disabled) {
    filter: brightness(1.07) !important;
    transform: translateY(-1px) !important;
}


/* ============================================================
   CART — PERFECT ADD-ONS (AI-recommended cross-sells)
   Same Smart-Picks visual language, scoped to cart page.
   Backend AI engine: TODO. Currently driven by admin-configured
   cross-sells from Magento's catalog.
   ============================================================ */

body.checkout-cart-index .ff-cart-addons {
    margin: 48px 0 0 !important;
    padding: 32px;
    background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%);
    border: 1px solid #e5e5e5;
    border-radius: 20px;
}

body.checkout-cart-index .ff-cart-addons__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 24px;
}

body.checkout-cart-index .ff-cart-addons__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ff-blue, #00A3FF);
    margin: 0;
}

body.checkout-cart-index .ff-cart-addons__eyebrow::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ff-blue, #00A3FF);
    box-shadow: 0 0 0 4px rgba(0, 163, 255, 0.18);
    animation: ff-smart-pulse 2.4s ease-in-out infinite;
}

body.checkout-cart-index .ff-cart-addons__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: #1d1d1f;
    margin: 0;
}

body.checkout-cart-index .ff-cart-addons__subtitle {
    font-size: 0.9375rem;
    color: #4d4d52;
    margin: 0;
}

body.checkout-cart-index .ff-cart-addons__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.checkout-cart-index .ff-cart-addons__item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 12px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.checkout-cart-index .ff-cart-addons__item:hover {
    border-color: rgba(0, 163, 255, 0.32);
    box-shadow: 0 4px 16px rgba(0, 163, 255, 0.06);
}

body.checkout-cart-index .ff-cart-addons__item-img {
    /* Was a white→#f4f6fa radial gradient, which violates the brand
       spec ("Product photos always sit on PURE WHITE backdrops. No
       grey boxes, no gradient panels"). Switched to flat white + a
       1px hairline border so the 64×64 thumb still reads as a tile
       on the white cart-addons surface. Mirrors the cart-drawer
       item thumb fix from commit 70ef936b. */
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 10px;
    padding: 6px;
}

body.checkout-cart-index .ff-cart-addons__item-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.checkout-cart-index .ff-cart-addons__item-name {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1d1d1f;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.checkout-cart-index .ff-cart-addons__item-reason {
    font-size: 0.75rem;
    color: #6e6e73;
    margin: 0;
}

body.checkout-cart-index .ff-cart-addons__item-price {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 8px 0 0;
    flex: 0 0 auto;
}

body.checkout-cart-index .ff-cart-addons__item-add {
    flex: 0 0 auto;
    background: #0a1929;
    color: #ffffff;
    border: 0;
    border-radius: 9999px;
    padding: 8px 16px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
body.checkout-cart-index .ff-cart-addons__item-add:hover {
    background: var(--ff-blue, #00A3FF);
    transform: translateY(-1px);
}

/* ============================================================
   END SMART PICKS / CART ADD-ONS
   ============================================================ */

/* ============================================================
   FOOTER — PREMIUM REDESIGN (BEM .ff-footer__*)
   Replaces the older .ff-footer-* rules. Five-col desktop grid:
   Brand | Shop | Services | Dealer Program | Help & Contact.
   Dark canvas, confident type, tactile hover states.
   ============================================================ */

/* Hard-code dark navy here — `--ff-bg-footer` is `#f5f5f7` (light grey)
   site-wide and we don't want to flip that for everything else. */
.ff-footer {
    background: #0a1929 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0;
}

/* Magento renders a default `<footer class="page-footer">` wrapper around our
   custom `<footer class="ff-footer">`. Strip its background + padding so we
   only ever see one footer (ours), and zap any stray Magento footer-content
   children (e.g. the lone "Video Vault" link CMS block we no longer want). */
footer.page-footer {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
footer.page-footer > .footer.content {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    border: 0 !important;
}
/* Hide the orphan `<li>` / footer-block links Magento prepends before our
   custom footer markup — the .ff-footer carries all our nav links now. */
footer.page-footer > .footer.content > li,
footer.page-footer > .footer.content > ul,
footer.page-footer > .footer.content > .block-title {
    display: none !important;
}

.ff-footer__inner {
    max-width: 1760px;
    margin: 0 auto;
    padding: 64px 32px 48px;
}

@media (min-width: 1280px) {
    .ff-footer__inner { padding: 80px 56px 56px; }
}

.ff-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr 1.2fr;
    gap: 48px;
}

@media (max-width: 1023px) {
    .ff-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .ff-footer__brand { grid-column: span 2; }
}

@media (max-width: 600px) {
    .ff-footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .ff-footer__brand { grid-column: span 1; }
}

/* --- Brand column --- */
.ff-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 380px;
}

/* Footer brand lockup — diamond + "FUSION FIREARMS" wordmark, sized to
   fit comfortably inside the 380px brand column. Inherits the
   .ff-brand-lockup base (display: inline-flex, gap, hover scale + glow),
   then adjusts dimensions for the footer context: smaller diamond than
   the 96px standalone version this replaces, wordmark sized to balance.
   The wordmark stays visible at every breakpoint here (unlike the
   header where it hides on mobile) because the footer brand column has
   plenty of horizontal room. */
.ff-footer__logo {
    align-self: flex-start;
    /* Override .ff-brand-lockup height: 100% (intended for header row);
       in the footer the lockup sits inside a flex column, not a header
       row, so unset it. */
    height: auto !important;
    padding: 0 !important;
}

.ff-brand-lockup--footer .ff-brand-lockup__diamond {
    height: 56px !important;
    max-height: 56px !important;
    min-height: 56px !important;
}

.ff-brand-lockup--footer .ff-brand-lockup__wordmark {
    font-size: 1.125rem !important;
    letter-spacing: 0.2em !important;
    color: #ffffff !important;
}

/* Mobile: the header hides the wordmark via `.page-header
   .ff-brand-lockup__wordmark { display: none }` at ≤540px. That selector
   is page-header-scoped so it doesn't affect the footer. Keep both
   diamond + text visible in the footer at all sizes — but tighten gap
   and shrink slightly on the smallest viewports so it doesn't push the
   tagline. */
@media (max-width: 540px) {
    .ff-brand-lockup--footer {
        gap: 12px !important;
    }
    .ff-brand-lockup--footer .ff-brand-lockup__diamond {
        height: 48px !important;
        max-height: 48px !important;
        min-height: 48px !important;
    }
    .ff-brand-lockup--footer .ff-brand-lockup__wordmark {
        font-size: 1rem !important;
        letter-spacing: 0.18em !important;
        display: inline-flex !important;
    }
}

.ff-footer__tagline {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.ff-footer__trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.ff-footer__trust li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, 0.85);
}

.ff-footer__trust li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ff-blue, #00A3FF);
    box-shadow: 0 0 0 3px rgba(0, 163, 255, 0.18);
}

/* --- Social icons --- */
.ff-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.ff-footer__social-link {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.25s ease;
}

.ff-footer__social-link svg {
    width: 18px;
    height: 18px;
    display: block;
}

.ff-footer__social-link:hover {
    background: var(--ff-blue, #00A3FF);
    border-color: var(--ff-blue, #00A3FF);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 163, 255, 0.35);
    outline: none;
}
.ff-footer__social-link:focus-visible {
    background: var(--ff-blue, #00A3FF);
    border-color: var(--ff-blue, #00A3FF);
    color: #ffffff;
    transform: translateY(-2px);
    /* Double-ring (white inner + brand-blue outer) since the focus
       surface is brand-blue. Footer bg is dark navy so the brand-blue
       outer ring is visible against the page bg. */
    box-shadow: 0 6px 18px rgba(0, 163, 255, 0.35),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #00A3FF);
    outline: none;
}

/* --- Link columns --- */
.ff-footer__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ff-footer__col--featured .ff-footer__heading {
    color: var(--ff-blue, #00A3FF);
}

.ff-footer__col-blurb {
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.ff-footer__heading {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #ffffff;
    margin: 0;
}

.ff-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ff-footer__link {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.9375rem;
    line-height: 1.4;
    text-decoration: none !important;
    transition: color 0.2s ease, padding-left 0.25s ease;
    display: inline-block;
}

.ff-footer__link:hover {
    color: #ffffff !important;
    padding-left: 4px;
    outline: none;
}

/* Keyboard focus on footer nav links — keyboard users tabbing
   through footer columns need a clearer indicator than the subtle
   65%→100% white color shift on the navy footer. 2px brand-blue
   outline ring with 3px offset is visible against the dark
   background; 3px border-radius rounds the corners cleanly. */
.ff-footer__link:focus-visible {
    color: #ffffff !important;
    padding-left: 4px;
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 3px;
    border-radius: 3px;
}

.ff-footer__link--accent {
    color: #ff6b6b !important;
    font-weight: 600;
}

.ff-footer__link--strong {
    color: var(--ff-blue, #00A3FF) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
}

.ff-footer__link--strong:hover {
    color: #66c4ff !important;
    outline: none;
}

.ff-footer__link--strong:focus-visible {
    color: #66c4ff !important;
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 3px;
    border-radius: 3px;
}

/* --- Contact (inside Help column) --- */
.ff-footer__contact {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ff-footer__contact-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.9375rem;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.ff-footer__contact-row:hover {
    color: #ffffff !important;
    outline: none;
}
.ff-footer__contact-row:focus-visible {
    color: #ffffff !important;
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 3px;
    border-radius: 4px;
}
.ff-footer__contact-row--static { cursor: default; }

.ff-footer__contact-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--ff-blue, #00A3FF);
}

/* --- Bottom bar --- */
.ff-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
}

.ff-footer__bottom-inner {
    max-width: 1760px;
    margin: 0 auto;
    padding: 18px 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

@media (min-width: 1280px) {
    .ff-footer__bottom-inner { padding: 18px 56px; }
}

.ff-footer__copyright {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}

.ff-footer__legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
}
.ff-footer__legal a { font-size: 0.8125rem; }

.ff-footer__payments {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Payment-method badges — credit-card styled.
   Each li renders as a small white "card" with a brand-color top stripe
   (the universal recognition cue from real credit cards), and the word-
   mark in proper brand-correct case on white. Replaces the previous
   ALL-CAPS bordered text labels which looked like dev placeholders. */
.ff-footer__payments .ff-pay {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 56px;
    padding: 0 10px 0 10px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ff-footer__payments .ff-pay:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

/* Brand-color top stripe — the universal credit-card recognition cue.
   3px tall, full-width, sits flush at the top edge of the white card. */
.ff-footer__payments .ff-pay__stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    pointer-events: none;
}

/* Word-mark — clean Inter italic for credit-card vibe. */
.ff-footer__payments .ff-pay__mark {
    margin-top: 3px; /* clear the stripe */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0;
    color: #0a1929;
    line-height: 1;
    white-space: nowrap;
}

/* Brand color stripes — real card-issuer colors. */
.ff-pay--visa .ff-pay__stripe   { background: #1A1F71; } /* Visa navy */
.ff-pay--mc .ff-pay__stripe     { background: linear-gradient(90deg, #EB001B 50%, #F79E1B 50%); } /* MC red+yellow */
.ff-pay--amex .ff-pay__stripe   { background: #006FCF; } /* Amex blue */
.ff-pay--disc .ff-pay__stripe   { background: #FF6000; } /* Discover orange */
.ff-pay--sezzle .ff-pay__stripe { background: #6E73DC; } /* Sezzle purple-blue */

/* Brand-color word-mark colors — match real card issuer brand colors
   so even at a glance the badge is recognizable. */
.ff-pay--visa .ff-pay__mark    { color: #1A1F71; }
.ff-pay--mc .ff-pay__mark      { color: #0a1929; }
.ff-pay--amex .ff-pay__mark    { color: #006FCF; }
.ff-pay--disc .ff-pay__mark    { color: #FF6000; }
.ff-pay--sezzle .ff-pay__mark  { color: #6E73DC; }

@media (max-width: 768px) {
    .ff-footer__bottom-inner { justify-content: flex-start; }
    .ff-footer__legal { order: 3; }
    .ff-footer__payments { order: 2; }
}


/* ============================================================
   SITEWIDE SOCIAL RAIL — sticky vertical rail, always visible
   on desktop. Three icons centered against the left edge.
   Hidden on tablet/mobile (footer covers it there).
   ============================================================ */

.ff-social-rail {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.ff-social-rail__link {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(10, 25, 41, 0.90);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}

.ff-social-rail__link svg {
    width: 16px;
    height: 16px;
    display: block;
}

.ff-social-rail__link:hover {
    background: var(--ff-blue, #00A3FF);
    border-color: var(--ff-blue, #00A3FF);
    color: #ffffff;
    transform: translateX(2px);
    box-shadow: 0 8px 22px rgba(0, 163, 255, 0.35);
}

/* Keyboard focus on the sticky social rail (desktop ≥1280px, present on
   every page). Same hover treatment plus high-contrast double-ring (2px
   white inner + 2px brand-blue outer) since the focus surface is brand-
   blue. Same pattern as the footer social links. */
.ff-social-rail__link:focus-visible {
    background: var(--ff-blue, #00A3FF);
    border-color: var(--ff-blue, #00A3FF);
    color: #ffffff;
    transform: translateX(2px);
    box-shadow: 0 8px 22px rgba(0, 163, 255, 0.35),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #00A3FF);
    outline: none;
}

@media (max-width: 1279px) {
    .ff-social-rail { display: none; }
}


/* ============================================================
   DEALER PROGRAM — landing page + signup form
   Premium dark canvas, hero, benefits grid, application form
   with FFL upload field.
   ============================================================ */

/* Dealer route: force the page wrapper to span full width so our hero and
   form sections aren't squeezed by Magento's default column constraints. */
body.dealer-index-index .columns,
body.dealer-index-index .column.main,
body.dealer-index-index .page-main,
body.dealer-apply-index .columns,
body.dealer-apply-index .column.main,
body.dealer-apply-index .page-main,
body.dealer-apply-thanks .columns,
body.dealer-apply-thanks .column.main,
body.dealer-apply-thanks .page-main {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ff-dealer-hero {
    background: linear-gradient(180deg, #0a1929 0%, #0f1f2e 100%);
    color: #ffffff;
    padding: 96px 32px;
    text-align: center;
}

.ff-dealer-hero__inner {
    max-width: 920px;
    margin: 0 auto;
}

/* Eyebrow — bumped to 0.95rem with a leading dot indicator so it reads as
   a confident program label, not a forgotten subtitle. */
.ff-dealer-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.95rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #66c4ff !important;
    margin: 0 0 24px;
    padding: 8px 18px;
    background: rgba(0, 163, 255, 0.10);
    border: 1px solid rgba(0, 163, 255, 0.32);
    border-radius: 9999px;
}

.ff-dealer-hero__eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ff-blue, #00A3FF);
    box-shadow: 0 0 0 4px rgba(0, 163, 255, 0.20);
}

/* Hero title — explicit white wins over the site-wide `h1 { color: #1d1d1f }` */
.ff-dealer-hero__title,
body.dealer-index-index .ff-dealer-hero__title,
body.dealer-apply-index .ff-dealer-hero__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.018em !important;
    color: #ffffff !important;
    margin: 0 0 20px !important;
}

.ff-dealer-hero__subtitle {
    font-size: 1.25rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 auto !important;
    max-width: 640px;
}

/* Benefits + form titles also need to beat the site-wide h2 rule */
body.dealer-index-index .ff-dealer-benefits__title,
body.dealer-apply-index .ff-dealer-benefits__title {
    color: #1d1d1f !important;
}
body.dealer-index-index .ff-dealer-form__title,
body.dealer-apply-index .ff-dealer-form__title {
    color: #1d1d1f !important;
}
body.dealer-index-index .ff-dealer-benefit__title,
body.dealer-apply-index .ff-dealer-benefit__title {
    color: #1d1d1f !important;
}

/* Contact page reuses the dealer hero/form classes (Treven 2026-05-28:
   "mirror the dealer signup page"). Ensure the form title beats the
   site-wide h2 color on the contact body, and give the inline "(optional)"
   hint on the phone label a quiet lowercase treatment instead of the
   label's uppercase Oswald. */
body.contact-index-index .ff-dealer-form__title,
body.contact-index-index .ff-dealer-benefits__title,
body.contact-index-index .ff-dealer-benefit__title {
    color: #1d1d1f !important;
}

/* "Contact Us" page title renders as the white bar above the dark hero,
   mirroring the dealer page's "Become a Fusion Dealer" bar. Inset it from
   the edge so it doesn't sit flush once the main is un-boxed. */
body.contact-index-index .page-title-wrapper {
    padding: 28px 32px 4px !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Full-bleed the hero + cards + form sections regardless of the container's
   max-width. This is a no-op when the main is already full-width (the
   calc margins resolve to ~0) and breaks the sections out to the viewport
   when the main is still boxed. Desktop has no overflow-x clip ancestor so
   100vw is safe; on mobile the html/body overflow-x:clip guard absorbs the
   scrollbar-width overflow. */
body.contact-index-index .ff-contact-hero,
body.contact-index-index .ff-contact-benefits,
body.contact-index-index .ff-contact-form-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}
.ff-dealer-form__optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
    color: #6e6e73;
}

/* Contact page must be FULL-BLEED like the dealer page (Treven 2026-05-28:
   "this should be full width on desktop and on mobile it is not aligned
   right"). The default .page-main > .columns > .column.main constrains the
   content to ~960px and centers it, which left the dark hero in a box on
   desktop and pushed it off-center on mobile. Same un-boxing the homepage
   uses (.cms-index-index .page-main / .columns / .column.main) so the hero
   + form sections span the full viewport; their inner wrappers keep their
   own max-width centering. */
.contact-index-index .page-main,
.contact-index-index .columns,
.contact-index-index.page-layout-1column .columns,
.contact-index-index .column.main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

.ff-dealer-benefits {
    background: #f5f5f7;
    padding: 64px 32px;
}

.ff-dealer-benefits__inner {
    max-width: 1280px;
    margin: 0 auto;
}

.ff-dealer-benefits__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    text-align: center;
    margin: 0 0 32px;
    color: #1d1d1f;
}

.ff-dealer-benefits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.ff-dealer-benefit {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ff-dealer-benefit__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 163, 255, 0.10);
    color: var(--ff-blue, #00A3FF);
}

.ff-dealer-benefit__icon svg { width: 22px; height: 22px; }

.ff-dealer-benefit__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.0625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: #1d1d1f;
    margin: 0;
}

.ff-dealer-benefit__desc {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #4d4d52;
    margin: 0;
}

/* --- Dealer application form --- */
.ff-dealer-form {
    background: #ffffff;
    padding: 64px 32px 96px;
}

.ff-dealer-form__inner {
    max-width: 760px;
    margin: 0 auto;
}

.ff-dealer-form__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: #1d1d1f;
    margin: 0 0 8px;
    text-align: center;
}

.ff-dealer-form__subtitle {
    font-size: 1rem;
    color: #4d4d52;
    text-align: center;
    margin: 0 0 32px;
}

.ff-dealer-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}

.ff-dealer-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ff-dealer-form__field--full { grid-column: 1 / -1; }

@media (max-width: 600px) {
    .ff-dealer-form__grid { grid-template-columns: 1fr; }
}

.ff-dealer-form__label {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #1d1d1f;
}

.ff-dealer-form__label-required::after {
    content: ' *';
    color: #d70101;
}

.ff-dealer-form__input,
.ff-dealer-form__textarea,
.ff-dealer-form__file {
    font-family: inherit;
    font-size: 1rem;
    padding: 12px 14px;
    border: 1.5px solid #d2d2d7;
    border-radius: 10px;
    background: #ffffff;
    color: #1d1d1f;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.ff-dealer-form__textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.ff-dealer-form__input:focus,
.ff-dealer-form__textarea:focus,
.ff-dealer-form__file:focus {
    border-color: var(--ff-blue, #00A3FF);
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 163, 255, 0.12);
}

.ff-dealer-form__hint {
    font-size: 0.8125rem;
    color: #6e6e73;
    margin: 0;
}

.ff-dealer-form__submit {
    grid-column: 1 / -1;
    margin: 16px 0 0;
    background: #0a1929;
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    padding: 18px 32px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.20);
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.ff-dealer-form__submit:hover {
    background: var(--ff-blue, #00A3FF);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 163, 255, 0.32);
    outline: none;
}

/* Keyboard focus on /become-a-dealer/ "Submit Application" button —
   same brand-blue lift as hover plus a 2px white outline ring
   (visible on the brand-blue filled button) with 3px offset.
   Continues focus-visible audit pattern across all form submit
   buttons (login / forgot / contact / newsletter / dealer). */
.ff-dealer-form__submit:focus-visible {
    background: var(--ff-blue, #00A3FF);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 163, 255, 0.32);
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Service / contact form section headings — match form-label uppercase
   pattern but at heading scale, with a tinted underline divider.
   Used by the .ff-dealer-form__grid layout to group fields by section. */
.ff-dealer-form__section-title {
    grid-column: 1 / -1;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1d1d1f;
    margin: 16px 0 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e5e7;
}
.ff-dealer-form__section-title:first-of-type {
    margin-top: 0;
}

/* Form intro header — wraps the h1 + subtitle above the form fields */
.ff-dealer-form__header {
    margin-bottom: 24px;
}

/* "Our promise" callout — soft brand-blue tint with left accent bar.
   Used to communicate Fusion's customer-first commitment messaging
   (e.g. "If it's our mistake, you pay nothing"). */
.ff-dealer-form__notice {
    background: rgba(0, 163, 255, 0.06);
    border: 1px solid rgba(0, 163, 255, 0.18);
    border-left: 3px solid var(--ff-blue, #00A3FF);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 0 0 32px;
    color: #1d1d1f;
    font-size: 0.9375rem;
    line-height: 1.55;
}
.ff-dealer-form__notice p {
    margin: 0 0 8px;
}
.ff-dealer-form__notice p:last-child {
    margin: 0;
}
.ff-dealer-form__notice strong {
    color: #0a1929;
}

/* Radio button option label — used inside a radio group, overrides
   the default .ff-dealer-form__label uppercase/heading styling so
   each option reads as natural body text. Used by Service Request
   and other forms with Yes/No or multi-choice questions. */
.ff-dealer-form__radio-option {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 24px;
    color: #1d1d1f;
    cursor: pointer;
}
.ff-dealer-form__radio-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

/* Warranty picker — card grid for logged-in customers' past purchases.
   Each card is a button so keyboard nav + screen readers treat it as a
   proper interactive element. The whole grid hides once a card is clicked
   (Alpine x-show in landing.phtml). */
.ff-warranty-picker {
    margin-bottom: 32px;
}
.ff-warranty-picker__group h3 {
    font-family: var(--ff-font-heading);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6e6e73;
    margin: 24px 0 12px;
}
.ff-warranty-picker__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.ff-warranty-picker__card {
    background: #fff;
    border: 1.5px solid #e5e5e7;
    border-radius: 14px;
    padding: 18px 22px;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s;

    /* Side-by-side layout: 64px thumbnail + flexible text column.
       The image spans every text row via grid-row 1 / -1, so the
       order of children inside <button> stays {img, sku, name, meta,
       price, select} for natural reading order. */
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 16px;
    align-items: center;
}
.ff-warranty-picker__card:hover,
.ff-warranty-picker__card:focus-visible {
    border-color: var(--ff-blue, #00A3FF);
    background: rgba(0, 163, 255, 0.04);
    transform: translateY(-1px);
    outline: none;
}
.ff-warranty-picker__card:focus-visible {
    box-shadow: 0 0 0 4px rgba(0, 163, 255, 0.18);
}
@media (prefers-reduced-motion: reduce) {
    .ff-warranty-picker__card,
    .ff-warranty-picker__card:hover,
    .ff-warranty-picker__card:focus-visible {
        transition: none;
        transform: none;
    }
}

/* Thumbnail. Pinned to the first column and spans every text row so
   the picture sits centered against the stacked content on the right.
   Pure white inner card matches the brand's "products always sit on
   white" rule from the polish playbook; subtle padding stops product
   photos from kissing the border. */
.ff-warranty-picker__image {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    object-fit: contain;
    padding: 4px;
    align-self: center;
}
/* Placeholder shown when the catalog product has no small_image set.
   Soft gradient + a centered "image not available" hint so the tile
   doesn't look broken — matches Apple's no-image picker pattern. */
.ff-warranty-picker__image--placeholder {
    background:
        linear-gradient(135deg, rgba(0, 163, 255, 0.06), rgba(0, 0, 0, 0.02)),
        #f5f5f7;
    position: relative;
}
.ff-warranty-picker__image--placeholder::after {
    content: '';
    position: absolute;
    inset: 16px;
    border-radius: 4px;
    border: 2px dashed #d2d2d7;
}

.ff-warranty-picker__sku,
.ff-warranty-picker__name,
.ff-warranty-picker__meta,
.ff-warranty-picker__price,
.ff-warranty-picker__select {
    grid-column: 2;
}
.ff-warranty-picker__sku {
    font-size: 0.75rem;
    color: #86868b;
    font-family: monospace;
    margin-bottom: 4px;
}
.ff-warranty-picker__name {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 6px;
}
.ff-warranty-picker__meta {
    font-size: 0.8125rem;
    color: #6e6e73;
    margin-bottom: 4px;
}
.ff-warranty-picker__price {
    font-size: 0.875rem;
    color: #1d1d1f;
    font-weight: 500;
    margin-bottom: 12px;
}
.ff-warranty-picker__select {
    font-size: 0.75rem;
    color: var(--ff-blue, #00A3FF);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ff-warranty-picker__manual {
    background: transparent;
    border: 1.5px dashed #d2d2d7;
    color: #1d1d1f;
    border-radius: 14px;
    padding: 14px 22px;
    margin-top: 16px;
    width: 100%;
    cursor: pointer;
    font-weight: 500;
}
.ff-warranty-picker__manual:hover {
    border-color: var(--ff-blue, #00A3FF);
    color: var(--ff-blue, #00A3FF);
}
.ff-warranty-bypass-banner {
    background: rgba(0, 200, 80, 0.08);
    border-left: 3px solid #00C850;
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    color: #006B30;
    font-weight: 500;
}

/* ============================================================
   CUSTOMER ACCOUNT — My Warranties view
   Card list of registered warranties with status badges and a
   "Request Service" deep-link per card.
   ============================================================ */
.ff-warranty-account {
    max-width: 800px;
}
.ff-warranty-account__header {
    margin-bottom: 32px;
}
.ff-warranty-account__title {
    font-family: var(--ff-font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    margin: 0 0 8px;
}
.ff-warranty-account__subtitle {
    color: #6e6e73;
    font-size: 0.9375rem;
    margin: 0;
}
.ff-warranty-account__empty {
    background: #f5f5f7;
    border-radius: 14px;
    padding: 48px 32px;
    text-align: center;
}
.ff-warranty-account__empty p {
    color: #6e6e73;
    margin: 0 0 16px;
}
.ff-warranty-account__cta,
.ff-warranty-account__cta-secondary {
    display: inline-block;
    background: var(--ff-blue, #00A3FF);
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s;
}
.ff-warranty-account__cta-secondary {
    background: transparent;
    border: 1.5px dashed #d2d2d7;
    color: #1d1d1f;
    margin-top: 24px;
    width: 100%;
    text-align: center;
}
.ff-warranty-account__cta:hover {
    background: #0091e6;
}
.ff-warranty-account__cta-secondary:hover {
    border-color: var(--ff-blue, #00A3FF);
    color: var(--ff-blue, #00A3FF);
}
.ff-warranty-account__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ff-warranty-card {
    background: #fff;
    border: 1.5px solid #e5e5e7;
    border-radius: 14px;
    padding: 20px 24px;
}
.ff-warranty-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.ff-warranty-card__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
}
/* Status icon — wrapped in aria-hidden span so screen readers
   don't announce the unicode glyph alongside the text label
   (e.g. "warning revoked" → "Revoked"). Inline-flex + line-height
   1 keeps the glyph's optical baseline aligned with the label. */
.ff-warranty-card__status-icon {
    display: inline-flex;
    line-height: 1;
    font-size: 0.95em;
}
.ff-warranty-card__status--is-verified {
    background: rgba(0, 200, 80, 0.12);
    color: #006B30;
}
.ff-warranty-card__status--is-pending {
    background: rgba(255, 165, 0, 0.12);
    color: #B86E00;
}
.ff-warranty-card__status--is-revoked,
.ff-warranty-card__status--is-duplicate {
    background: rgba(215, 0, 21, 0.12);
    color: #800010;
}
.ff-warranty-card__id {
    font-family: monospace;
    font-size: 0.8125rem;
    color: #6e6e73;
}
.ff-warranty-card__name {
    font-family: var(--ff-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #1d1d1f;
    margin: 0 0 12px;
}
.ff-warranty-card__meta {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 4px 16px;
    font-size: 0.875rem;
    margin: 0 0 16px;
}
.ff-warranty-card__meta dt {
    color: #6e6e73;
    font-weight: 500;
}
.ff-warranty-card__meta dd {
    color: #1d1d1f;
    margin: 0;
}
.ff-warranty-card__action {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s;
}
.ff-warranty-card__action--primary {
    background: var(--ff-blue, #00A3FF);
    color: #fff;
}
.ff-warranty-card__action--primary:hover {
    background: #0091e6;
}

.ff-dealer-form__success,
.ff-dealer-form__error {
    grid-column: 1 / -1;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 0.9375rem;
    margin: 0 0 20px;
}

.ff-dealer-form__success {
    background: rgba(52, 199, 89, 0.10);
    border: 1px solid rgba(52, 199, 89, 0.32);
    color: #056832;
}

.ff-dealer-form__error {
    background: rgba(215, 1, 1, 0.08);
    border: 1px solid rgba(215, 1, 1, 0.32);
    color: #b30000;
}


/* ============================================================
   CUSTOMER ACCOUNT PAGES — premium overhaul
   Targets: login, register, dashboard, order history, order view,
   address book, account info, forgot password.

   Architecture:
     - Auth pages (login/create/forgot): centered card on a soft canvas.
     - Account pages: 2-col layout — premium dark sidebar + content.
     - Tables (orders, addresses) replaced with card lists for readability.
     - Order Tracker: see .ff-order-tracker block below.
   ============================================================ */

/* --- Force 1column layout on every account page so we control the canvas --- */
body.customer-account-login,
body.customer-account-create,
body.customer-account-createpassword,
body.customer-account-forgotpassword,
body.customer-account-edit,
body.customer-account-index,
body.customer-account-logoutsuccess,
body.customer-address-index,
body.customer-address-form,
body.sales-order-history,
body.sales-order-view,
body.sales-order-print,
body.account {
    background: #f5f5f7;
}

/* Strip default Magento page-title duplication on auth pages — we render our
   own inside the card. */
body.customer-account-login .page-title-wrapper,
body.customer-account-create .page-title-wrapper,
body.customer-account-forgotpassword .page-title-wrapper,
body.customer-account-createpassword .page-title-wrapper {
    display: none !important;
}

/* Page-main + columns — clean canvas */
body.customer-account-login .page-main,
body.customer-account-login .columns,
body.customer-account-login .column.main,
body.customer-account-create .page-main,
body.customer-account-create .columns,
body.customer-account-create .column.main,
body.customer-account-forgotpassword .page-main,
body.customer-account-forgotpassword .columns,
body.customer-account-forgotpassword .column.main,
body.customer-account-createpassword .page-main,
body.customer-account-createpassword .columns,
body.customer-account-createpassword .column.main {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Account / Address / Sales order page wrapper — Treven asked for the
   account pages to fill the full viewport width (was capped at 1280 px
   centered). Removed the max-width so the layout breathes on wide
   screens; kept generous padding for readable margins. */
body.account .page-main,
body.customer-address-index .page-main,
body.customer-address-form .page-main,
body.sales-order-history .page-main,
body.sales-order-view .page-main {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 32px 48px 96px !important;
}
@media (max-width: 768px) {
    body.account .page-main,
    body.customer-address-index .page-main,
    body.customer-address-form .page-main,
    body.sales-order-history .page-main,
    body.sales-order-view .page-main {
        padding: 24px 16px 64px !important;
    }
}


/* ============================================================
   AUTH PAGES — Login / Create / Forgot Password
   Centered premium card on soft canvas. Big inputs, confident CTAs.
   ============================================================ */

body.customer-account-login .column.main > *,
body.customer-account-create .column.main > *,
body.customer-account-forgotpassword .column.main > *,
body.customer-account-createpassword .column.main > * {
    /* Reset Hyva's default content wrappers — we'll build our own */
    max-width: none !important;
}

body.customer-account-login .column.main,
body.customer-account-create .column.main,
body.customer-account-forgotpassword .column.main,
body.customer-account-createpassword .column.main {
    min-height: calc(100vh - 320px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px !important;
}

/* The Hyva `.card` becomes our auth card */
body.customer-account-login .card,
body.customer-account-create .card,
body.customer-account-forgotpassword .card,
body.customer-account-createpassword .card {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 20px !important;
    padding: 48px 40px !important;
    max-width: 480px !important;
    width: 100% !important;
    box-shadow: 0 24px 48px rgba(10, 25, 41, 0.08), 0 4px 12px rgba(10, 25, 41, 0.04) !important;
    margin: 0 auto !important;
    position: relative;
}

body.customer-account-create .card {
    max-width: 560px !important;
}

/* Auth card title (the H2 inside fieldset.login or fieldset.create) */
body.customer-account-login fieldset > h2,
body.customer-account-create fieldset > h2,
body.customer-account-forgotpassword fieldset > h2,
body.customer-account-createpassword fieldset > h2 {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.012em !important;
    text-transform: uppercase !important;
    color: #1d1d1f !important;
    margin: 0 0 8px !important;
    text-align: center;
}

/* Subtitle hint above the form */
body.customer-account-login .card::before {
    content: 'Welcome back. Sign in to continue.';
    display: block;
    font-size: 1rem;
    color: #6e6e73;
    text-align: center;
    margin-bottom: 32px;
    margin-top: -4px;
}
body.customer-account-create .card::before {
    content: 'Create your Fusion account in seconds.';
    display: block;
    font-size: 1rem;
    color: #6e6e73;
    text-align: center;
    margin-bottom: 32px;
    margin-top: -4px;
}

/* ──────────────────────────────────────────────────────────────────
   Create-Account page (PRO-181) — single-card layout, brand heading,
   collapse the upstream md:grid-cols-2 fieldset arrangement so the
   form reads as a single linear path. Treven asked for the same
   visual as the dealer/warranty signup forms.
   ────────────────────────────────────────────────────────────────── */
body.customer-account-create .page-main {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 48px var(--ff-container-pad, 24px) !important;
}
/* Collapse the upstream `md:grid grid-cols-2 gap-4` so the form is a
   single linear card stack instead of two side-by-side fieldset
   columns. Single-card path is friendlier on tablet + mobile and
   matches the dealer-form single-column visual.
   The vendor template has 3 fieldsets (Personal Info / Sign-In Info /
   Address Info) — they all collapse into the single column here. */
body.customer-account-create #form-validate > .md\:grid {
    display: block !important;
}
body.customer-account-create #form-validate > .md\:grid > .card {
    grid-column: 1 / -1 !important;
    margin: 0 0 16px !important;
}
/* Each fieldset gets brand-styled heading via the <legend>. Upstream
   wraps it in <legend class="contents"><span>…</span></legend> — the
   `contents` display means the span inherits styling from the legend's
   logical parent. We restyle the span directly so the headings read
   like Rajdhani brand sub-titles instead of plain Tailwind sans. */
body.customer-account-create #form-validate legend > span {
    display: block !important;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: clamp(1.125rem, 2vw, 1.375rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--ff-blue, #0071e3) !important;
    margin: 0 0 16px !important;
    line-height: 1.2 !important;
}
/* Submit button at the bottom — full-width on mobile, fixed minimum
   on desktop, matches the auth-flow primary button. */
body.customer-account-create .actions-toolbar {
    margin-top: 24px;
}
body.customer-account-create .actions-toolbar .primary .action.submit,
body.customer-account-create .actions-toolbar button[type="submit"] {
    width: 100%;
    min-height: 56px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}
/* Newsletter / DOB / gender optional fields get a touch of muted
   styling so they feel like secondary opt-ins, not required hurdles. */
body.customer-account-create .field.choice {
    margin: 16px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.customer-account-create .field.choice label {
    margin: 0 !important;
    font-size: 0.9375rem !important;
    color: #1d1d1f !important;
    font-weight: 500 !important;
}
/* "Back" link in the actions-toolbar — match the forgot-password
   back-to-sign-in link visual so the auth flow feels cohesive. */
body.customer-account-create .actions-toolbar .secondary {
    text-align: center;
    margin-top: 12px;
}
body.customer-account-create .actions-toolbar .secondary .back {
    color: var(--ff-blue, #0071e3);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
}
body.customer-account-create .actions-toolbar .secondary .back:hover {
    text-decoration: underline;
}
/* Forgot password subtitle is now rendered as an explicit <p class="ff-forgot-subtitle">
   inside the form (see Magento_Customer/templates/form/forgotpassword.phtml). The old
   ::before pseudo would duplicate that copy, so it's removed. */
body.customer-account-forgotpassword .ff-forgot-subtitle {
    font-size: 0.9375rem !important;
    color: #6e6e73 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin: 0 0 24px !important;
}
body.customer-account-forgotpassword .ff-forgot-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
body.customer-account-forgotpassword .ff-forgot-back > span[aria-hidden="true"] {
    transition: transform 0.2s ease !important;
}
body.customer-account-forgotpassword .ff-forgot-back:hover > span[aria-hidden="true"] {
    transform: translateX(-3px) !important;
}

/* ──────────────────────────────────────────────────────────────────
   Login form polish (PRO-180 / Magento_Customer/form/login.phtml override)
   ──────────────────────────────────────────────────────────────────
   The login card now carries an explicit <h2 class="ff-login-title"> +
   <p class="ff-login-subtitle"> so the page reads like the rest of the
   auth flow (forgot-password, reset-password, dealer signup, contact).
   The legacy <legend>+<h2>+<p> trio from vendor used Tailwind utility
   classes that didn't match our type system.

   Heading borrows the same .fieldset > h2 treatment already in place
   for register/forgot at line ~21765 (Rajdhani, uppercase, brand color,
   centered). Subtitle + forgot-link rules below match the forgot-
   password landing exactly so the visual feels like one design system.
   ────────────────────────────────────────────────────────────────── */
body.customer-account-login .ff-login-title {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: var(--ff-blue, #0071e3) !important;
    text-align: center !important;
    margin: 0 0 12px !important;
    line-height: 1.15 !important;
}
body.customer-account-login .ff-login-subtitle {
    font-size: 0.9375rem !important;
    color: #6e6e73 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin: 0 0 24px !important;
}
/* Eye-toggle inside the password control — sit just outside the input
   visually, no obvious button chrome (so the field still reads as a
   single unit). Matches the Hyvä default but with our spacing. */
body.customer-account-login .ff-login-eye {
    color: #6e6e73;
    transition: color 0.2s ease;
    background: transparent;
    border: none;
}
body.customer-account-login .ff-login-eye:hover {
    color: var(--ff-blue, #0071e3);
}
body.customer-account-login .ff-login-eye:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
    border-radius: 6px;
}
/* Forgot-password link — same animated chevron pattern as the
   forgot-password landing's "Back to sign in" link, but pointing
   the OTHER way (→ instead of ←) because the user is moving
   FORWARD into the reset flow. */
body.customer-account-login .ff-login-forgot {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--ff-blue, #0071e3) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    margin-left: 16px;
}
body.customer-account-login .ff-login-forgot:hover {
    text-decoration: underline !important;
}
body.customer-account-login .ff-login-forgot > span[aria-hidden="true"] {
    transition: transform 0.2s ease !important;
}
body.customer-account-login .ff-login-forgot:hover > span[aria-hidden="true"] {
    transform: translateX(3px) !important;
}
/* Sign-in button gets a touch more breathing room than vendor (which
   uses Tailwind's pt-6 pb-2 on the toolbar wrapper). The .actions-
   toolbar now lays out the primary button + the forgot link in a
   single flexbox row so the eye-line stays consistent. */
body.customer-account-login .form-login .actions-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}
body.customer-account-login .form-login .btn-primary {
    flex: 0 0 auto !important;
    min-width: 160px !important;
}
/* .is-submitting state — matches the dealer-signup / forgot-password
   submit-loading discipline. Slightly desaturated + crosshair cursor
   so the user knows the action is in flight. */
body.customer-account-login .form-login .btn-primary.is-submitting {
    cursor: progress !important;
}

/* New-customer inline CTA at the bottom of the login card (replaces
   the legacy block-new-customer second column). Divider + muted prompt
   + outline button — single row on desktop, stacked on narrow phones. */
body.customer-account-login .ff-login-newcustomer {
    margin-top: 32px !important;
    padding-top: 24px !important;
    text-align: center !important;
}
body.customer-account-login .ff-login-newcustomer__divider {
    display: block;
    width: 64px;
    height: 1px;
    background: #d2d2d7;
    margin: 0 auto 16px;
}
body.customer-account-login .ff-login-newcustomer__copy {
    font-size: 0.9375rem !important;
    color: #6e6e73 !important;
    margin: 0 0 12px !important;
}
body.customer-account-login .ff-login-newcustomer__cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    border: 1.5px solid var(--ff-blue, #0071e3) !important;
    border-radius: 999px !important;
    color: var(--ff-blue, #0071e3) !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}
body.customer-account-login .ff-login-newcustomer__cta:hover {
    background: var(--ff-blue, #0071e3) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}
body.customer-account-login .ff-login-newcustomer__cta > span[aria-hidden="true"] {
    transition: transform 0.2s ease !important;
}
body.customer-account-login .ff-login-newcustomer__cta:hover > span[aria-hidden="true"] {
    transform: translateX(3px) !important;
}

/* ──────────────────────────────────────────────────────────────────
   Contact page (PRO-181) — single-card layout matching the auth flow
   ──────────────────────────────────────────────────────────────────
   The contact form was a side-by-side write-us + details layout that
   cramped on mobile and looked unbalanced on desktop. Now it's a
   single centered card with the contact details rendered as a thin
   three-up strip BELOW the form (supporting info, not a competing
   column).
   ────────────────────────────────────────────────────────────────── */
body.contact-index-index .page-main {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 48px var(--ff-container-pad, 24px) !important;
}
body.contact-index-index .page-title-wrapper {
    display: none !important;
}
.ff-contact-section {
    width: 100%;
}
.ff-contact-section__inner {
    width: 100%;
}
.ff-contact-title {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: var(--ff-blue, #0071e3) !important;
    text-align: center !important;
    margin: 0 0 12px !important;
    line-height: 1.15 !important;
}
.ff-contact-subtitle {
    font-size: 0.9375rem !important;
    color: #6e6e73 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin: 0 0 24px !important;
}
.ff-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.ff-contact-field {
    margin-bottom: 0 !important;
}
.ff-contact-field--full {
    grid-column: 1 / -1;
}
.ff-contact-field__optional {
    color: #a1a1a6;
    font-weight: 400;
    font-size: 0.8125rem;
    margin-left: 4px;
}
@media (max-width: 640px) {
    .ff-contact-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
.ff-contact-textarea {
    min-height: 144px !important;
    height: auto !important;
    padding: 14px 16px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
}
.ff-contact-actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}
.ff-contact-submit {
    min-width: 200px;
    min-height: 56px !important;
}
.ff-contact-recaptcha {
    margin-top: 16px;
    text-align: center;
    font-size: 0.75rem;
    color: #a1a1a6;
}
/* ──────────────────────────────────────────────────────────────────
   Contact details — compact info strip below the form (PRO-181)
   ──────────────────────────────────────────────────────────────────
   Treven (2026-05-19): "These look horrible and are insanely large.
   Please make sure to size these and lay them out properly."
   Was 3 large feature-cards with circular icon halos + big padding;
   now a compact horizontal row of icon+text chips that read as
   supporting info (phone / email / address) — not visual peers to
   the form above. Each chip uses a small inline icon on the left
   and tight label+value stack on the right.
   ────────────────────────────────────────────────────────────────── */
.ff-contact-details {
    margin: 32px auto 0 !important;
    max-width: 480px !important;
}
.ff-contact-details__title {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #6e6e73 !important;
    text-align: center !important;
    margin: 0 0 16px !important;
}
/* PRO-181 (Treven 2026-05-19): "Instead of stacking them next to
   each other try putting them below each other." Switched from
   3-column grid to single-column stack. Each chip is now full-
   width inside the 480px max-width container — phone, then email,
   then address. Reads as a vertical info list, which is calmer
   visually and gives each line its own real estate. */
.ff-contact-details__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.ff-contact-details__card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 18px 18px !important;
    background: #f5f5f7 !important;
    border-radius: 12px !important;
    text-align: left !important;
    border: 1px solid #e8e8ed !important;
    transition: border-color 0.2s ease, transform 0.2s ease !important;
    min-width: 0; /* allow text-overflow to work in narrow cells */
}
.ff-contact-details__card:hover {
    border-color: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px) !important;
}
.ff-contact-details__icon {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ff-blue, #0071e3) !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 2px 0 0 !important;
    border: none !important;
}
.ff-contact-details__icon svg {
    width: 22px !important;
    height: 22px !important;
}
.ff-contact-details__label {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: #6e6e73 !important;
    margin: 0 0 4px !important;
    line-height: 1.2 !important;
}
.ff-contact-details__value,
.ff-contact-details__address {
    display: block !important;
    color: #1d1d1f !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ff-contact-details__address {
    white-space: normal;
}
.ff-contact-details__body {
    min-width: 0;
    flex: 1 1 auto;
}
a.ff-contact-details__value {
    transition: color 0.2s ease;
}
a.ff-contact-details__value:hover {
    color: var(--ff-blue, #0071e3) !important;
}
.ff-contact-details__sub {
    font-size: 0.75rem !important;
    color: #6e6e73 !important;
    margin: 4px 0 0 !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ff-contact-details__inline-link {
    color: var(--ff-blue, #0071e3) !important;
    text-decoration: none !important;
}
.ff-contact-details__inline-link:hover {
    text-decoration: underline !important;
}
/* Below ~520px the card itself shrinks enough that long emails or the
   sub-line "Sales: sales@…" need to wrap. Keep nowrap above that
   breakpoint so the cards stay one-line and look uniform. */
@media (max-width: 520px) {
    .ff-contact-details__value,
    .ff-contact-details__sub {
        white-space: normal !important;
    }
}

/* PRO-181: hide the page-title-wrapper on every customer-account
   auth page. The white-box "Customer Login" / "Create New Customer
   Account" / etc. that vendor renders above the card is redundant
   (our card's own h2 carries the title) and looks especially bad
   stacked above on mobile. */
body.customer-account-login .page-title-wrapper,
body.customer-account-create .page-title-wrapper,
body.customer-account-forgotpassword .page-title-wrapper,
body.customer-account-createpassword .page-title-wrapper {
    display: none !important;
}

/* Reset-password (create-password landing from email link) — explicit
   subtitle + back-link, parallel to the forgot-password page. The vendor
   template ships zero heading / subtitle / back-link, so the override at
   Magento_Customer/templates/form/resetforgottenpassword.phtml renders
   <h2 class="ff-reset-title"> + <p class="ff-reset-subtitle"> + <a class
   ="ff-reset-back">. The h2 picks up the shared
   .customer-account-createpassword fieldset > h2 styling already in
   place at line 21765 (Rajdhani uppercase, brand color, centered).
   These two rules style the subtitle + back-link to match the forgot-
   password landing exactly. */
body.customer-account-createpassword .ff-reset-subtitle {
    font-size: 0.9375rem !important;
    color: #6e6e73 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin: 0 0 24px !important;
}
body.customer-account-createpassword .ff-reset-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
body.customer-account-createpassword .ff-reset-back > span[aria-hidden="true"] {
    transition: transform 0.2s ease !important;
}
body.customer-account-createpassword .ff-reset-back:hover > span[aria-hidden="true"] {
    transform: translateX(-3px) !important;
}

/* Auth fieldset reset */
body.customer-account-login fieldset,
body.customer-account-create fieldset,
body.customer-account-forgotpassword fieldset,
body.customer-account-createpassword fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Field labels */
body.customer-account-login .field > label,
body.customer-account-create .field > label,
body.customer-account-forgotpassword .field > label,
body.customer-account-createpassword .field > label {
    display: block !important;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    color: #1d1d1f !important;
    margin: 0 0 8px !important;
}

/* Inputs */
body.customer-account-login input[type="email"],
body.customer-account-login input[type="password"],
body.customer-account-login input[type="text"],
body.customer-account-create input[type="email"],
body.customer-account-create input[type="password"],
body.customer-account-create input[type="text"],
body.customer-account-create input[type="tel"],
body.customer-account-forgotpassword input[type="email"],
body.customer-account-createpassword input[type="password"],
body.account input[type="email"],
body.account input[type="password"],
body.account input[type="text"],
body.account input[type="tel"],
body.account select,
body.account textarea,
body.customer-address-form input[type="text"],
body.customer-address-form input[type="email"],
body.customer-address-form input[type="tel"],
body.customer-address-form select {
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px !important;
    font-size: 1rem !important;
    background: #ffffff !important;
    border: 1.5px solid #d2d2d7 !important;
    border-radius: 12px !important;
    color: #1d1d1f !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: none !important;
}

body.customer-account-login input:focus,
body.customer-account-create input:focus,
body.customer-account-forgotpassword input:focus,
body.customer-account-createpassword input:focus,
body.account input:focus,
body.account select:focus,
body.account textarea:focus,
body.customer-address-form input:focus,
body.customer-address-form select:focus {
    border-color: var(--ff-blue, #0071e3) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
}

body.customer-account-login textarea,
body.account textarea,
body.customer-address-form textarea {
    height: auto !important;
    min-height: 100px !important;
    padding: 14px 16px !important;
}

/* Field gap */
body.customer-account-login .field,
body.customer-account-create .field,
body.customer-account-forgotpassword .field,
body.customer-account-createpassword .field {
    margin-bottom: 18px !important;
}

/* Required-asterisk: keep but tasteful */
body.customer-account-login .field.required > label::after,
body.customer-account-create .field.required > label::after,
body.customer-account-create .field._required > label::after {
    content: ' *';
    color: #FF2D2D;
}

/* Primary submit button — premium navy with brand-blue hover */
body.customer-account-login button.action.primary,
body.customer-account-login button[type="submit"].action.login,
body.customer-account-create button.action.primary,
body.customer-account-create button[type="submit"].submit,
body.customer-account-forgotpassword button.action.primary,
body.customer-account-forgotpassword button[type="submit"],
body.customer-account-createpassword button.action.primary {
    width: 100% !important;
    height: 56px !important;
    padding: 0 24px !important;
    background: #0a1929 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16) !important;
    margin-top: 8px !important;
}

body.customer-account-login button.action.primary:hover,
body.customer-account-login button[type="submit"].action.login:hover,
body.customer-account-create button.action.primary:hover,
body.customer-account-create button[type="submit"].submit:hover,
body.customer-account-forgotpassword button.action.primary:hover,
body.customer-account-forgotpassword button[type="submit"]:hover,
body.customer-account-createpassword button.action.primary:hover {
    background: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30) !important;
}

/* Forgot-password link below the login form */
body.customer-account-login .secondary,
body.customer-account-login a.action.remind {
    display: block !important;
    text-align: center !important;
    margin-top: 18px !important;
    color: var(--ff-blue, #0071e3) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body.customer-account-login a.action.remind:hover {
    text-decoration: underline !important;
}

/* "Create an account" CTA after login form — render as a separate bordered block */
body.customer-account-login .login-container .block.block-new-customer,
body.customer-account-login .block-new-customer {
    margin-top: 32px !important;
    padding-top: 32px !important;
    border-top: 1px solid #e8e8ed !important;
    text-align: center;
}

body.customer-account-login .block-new-customer h2,
body.customer-account-login .block-new-customer .block-title strong {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #1d1d1f !important;
    margin: 0 0 12px !important;
}

body.customer-account-login .block-new-customer p {
    font-size: 0.9375rem;
    color: #6e6e73;
    margin: 0 0 16px;
}

body.customer-account-login .block-new-customer button,
body.customer-account-login .block-new-customer a.action.create {
    display: inline-block !important;
    padding: 12px 32px !important;
    background: transparent !important;
    color: var(--ff-blue, #0071e3) !important;
    border: 1.5px solid var(--ff-blue, #0071e3) !important;
    border-radius: 12px !important;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    height: auto !important;
    width: auto !important;
}

body.customer-account-login .block-new-customer button:hover,
body.customer-account-login .block-new-customer a.action.create:hover {
    background: rgba(0, 113, 227, 0.08) !important;
}


/* ============================================================
   AUTHENTICATED ACCOUNT PAGES — sidebar + content layout
   ============================================================ */

/* Account content area — block flow, full width.
   The 2-col layout (sidebar + main) lives on `.columns` per Hyvä's
   actual DOM structure (`.columns > .sidebar.sidebar-main + .column.main`).
   Setting `display: grid` here was the original bug — it made the
   dashboard cards / dashboard headings render in narrow 260 px columns
   instead of stacking full-width inside the right column. */
body.account .column.main,
body.customer-address-index .column.main,
body.customer-address-form .column.main,
body.sales-order-history .column.main,
body.sales-order-view .column.main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The ACTUAL 2-col grid lives on `.columns` */
body.account .columns,
body.customer-address-index .columns,
body.customer-address-form .columns,
body.sales-order-history .columns,
body.sales-order-view .columns {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 32px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
}

@media (max-width: 900px) {
    body.account .columns,
    body.customer-address-index .columns,
    body.customer-address-form .columns,
    body.sales-order-history .columns,
    body.sales-order-view .columns {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Page title above the 2-col area, full width */
body.account .page-title-wrapper,
body.customer-address-index .page-title-wrapper,
body.customer-address-form .page-title-wrapper,
body.sales-order-history .page-title-wrapper,
body.sales-order-view .page-title-wrapper {
    grid-column: 1 / -1 !important;
    margin: 0 0 24px !important;
}

body.account .page-title,
body.customer-address-index .page-title,
body.customer-address-form .page-title,
body.sales-order-history .page-title,
body.sales-order-view .page-title {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.012em !important;
    color: #1d1d1f !important;
    margin: 0 !important;
}

/* Sidebar nav — Apple-style clean white card.
   Switched from dark navy floating box to a light card 2026-05-08
   to match Treven's "Apple senior design executive" standard.
   Wins on specificity over the earlier `.account .sidebar-main` block
   thanks to the `body.` prefix. */
body.account .sidebar-main,
body.customer-address-index .sidebar-main,
body.customer-address-form .sidebar-main,
body.sales-order-history .sidebar-main,
body.sales-order-view .sidebar-main,
body.account aside.sidebar,
body.customer-address-index aside.sidebar,
body.sales-order-history aside.sidebar {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    padding: 12px !important;
    color: #1d1d1f !important;
    align-self: start !important;
    position: sticky !important;
    top: 88px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* Sidebar inner card wrapper — Hyvä emits an extra .card.py-2.px-8 div
   that adds another layer of background + padding. Strip it. */
body.account .sidebar-main > .card,
body.customer-address-index .sidebar-main > .card,
body.sales-order-history .sidebar-main > .card,
body.sales-order-view .sidebar-main > .card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Hide the redundant "My Account" block-title — the page H1 already says it */
body.account .sidebar-main .block-title,
body.customer-address-index .sidebar-main .block-title,
body.sales-order-history .sidebar-main .block-title,
body.sales-order-view .sidebar-main .block-title {
    display: none !important;
}

/* Mobile collapsible toggle button */
body.account .sidebar-main #account-nav-title,
body.customer-address-index .sidebar-main #account-nav-title,
body.sales-order-history .sidebar-main #account-nav-title {
    color: #1d1d1f !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.8125rem !important;
    padding: 12px 14px !important;
    background: transparent !important;
    border: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
@media (min-width: 768px) {
    body.account .sidebar-main #account-nav-title {
        display: none !important;
    }
}

body.account .sidebar-main .nav.items,
body.account .sidebar-main ul,
body.account .sidebar-main nav,
body.customer-address-index .sidebar-main ul,
body.sales-order-history .sidebar-main ul,
body.sales-order-view .sidebar-main ul {
    list-style: none !important;
    padding: 6px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    border: 0 !important;
    background: transparent !important;
}

body.account .sidebar-main li,
body.customer-address-index .sidebar-main li,
body.sales-order-history .sidebar-main li,
body.sales-order-view .sidebar-main li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

body.account .sidebar-main a,
body.customer-address-index .sidebar-main a,
body.sales-order-history .sidebar-main a,
body.sales-order-view .sidebar-main a,
body.account .sidebar-main strong,
body.customer-address-index .sidebar-main strong,
body.sales-order-history .sidebar-main strong,
body.sales-order-view .sidebar-main strong {
    display: block !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    border: 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    cursor: pointer !important;
}

body.account .sidebar-main a:hover,
body.customer-address-index .sidebar-main a:hover,
body.sales-order-history .sidebar-main a:hover,
body.sales-order-view .sidebar-main a:hover {
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
    outline: none !important;
}
body.account .sidebar-main a:focus-visible,
body.customer-address-index .sidebar-main a:focus-visible {
    background: #f5f5f7 !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: -2px !important;
}

/* Active nav item — Fusion signature red↔blue underline that flows
   left to right (matches the homepage hero `.ff-apple-hero__title::after`
   animation). The previous inset-left-bar visually shoved the active item
   to the right, which Treven flagged as "weird and oversized." This new
   active state stays in-line, just bolds the text and draws an animated
   underline beneath. The underline lives inside a `::after` so the
   layout never shifts when the active item changes. */
body.account .sidebar-main .current strong,
body.customer-address-index .sidebar-main .current strong,
body.sales-order-history .sidebar-main .current strong,
body.sales-order-view .sidebar-main .current strong,
body.account .sidebar-main .current a,
body.customer-address-index .sidebar-main .current a,
body.sales-order-history .sidebar-main .current a,
body.sales-order-view .sidebar-main .current a,
body.account .sidebar-main a[aria-current="page"] {
    background: transparent !important;
    color: #0a1929 !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
    border-left: 0 !important;
    position: relative !important;
}

body.account .sidebar-main .current a::after,
body.account .sidebar-main .current strong::after,
body.customer-address-index .sidebar-main .current a::after,
body.sales-order-history .sidebar-main .current a::after,
body.sales-order-view .sidebar-main .current a::after,
body.account .sidebar-main a[aria-current="page"]::after {
    content: '' !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 2px !important;
    height: 3px !important;
    border-radius: 2px !important;
    /* Solid full-width bar that PULSES between brand blue and Fusion red.
       Treven's spec: "spark underline feature should be changing color
       from blue to red and back to blue." The earlier sliding-gradient
       version showed both colors at once which was less clear. This
       animates the entire bar between the two solid colors. */
    background: var(--ff-blue, #0071e3) !important;
    animation: ff-sidebar-active-color 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes ff-sidebar-active-color {
    0%, 100% {
        background: #0071e3;
        box-shadow: 0 0 12px rgba(0, 113, 227, 0.45);
    }
    50% {
        background: #e11d48;
        box-shadow: 0 0 12px rgba(225, 29, 72, 0.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.account .sidebar-main .current a::after,
    body.account .sidebar-main .current strong::after {
        animation: none !important;
        background: #0071e3 !important;
    }
}

/* Sign-out — separate visually with a border, destructive-red on hover */
body.account .sidebar-main a[href*="logout"],
body.customer-address-index .sidebar-main a[href*="logout"],
body.sales-order-history .sidebar-main a[href*="logout"] {
    color: #6e6e73 !important;
    margin-top: 6px !important;
    border-top: 1px solid #e8e8ed !important;
    padding-top: 14px !important;
    border-radius: 0 0 8px 8px !important;
}
body.account .sidebar-main a[href*="logout"]:hover {
    color: #d70015 !important;
    background: rgba(215, 0, 21, 0.04) !important;
    box-shadow: none !important;
}


/* ============================================================
   DASHBOARD — info cards in the main content
   ============================================================ */

body.account .column.main > .block,
body.account .column.main > div.dashboard,
body.account .block.block-dashboard-info,
body.account .block.block-dashboard-addresses,
body.account .block.block-dashboard-orders,
body.customer-address-index .column.main > .block,
body.sales-order-history .column.main > .block,
body.sales-order-view .column.main > .block {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    padding: 28px !important;
    margin: 0 0 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

body.account .block-title,
body.customer-address-index .block-title,
body.sales-order-history .block-title,
body.sales-order-view .block-title {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
}

body.account .block-title strong,
body.customer-address-index .block-title strong,
body.sales-order-history .block-title strong,
body.sales-order-view .block-title strong {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.005em !important;
    color: #1d1d1f !important;
}

body.account .block-title a,
body.customer-address-index .block-title a {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--ff-blue, #0071e3) !important;
    text-decoration: none !important;
}

body.account .block-title a:hover,
body.customer-address-index .block-title a:hover {
    text-decoration: underline !important;
}


/* ============================================================
   ORDER HISTORY — convert table to card list
   ============================================================ */

body.sales-order-history table.data.table,
body.sales-order-history .table-wrapper {
    background: transparent !important;
    border: 0 !important;
}

body.sales-order-history table.data.table thead {
    display: none !important; /* labels go onto each card */
}

body.sales-order-history table.data.table,
body.sales-order-history table.data.table tbody {
    display: block !important;
    width: 100% !important;
}

body.sales-order-history table.data.table tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr auto !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    margin: 0 0 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.sales-order-history table.data.table tr:hover {
    border-color: rgba(0, 113, 227, 0.32) !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.06) !important;
}

@media (max-width: 720px) {
    body.sales-order-history table.data.table tr {
        grid-template-columns: 1fr !important;
    }
}

body.sales-order-history table.data.table td {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.sales-order-history table.data.table td::before {
    content: attr(data-th);
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    color: #6e6e73 !important;
    margin: 0 !important;
}

body.sales-order-history table.data.table td.col.id,
body.sales-order-history table.data.table td.col.actions {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
}

body.sales-order-history table.data.table td.col.actions a {
    display: inline-block !important;
    padding: 8px 14px !important;
    background: transparent !important;
    border: 1.5px solid var(--ff-blue, #0071e3) !important;
    border-radius: 9999px !important;
    color: var(--ff-blue, #0071e3) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

body.sales-order-history table.data.table td.col.actions a:hover {
    background: var(--ff-blue, #0071e3) !important;
    color: #ffffff !important;
}

/* Status pill */
body.sales-order-history td.col.status,
body.sales-order-view .order-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body.sales-order-history td.col.status::after,
body.sales-order-view .order-status::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34c759;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.20);
    flex-shrink: 0;
}

/* Status-specific pill colors. The .ff-order-status-{state} classes are
   applied by web/js/ff-order-status-colors.js which reads each cell's
   text content and classifies it. Premium ecom (Apple, Best Buy) shows
   color-coded order status so customers can scan past orders at a glance.
   Defaults to green (#34c759, "Complete" state) — only the non-default
   states need explicit overrides below. */
body.sales-order-history td.col.status.ff-order-status-processing::after,
body.sales-order-view .order-status.ff-order-status-processing::after {
    background: var(--ff-blue, #0071e3);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.20);
}

body.sales-order-history td.col.status.ff-order-status-pending::after,
body.sales-order-view .order-status.ff-order-status-pending::after {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.20);
}

body.sales-order-history td.col.status.ff-order-status-canceled::after,
body.sales-order-view .order-status.ff-order-status-canceled::after {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20);
}


/* ============================================================
   LIVE ORDER TRACKER — shown above order details on view page
   Visual timeline + tracking number cards + carrier external link.
   ============================================================ */

.ff-order-tracker {
    grid-column: 1 / -1 !important; /* span both sidebar + content cols */
    background: linear-gradient(180deg, #0a1929 0%, #0f1f2e 100%) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    margin: 0 0 24px !important;
    color: #ffffff !important;
    box-shadow: 0 12px 32px rgba(10, 25, 41, 0.18);
}

.ff-order-tracker__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
}

.ff-order-tracker__title {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    margin: 0 0 4px;
    color: #ffffff;
}

.ff-order-tracker__order-num {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Inter', sans-serif;
}

.ff-order-tracker__eta {
    text-align: right;
}

.ff-order-tracker__eta-label {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ff-blue, #2997ff);
    margin: 0 0 4px;
}

.ff-order-tracker__eta-date {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

/* Timeline — 5 nodes connected by a track line */
.ff-order-tracker__timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
    margin: 0 0 32px;
}

.ff-order-tracker__timeline::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(255, 255, 255, 0.10);
    z-index: 0;
}

.ff-order-tracker__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 1;
}

.ff-order-tracker__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.40);
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.ff-order-tracker__dot svg {
    width: 14px;
    height: 14px;
}

/* Completed step — solid blue + checkmark */
.ff-order-tracker__step--done .ff-order-tracker__dot {
    background: var(--ff-blue, #0071e3);
    border-color: var(--ff-blue, #0071e3);
    color: #ffffff;
}

/* Active step — pulsing brand blue */
.ff-order-tracker__step--active .ff-order-tracker__dot {
    background: var(--ff-blue, #0071e3);
    border-color: var(--ff-blue, #0071e3);
    color: #ffffff;
    box-shadow: 0 0 0 6px rgba(0, 113, 227, 0.20);
    animation: ff-tracker-pulse 1.8s ease-in-out infinite;
}

@keyframes ff-tracker-pulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(0, 113, 227, 0.20); }
    50%      { box-shadow: 0 0 0 10px rgba(0, 113, 227, 0.06); }
}

/* Stop the order-tracker active-step dot from pulsing for users
   with prefers-reduced-motion. The dot stays brand-blue with the
   solid halo so the active step is still distinguishable from
   done/upcoming — just stops breathing. Same motion-respect
   pattern as ff-smart-pulse + the hero title underline. */
@media (prefers-reduced-motion: reduce) {
    .ff-order-tracker__step--active .ff-order-tracker__dot {
        animation: none !important;
    }
}

/* Track line fill — shows progress */
.ff-order-tracker__step::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: transparent;
    z-index: -1;
}

.ff-order-tracker__step--done::after,
.ff-order-tracker__step--active::after {
    background: var(--ff-blue, #0071e3);
}

.ff-order-tracker__step:last-child::after { display: none; }

.ff-order-tracker__step-label {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 2px;
}

.ff-order-tracker__step--active .ff-order-tracker__step-label,
.ff-order-tracker__step--done .ff-order-tracker__step-label {
    color: #ffffff;
}

.ff-order-tracker__step-meta {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.50);
    margin: 0;
}

/* Status row — what's happening now */
.ff-order-tracker__status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin: 0 0 20px;
}

.ff-order-tracker__status-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 113, 227, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ff-blue, #2997ff);
}

.ff-order-tracker__status-icon svg { width: 18px; height: 18px; }

.ff-order-tracker__status-text {
    flex: 1 1 auto;
}

.ff-order-tracker__status-headline {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 2px;
}

.ff-order-tracker__status-meta {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* Tracking number cards (one per shipment) */
.ff-order-tracker__shipments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.ff-order-tracker__shipment {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.ff-order-tracker__carrier {
    flex: 0 0 auto;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #ffffff;
}

.ff-order-tracker__tracking-num {
    flex: 1 1 auto;
    min-width: 0;
}

.ff-order-tracker__tracking-num-label {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, 0.50);
    margin: 0 0 1px;
}

.ff-order-tracker__tracking-num-value {
    font-family: 'Inter', monospace;
    font-size: 0.875rem;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    word-break: break-all;
}

.ff-order-tracker__track-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--ff-blue, #0071e3);
    color: #ffffff;
    border: 0;
    border-radius: 9999px;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.ff-order-tracker__track-btn:hover {
    background: #2997ff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.35);
}

.ff-order-tracker__track-btn svg { width: 12px; height: 12px; }

/* Empty / placeholder state — order placed but not yet shipped */
.ff-order-tracker__empty {
    text-align: center;
    padding: 24px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9375rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 12px;
}


/* ============================================================
   ADDRESS BOOK — card list of addresses
   ============================================================ */

body.customer-address-index .box-address-billing,
body.customer-address-index .box-address-shipping,
body.customer-address-index .additional-addresses tr {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin: 0 0 12px !important;
}

body.customer-address-index .box-title {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    color: var(--ff-blue, #0071e3) !important;
    margin: 0 0 12px !important;
}

body.customer-address-index address {
    font-style: normal;
    color: #1d1d1f;
    line-height: 1.5;
}

/* Default-billing/default-shipping card action links — Edit/Delete style
   pill that matches the order-history action button pattern. Magento
   renders these as <div class="box-actions"><a class="action edit">...
   inside each .box-address-billing / .box-address-shipping. */
body.customer-address-index .box-actions {
    margin-top: 16px !important;
}

body.customer-address-index .box-actions a {
    display: inline-block !important;
    padding: 8px 14px !important;
    margin-right: 8px !important;
    background: transparent !important;
    border: 1.5px solid var(--ff-blue, #0071e3) !important;
    border-radius: 9999px !important;
    color: var(--ff-blue, #0071e3) !important;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

body.customer-address-index .box-actions a:hover {
    background: var(--ff-blue, #0071e3) !important;
    color: #ffffff !important;
}

body.customer-address-index .box-actions a:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 3px !important;
}

/* Delete action in the additional-addresses table — same pill but with
   destructive red, so customers can scan-tell delete from edit. */
body.customer-address-index .additional-addresses .col.actions a.delete,
body.customer-address-index .box-actions a.delete {
    border-color: #d70015 !important;
    color: #d70015 !important;
}

body.customer-address-index .additional-addresses .col.actions a.delete:hover,
body.customer-address-index .box-actions a.delete:hover {
    background: #d70015 !important;
    color: #ffffff !important;
}

body.customer-address-index .additional-addresses .col.actions a.delete:focus-visible,
body.customer-address-index .box-actions a.delete:focus-visible {
    outline-color: #d70015 !important;
}

/* "Add New Address" primary CTA — solid brand-navy button matches the
   bottom-of-form Save buttons used elsewhere in the account area. */
body.customer-address-index .actions-toolbar .primary button.action.primary.add,
body.customer-address-index button.action.primary.add {
    display: inline-block !important;
    background: #0a1929 !important;
    color: #ffffff !important;
    padding: 14px 32px !important;
    border-radius: 12px !important;
    border: 0 !important;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    margin-top: 24px !important;
}

body.customer-address-index .actions-toolbar .primary button.action.primary.add:hover,
body.customer-address-index button.action.primary.add:hover {
    background: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px) !important;
}

body.customer-address-index .actions-toolbar .primary button.action.primary.add:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
    body.customer-address-index .actions-toolbar .primary button.action.primary.add:hover {
        transform: none !important;
    }
}


/* ============================================================
   GENERIC ACCOUNT BUTTONS (Save, Cancel, etc)
   ============================================================ */

body.customer-account-edit button.action.save,
body.customer-address-form button.action.save,
body.account button.action.save {
    background: #0a1929 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body.customer-account-edit button.action.save:hover,
body.customer-address-form button.action.save:hover,
body.account button.action.save:hover {
    background: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.30) !important;
}


/* ============================================================
   CHATBOT WIDGET — Fusion brand overrides
   Targets the Fusion-owned widget shell so it reads as part of
   the site, not a bolt-on.

   Widget root: #ff-chatbot-widget
   Launcher:    #ff-chatbot-fab (.pulse / .open modifiers)
   Window:      #ff-chatbot-window
   Header:      .ff-header-* (.ff-avatar, .ff-header-title, .ff-status-dot)
   Messages:    .ff-msg, .ff-bubble.bot, .ff-bubble.user, .ff-msg-avatar
   Actions:     #ff-action-bar, .ff-action-btn, .ff-form-card
   Input:       .ff-input-row, #ff-quick-replies, .ff-chip
   Footer:      .ff-footer-links, .ff-contact-link, .ff-powered
   Typing:      .ff-typing-dots, .ff-typing-dot
   ============================================================ */

/* --- Z-index + position safety: stay below cart drawer (70+) --- */
#ff-chatbot-widget,
#ff-chatbot-fab,
#ff-chatbot-window,
#ff-chat-window {
    z-index: 60 !important;
}

/* Auto-fade when cart drawer is open so the two never overlap */
body:has(.ff-cart-drawer.is-open) #ff-chatbot-widget,
body:has(.ff-cart-drawer.is-open) #ff-chatbot-window,
body:has(.ff-cart-drawer.is-open) #ff-chatbot-fab {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* --- Launcher button: red → Fusion navy + brand-blue hover --- */
#ff-chatbot-fab {
    background: #0a1929 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.32),
                0 2px 8px rgba(10, 25, 41, 0.20) !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
#ff-chatbot-fab:hover {
    background: #0071e3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(0, 113, 227, 0.42) !important;
}
/* Open state: keep navy but flip the icon — already handled by widget JS */
#ff-chatbot-fab.open {
    background: #0a1929 !important;
}
/* Pulse ring around the launcher — Fusion blue, not red */
#ff-chatbot-fab.pulse::before,
#ff-chatbot-fab.pulse::after {
    background: rgba(0, 113, 227, 0.32) !important;
}

/* --- Chat window header: stay navy, but match exact Fusion shade --- */
#ff-chatbot-window,
#ff-chat-window {
    border-radius: 20px !important;
    box-shadow: 0 24px 48px rgba(10, 25, 41, 0.18),
                0 4px 12px rgba(10, 25, 41, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    overflow: hidden !important;
}

/* Header bar */
#ff-chatbot-window #ff-chat-header,
#ff-chat-window > div:first-child,
#ff-chat-window [class*="header"]:not(.ff-header-status):not(.ff-header-title):not(.ff-header-actions):not(.ff-header-left) {
    background: #0a1929 !important;
}

/* Header avatar — replace "FF" text with the Fusion diamond brand mark.
   `font-size: 0` hides the text the widget renders inside the div, then we
   paint the diamond via background-image. Path is relative to custom.css's
   location at .../en_US/css/custom.css → .../en_US/images/diamond.webp (840×840, ~26 KB vs 200 KB png). */
.ff-avatar {
    background: rgba(0, 113, 227, 0.20) url('../images/diamond.webp') center / 70% 70% no-repeat !important;
    border: 1px solid rgba(0, 113, 227, 0.40) !important;
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
}

.ff-header-title {
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.ff-status-dot {
    background: #34c759 !important;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18) !important;
}

/* --- User bubble: red → brand blue --- */
.ff-bubble.user {
    background: #0071e3 !important;
    color: #ffffff !important;
}

.ff-bubble.user a {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Bot bubble — keep light grey, just tighten the border-radius style */
.ff-bubble.bot {
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
}

/* Inline links inside bubbles: red → brand blue */
.ff-bubble a:not(.ff-bubble.user a) {
    color: #0071e3 !important;
}

/* --- OVERFLOW CONTAINMENT ---
   Force every form of long content (URLs, hash strings, file paths, code,
   markdown tables, oversize images) to stay inside the bubble. The widget's
   default `max-width: 85%` only constrains the bubble wrapper — these rules
   constrain what's INSIDE the bubble. */
.ff-bubble,
.ff-bubble.bot,
.ff-bubble.user {
    max-width: 85% !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    overflow: hidden !important;
}

.ff-bubble * {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* Code blocks + inline code — wrap instead of horizontal scroll */
.ff-bubble pre,
.ff-bubble code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
}
.ff-bubble pre {
    padding: 10px 12px !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
}

/* Markdown tables — scroll horizontally inside their own container so the
   bubble itself never overflows */
.ff-bubble table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    margin: 8px 0 !important;
    font-size: 12px !important;
}
.ff-bubble table td,
.ff-bubble table th {
    padding: 6px 10px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Inline images — fit width, never break the bubble */
.ff-bubble img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 6px 0 !important;
}

/* Markdown lists */
.ff-bubble ul,
.ff-bubble ol {
    padding-left: 20px !important;
    margin: 6px 0 !important;
}
.ff-bubble li {
    margin: 2px 0 !important;
    word-break: break-word !important;
}

/* Paragraphs */
.ff-bubble p {
    margin: 0 0 8px !important;
    word-break: break-word !important;
}
.ff-bubble p:last-child {
    margin-bottom: 0 !important;
}

/* Inner messages container — clip horizontal overflow */
#ff-chat-messages {
    overflow-x: hidden !important;
}

/* Per-message bot avatar — diamond logo on navy circle */
.ff-msg-avatar {
    background: #0a1929 url('../images/diamond.webp') center / 70% 70% no-repeat !important;
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
}

/* Quick-reply chips — pill, brand blue outline, hover fills */
.ff-chip {
    border: 1.5px solid #0071e3 !important;
    color: #0071e3 !important;
    background: #ffffff !important;
    border-radius: 9999px !important;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    transition: all 0.2s ease !important;
}
.ff-chip:hover {
    background: rgba(0, 113, 227, 0.08) !important;
    transform: translateY(-1px) !important;
}

/* Action buttons + inline forms: keep purchase/support handoff visible */
#ff-action-bar {
    border-top: 1px solid #e5e7eb !important;
    background: #ffffff !important;
}

.ff-action-btn {
    border-radius: 8px !important;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.ff-action-btn.primary,
.ff-submit-btn {
    background: #0a1929 !important;
    border-color: #0a1929 !important;
    color: #ffffff !important;
}

.ff-action-btn.primary:hover,
.ff-submit-btn:hover {
    background: #0071e3 !important;
    border-color: #0071e3 !important;
    color: #ffffff !important;
}

.ff-action-btn:not(.primary),
.ff-secondary-btn {
    background: #ffffff !important;
    border-color: #d2d2d7 !important;
    color: #0a1929 !important;
}

.ff-action-btn:not(.primary):hover,
.ff-secondary-btn:hover {
    border-color: #0071e3 !important;
    color: #0071e3 !important;
}

.ff-form-card {
    border: 1px solid #dce6f2 !important;
    border-radius: 12px !important;
    background: #f8fbff !important;
    box-shadow: 0 8px 22px rgba(10, 25, 41, 0.08) !important;
}

.ff-form-title {
    color: #0a1929 !important;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.ff-form-copy,
.ff-form-success {
    color: #4b5563 !important;
}

.ff-form-error {
    color: #b42318 !important;
}

.ff-field:focus {
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.16) !important;
    outline: none !important;
}

/* Send button + icon buttons — match Fusion navy */
#ff-send-btn,
.ff-icon-btn[id*="send"],
button[id*="ff-send"] {
    background: #0a1929 !important;
    color: #ffffff !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}
#ff-send-btn:hover,
button[id*="ff-send"]:hover {
    background: #0071e3 !important;
    transform: translateY(-1px) !important;
}

/* Input field: focus ring in brand blue, not red */
#ff-chatbot-window input[type="text"]:focus,
#ff-chatbot-window textarea:focus,
#ff-chat-window input[type="text"]:focus,
#ff-chat-window textarea:focus,
.ff-input-row input:focus {
    border-color: #0071e3 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.16) !important;
}

/* Contact-links footer + "Powered by AI" badge — keep but tone */
.ff-contact-link {
    color: #0071e3 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}
.ff-contact-link:hover {
    color: #2997ff !important;
    text-decoration: underline !important;
}

.ff-powered {
    color: #6e6e73 !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
}

/* Typing indicator dots: brand blue, breathing pulse */
.ff-typing-dot {
    background: #0071e3 !important;
}

/* Welcome bullet list — tighter spacing */
.ff-welcome ul {
    margin: 8px 0 !important;
    padding-left: 18px !important;
}
.ff-welcome strong {
    color: #1d1d1f !important;
    font-family: var(--ff-font-heading, 'Rajdhani', sans-serif) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Mobile inset */
@media (max-width: 768px) {
    #ff-chatbot-fab {
        bottom: 16px !important;
        right: 16px !important;
    }
    #ff-chatbot-window,
    #ff-chat-window {
        border-radius: 16px !important;
    }
}


/* ============================================================
   PDP CUSTOMIZABLE OPTIONS — Apple iPad-Pro-style cards
   Reference: https://www.apple.com/shop/buy-ipad/ipad-pro

   Magento renders custom options inside `.product-options-wrapper`.
   For checkbox/radio options each `.field.choice` contains the input +
   a label that holds the option name and price. We hide the native input
   and turn the label into a clickable card with a clear selected state.

   Test product: /1911-hammer-split-speed-stainless ("Make it a Kit:" —
   2 checkbox options with prices).
   ============================================================ */

body.catalog-product-view .product-options-wrapper,
body.catalog-product-view .fieldset.product-options-wrapper {
    /* Treven feedback: the previous border-top + border-bottom on this
       wrapper rendered as 2 visible line dividers with empty padding
       between them. Stripped both borders + tightened spacing — the
       option cards inside have their own visual structure already. */
    margin: 12px 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Section header (option-group title — e.g. "Make it a Kit:", "Choose your caliber") */
body.catalog-product-view .product-options-wrapper > .fieldset > .field > .label,
body.catalog-product-view .product-options-wrapper .field.required > .label,
body.catalog-product-view .fieldset.product-options-wrapper > .field > .label {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    text-transform: none !important;       /* Apple uses sentence case */
    letter-spacing: -0.005em !important;
    color: #1d1d1f !important;
    margin: 0 0 12px !important;
    text-align: left !important;
}

/* Make the label-row container stack vertically — was using sm:w-1/2 split */
body.catalog-product-view .product-options-wrapper .field {
    display: block !important;
    margin: 0 0 20px !important;
}
body.catalog-product-view .product-options-wrapper .field > .label,
body.catalog-product-view .product-options-wrapper .field > div[class*="text-gray-900"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
}

/* Options list — kill the .nested indent, let cards span full info-col width */
body.catalog-product-view .options-list.nested,
body.catalog-product-view .product-options-wrapper .options-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Each option becomes a clickable card. Hide the native input visually
   but keep it functional — covers the entire card so the whole card is
   the click target. */
body.catalog-product-view .product-options-wrapper .field.choice {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.catalog-product-view .product-options-wrapper .field.choice input[type="checkbox"],
body.catalog-product-view .product-options-wrapper .field.choice input[type="radio"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

body.catalog-product-view .product-options-wrapper .field.choice > label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    background: #ffffff !important;
    border: 2px solid #d2d2d7 !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: left !important;
    line-height: 1.35 !important;
}

body.catalog-product-view .product-options-wrapper .field.choice:hover > label {
    border-color: #6e6e73 !important;
}

/* Selected state — Apple's signature blue ring + soft fill */
body.catalog-product-view .product-options-wrapper .field.choice input:checked ~ label,
body.catalog-product-view .product-options-wrapper .field.choice:has(input:checked) > label {
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 1px var(--ff-blue, #0071e3),
                0 4px 14px rgba(0, 113, 227, 0.10) !important;
    background: rgba(0, 113, 227, 0.04) !important;
}

/* Inside each card label there are two <span>s — first is the option
   name, second wraps the price. Layout them as left-title / right-price
   like Apple's iPad Pro config rows. */
body.catalog-product-view .product-options-wrapper .field.choice > label > span:first-child {
    flex: 1 1 auto !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

body.catalog-product-view .product-options-wrapper .field.choice > label > span:nth-child(2),
body.catalog-product-view .product-options-wrapper .field.choice .price-notice {
    flex: 0 0 auto !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--ff-blue, #0071e3) !important;
    white-space: nowrap !important;
    text-align: right !important;
}

body.catalog-product-view .product-options-wrapper .field.choice .price-container,
body.catalog-product-view .product-options-wrapper .field.choice .price-wrapper {
    color: inherit !important;
    font: inherit !important;
}

/* Style native <select> dropdowns the same premium way (for required
   options that are dropdown-type) */
body.catalog-product-view .product-options-wrapper select.form-input,
body.catalog-product-view .product-options-wrapper select {
    width: 100% !important;
    max-width: none !important;
    height: 56px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    border: 2px solid #d2d2d7 !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #1d1d1f !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body.catalog-product-view .product-options-wrapper select:hover {
    border-color: #6e6e73 !important;
}
body.catalog-product-view .product-options-wrapper select:focus {
    border-color: var(--ff-blue, #0071e3) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
}


/* ============================================================
   PDP CUSTOMIZABLE OPTIONS — Apple-style card grid (dropdown variant)
   ============================================================

   Companion to the .field.choice card treatment from commit 28bbd3b7
   (the 1911 hammer "Make it a Kit" pattern). That commit handled
   checkbox/radio custom options. This block handles the SELECT/
   dropdown variant — products like the 1911 Defender Barrel Selector
   where Caliber / Barrel Nose / Fluting render as native <select>s.

   ff-pdp-options.js builds a parallel <div class="ff-pdp-option-cards">
   sibling for every product-custom-option <select>, mirroring the
   <option>s as <button class="ff-pdp-option-card"> children. Card
   clicks sync the value back to the real <select> + dispatch a change
   event so MageWorx's price-recalc logic still fires. The actual
   <select> stays in the DOM (visually hidden) so form submission +
   browser required-field validation keep working.

   Visual language matches the .field.choice cards: 2 px #d2d2d7
   border, 14 px radius, brand-blue 1 px ring + soft 4 % blue fill +
   blue glow on selected. Apple iPad-Pro-style.
*/

/* Hide the original <select> when we've built cards over it. NOT
   display:none — keep it focusable so the browser can run native
   required-field validation (e.g., focus an unselected required
   <select> on form submit). The 1×1 clipped pattern keeps it in the
   accessibility tree but invisible. */
body.catalog-product-view select.ff-pdp-option-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    pointer-events: none !important;
    /* Preserve focusability so :invalid / required validation still works */
    opacity: 0 !important;
}

/* Card grid — auto-fits 140 px+ cards across the available width.
   Single-row on most options (3-5 choices); wraps gracefully when
   options run wider (e.g. caliber list with 9 entries). */
body.catalog-product-view .ff-pdp-option-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
}

/* On narrow phones, prefer 2 columns so options aren't pinched.
   Options with very long titles (e.g. "Hood Only - Spiral Fluting")
   wrap their text inside the card rather than overflowing. */
@media (max-width: 480px) {
    body.catalog-product-view .ff-pdp-option-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

body.catalog-product-view .ff-pdp-option-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    min-height: 64px;
    background: #ffffff;
    border: 2px solid #d2d2d7;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    /* Inside an Alpine x-init that mounts after page paint, cards may
       briefly render without selected state — we intentionally don't
       animate the initial paint to avoid an awkward flash. */
}

body.catalog-product-view .ff-pdp-option-card:hover {
    border-color: #86868b;
}

body.catalog-product-view .ff-pdp-option-card:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
    border-color: var(--ff-blue, #0071e3);
}

/* Selected state — Apple's signature blue ring + soft fill, identical
   visual language to the .field.choice :has(input:checked) treatment. */
body.catalog-product-view .ff-pdp-option-card.is-selected {
    border-color: var(--ff-blue, #0071e3);
    box-shadow: 0 0 0 1px var(--ff-blue, #0071e3),
                0 4px 14px rgba(0, 113, 227, 0.10);
    background: rgba(0, 113, 227, 0.04);
}

body.catalog-product-view .ff-pdp-option-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.3;
    /* Allow long option titles to wrap inside the card */
    word-break: break-word;
}

body.catalog-product-view .ff-pdp-option-card__price {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ff-blue, #0071e3);
    letter-spacing: 0.04em;
    line-height: 1.2;
}


/* ============================================================
   MEGAMENU — PISTOLS PANEL (premium hero-image cards)
   5 cards: XP 3C / XP COMP / XP PRO / XF PRO / Shop All 1911s
   Each card carries its own series eyebrow + hero image + title +
   tagline + "Shop" arrow link. Inherits the signature spark-border
   hover treatment via the dual `ff-megamenu__popular-card` class.
   ============================================================ */

.ff-megamenu__panel--pistols {
    /* Use the panel's full viewport width — cards span comfortably across
       up to 5 columns on wide desktops, gracefully wrap on narrower */
}

.ff-megamenu__pistols {
    max-width: 1480px;
    margin: 0 auto;
    padding: 36px var(--ff-container-pad, 32px) 48px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

@media (max-width: 1280px) {
    .ff-megamenu__pistols {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1100px;
    }
}

/* The pistol card is now a <div> wrapper (not <a>) so it can contain
   the main "Shop X" hero link AND a list of sub-cat links inside.
   The wrapper still owns the visual chrome (border, hover lift,
   shadow) and applies to its inner children. */
.ff-megamenu__pistol-card {
    position: relative;
    isolation: isolate;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    overflow: hidden !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.3s ease !important;
    height: 100%;
}

.ff-megamenu__pistol-card:hover,
.ff-megamenu__pistol-card:focus-within {
    transform: translateY(-3px) !important;
    border-color: rgba(0, 113, 227, 0.30) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08),
                0 4px 12px rgba(0, 113, 227, 0.06) !important;
    background: #ffffff !important;
}

/* Inner hero link — covers the image + title + tagline + main CTA.
   Click → land on the parent category page. */
.ff-megamenu__pistol-card-main {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex: 1 1 auto;
}
.ff-megamenu__pistol-card-main:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: -2px;
    border-radius: 14px;
}

/* Image area — pure white. No grey box, no gradient. Just the product
   photo sitting on the card. */
.ff-megamenu__pistol-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ff-megamenu__pistol-card-img img {
    max-width: 88%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Stronger drop-shadow so white-bg photos still ground visually
       on the lighter container. */
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.14));
}

.ff-megamenu__pistol-card:hover .ff-megamenu__pistol-card-img img,
.ff-megamenu__pistol-card:focus-visible .ff-megamenu__pistol-card-img img {
    transform: scale(1.04);
}

/* Card body — content sits below the image */
.ff-megamenu__pistol-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    text-align: left;
}

.ff-megamenu__pistol-card-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ff-blue, #0071e3);
    margin: 0 0 6px;
}

.ff-megamenu__pistol-card-tag {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(0, 113, 227, 0.12);
    border: 1px solid rgba(0, 113, 227, 0.30);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--ff-blue, #0071e3);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.ff-megamenu__pistol-card-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #1d1d1f;
    margin: 0 0 8px;
}

.ff-megamenu__pistol-card-tagline {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6e6e73;
    margin: 0 0 14px;
    flex: 1 1 auto;
    /* Truncate to 2 lines — keeps card heights uniform across the row */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ff-megamenu__pistol-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ff-blue, #0071e3);
    margin-top: auto;
    transition: gap 0.25s ease;
}

.ff-megamenu__pistol-card-cta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.ff-megamenu__pistol-card:hover .ff-megamenu__pistol-card-cta,
.ff-megamenu__pistol-card:focus-visible .ff-megamenu__pistol-card-cta {
    gap: 10px;
}

.ff-megamenu__pistol-card:hover .ff-megamenu__pistol-card-cta svg,
.ff-megamenu__pistol-card:focus-within .ff-megamenu__pistol-card-cta svg {
    transform: translateX(2px);
}

/* ============================================================
   INLINE SUB-CATEGORY LIST INSIDE EACH PISTOL CARD
   ============================================================
   Treven 2026-05-14: "having to scroll makes this look bad.
   reorganize these a bit better for customer use." Sub-cats moved
   INTO the hero cards (not a separate row below). Each card now
   has an optional drill-down list rendered at the bottom — cards
   without sub-cats (XP 3C, Shop All 1911s) just skip this block,
   and align-items: stretch on the grid keeps everything the same
   height visually. Whole megamenu fits in one row, no scroll. */
.ff-megamenu__pistol-card-subs {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 0;
    margin: 0 16px 12px;
    border-top: 1px solid #e8e8ed;
}
.ff-megamenu__pistol-card-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1d1d1f;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.ff-megamenu__pistol-card-sub:hover,
.ff-megamenu__pistol-card-sub:focus-visible {
    background: rgba(0, 113, 227, 0.06);
    color: var(--ff-blue, #0071e3);
    padding-left: 8px;
    outline: none;
}
.ff-megamenu__pistol-card-sub-arrow {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--ff-blue, #0071e3);
    transition: transform 0.15s ease;
}
.ff-megamenu__pistol-card-sub:hover .ff-megamenu__pistol-card-sub-arrow,
.ff-megamenu__pistol-card-sub:focus-visible .ff-megamenu__pistol-card-sub-arrow {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .ff-megamenu__pistol-card-sub,
    .ff-megamenu__pistol-card-sub-arrow,
    .ff-megamenu__pistol-card-sub:hover .ff-megamenu__pistol-card-sub-arrow {
        transform: none !important;
        transition: none !important;
    }
}


/* ============================================================
   PDP QTY STEPPER — custom +/- buttons with visible number
   Replaces the native <input type="number"> spinner arrows (which
   are inconsistent across browsers and easy to miss) with a clean
   3-segment control: [-] [number] [+].
   ============================================================ */

body.catalog-product-view .ff-qty-stepper {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: stretch !important;
    height: 52px !important;
    background: #ffffff !important;
    border: 1.5px solid #d2d2d7 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.catalog-product-view .ff-qty-stepper:focus-within {
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
}

body.catalog-product-view .ff-qty-stepper__btn {
    flex: 0 0 40px !important;
    width: 40px !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1d1d1f !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    padding: 0 !important;
}

body.catalog-product-view .ff-qty-stepper__btn svg {
    width: 14px !important;
    height: 14px !important;
}

body.catalog-product-view .ff-qty-stepper__btn:hover {
    background: #f5f5f7 !important;
    color: var(--ff-blue, #0071e3) !important;
    outline: none !important;
}

/* Keyboard focus on PDP qty stepper +/- buttons — same bg + brand-
   blue text as hover plus a 2px brand-blue outline ring with 2px
   offset. Companion to the bundled qty input focus brand-spec
   alignment from commit 73c18e3e. */
body.catalog-product-view .ff-qty-stepper__btn:focus-visible {
    background: #f5f5f7 !important;
    color: var(--ff-blue, #0071e3) !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

body.catalog-product-view .ff-qty-stepper__btn:active {
    background: #e8e8ed !important;
}

/* Disabled state — the inline JS in product-info.phtml flips
   aria-disabled="true" on the minus button when qty is at the
   minimum (1). Visual: dim glyph + not-allowed cursor + neutral
   bg on hover so the customer reads "this won't do anything"
   without the silent no-op feeling broken. */
body.catalog-product-view .ff-qty-stepper__btn[aria-disabled="true"] {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

body.catalog-product-view .ff-qty-stepper__btn[aria-disabled="true"]:hover {
    background: transparent !important;
    color: inherit !important;
}

body.catalog-product-view .ff-qty-stepper__field {
    flex: 0 0 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 1px solid #e8e8ed !important;
    border-right: 1px solid #e8e8ed !important;
}

/* The Hyvä-rendered qty <input> sits inside .ff-qty-stepper__field.
   Strip its border (we have one on the outer stepper) and make the
   number unmissable. */
body.catalog-product-view .ff-qty-stepper__field input,
body.catalog-product-view .ff-qty-stepper__field input[name="qty"],
body.catalog-product-view .ff-qty-stepper__field input[type="number"] {
    width: 60px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1d1d1f !important;
    text-align: center !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #1d1d1f !important;
    opacity: 1 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}

/* Hide the native spinner arrows since we have our own +/- buttons */
body.catalog-product-view .ff-qty-stepper__field input::-webkit-inner-spin-button,
body.catalog-product-view .ff-qty-stepper__field input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* The Hyvä qty block wraps the input in extra div(s) — neutralize them.
   :not(script):not(style) is critical: Hyvä's quantity.phtml emits an
   inline <script> as a direct child of this container before the <input>.
   Browsers hide <script> by default (display:none); plain `> *` would
   force display:contents on it too, which flattens the element and
   surfaces its JS source as visible text in the page. Treven flagged this
   as visible "findPathParam('id'), productId: '...'" leak text on
   products with MageWorx options, but the bug actually affected every
   PDP — it just looked worse next to a long options config block. */
body.catalog-product-view .ff-qty-stepper__field > *:not(script):not(style):not(template),
body.catalog-product-view .ff-qty-stepper__field .field.qty,
body.catalog-product-view .ff-qty-stepper__field .field.qty > *:not(script):not(style):not(template) {
    display: contents !important;
}

/* Hide any sr-only Quantity label that gets pulled in via the qty block */
body.catalog-product-view .ff-qty-stepper__field label {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    margin: -1px !important;
    padding: 0 !important;
}


/* ============================================================
   PDP INFO-COLUMN HIGHLIGHTS — dense spec rows
   Auto-extracted <strong>LABEL</strong> + value pairs from the
   product's short description, rendered inside the info column.
   Fills the empty space next to the gallery image with useful
   scannable data instead of a sparse column.
   ============================================================ */

body.catalog-product-view .ff-pdp-info__highlights {
    margin: 24px 0 0 !important;
    padding: 20px 0 0 !important;
    border-top: 1px solid #e5e7eb !important;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0 !important;
}

body.catalog-product-view .ff-pdp-info__highlight-row {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    gap: 16px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f1f3 !important;
    align-items: baseline !important;
    margin: 0 !important;
}

body.catalog-product-view .ff-pdp-info__highlight-row:last-child {
    border-bottom: 0 !important;
}

body.catalog-product-view .ff-pdp-info__highlight-label {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #6e6e73 !important;
    margin: 0 !important;
}

body.catalog-product-view .ff-pdp-info__highlight-value {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #1d1d1f !important;
    margin: 0 !important;
}


/* ============================================================
   PDP TRUST MARKS — premium FFL/USA/Lifetime badges in info column
   ============================================================ */

body.catalog-product-view .ff-pdp-info__trust {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

body.catalog-product-view .ff-pdp-info__trust li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #1d1d1f !important;
}

body.catalog-product-view .ff-pdp-info__trust li svg {
    flex: 0 0 auto;
    width: 20px !important;
    height: 20px !important;
    color: var(--ff-blue, #00A3FF) !important;
}


/* ============================================================
   PDP HIGHLIGHTS ROW — premium spec tiles (DEPRECATED, kept for back-compat)
   The block-based row never rendered correctly; replaced with the
   info-column highlights above.
   ============================================================ */

body.catalog-product-view .ff-pdp-highlights {
    display: none !important;
}

/* ============================================================
   END DEPRECATED HIGHLIGHTS ROW
   ============================================================ */
/* dummy block kept for the orphan CSS below — original section continues: */

body.catalog-product-view .ff-pdp-highlights {
    width: 100%;
    margin: 56px 0 0;
    padding: 0;
}

body.catalog-product-view .ff-pdp-highlights__inner {
    width: 100%;
    max-width: none;
    padding: 0 32px;
}

@media (min-width: 1280px) {
    body.catalog-product-view .ff-pdp-highlights__inner {
        padding: 0 56px;
    }
}

body.catalog-product-view .ff-pdp-highlights__eyebrow {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ff-blue, #00A3FF);
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.catalog-product-view .ff-pdp-highlights__eyebrow::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ff-blue, #00A3FF);
    box-shadow: 0 0 0 3px rgba(0, 163, 255, 0.18);
}

/* Grid — auto-fits 2-6 tiles in a row, wraps on narrow viewports */
body.catalog-product-view .ff-pdp-highlights__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

@media (min-width: 1024px) {
    body.catalog-product-view .ff-pdp-highlights__grid--2 { grid-template-columns: repeat(2, 1fr); }
    body.catalog-product-view .ff-pdp-highlights__grid--3 { grid-template-columns: repeat(3, 1fr); }
    body.catalog-product-view .ff-pdp-highlights__grid--4 { grid-template-columns: repeat(4, 1fr); }
    body.catalog-product-view .ff-pdp-highlights__grid--5 { grid-template-columns: repeat(5, 1fr); }
    body.catalog-product-view .ff-pdp-highlights__grid--6 { grid-template-columns: repeat(6, 1fr); }
}

/* Tile — premium feel with subtle border + brand-blue label */
body.catalog-product-view .ff-pdp-highlights__tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    background:
        radial-gradient(ellipse 95% 70% at 50% 0%, #ffffff 0%, #f9fbfd 100%);
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    min-height: 92px;
}

body.catalog-product-view .ff-pdp-highlights__tile:hover {
    border-color: rgba(0, 163, 255, 0.30);
    box-shadow: 0 8px 20px rgba(0, 163, 255, 0.06),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

body.catalog-product-view .ff-pdp-highlights__label {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6e6e73;
    margin: 0;
}

body.catalog-product-view .ff-pdp-highlights__value {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1f;
    margin: 0;
    /* Allow values up to 3 lines without breaking the grid */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ============================================================
   404 / NO-ROUTE PAGE — branded recovery experience
   ============================================================ */
.ff-404 {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: 80px 24px 96px;
    overflow: hidden;
}

.ff-404__ghost {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: clamp(8rem, 22vw, 18rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(0, 113, 227, 0.06);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.ff-404__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.ff-404__eyebrow {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ff-blue, #0071e3);
    margin: 0 0 16px;
}

.ff-404__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #1d1d1f;
    text-transform: none;
    line-height: 1.05;
    margin: 0 0 16px;
}

.ff-404__subtitle {
    font-size: 1.125rem;
    line-height: 1.55;
    color: #6e6e73;
    max-width: 560px;
    margin: 0 auto 36px;
}

/* Search row — premium pill input + 56 px navy → blue submit, same
   visual language as login / contact / cart so the 404 doesn't feel
   like a different site. */
.ff-404__search {
    max-width: 560px;
    margin: 0 auto 32px;
}

.ff-404__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ff-404__search-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.ff-404__search-input {
    flex: 1;
    height: 52px;
    padding: 0 20px;
    background: #ffffff;
    border: 1.5px solid #d2d2d7;
    color: #1d1d1f;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 1rem;
    box-shadow: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ff-404__search-input::placeholder {
    color: #6e6e73;
    opacity: 1;
}

.ff-404__search-input:focus {
    border-color: var(--ff-blue, #0071e3);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
}

.ff-404__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 28px;
    background: #0a1929;
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.ff-404__search-btn:hover {
    background: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30);
    outline: none;
}

/* Keyboard focus on 404-page search button — submits the recovery
   search form. Same lift + brand-blue treatment as hover plus a
   2px white outline ring (visible on the brand-blue button) with
   3px offset. */
.ff-404__search-btn:focus-visible {
    background: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30);
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Primary + secondary action row — primary is the navy pill we use
   everywhere else, secondary is a quiet text link with brand-blue
   underline on hover. */
.ff-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 24px;
    margin-bottom: 56px;
}

.ff-404__cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 36px;
    background: #0a1929;
    color: #ffffff !important;
    border-radius: 12px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.ff-404__cta-primary:hover {
    background: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30);
    outline: none;
}
.ff-404__cta-primary:focus-visible {
    background: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    /* Double-ring (white inner + brand-blue outer) since the focus
       surface is brand-blue. */
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3);
    outline: none;
}

.ff-404__cta-secondary {
    color: var(--ff-blue, #0071e3) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.ff-404__cta-secondary:hover {
    color: #0a1929 !important;
    text-decoration: underline !important;
    outline: none;
}
.ff-404__cta-secondary:focus-visible {
    color: #0a1929 !important;
    text-decoration: underline !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
}

/* Popular destinations — 4 cards in a 2×2 grid on mobile, 4-up on
   desktop. White card with thin border, brand-blue icon ring, gentle
   lift on hover (matches Shop by Purpose card pattern). */
.ff-404__popular {
    padding-top: 40px;
    border-top: 1px solid #e8e8ed;
}

.ff-404__popular-label {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #6e6e73;
    margin: 0 0 24px;
}

.ff-404__popular-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .ff-404__popular-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ff-404__popular-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 16px;
    text-align: left;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.ff-404__popular-card:hover {
    border-color: rgba(0, 113, 227, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.08);
    outline: none;
}
.ff-404__popular-card:focus-visible {
    border-color: rgba(0, 113, 227, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.08);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}

.ff-404__popular-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(0, 113, 227, 0.08);
    color: var(--ff-blue, #0071e3);
}

.ff-404__popular-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ff-404__popular-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    line-height: 1.2;
}

.ff-404__popular-desc {
    margin-top: 4px;
    font-size: 0.8125rem;
    color: #6e6e73;
    line-height: 1.4;
}

.ff-404__popular-chevron {
    flex: 0 0 auto;
    color: #c7c7cc;
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.ff-404__popular-card:hover .ff-404__popular-chevron {
    color: var(--ff-blue, #0071e3);
    transform: translateX(2px);
}

/* Stack the search row on small screens so the input keeps a usable
   tap-target width and the button drops below at full width. */
@media (max-width: 640px) {
    .ff-404__search-row {
        flex-direction: column;
        gap: 10px;
    }
    .ff-404__search-btn {
        width: 100%;
    }
    .ff-404__cta-primary {
        width: 100%;
    }
}


/* ============================================================
   SEARCH RESULTS — empty-state recovery panel
   ============================================================ */
.ff-search-empty {
    max-width: 880px;
    margin: 0 auto;
    padding: 64px 24px 80px;
}

.ff-search-empty__inner {
    text-align: center;
}

.ff-search-empty__eyebrow {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ff-blue, #0071e3);
    margin: 0 0 12px;
}

.ff-search-empty__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d1d1f;
    text-transform: none;
    line-height: 1.1;
    margin: 0 0 14px;
    word-break: break-word;
}

.ff-search-empty__subtitle {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: #6e6e73;
    max-width: 520px;
    margin: 0 auto 28px;
}

/* Tip list — compact bullet column, dotted accent */
.ff-search-empty__tips {
    list-style: none;
    padding: 0;
    margin: 0 auto 32px;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    color: #6e6e73;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.ff-search-empty__tips li {
    position: relative;
    padding-left: 18px;
}

.ff-search-empty__tips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ff-blue, #0071e3);
    opacity: 0.5;
}

/* Retry row — premium pill input + 52 px navy → blue submit, same
   visual language as login/contact/cart so the retry feels native. */
.ff-search-empty__retry {
    max-width: 540px;
    margin: 0 auto 48px;
}

.ff-search-empty__retry-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ff-search-empty__retry-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.ff-search-empty__retry-input {
    flex: 1;
    height: 52px;
    padding: 0 20px;
    background: #ffffff;
    border: 1.5px solid #d2d2d7;
    color: #1d1d1f;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 1rem;
    box-shadow: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
}
.ff-search-empty__retry-input::placeholder {
    color: #6e6e73;
    opacity: 1;
}
.ff-search-empty__retry-input:focus {
    border-color: var(--ff-blue, #0071e3);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
}

.ff-search-empty__retry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 28px;
    background: #0a1929;
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.ff-search-empty__retry-btn:hover {
    background: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30);
}

/* Keyboard focus on search-empty retry button — submits a fresh
   search query when initial results were empty. Matches hover lift
   + brand-blue plus a 2px white outline ring (visible on the navy/
   brand-blue button) with 3px offset. */
.ff-search-empty__retry-btn:focus-visible {
    background: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30);
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Popular destinations — same card pattern as the 404 page */
.ff-search-empty__popular {
    padding-top: 36px;
    border-top: 1px solid #e8e8ed;
}

.ff-search-empty__popular-label {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #6e6e73;
    margin: 0 0 20px;
}

.ff-search-empty__popular-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 768px) {
    .ff-search-empty__popular-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ff-search-empty__popular-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 16px;
    text-align: left;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.ff-search-empty__popular-card:hover {
    border-color: rgba(0, 113, 227, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.08);
}

.ff-search-empty__popular-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(0, 113, 227, 0.08);
    color: var(--ff-blue, #0071e3);
}

.ff-search-empty__popular-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ff-search-empty__popular-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    line-height: 1.2;
}

.ff-search-empty__popular-desc {
    margin-top: 3px;
    font-size: 0.8125rem;
    color: #6e6e73;
    line-height: 1.4;
}

.ff-search-empty__popular-chevron {
    flex: 0 0 auto;
    color: #c7c7cc;
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}
.ff-search-empty__popular-card:hover .ff-search-empty__popular-chevron {
    color: var(--ff-blue, #0071e3);
    transform: translateX(2px);
}

/* Backend note messages (e.g., "did you mean") rendered inside our
   panel instead of the bare core notice. */
.ff-search-empty__notes {
    margin-top: 32px;
    padding: 16px 20px;
    background: rgba(0, 113, 227, 0.06);
    border: 1px solid rgba(0, 113, 227, 0.15);
    border-radius: 12px;
    color: #1d1d1f;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.ff-search-empty__notes p {
    margin: 0;
}

@media (max-width: 640px) {
    .ff-search-empty__retry-row {
        flex-direction: column;
        gap: 10px;
    }
    .ff-search-empty__retry-btn {
        width: 100%;
    }
}


/* ============================================================
   KEYBOARD FOCUS INDICATORS — WCAG 2.4.7 fallback
   ============================================================
   Defends against any element with a base-state `outline: none`
   declaration that doesn't pair it with a custom focus indicator.
   Earlier in this file there is already a `*:focus-visible` rule at
   line ~8061, but that has the lowest possible specificity and is
   beaten by element-selector base rules (e.g. `.ff-apple-hero__image-
   link { outline: none; }` on the homepage hero pistol images). This
   block uses element selectors plus !important so a real focus ring
   wins over any zeroed-out outline.

   Form inputs / selects / textareas already get the brand-blue 4 px
   glow ring on `:focus` (matches design standard) — those rules win
   for both mouse and keyboard. We don't double-up on inputs to avoid
   stacking rings.
*/
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible:not([tabindex="-1"]) {
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 3px !important;
    border-radius: 4px;
}


/* ============================================================
   FREE SHIPPING TRUST BANNER — slim navy bar above the header
   ============================================================
   Single static message, no rotation, no dismiss. Surfaces the
   $200 free-shipping threshold as a trust signal site-wide.
   Lifts cart-add rate per industry benchmarks; industry-standard
   placement is right above the brand header.
*/
.ff-free-ship-banner {
    background: #0a1929;
    color: #f5f5f7;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    padding: 8px 16px;
    text-align: center;
}

.ff-free-ship-banner__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ff-free-ship-banner__icon {
    display: inline-flex;
    color: var(--ff-blue, #00A3FF);
    flex: 0 0 auto;
}

.ff-free-ship-banner__text {
    color: #f5f5f7;
}

.ff-free-ship-banner__text strong {
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.04em;
}

.ff-free-ship-banner__divider {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.35);
}

.ff-free-ship-banner__sub {
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 480px) {
    .ff-free-ship-banner {
        font-size: 0.75rem;
        padding: 7px 12px;
    }
    .ff-free-ship-banner__divider,
    .ff-free-ship-banner__sub {
        display: none;
    }
}


/* ============================================================
   PDP STOCK URGENCY — "Only N left in stock"
   ============================================================
   Soft amber pill that surfaces only when on-hand qty is low
   (≤10 by default, set in product-info.phtml). Sits between the
   stock-status row and the qty + Add-to-Cart row so the customer
   sees scarcity right before deciding to buy. Soft-amber tone
   reads as "informational urgency" without screaming sale.
*/
body.catalog-product-view .ff-pdp-info__urgency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 8px 12px;
    background: rgba(255, 184, 0, 0.10);
    border: 1px solid rgba(255, 184, 0, 0.35);
    border-radius: 10px;
    color: #b45309;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

body.catalog-product-view .ff-pdp-info__urgency svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #f59e0b;
}


/* ============================================================
   PDP DELIVERY ESTIMATE — "Get it by Tue, May 12"
   ============================================================
   Soft brand-blue pill that sits below the urgency banner (or
   directly below the stock-status row when there's no urgency).
   Single-date arrival commitment — Amazon / Walmart / Best Buy
   pattern that lifts cart-add rate by removing "when will it
   arrive?" friction. Subtle "if you order today" suffix keeps
   the date conditional rather than promising.
*/
body.catalog-product-view .ff-pdp-info__delivery {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 8px 12px;
    background: rgba(0, 113, 227, 0.06);
    border: 1px solid rgba(0, 113, 227, 0.18);
    border-radius: 10px;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.875rem;
    line-height: 1.3;
    letter-spacing: 0;
}

body.catalog-product-view .ff-pdp-info__delivery svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--ff-blue, #0071e3);
}

body.catalog-product-view .ff-pdp-info__delivery strong {
    font-weight: 700;
    color: #0a1929;
}

body.catalog-product-view .ff-pdp-info__delivery-sub {
    color: #6e6e73;
    font-weight: 400;
}


/* ============================================================
   NEWSLETTER VALUE-PROP REFINEMENT
   ============================================================
   Eyebrow + sharper title + benefit-focused description, plus a
   "no spam" reassurance line below the form. Eyebrow is brand-
   blue micro-caps to set up the "Be first to know" headline
   without competing with it. Fine print is muted gray so it
   reads as supporting copy, not a call to action.
*/
.ff-newsletter-eyebrow {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: var(--ff-blue, #0071e3) !important;
    margin: 0 0 8px !important;
}

.ff-newsletter-section .ff-newsletter-form-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100%;
    max-width: 480px;
}

/* Override the older .ff-newsletter-fine rule (decade-stale 1rem
   muted text). Compact, centered, matches the brand-Inter family. */
.ff-newsletter-section .ff-newsletter-fine {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: #6e6e73 !important;
    text-align: center !important;
    margin: 0 !important;
    padding-top: 4px;
    letter-spacing: 0.01em;
}

@media (min-width: 768px) {
    .ff-newsletter-section .ff-newsletter-form-wrap {
        align-items: flex-end;
    }
    .ff-newsletter-section .ff-newsletter-fine {
        text-align: right !important;
    }
}


/* ============================================================
   PDP RECENTLY VIEWED — "Pick up where you left off" carousel
   ============================================================
   Mirrors Smart Picks visual language so the two carousels feel
   like a unified "keep shopping" zone below the main product.
   Self-suppresses (x-show="hasProducts()") when the visitor has
   no other items in localStorage — first-time visitors don't see
   it at all.
*/
body.catalog-product-view .ff-recently-viewed {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid #e8e8ed;
}

body.catalog-product-view .ff-recently-viewed__header {
    margin-bottom: 24px;
    text-align: center;
}

body.catalog-product-view .ff-recently-viewed__eyebrow {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ff-blue, #0071e3);
    margin: 0 0 8px;
}

body.catalog-product-view .ff-recently-viewed__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #1d1d1f;
    margin: 0;
    text-transform: none;
}

body.catalog-product-view .ff-recently-viewed__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 768px) {
    body.catalog-product-view .ff-recently-viewed__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
}

@media (min-width: 1280px) {
    body.catalog-product-view .ff-recently-viewed__grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

body.catalog-product-view .ff-recently-viewed__card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 14px;
    padding: 12px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

body.catalog-product-view .ff-recently-viewed__card:hover {
    border-color: rgba(0, 113, 227, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.08);
    outline: none;
}
body.catalog-product-view .ff-recently-viewed__card:focus-visible {
    border-color: rgba(0, 113, 227, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.08);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}

body.catalog-product-view .ff-recently-viewed__img-wrap {
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

body.catalog-product-view .ff-recently-viewed__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

body.catalog-product-view .ff-recently-viewed__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 4px 4px;
}

body.catalog-product-view .ff-recently-viewed__name {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #1d1d1f;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

body.catalog-product-view .ff-recently-viewed__price {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ff-blue, #0071e3);
}


/* ============================================================
   CART SAVE-FOR-LATER (Move to Wishlist) — branded action link
   ============================================================
   Magento's Wishlist module ships a "Move to Wishlist" anchor
   into every cart line-item's `.item-actions` row via the
   checkout_cart_item_renderers layout XML. Visible to logged-in
   customers (wishlist is per-customer; guests see a sign-in
   redirect on click). Restyles the link so it reads as a
   secondary action — quiet brand-blue text, heart icon hint
   via CSS prefix, matches the design system's compact-action
   row typography.
*/
body.checkout-cart-index .item-actions .action.towishlist,
body.checkout-cart-index .item-actions .action-towishlist {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--ff-blue, #0071e3) !important;
    background: rgba(0, 113, 227, 0.06) !important;
    border: 1px solid rgba(0, 113, 227, 0.18) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

/* Heart icon prefix via pseudo so we don't need to override the
   vendor template. SVG inlined as data URI; brand-blue stroke. */
body.checkout-cart-index .item-actions .action.towishlist::before,
body.checkout-cart-index .item-actions .action-towishlist::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

body.checkout-cart-index .item-actions .action.towishlist:hover,
body.checkout-cart-index .item-actions .action-towishlist:hover {
    background: rgba(0, 113, 227, 0.10) !important;
    border-color: rgba(0, 113, 227, 0.32) !important;
    color: #0a1929 !important;
}

/* Keyboard focus on cart-page "Save for later" link — keyboard users
   tabbing through cart-line item actions need a clearer indicator
   than the subtle background + color shift. 2px brand-blue outline
   ring + 2px offset matches the focus-visible pattern across the
   site; bg and border-color match hover for visual parity. */
body.checkout-cart-index .item-actions .action.towishlist:focus-visible,
body.checkout-cart-index .item-actions .action-towishlist:focus-visible {
    background: rgba(0, 113, 227, 0.10) !important;
    border-color: rgba(0, 113, 227, 0.32) !important;
    color: #0a1929 !important;
    outline: 2px solid var(--ff-blue, #0071e3) !important;
    outline-offset: 2px !important;
}

/* "Save for later" feels more familiar than "Move to Wishlist" for
   a cart context. The vendor template hard-codes "Move to Wishlist"
   text inside a <span> child — replace the text via CSS by zeroing
   out the visible span and inserting our own via ::after. Keeps the
   click-handler intact. */
body.checkout-cart-index .item-actions .action.towishlist > span,
body.checkout-cart-index .item-actions .action-towishlist > span {
    font-size: 0;
}
body.checkout-cart-index .item-actions .action.towishlist > span::after,
body.checkout-cart-index .item-actions .action-towishlist > span::after {
    content: 'Save for later';
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}


/* ============================================================
   CATEGORY INTRO PARAGRAPH — fallback intro on PLPs
   ============================================================
   Renders when admin description is empty or trivially short
   (Page Builder shells with no real text). One-paragraph intro
   in the muted body color above the product grid. Helps both
   SEO (real text on landing pages) and customer orientation
   (what's on this page, who it's for).
*/
.page-products .ff-category-intro {
    margin: 0 auto 24px;
    padding: 0 var(--ff-container-pad, 24px);
    max-width: 880px;
}

.page-products .ff-category-intro p {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #6e6e73;
    letter-spacing: 0.005em;
    text-align: center;
}

@media (min-width: 768px) {
    .page-products .ff-category-intro p {
        font-size: 1.0625rem;
        line-height: 1.65;
    }
}


/* ============================================================
   STICKY HEADER SEARCH — prominent "Search" pill on desktop
   ============================================================
   The page-header is already sticky (position:sticky + top:0).
   Default Hyvä renders the search trigger as a small icon-only
   button, which means a customer scrolling deep into a page has
   to hunt for the magnifying-glass to use search. Industry-
   standard premium pattern (Apple, Best Buy) is a visible search
   pill that's never hidden.

   On desktop (≥768px) the icon button gets a "Search" label
   inline, a subtle pill background, and a keyboard-shortcut hint
   (⌘K / Ctrl+K) that the underlying Hyvä shortcut handler
   already binds. Hover lifts the pill to brand-blue. On mobile
   the icon stays icon-only — space is at a premium and search
   is one tap away through the hamburger.
*/
@media (min-width: 768px) {
    .page-header #menu-search-icon {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 14px 8px 12px !important;
        min-width: 200px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
    }

    .page-header #menu-search-icon svg {
        width: 18px !important;
        height: 18px !important;
        color: rgba(255, 255, 255, 0.85) !important;
        flex: 0 0 auto;
    }

    /* "Search" label — sits between the icon and the kbd hint */
    .page-header #menu-search-icon::before {
        content: 'Search';
        font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
        font-size: 0.875rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        letter-spacing: 0.005em;
        order: 0; /* between SVG (which we'll order: -1) and ::after */
    }
    .page-header #menu-search-icon svg {
        order: -1;
    }

    /* Keyboard-shortcut hint (⌘K on Mac, Ctrl+K elsewhere). The
       underlying button already binds the listener via
       @keydown.window="searchShortcut" — this just visually
       advertises it. Right-aligned so it sits at the end of the
       pill regardless of label length. */
    .page-header #menu-search-icon::after {
        content: '⌘ K';
        margin-left: auto;
        padding: 2px 6px;
        font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
        font-size: 0.6875rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 4px;
        letter-spacing: 0.05em;
        order: 2;
    }

    .page-header #menu-search-icon:hover {
        background: rgba(0, 163, 255, 0.12) !important;
        border-color: rgba(0, 163, 255, 0.32) !important;
    }
    .page-header #menu-search-icon:hover::before,
    .page-header #menu-search-icon:hover svg {
        color: var(--ff-blue, #00A3FF) !important;
    }
    .page-header #menu-search-icon:hover::after {
        background: rgba(0, 163, 255, 0.18);
        border-color: rgba(0, 163, 255, 0.30);
        color: #ffffff;
    }

    .page-header #menu-search-icon:focus-visible {
        outline: 2px solid var(--ff-blue, #00A3FF) !important;
        outline-offset: 2px !important;
    }
}

@media (min-width: 1280px) {
    .page-header #menu-search-icon {
        min-width: 260px !important;
    }
}

/* ────────────────────────────────────────────────────────────────────
   SEARCH = ICON ONLY ON ALL LAYOUTS (Treven 2026-05-29)
   The "Search" pill above (200–260px wide on desktop) crowded the header:
   it collided with the SHOTGUNS nav item on the right and squeezed the
   centered menu so it overflowed left into the "FUSION FIREARMS" wordmark.
   This block supersedes the pill so the trigger is a plain magnifying-glass
   icon at every breakpoint — same size/treatment as the account + cart
   icons. The ⌘K / Ctrl+K keyboard shortcut still works (bound in JS); only
   the visual pill + label + hint are removed. Tapping the icon still opens
   the search form. */
.page-header #menu-search-icon {
    min-width: 0 !important;
    gap: 0 !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}
.page-header #menu-search-icon::before,
.page-header #menu-search-icon::after {
    content: none !important;
    display: none !important;
}
.page-header #menu-search-icon svg {
    width: 22px !important;
    height: 22px !important;
}


/* ============================================================
   CART BADGE PULSE — fires on item-add via ff-cart-badge-pulse.js
   ============================================================
   The JS observer adds `.is-pulsing` to the cart-count badge for
   ~1.2s whenever the displayed count goes up. CSS handles the
   actual visual: a single scale-and-glow burst that's loud enough
   to catch the eye but ends cleanly so the badge doesn't keep
   pulsing forever.

   Animation order:
     0%   — baseline scale + opaque brand-blue ring
     35%  — scaled up 1.35×, ring expanded + faded
     100% — back to baseline; ring fully faded
*/
@keyframes ff-cart-badge-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 163, 255, 0.55);
    }
    35% {
        transform: scale(1.35);
        box-shadow: 0 0 0 14px rgba(0, 163, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 163, 255, 0);
    }
}

#menu-cart-icon span.is-pulsing {
    animation: ff-cart-badge-pulse 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
    transform-origin: center center;
}

/* Respect reduced-motion preferences — replace the pulse with a
   single subtle color flash so the visual cue still fires but
   without movement. */
@media (prefers-reduced-motion: reduce) {
    @keyframes ff-cart-badge-pulse {
        0%, 100% { background: var(--ff-blue, #00A3FF); }
        50%      { background: #ffffff; color: var(--ff-blue, #00A3FF); }
    }
    #menu-cart-icon span.is-pulsing {
        animation: ff-cart-badge-pulse 0.6s ease-in-out 1;
        transform: none;
    }
}


/* ============================================================
   MEGAMENU COL EYEBROW + ICON — for standard-layout panels
   ============================================================
   The standard-layout megamenu panels (Accessories, Services,
   Shotguns) used to be plain text columns. Now each column's
   eyebrow row has a small brand-blue stroke-icon next to the
   label, matching the visual language used elsewhere in the
   site (404 page popular cards, search-empty cards, PDP trust
   badges).
*/
.ff-megamenu__eyebrow--with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ff-megamenu__col-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--ff-blue, #00A3FF);
    opacity: 0.9;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Subtle scale lift when the customer hovers any link inside
   the column, or when any descendant link is keyboard-focused
   — small UX flourish that ties the icon to the col. :focus-within
   propagates the focus state up to the parent col so keyboard tabs
   through descendant links trigger the same visual feedback as
   mouse hover. */
.ff-megamenu__col:hover .ff-megamenu__col-icon,
.ff-megamenu__col:focus-within .ff-megamenu__col-icon {
    opacity: 1;
    transform: scale(1.05);
}


/* ============================================================
   MOBILE MENU SEARCH — top-of-drawer search input
   ============================================================
   Sits between the drawer header and the scrollable nav. Lets the
   visitor launch a query without closing the drawer first.
   Submits to the standard /catalogsearch/result/?q=… endpoint so
   the SERP renders inline (same handler as the desktop search).
*/
.ff-mobile-menu-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 12px;
    padding: 0 12px 0 14px;
    height: 48px;
    background: #f5f5f7;
    border: 1.5px solid transparent;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ff-mobile-menu-search:focus-within {
    background: #ffffff;
    border-color: var(--ff-blue, #0071e3);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
}

.ff-mobile-menu-search__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: #6e6e73;
}

.ff-mobile-menu-search:focus-within .ff-mobile-menu-search__icon {
    color: var(--ff-blue, #0071e3);
}

.ff-mobile-menu-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 4px;
    background: transparent;
    border: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    color: #1d1d1f;
    outline: none;
}

.ff-mobile-menu-search__input::placeholder {
    /* Bumped from #86868b (3.94:1) to #6e6e73 (5.93:1) to pass WCAG
       1.4.3 AA contrast on the white search field. Last remaining
       low-contrast grey on the site (sister fix to commit that bumped
       83 other instances earlier). */
    color: #6e6e73;
    opacity: 1;
}

.ff-mobile-menu-search__submit {
    flex: 0 0 auto;
    align-self: stretch;
    padding: 0 14px;
    margin: 4px -8px 4px 0;
    background: #0a1929;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ff-mobile-menu-search__submit:hover {
    background: var(--ff-blue, #0071e3);
}
.ff-mobile-menu-search__submit:focus-visible {
    background: var(--ff-blue, #0071e3);
    /* Double-ring (white inner + brand-blue outer) since the focus
       surface is brand-blue. Without this, keyboard focus was
       indistinguishable from mouse hover. */
    box-shadow: 0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3);
    outline: none;
}


/* ============================================================
   PLP review stars: suppress fake-zero ratings.
   Magento renders the .rating-summary block (5 outline SVG stars)
   on every product card even when zero reviews exist, with
   aria-label "0 out of 5 stars". That reads to shoppers as a
   real 0-out-of-5 rating and undermines trust. Hide the block
   entirely on product cards with no real reviews; cards that
   do have reviews keep their stars (aria-label will read e.g.
   "4.5 out of 5 stars" and not match this selector).
   ============================================================ */
.products-grid .product-item .rating-summary[aria-label*="0 out of 5 stars"],
.products-grid .rating-summary[aria-label*="0 out of 5 stars"],
.product-item .rating-summary[aria-label*="0 out of 5 stars"],
.block.related .rating-summary[aria-label*="0 out of 5 stars"],
.block.upsell  .rating-summary[aria-label*="0 out of 5 stars"],
.block.crosssell .rating-summary[aria-label*="0 out of 5 stars"] {
    display: none !important;
}

/* Also hide the wrapper "reviews-actions" link ("Be the first to review")
   on PLP cards when no rating exists — it adds clutter. Keeps it on PDP
   where review prompts are intentional. */
.products-grid .product-reviews-summary .reviews-actions {
    display: none !important;
}


/* ============================================================
   PDP review-write form — branded card surface.
   Replaces Hyvä's plain `.card` wrapper + bland heading. The form
   structure inside (Alpine + GraphQL submission for logged-in users)
   stays untouched; we only restyle the wrapping card and the guest
   empty-state CTA. Inputs inside still inherit `.form-input` styling
   from the global form rules above.
   ============================================================ */
.ff-review-card-wrap {
    max-width: 720px;
    margin: 48px auto;
    padding: 0 16px;
}
.ff-review-card {
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 16px;
    padding: 40px 32px;
    box-shadow: 0 2px 12px rgba(10, 25, 41, 0.04);
}
.ff-review-card__eyebrow {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #00A3FF;
    margin: 0 0 8px;
}
.ff-review-card__title {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #0a1929;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-transform: uppercase;
}
.ff-review-card__subtitle {
    font-size: 0.9375rem;
    color: #424245;
    line-height: 1.55;
    margin: 0 0 24px;
    max-width: 540px;
}

/* Guest empty-state: real CTA pair, not an underline link. */
.ff-review-empty {
    margin-top: 8px;
    padding-top: 8px;
}
.ff-review-empty__msg {
    font-size: 0.9375rem;
    color: #424245;
    line-height: 1.6;
    margin: 0 0 24px;
    max-width: 560px;
}
.ff-review-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.ff-review-empty__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 28px;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 12px;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ff-review-empty__cta--primary {
    background: #0a1929;
    color: #ffffff !important;
    border: 1px solid #0a1929;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16);
}
.ff-review-empty__cta--primary:hover,
.ff-review-empty__cta--primary:focus-visible {
    background: #00A3FF;
    border-color: #00A3FF;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 163, 255, 0.30);
}
.ff-review-empty__cta--ghost {
    background: transparent;
    color: #0a1929 !important;
    border: 1.5px solid #d2d2d7;
}
.ff-review-empty__cta--ghost:hover,
.ff-review-empty__cta--ghost:focus-visible {
    color: #00A3FF !important;
    border-color: #00A3FF;
    background: rgba(0, 163, 255, 0.04);
}
.ff-review-empty__cta:focus-visible {
    outline: 2px solid #00A3FF;
    outline-offset: 3px;
}

@media (max-width: 520px) {
    .ff-review-card { padding: 32px 24px; }
    .ff-review-empty__actions { flex-direction: column; }
    .ff-review-empty__cta { width: 100%; }
}


/* ============================================================
   CART DRAWER — mobile tap targets (WCAG 2.5.5 / Apple HIG ≥44px).
   The cart drawer is already full-width on mobile via Tailwind's
   `w-full sm:w-[480px]` on the dialog plus our @media (min-width:640px)
   width override. Below 640px users see a true full-screen drawer.
   On small screens the close X (40×40), qty +/- (34×34), and remove
   (32×32) controls are all below the 44×44 minimum tap target — easy
   to mis-tap on a real iPhone or Android device. Bump them on mobile
   only so the desktop visual stays compact.
   ============================================================ */
@media (max-width: 768px) {
    /* Unified drawer close button — 48×48 for an ultra-easy dismiss
       (cart drawer is full-screen on mobile, so the X is the *only*
       way to close apart from ESC). Larger SVG to match. */
    .ff-mobile-menu-close,
    .ff-drawer-close,
    .ff-cart-drawer__close,
    .ff-account-drawer__close,
    [aria-label="Close menu"].btn,
    [aria-label="Close"].w-10,
    dialog[class*="open:flex"] [aria-label="Close menu"] {
        width: 48px !important;
        height: 48px !important;
    }
    .ff-mobile-menu-close svg,
    .ff-drawer-close svg,
    .ff-cart-drawer__close svg,
    .ff-account-drawer__close svg,
    dialog[class*="open:flex"] [aria-label="Close menu"] svg {
        width: 26px !important;
        height: 26px !important;
    }

    /* Cart line-item qty +/- — 44×44 with proportionally larger glyph */
    .ff-cart-item__qty-btn {
        width: 44px !important;
        height: 44px !important;
    }
    .ff-cart-item__qty-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Cart line-item remove (trash) — 44×44 with proportional glyph */
    .ff-cart-item__remove {
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
    }
    .ff-cart-item__remove svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Sticky-CTA "View Cart" / "Checkout" footer buttons — keep their
       existing 56px height (already ≥44) but make sure tap area stays
       clear of safe-area-inset on iPhone notch / home-indicator. */
    .ff-cart-drawer__footer {
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }

    /* PDP qty stepper — desktop button width was 40px (height 52). Bump
       width to 48 on mobile so the +/- hit a 48×52 tap area. SVG to 18px
       so the glyph stays readable at the bigger size. */
    body.catalog-product-view .ff-qty-stepper__btn {
        flex: 0 0 48px !important;
        width: 48px !important;
    }
    body.catalog-product-view .ff-qty-stepper__btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* PDP wishlist + compare pills — desktop padding 8/14 left them at
       ~30px tall (below the 44px tap target). Bump padding so they meet
       44 on mobile while staying visually compact on desktop. */
    .ff-pdp-info__extra-actions a,
    .ff-pdp-info__extra-actions button {
        min-height: 44px !important;
        padding: 10px 18px !important;
    }

    /* Header icon buttons (hamburger + cart + account + search). Hyvä
       ships these as `<button class="btn bg-transparent p-1|p-2">`
       containing a 24×24 SVG, which renders as 32–40px tap area —
       below the 44px WCAG 2.5.5 / Apple HIG minimum. Bump min-width
       and min-height to 44 on mobile so primary navigation isn't a
       precision-tap-required mini button. Desktop is unchanged
       because the same buttons sit at p-1 in the desktop header where
       hover precision is the norm. */
    .page-header button.btn.bg-transparent,
    .page-header a.btn.bg-transparent,
    .ff-mobile-menu-trigger,
    [aria-label="Open menu"].btn,
    [aria-label="Toggle search form"].btn,
    [aria-label="Search"].btn,
    [aria-label="Toggle minicart"].btn,
    [aria-label="Customer Login"].btn,
    [aria-label="My Account"].btn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}


/* ============================================================
   FLOATING "BACK TO TOP" BUTTON
   Mounts via web/js/ff-back-to-top.js. Hidden by default; appears
   when the user has scrolled past 600px. One-tap smooth-scroll to top.
   Premium ecom pattern (Apple, Best Buy, Williams-Sonoma).
   ============================================================ */
.ff-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 40;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0a1929;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(10, 25, 41, 0.22), 0 2px 6px rgba(10, 25, 41, 0.16);
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.ff-to-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.ff-to-top:hover {
    background: var(--ff-blue, #0071e3);
    box-shadow: 0 10px 28px rgba(0, 113, 227, 0.32), 0 2px 6px rgba(0, 113, 227, 0.18);
    transform: translateY(-2px) scale(1);
    outline: none;
}

/* Keyboard focus on back-to-top button — split from :focus to
   :focus-visible so click-then-stay-focused doesn't leave a sticky
   ring on mouse users. Also adds a 2px brand-blue outline ring
   which the bare focus state was missing (only had bg + lift). */
.ff-to-top:focus-visible {
    background: var(--ff-blue, #0071e3);
    box-shadow: 0 10px 28px rgba(0, 113, 227, 0.32), 0 2px 6px rgba(0, 113, 227, 0.18);
    transform: translateY(-2px) scale(1);
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}
.ff-to-top:active {
    transform: translateY(0) scale(0.96);
    box-shadow: 0 4px 12px rgba(10, 25, 41, 0.18);
}

/* Mobile: respect iPhone home-indicator and step out of the way of the
   sticky add-to-cart bar on PDPs (which mounts at z-index 45) */
@media (max-width: 768px) {
    .ff-to-top {
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
    }
    body.catalog-product-view .ff-to-top {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* Don't render under the sticky social rail on desktop */
@media (min-width: 1280px) {
    .ff-to-top {
        right: 84px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ff-to-top {
        transition: opacity 0.15s ease;
        transform: none !important;
    }
    .ff-to-top.is-visible {
        transform: none !important;
    }
}


/* ============================================================
   FORM SUBMIT BUTTON: LOADING STATE
   Applied via Alpine x-data isSubmitting + :class="{'is-submitting': isSubmitting}"
   on forms that POST natively (forgot-password, contact). Prevents double-submit
   on slow networks and gives the customer immediate visual feedback that the
   request is in flight. Spinner inherits currentColor so it works on every
   button color (navy primary, ghost outline, brand-blue, etc.).
   ============================================================ */
button.is-submitting,
[type="submit"].is-submitting {
    cursor: wait !important;
    opacity: 0.85 !important;
    pointer-events: none;
}

button.is-submitting > span,
[type="submit"].is-submitting > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

button.is-submitting > span::after,
[type="submit"].is-submitting > span::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ff-form-submitting-spin 0.65s linear infinite;
    flex-shrink: 0;
}

@keyframes ff-form-submitting-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    button.is-submitting > span::after,
    [type="submit"].is-submitting > span::after {
        animation: none;
        border-top-color: currentColor;
        opacity: 0.4;
    }
}


/* ============================================================
   DEALER APPLICATION THANKS / CONFIRMATION PAGE
   Reuses .ff-dealer-hero base styling but adds the success-state
   chrome: confirmation check, structured next-step CTA row, polished
   "back to home" link. New applicant now has a clear path forward
   while their FFL is being reviewed (2 business days) instead of a
   single underlined dead-end link.
   ============================================================ */
.ff-dealer-thanks .ff-dealer-thanks__inner {
    text-align: center;
    max-width: 720px;
    padding: 96px 32px;
}

.ff-dealer-thanks__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.18);
}

.ff-dealer-thanks__sub {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ff-blue, #0071e3);
    margin: 40px 0 16px;
}

.ff-dealer-thanks__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}

.ff-dealer-thanks__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 24px;
    border-radius: 12px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.ff-dealer-thanks__btn--primary {
    background: #0a1929;
    color: #ffffff;
    border: 1px solid #0a1929;
    box-shadow: 0 4px 14px rgba(10, 25, 41, 0.16);
}

.ff-dealer-thanks__btn--primary:hover {
    background: var(--ff-blue, #0071e3);
    border-color: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30);
    outline: none;
}
.ff-dealer-thanks__btn--primary:focus-visible {
    background: var(--ff-blue, #0071e3);
    border-color: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    /* Double-ring (white inner + brand-blue outer) since the focus
       surface is brand-blue. */
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.30),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3);
    outline: none;
}

.ff-dealer-thanks__btn--ghost {
    /* Thanks page sits on the dark navy dealer hero, so ghost buttons need
       light text + a light border to be visible (was near-black on dark). */
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.ff-dealer-thanks__btn--ghost:hover {
    background: #ffffff;
    color: var(--ff-blue, #0071e3);
    border-color: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.12);
    outline: none;
}
.ff-dealer-thanks__btn--ghost:focus-visible {
    background: #ffffff;
    color: var(--ff-blue, #0071e3);
    border-color: var(--ff-blue, #0071e3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.12);
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}

.ff-dealer-thanks__home {
    margin: 8px 0 0;
}

.ff-dealer-thanks__home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ff-blue, #0071e3);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}

.ff-dealer-thanks__home-link:hover {
    color: #0a1929;
    text-decoration: underline;
    outline: none;
}
.ff-dealer-thanks__home-link:focus-visible {
    color: #0a1929;
    text-decoration: underline;
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
    border-radius: 4px;
}

.ff-dealer-thanks__home-link > span[aria-hidden="true"] {
    transition: transform 0.2s ease;
}

.ff-dealer-thanks__home-link:hover > span[aria-hidden="true"],
.ff-dealer-thanks__home-link:focus-visible > span[aria-hidden="true"] {
    transform: translateX(-3px);
}

/* Stack CTAs vertically on narrow viewports */
@media (max-width: 540px) {
    .ff-dealer-thanks__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .ff-dealer-thanks__btn {
        width: 100%;
    }
}


/* ============================================================
   CART COUPON FORM — Apply Discount / Cancel Coupon button polish.

   Hyvä's vendor coupon.phtml emits the submit button with class
   "btn btn-secondary w-full". Site-wide we only style .btn-secondary
   inside dialog + .block-minicart contexts (line 4551, 4575) — so on
   the actual cart page the button rendered as a flat Tailwind grey
   default. Out of step with the premium navy / brand-blue language
   the rest of the site speaks.

   Going with a ghost-outline pattern (1px #d2d2d7 base, brand-blue
   text → fills brand-blue with white text on hover) rather than a
   filled navy treatment so the secondary action stays visually
   subordinate to the primary "Proceed to Checkout" CTA — same
   hierarchy Apple, Best Buy, Williams-Sonoma use for sub-actions
   inside cart summary panels.

   Selector scope is .coupon-form (the <details> wrapper Hyvä's
   template emits) so this never bleeds into other btn-secondary
   uses across the site. Both "Apply Discount" + "Cancel Coupon"
   buttons get the same treatment (they share class + selector).
   ============================================================ */
.coupon-form button[type="submit"],
.coupon-form .btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 48px;
    padding: 12px 20px;

    background: #ffffff !important;
    color: var(--ff-blue, #0071e3) !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 12px !important;

    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    cursor: pointer;
    transition: background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                border-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.coupon-form button[type="submit"]:hover,
.coupon-form .btn.btn-secondary:hover {
    background: var(--ff-blue, #0071e3) !important;
    color: #ffffff !important;
    border-color: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.20);
    outline: none;
}
.coupon-form button[type="submit"]:focus-visible,
.coupon-form .btn.btn-secondary:focus-visible {
    background: var(--ff-blue, #0071e3) !important;
    color: #ffffff !important;
    border-color: var(--ff-blue, #0071e3) !important;
    transform: translateY(-1px);
    /* Double-ring (white inner + brand-blue outer) since the focus
       surface is brand-blue. */
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.20),
                0 0 0 2px #ffffff,
                0 0 0 5px var(--ff-blue, #0071e3);
    outline: none;
}

.coupon-form button[type="submit"]:active,
.coupon-form .btn.btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.24);
    transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    .coupon-form button[type="submit"],
    .coupon-form .btn.btn-secondary {
        transition-duration: 0.01ms;
    }
    .coupon-form button[type="submit"]:hover,
    .coupon-form .btn.btn-secondary:hover {
        transform: none;
    }
}


/* ============================================================
   HIDE LUMA-ERA INLINE WISHLIST + COMPARE SIDEBAR WIDGETS

   Hyvä's vendor templates emit two sidebar-style widget blocks
   (`.wishlist-widget` + `.compare-widget`) wrapping <h2 id="wishlist-
   sidebar"> + <h2 id="compare-sidebar"> Alpine-conditional content.
   They're designed for Luma's 2-column sidebar layout — when populated
   they render an inline H2 + UL list of items. With our flat 1-column
   design, they pop up as awkward unstyled blocks at the bottom of
   PDPs / PLPs / cart pages.

   Customers reach their wishlist via the header account drawer ("My
   Wishlist" link in the logged-in menu) and the comparison page at
   /catalog/product_compare/. The inline sidebar widgets are vestigial.

   Empty-state is already handled by Alpine x-if="itemCount" so the
   block stays out of DOM when empty — but the moment a customer adds
   anything to wishlist or compare, these unstyled lists pop up. This
   rule kills them outright. Future: replace with a branded mini-
   summary popover triggered from the cart icon if/when that polish
   is wanted.
   ============================================================ */
.wishlist-widget,
.compare-widget {
    display: none !important;
}


/* ============================================================
   PDP service-request CTA
   ------------------------------------------------------------
   Modest link below product info column inviting customers to
   request gunsmithing service for the firearm they're viewing.
   Intentionally subtle — service is a niche need; we don't want
   it competing with the primary buy-now CTA.
   ============================================================ */
.ff-pdp-service-cta {
    margin: 24px 0;
    padding: 16px 0;
    border-top: 1px solid #e5e5e7;
}
.ff-pdp-service-cta__link {
    display: inline-block;
    color: #6e6e73;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color 0.18s;
}
.ff-pdp-service-cta__link:hover {
    color: var(--ff-blue, #00A3FF);
}

/* ============================================================
   PRINT INVOICE — premium business invoice layout
   ============================================================
   Lives on body.ff-page-invoice (the layout XML adds that class
   on /sales/order/printInvoice/order_id/X/). Same template
   renders both the on-screen view AND the printed PDF; the
   @media print block at the bottom flips into a plain-paper
   layout when the customer hits Cmd/Ctrl+P.

   Strategy:
   1. On screen: white "paper" canvas centered on a soft gray
      backdrop, max-width 8.5in so it visually reads as a
      letter-size document.
   2. Print: every piece of site chrome is hidden; the canvas
      becomes full bleed; @page rules set margins; brand
      accents stay (red↔blue rule, brand blue for headings)
      because color-adjust: exact lets the printer keep them. */

body.ff-page-invoice {
    background: #f4f5f7;
}

/* ============================================================
   INVOICE PAGE TOP BAR
   ============================================================
   Sits above the .ff-invoice card on screen, mirrors the site
   header's dark navy + Fusion diamond + "FUSION FIREARMS"
   wordmark, but CENTERED. This is the customer's only brand
   touchpoint on the screen view (the inline brand strip inside
   the card is print-only). Treven: "I really like the top bar
   on the checkout page, I want this same bar with logo and
   text centered at the top, with the invoice below it." */

.ff-invoice-topbar {
    background: #0a1929;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 0;
}
.ff-invoice-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #ffffff;
    transition: opacity 0.18s ease;
}
.ff-invoice-topbar__brand:hover {
    opacity: 0.92;
    color: #ffffff;
    text-decoration: none;
}
.ff-invoice-topbar__brand:focus-visible {
    outline: 2px solid var(--ff-blue, #00A3FF);
    outline-offset: 4px;
    border-radius: 4px;
    color: #ffffff;
}
.ff-invoice-topbar__diamond {
    display: block;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
/* Only the <img> renders inside <picture>. Don't display:block the
   <source> — that turns the meta element into a visible empty box
   that pushes the layout apart. */
.ff-invoice-topbar__diamond img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ff-invoice-topbar__diamond source {
    display: none;
}
.ff-invoice-topbar__wordmark {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1;
}

/* Brand red↔blue accent line under the top bar — same gradient
   we use on the print invoice header rule, just full-width here. */
.ff-invoice-topbar__rule {
    height: 3px;
    background: linear-gradient(90deg,
        #00A3FF 0%,
        #00A3FF 38%,
        #c8102e 50%,
        #00A3FF 62%,
        #00A3FF 100%);
    margin: 0 0 32px 0;
}

@media (max-width: 720px) {
    .ff-invoice-topbar { padding: 14px 18px; }
    .ff-invoice-topbar__diamond { width: 40px; height: 40px; }
    .ff-invoice-topbar__wordmark { font-size: 1.125rem; letter-spacing: 0.14em; }
    .ff-invoice-topbar__rule { margin: 0 0 22px 0; }
}

/* On screen the inline brand strip inside the card is hidden
   (the topbar above already handles brand identity). On paper
   it comes back so the printed invoice still has the company
   logo + name + tagline + contact info on the document itself. */
.ff-invoice__brand.print-only {
    display: none;
}

/* Hide every distracting site element on the print page so on
   screen we already see only the invoice. (The @media print
   block below is broader — it hides chat widgets too which
   stay visible on screen for support.)

   Print invoice extends customer_account layout, which adds the
   account sidebar AND a 2-col grid (.account .columns) — both
   need to die on this route or the invoice gets jammed into the
   narrow content column with the sidebar floating beside it. */
body.ff-page-invoice .ff-promo-bar,
body.ff-page-invoice .ff-free-ship-banner,
body.ff-page-invoice .ff-header,
body.ff-page-invoice header.page-header,
body.ff-page-invoice .breadcrumbs,
body.ff-page-invoice .page-title-wrapper,
body.ff-page-invoice .page-main > .container > h1,
body.ff-page-invoice .ff-footer,
body.ff-page-invoice footer.page-footer,
body.ff-page-invoice .ff-megamenu,
body.ff-page-invoice .nav-sections,
body.ff-page-invoice .page-bottom,
body.ff-page-invoice .ff-back-to-top,
/* Customer-account chrome that must NOT show on the invoice page —
   sidebar nav, sidebar-additional, and the dashboard's H1+subtitle
   greeting block all need to be suppressed so the invoice itself
   is the only thing on screen. */
body.ff-page-invoice .sidebar-main,
body.ff-page-invoice .sidebar.sidebar-main,
body.ff-page-invoice .sidebar-additional,
body.ff-page-invoice .sidebar.sidebar-additional,
body.ff-page-invoice .ff-account-greeting {
    display: none !important;
}

/* Reset the customer_account 2-col grid back to a single block.
   Without this, .account .columns still does
   `display:grid; grid-template-columns: 260px minmax(0,1fr)`
   and the invoice ends up jammed into the narrow column on the
   right with empty 260px on the left — that's the "squished on
   the left" Treven saw after closing the print dialog. */
body.ff-page-invoice .columns,
body.ff-page-invoice.account .columns,
body.ff-page-invoice .column.main,
body.ff-page-invoice.account .column.main {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.ff-page-invoice .page-main {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    box-shadow: none !important;
}

/* No padding on the maincontent so the topbar can run edge-to-edge,
   and so the brand red↔blue accent rule under it spans the full
   viewport. The invoice card below has its own internal padding +
   max-width so it stays comfortably centered. */
body.ff-page-invoice main#maincontent {
    padding: 0 0 48px !important;
}

/* The invoice canvas — feels like a sheet of paper on screen. */
.ff-invoice {
    box-sizing: border-box;
    width: 100%;
    max-width: 8.5in;
    margin: 0 auto;
    background: #ffffff;
    color: #1d1d1f;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    padding: 0.6in 0.65in 0.55in;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* ========== HEADER STRIP ========== */
.ff-invoice__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}
.ff-invoice__brand {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1 1 60%;
    min-width: 0;
}
/* The diamond mark — same image the header uses (`images/diamond.png`).
   `<picture>` wraps the <img>, so we size both. 72px gives the brand
   a confident visual presence on the document without crowding the
   wordmark+tagline column to its right. */
.ff-invoice__logo,
picture.ff-invoice__logo {
    flex-shrink: 0;
    display: block;
    width: 72px;
    height: 72px;
    margin-top: 0;
}
.ff-invoice__logo-img,
.ff-invoice__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ff-invoice__logo source {
    display: none;
}
.ff-invoice__brand-text {
    flex: 1 1 auto;
    min-width: 0;
}
.ff-invoice__brand-name {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    margin: 0 0 4px 0;
}
.ff-invoice__brand-line {
    font-size: 12px;
    font-weight: 500;
    color: #4a4a52;
    margin: 0 0 6px 0;
    letter-spacing: 0.01em;
}
.ff-invoice__brand-contact {
    font-size: 11px;
    color: #6e6e73;
    margin: 0;
    letter-spacing: 0.01em;
}
.ff-invoice__meta {
    flex: 0 0 auto;
    text-align: right;
    min-width: 200px;
}
.ff-invoice__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #0071e3;
    margin: 0 0 12px 0;
    line-height: 1;
}
.ff-invoice__meta-list {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}
.ff-invoice__meta-row {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin: 0 0 3px 0;
}
.ff-invoice__meta-row dt {
    color: #6e6e73;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    font-weight: 600;
    min-width: 84px;
    text-align: left;
}
.ff-invoice__meta-row dd {
    margin: 0;
    color: #1d1d1f;
    font-weight: 600;
    font-feature-settings: "tnum";
}
.ff-invoice__status {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8f1fc;
}
.ff-invoice__status--unpaid { background: #fef3c7; color: #b45309; }
.ff-invoice__status--current { background: #e8f1fc; color: #0071e3; }
.ff-invoice__status--other { background: #f4f5f7; color: #4a4a52; }

/* Brand red↔blue hairline accent under the header strip. */
.ff-invoice__rule {
    height: 2px;
    margin: 0 0 22px 0;
    background: linear-gradient(90deg,
        #00A3FF 0%,
        #00A3FF 38%,
        #c8102e 50%,
        #00A3FF 62%,
        #00A3FF 100%);
    border-radius: 2px;
}

/* ========== ADDRESSES ========== */
.ff-invoice__addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e5e5ea;
}
.ff-invoice__addr {
    min-width: 0;
}
.ff-invoice__label {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6e6e73;
    margin: 0 0 6px 0;
}
.ff-invoice__addr-body {
    font-size: 12px;
    line-height: 1.55;
    color: #1d1d1f;
    margin: 0;
    font-style: normal;
}

/* ========== ITEMS TABLE ========== */
.ff-invoice__body { margin-bottom: 18px; }
.ff-invoice__items + .ff-invoice__items {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e5ea;
}
.ff-invoice__items-heading {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d1d1f;
    margin: 0 0 10px 0;
}
.ff-invoice__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
    font-size: 12px;
}
.ff-invoice__th {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6e6e73;
    text-align: left;
    padding: 10px 8px;
    border-bottom: 2px solid #1d1d1f;
}
.ff-invoice__th--num {
    text-align: right;
    white-space: nowrap;
}
.ff-invoice__th--product { padding-left: 0; }

.ff-invoice__tr {
    border-bottom: 1px solid #ececf0;
    page-break-inside: avoid;
    break-inside: avoid;
}
.ff-invoice__tr--child td { padding-top: 4px; padding-bottom: 4px; font-size: 11px; color: #4a4a52; }
.ff-invoice__td {
    padding: 10px 8px;
    vertical-align: top;
    color: #1d1d1f;
}
.ff-invoice__td--num {
    text-align: right;
    white-space: nowrap;
    font-feature-settings: "tnum";
}
.ff-invoice__td--line-total {
    font-weight: 600;
}
.ff-invoice__td--thumb {
    width: 56px;
    padding-left: 0;
    padding-right: 0;
}
.ff-invoice__td--product {
    padding-left: 12px;
}
.ff-invoice__thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 4px;
    background: #fafafa;
    border: 1px solid #ececf0;
}
/* Yireo NextGenImages wraps <img> in <picture> at runtime and
   copies the class to both. Force the inner img to take the full
   thumb size so we don't get a tiny natural-size image inside a
   correctly-sized container. Mirrors the .ff-orders__item-img fix.
   <source> stays display:none so it doesn't render as a phantom
   empty box. */
.ff-invoice__thumb picture,
.ff-invoice__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ff-invoice__thumb source {
    display: none;
}
picture.ff-invoice__thumb {
    padding: 0;
    overflow: hidden;
}
.ff-invoice__thumb--placeholder {
    display: inline-block;
    background: #f4f5f7;
}
.ff-invoice__product-name {
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 2px 0;
    line-height: 1.35;
}
.ff-invoice__product-sku {
    font-size: 11px;
    color: #6e6e73;
    margin: 0 0 4px 0;
    font-feature-settings: "tnum";
}
.ff-invoice__product-options {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
    font-size: 11px;
    color: #4a4a52;
}
.ff-invoice__product-options li { margin: 0 0 1px 0; }
.ff-invoice__product-options li span { color: #6e6e73; margin-right: 4px; }

/* ========== TOTALS STACK ==========
   Hyvä's totals.phtml outputs a flat sequence of <div> pairs:
       <div>Label</div><div data-th="Label"><span>$X.YZ</span></div>
   Grand total wraps both children in <strong>. We use CSS grid
   to lay them out as label/value rows, and `:has(> strong)` to
   target the grand-total row for the bold + top-rule treatment. */
.ff-invoice__totals {
    display: flex;
    justify-content: flex-end;
    margin: 14px 0 0 0;
}
.ff-invoice__totals-list {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    row-gap: 6px;
    width: 100%;
    max-width: 340px;
    margin: 0;
    font-size: 12px;
    font-feature-settings: "tnum";
}
.ff-invoice__totals-list > div {
    color: #4a4a52;
    padding: 4px 0;
}
/* Odd children = label cells (Subtotal, Shipping, Tax, ...) */
.ff-invoice__totals-list > div:nth-child(odd) {
    color: #6e6e73;
    text-align: left;
}
/* Even children = value cells */
.ff-invoice__totals-list > div:nth-child(even) {
    color: #1d1d1f;
    text-align: right;
    font-weight: 500;
}
.ff-invoice__totals-list .price {
    color: inherit;
}
/* Grand-total row — the only one with a direct <strong> child.
   `:has()` is supported in all current browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+). */
.ff-invoice__totals-list > div:has(> strong) {
    border-top: 2px solid #1d1d1f;
    margin-top: 8px;
    padding-top: 12px;
}
.ff-invoice__totals-list > div > strong {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ff-invoice__totals-list > div:nth-child(even) > strong .price,
.ff-invoice__totals-list > div:nth-child(even) > strong {
    color: #0071e3;
}

/* ========== FOOTER ========== */
.ff-invoice__foot {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e5e5ea;
    text-align: center;
}
.ff-invoice__thanks {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1d1d1f;
    margin: 0 0 8px 0;
}
.ff-invoice__terms {
    font-size: 11px;
    color: #6e6e73;
    line-height: 1.6;
    margin: 0;
}
.ff-invoice__terms strong {
    color: #1d1d1f;
    font-weight: 600;
}

/* ========== TOP ACTION BAR (Back / Download / Print) ==========
   Sits inside the invoice card, above the brand strip, right-
   aligned. Hidden on print so paper output stays clean. The
   primary "Print" button is filled navy → blue on hover; the
   ghost "Download" + "Back" siblings are outlined and turn blue
   on hover. SVG icons inline in the template — no external font
   dependency. */
.ff-invoice__top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 18px 0;
    padding-bottom: 14px;
    border-bottom: 1px dashed #ececf0;
}
.ff-invoice__top-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ff-invoice__top-btn--ghost {
    background: transparent;
    color: #1d1d1f;
    border-color: #d2d2d7;
}
.ff-invoice__top-btn--ghost:hover {
    color: #0071e3;
    border-color: #0071e3;
}
.ff-invoice__top-btn--primary {
    background: #0a1929;
    color: #ffffff;
    border-color: #0a1929;
}
.ff-invoice__top-btn--primary:hover {
    background: #0071e3;
    border-color: #0071e3;
    transform: translateY(-1px);
}
.ff-invoice__top-btn:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 3px;
}
.ff-invoice__top-btn svg {
    flex-shrink: 0;
}

/* ========== BOTTOM "BACK TO MY ORDERS" LINK ==========
   Quiet bottom-right link — not a button. Long invoices that
   scroll need a tail-end escape route, but the primary action
   spotlight already lives at the top. */
.ff-invoice__bottom-link {
    margin: 18px 0 0 0;
    text-align: right;
}
.ff-invoice__back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6e6e73;
    text-decoration: none;
    transition: color 0.18s ease;
}
.ff-invoice__back-link:hover {
    color: #0071e3;
}
.ff-invoice__back-link:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 3px;
    border-radius: 4px;
    color: #0071e3;
}
.ff-invoice__back-link svg {
    flex-shrink: 0;
}

/* ========== MOBILE-SCREEN TWEAKS ========== */
@media (max-width: 720px) {
    .ff-invoice {
        padding: 24px 18px 22px;
        border-radius: 0;
        box-shadow: none;
        border-left: 0;
        border-right: 0;
    }
    .ff-invoice__head {
        flex-direction: column;
        gap: 16px;
    }
    .ff-invoice__meta {
        text-align: left;
        width: 100%;
    }
    .ff-invoice__meta-row {
        justify-content: flex-start;
        gap: 10px;
    }
    .ff-invoice__title { font-size: 28px; }
    .ff-invoice__addresses {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ff-invoice__table { font-size: 11px; }
    .ff-invoice__td--thumb { width: 44px; }
    .ff-invoice__thumb { width: 44px; height: 44px; }
    .ff-invoice__top-actions {
        flex-wrap: wrap;
        justify-content: stretch;
    }
    .ff-invoice__top-btn {
        flex: 1 1 30%;
        justify-content: center;
        padding: 10px 12px;
    }
}

/* ========== PRINT (paper / PDF) ==========
   Real money rules. Browser print preview becomes a clean
   business invoice — no header, no footer, no chat widget,
   no breadcrumbs, no megamenu. */
@media print {
    @page {
        size: Letter;
        margin: 0.5in;
    }

    /* Reset the canvas for paper. */
    body,
    body.ff-page-invoice,
    body.ff-page-invoice .page-wrapper,
    body.ff-page-invoice .page-main,
    body.ff-page-invoice .columns,
    body.ff-page-invoice .column.main,
    body.ff-page-invoice main#maincontent {
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    /* Anything that isn't part of the invoice is gone on paper. */
    body .ff-promo-bar,
    body .ff-free-ship-banner,
    body header.page-header,
    body .ff-header,
    body .ff-megamenu,
    body .nav-sections,
    body .breadcrumbs,
    body .page-title-wrapper,
    body .ff-footer,
    body footer.page-footer,
    body .ff-back-to-top,
    body .messages,
    body iframe,
    body [data-mage-init],
    body .ff-invoice__top-actions,
    body .ff-invoice__bottom-link,
    body .ff-invoice__actions,
    body .ff-invoice-topbar,
    body .ff-invoice-topbar__rule,
    body .no-print,
    /* The Fusion chatbot widget. Floats in the
       bottom-right of every page — its launcher (`#ff-chatbot-fab`)
       was printing as a stray white circle on the paper version. */
    body #ff-chatbot-widget,
    body #ff-chatbot-fab,
    body #ff-chatbot-window,
    body #ff-chat-window {
        display: none !important;
    }

    /* Inline brand strip is screen-hidden but PRINT-VISIBLE so the
       printed invoice still has the diamond + wordmark + contact
       info on the document itself (the top bar above is on-screen
       chrome and doesn't print). */
    .ff-invoice__brand.print-only {
        display: flex !important;
    }

    /* Pull the invoice flush with the @page margins (no extra
       border/shadow/padding — let the printer's margins
       do the work). */
    .ff-invoice {
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: 11pt;
        line-height: 1.45;
    }

    /* Force colors to print (off by default in most browsers). */
    .ff-invoice,
    .ff-invoice * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Slightly tighter typography for paper. */
    .ff-invoice__title { font-size: 28pt; }
    .ff-invoice__brand-name { font-size: 16pt; }
    .ff-invoice__brand-line { font-size: 9pt; }
    .ff-invoice__brand-contact { font-size: 8.5pt; }
    .ff-invoice__th { font-size: 8.5pt; }
    .ff-invoice__td { font-size: 10pt; padding: 8px 6px; }
    .ff-invoice__product-name { font-size: 10.5pt; }
    .ff-invoice__product-sku { font-size: 8.5pt; }
    .ff-invoice__totals-list { font-size: 10pt; max-width: 3.2in; }
    .ff-invoice__totals-list > div > strong { font-size: 14pt; }
    .ff-invoice__thanks { font-size: 11pt; }
    .ff-invoice__terms { font-size: 8.5pt; }

    /* Don't break a row across pages. */
    .ff-invoice__tr { page-break-inside: avoid; break-inside: avoid; }
    .ff-invoice__head, .ff-invoice__addresses { page-break-inside: avoid; break-inside: avoid; }
    .ff-invoice__totals { page-break-inside: avoid; break-inside: avoid; }
    .ff-invoice__foot { page-break-inside: avoid; break-inside: avoid; }
}

/* ============================================================
   ACCOUNT DASHBOARD — Account Information + Address Book cards
   ============================================================
   Same design language as the Recent Orders widget: section
   header with Oswald uppercase title + "Edit" link on the right,
   2-column card grid (stacks on mobile), each card has a label-
   style header with a small icon chip, body text in Inter, and
   a footer action bar with .ff-btn-outline pills.

   These cards are display-only (the customer reads info + clicks
   the dedicated edit action) — no spark animation, no hover lift.
   Spark animation stays reserved for clickable surfaces (order
   cards, warranty card) per Treven's directive. */

.ff-account-section {
    margin: 28px 0 0 0;
}

/* The .ff-orders__widget-header pattern is already defined for
   Recent Orders — these account sections just reuse it directly.
   See `.ff-orders__widget-header` / `.ff-orders__widget-title` /
   `.ff-orders__view-all` for the canonical styles. */

.ff-account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 768px) {
    .ff-account-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

.ff-account-card {
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 18px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ff-account-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ff-account-card__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 113, 227, 0.08);
    color: var(--ff-blue, #0071e3);
    border-radius: 999px;
}
.ff-account-card__icon svg {
    width: 18px;
    height: 18px;
}
.ff-account-card__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.3;
}

.ff-account-card__body {
    flex: 1 1 auto;
}
.ff-account-card__line {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #1d1d1f;
    margin: 0 0 4px 0;
}
.ff-account-card__line:last-child { margin-bottom: 0; }
.ff-account-card__line--strong {
    font-weight: 600;
}
.ff-account-card__line--muted {
    color: #6e6e73;
    font-style: italic;
}

/* Address block — preserve newlines (we hand-format with \n + nl2br) */
.ff-account-card__address {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #1d1d1f;
    margin: 0;
    font-style: normal;
}

.ff-account-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    padding-top: 4px;
}

/* Secondary inline link inside the card footer (e.g. "Change password"
   next to the primary "Edit" pill). Text-link style with arrow. */
.ff-account-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ff-blue, #0071e3);
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}
.ff-account-card__link:hover {
    color: #0064c8;
    transform: translateX(2px);
    text-decoration: none;
}
.ff-account-card__link:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Mobile: tighten the card padding and stack the footer actions. */
@media (max-width: 640px) {
    .ff-account-card { padding: 20px 22px; }
    .ff-account-card__footer { flex-direction: column; align-items: stretch; gap: 10px; }
    .ff-account-card__footer .ff-btn-outline,
    .ff-account-card__footer .ff-btn-primary { width: 100%; }
}


/* ============================================================
   ACCOUNT FORM PAGES — Edit Address, Edit Account, Newsletter,
   etc. (form-based pages inside the My Account section)
   ============================================================
   Treven: "Let's use that same design and structure throughout
   the rest of this menu in the My Account section so it looks,
   you know, succinct." These pages render Hyvä's vanilla form
   templates with the old Tailwind/Magento default styling: bare
   "Customer Address" / "Account Information" divs as inline
   page titles, fieldset > legend > grid form widgets with no
   card surface, and Magento's default `.actions-toolbar` Save
   button that doesn't match `.ff-btn-primary`.

   Rather than override every template, we wrap and style them
   via CSS scoped to the page's body class. The form itself
   becomes the visible card, fieldsets become section sub-blocks
   (legend → Oswald uppercase section label), inputs adopt the
   site form style, and the actions-toolbar Save button gets
   the canonical .ff-btn-primary look.

   Body classes covered:
   - body.customer-address-form    (Add / Edit Address)
   - body.customer-account-edit    (Edit Account Information)
   - body.newsletter-manage-index  (Newsletter Subscriptions)
   - body.review-customer-index    (My Product Reviews list)
   - body.downloadable-customer-products (Downloadable Products)
   - body.vault-cards-listaction   (Stored Payment Methods) */

/* The inline H1 the address-edit template renders ("Customer
   Address") duplicates the layout page-title and competes for
   space. Hide it — the Magento page-title-wrapper above is the
   single source of truth. */
body.customer-address-form .column.main > .text-2xl:first-child,
body.customer-account-edit .column.main > .text-2xl:first-child,
body.customer-account-edit .column.main > h1.text-2xl,
body.newsletter-manage-index .column.main > .text-2xl:first-child {
    display: none !important;
}

/* The form itself becomes the visible card — same white surface,
   18px radius, soft border, generous padding as .ff-orders__card
   and .ff-account-card. */
body.customer-address-form .column.main > form,
body.customer-account-edit .column.main > form,
body.newsletter-manage-index .column.main > form {
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 18px !important;
    padding: 32px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    margin: 0 0 24px 0 !important;
}

/* Fieldsets inside the form: no extra fill, just spacing between
   sections + a hairline rule (except for the first one). The
   legend becomes the section label. */
body.customer-address-form .column.main > form .fieldset,
body.customer-account-edit .column.main > form .fieldset,
body.newsletter-manage-index .column.main > form .fieldset {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 28px 0 !important;
}
body.customer-address-form .column.main > form .fieldset + .fieldset,
body.customer-account-edit .column.main > form .fieldset + .fieldset,
body.newsletter-manage-index .column.main > form .fieldset + .fieldset {
    border-top: 1px solid #f0f0f3 !important;
    padding-top: 28px !important;
}

/* Legend → Oswald uppercase section label, matching the
   .ff-account-card__title pattern (with a small brand-blue
   accent left-rule). */
body.customer-address-form .column.main > form .fieldset > .legend,
body.customer-account-edit .column.main > form .fieldset > .legend,
body.newsletter-manage-index .column.main > form .fieldset > .legend {
    display: block !important;
    width: 100% !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #1d1d1f !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 0 14px !important;
    position: relative !important;
    border-left: 3px solid var(--ff-blue, #0071e3) !important;
    line-height: 1.4 !important;
}
body.customer-address-form .column.main > form .fieldset > .legend span,
body.customer-account-edit .column.main > form .fieldset > .legend span,
body.newsletter-manage-index .column.main > form .fieldset > .legend span {
    color: inherit !important;
    background: transparent !important;
}

/* Field rows: tighten spacing + consistent labels */
body.customer-address-form .column.main > form .field,
body.customer-account-edit .column.main > form .field,
body.newsletter-manage-index .column.main > form .field {
    margin-bottom: 14px !important;
}
body.customer-address-form .column.main > form .field > .label,
body.customer-account-edit .column.main > form .field > .label,
body.newsletter-manage-index .column.main > form .field > .label {
    display: block !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #4a4a52 !important;
    margin: 0 0 6px 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.customer-address-form .column.main > form .field > .label span,
body.customer-account-edit .column.main > form .field > .label span,
body.newsletter-manage-index .column.main > form .field > .label span {
    color: inherit !important;
}

/* Inputs / selects / textareas — consistent with the rest of
   the site form treatment (52px tall, soft border, focus brings
   brand-blue glow). */
body.customer-address-form .column.main > form .form-input,
body.customer-address-form .column.main > form .form-select,
body.customer-account-edit .column.main > form .form-input,
body.customer-account-edit .column.main > form .form-select,
body.customer-account-edit .column.main > form input[type="text"],
body.customer-account-edit .column.main > form input[type="email"],
body.customer-account-edit .column.main > form input[type="password"],
body.newsletter-manage-index .column.main > form .form-input,
body.newsletter-manage-index .column.main > form select {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 10px !important;
    color: #1d1d1f !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
body.customer-address-form .column.main > form .form-input:focus,
body.customer-address-form .column.main > form .form-select:focus,
body.customer-account-edit .column.main > form .form-input:focus,
body.customer-account-edit .column.main > form .form-select:focus,
body.customer-account-edit .column.main > form input:focus,
body.newsletter-manage-index .column.main > form .form-input:focus,
body.newsletter-manage-index .column.main > form select:focus {
    border-color: var(--ff-blue, #0071e3) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
    outline: none !important;
}

/* Checkbox / radio fields */
body.customer-address-form .column.main > form .field.choice,
body.customer-account-edit .column.main > form .field.choice,
body.newsletter-manage-index .column.main > form .field.choice {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 10px 0 !important;
}
body.customer-address-form .column.main > form .field.choice > .label,
body.customer-account-edit .column.main > form .field.choice > .label,
body.newsletter-manage-index .column.main > form .field.choice > .label {
    margin: 0 !important;
    font-size: 0.9375rem !important;
    color: #1d1d1f !important;
    font-weight: 400 !important;
}

/* Required-field indicators */
body.customer-address-form .column.main > form .field.required > .label::after,
body.customer-address-form .column.main > form .field._required > .label::after,
body.customer-account-edit .column.main > form .field.required > .label::after,
body.newsletter-manage-index .column.main > form .field.required > .label::after {
    content: '*' !important;
    color: var(--ff-blue, #0071e3) !important;
    margin-left: 4px !important;
    font-weight: 700 !important;
}

/* Actions toolbar — Save button + Go back link sit on the right,
   no grey strip behind them. Save uses the canonical .ff-btn-primary
   visual (brand-blue pill); Go back becomes a text link. */
body.customer-address-form .column.main > form .actions-toolbar,
body.customer-account-edit .column.main > form .actions-toolbar,
body.newsletter-manage-index .column.main > form .actions-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    margin: 28px 0 0 0 !important;
    padding: 18px 0 0 0 !important;
    border-top: 1px solid #f0f0f3 !important;
    background: transparent !important;
}
body.customer-address-form .column.main > form .actions-toolbar > div,
body.customer-account-edit .column.main > form .actions-toolbar > div,
body.newsletter-manage-index .column.main > form .actions-toolbar > div {
    display: inline-flex !important;
    margin: 0 !important;
}
body.customer-address-form .column.main > form .actions-toolbar .primary button,
body.customer-address-form .column.main > form .actions-toolbar .primary .action.save,
body.customer-account-edit .column.main > form .actions-toolbar .primary button,
body.customer-account-edit .column.main > form .actions-toolbar .primary .action.save,
body.newsletter-manage-index .column.main > form .actions-toolbar .primary button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--ff-blue, #0071e3) !important;
    color: #ffffff !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 12px 28px !important;
    border: 0 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.20) !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
body.customer-address-form .column.main > form .actions-toolbar .primary button:hover,
body.customer-address-form .column.main > form .actions-toolbar .primary .action.save:hover,
body.customer-account-edit .column.main > form .actions-toolbar .primary button:hover,
body.newsletter-manage-index .column.main > form .actions-toolbar .primary button:hover {
    background: #0064c8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.28) !important;
}
body.customer-address-form .column.main > form .actions-toolbar .secondary a,
body.customer-address-form .column.main > form .actions-toolbar .action.back,
body.customer-account-edit .column.main > form .actions-toolbar .secondary a,
body.customer-account-edit .column.main > form .actions-toolbar .action.back,
body.newsletter-manage-index .column.main > form .actions-toolbar .secondary a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--ff-blue, #0071e3) !important;
    text-decoration: none !important;
    background: transparent !important;
    padding: 8px 4px !important;
    border: 0 !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
}
body.customer-address-form .column.main > form .actions-toolbar .secondary a:hover,
body.customer-account-edit .column.main > form .actions-toolbar .secondary a:hover {
    color: #0064c8 !important;
    transform: translateX(-2px) !important;
    text-decoration: none !important;
}

/* The "* Required Fields" hint that Hyvä renders below
   actions-toolbar — small grey type, not a heading. */
body.customer-address-form .column.main > form [data-hasrequired]::after,
body.customer-address-form .column.main > form .field.required:first-of-type ~ .field-note,
body.customer-account-edit .column.main > form .field.required:first-of-type ~ .field-note {
    color: #6e6e73 !important;
    font-size: 0.75rem !important;
}

/* Newsletter page — the "Subscription option" h2 + the single
   "General Subscription" checkbox row. Wrap the form like a card
   and treat the bare heading as a section label. */
body.newsletter-manage-index .column.main > form .legend,
body.newsletter-manage-index .column.main > form h2 {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #1d1d1f !important;
    margin: 0 0 16px 0 !important;
    padding: 0 0 0 14px !important;
    border-left: 3px solid var(--ff-blue, #0071e3) !important;
    line-height: 1.4 !important;
}

/* Mobile tweaks for all account form pages */
@media (max-width: 640px) {
    body.customer-address-form .column.main > form,
    body.customer-account-edit .column.main > form,
    body.newsletter-manage-index .column.main > form {
        padding: 22px !important;
        border-radius: 14px !important;
    }
    body.customer-address-form .column.main > form .actions-toolbar,
    body.customer-account-edit .column.main > form .actions-toolbar,
    body.newsletter-manage-index .column.main > form .actions-toolbar {
        justify-content: stretch !important;
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    body.customer-address-form .column.main > form .actions-toolbar > div,
    body.customer-account-edit .column.main > form .actions-toolbar > div,
    body.newsletter-manage-index .column.main > form .actions-toolbar > div {
        width: 100% !important;
        justify-content: center !important;
    }
    body.customer-address-form .column.main > form .actions-toolbar .primary button,
    body.customer-account-edit .column.main > form .actions-toolbar .primary button,
    body.newsletter-manage-index .column.main > form .actions-toolbar .primary button {
        width: 100% !important;
    }
}


/* ============================================================
   SALE MEGAMENU — auto-populating dropdown for /sale
   ============================================================
   Pulls live data from the Fusion_DynamicSale-managed category
   (id 51 by default). Up to 5 product cards in a single row,
   sorted by in-stock first then biggest discount %. Header strip
   shows total count + "Shop all sale" CTA. Each card features:
     - Product image (square thumb)
     - Brand-red discount badge in the top-right of the thumb
     - Product name (2-line clamp)
     - Struck-through original price + brand-red sale price
     - Sold-out overlay if applicable

   Visual structure matches the pistol-cards layout so the menu
   feels like part of the same design family. */

.ff-megamenu__panel--sale {
    /* inherits .ff-megamenu__panel — full viewport width fixed
       below the header. */
}

.ff-megamenu__sale-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 32px var(--ff-container-pad, 32px) 40px;
}

/* Header strip — eyebrow + title + count on the left, "Shop all
   sale" CTA on the right. Drop-shadow under the strip via
   bottom hairline so it visually separates from the grid below. */
.ff-megamenu__sale-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 0 0 22px 0;
    margin: 0 0 22px 0;
    border-bottom: 1px solid #f0f0f3;
}
.ff-megamenu__sale-heading {
    min-width: 0;
    flex: 1 1 auto;
}
.ff-megamenu__sale-eyebrow {
    color: var(--ff-red, #c8102e) !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 6px !important;
}
.ff-megamenu__sale-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1d1d1f;
    margin: 0 0 4px 0;
    letter-spacing: 0.01em;
}
.ff-megamenu__sale-count {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.875rem;
    color: #6e6e73;
    margin: 0;
    font-feature-settings: "tnum";
}
.ff-megamenu__sale-shop-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--ff-red, #c8102e);
    color: #ffffff !important;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 50px;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(200, 16, 46, 0.20);
}
.ff-megamenu__sale-shop-all:hover {
    background: #a30d24;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(200, 16, 46, 0.30);
    color: #ffffff !important;
    text-decoration: none !important;
}
.ff-megamenu__sale-shop-all svg {
    width: 16px;
    height: 16px;
}

/* Product grid — 5 across on wide desktops, gracefully wraps. */
.ff-megamenu__sale-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
@media (max-width: 1280px) {
    .ff-megamenu__sale-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 900px) {
    .ff-megamenu__sale-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Cards — inherit .ff-megamenu__popular-card base (gives them
   the spark-border hover treatment that the rest of the
   megamenu cards use), then layer sale-specific bits on top. */
.ff-megamenu__sale-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none !important;
}
.ff-megamenu__sale-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ff-megamenu__sale-card-img img {
    width: 88%;
    height: 88%;
    object-fit: contain;
    transition: transform 0.45s var(--ff-ease, cubic-bezier(0.25, 0.8, 0.25, 1));
}
.ff-megamenu__sale-card:hover .ff-megamenu__sale-card-img img {
    transform: scale(1.04);
}
.ff-megamenu__sale-card-img--placeholder {
    width: 60%;
    height: 60%;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.06), rgba(0, 113, 227, 0.04));
    border-radius: 12px;
}

/* Discount badge — top-right of the image, brand-red pill. */
.ff-megamenu__sale-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--ff-red, #c8102e);
    color: #ffffff;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(200, 16, 46, 0.30);
    z-index: 2;
}

/* Sold-out overlay — center of the image, muted. */
.ff-megamenu__sale-soldout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-6deg);
    background: rgba(29, 29, 31, 0.92);
    color: #ffffff;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 6px 14px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
}
.ff-megamenu__sale-card.is-sold-out .ff-megamenu__sale-card-img img {
    filter: grayscale(60%) opacity(0.6);
}

/* Card body — name + price row. */
.ff-megamenu__sale-card-body {
    padding: 12px 14px 14px;
    background: #ffffff;
    border-radius: 0 0 14px 14px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ff-megamenu__sale-card-name {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.35;
    /* clamp to 2 lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.2em;
}
.ff-megamenu__sale-card-price {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0 0 0;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-feature-settings: "tnum";
}
.ff-megamenu__sale-card-was {
    font-size: 0.8125rem;
    color: #6e6e73;
    text-decoration: line-through;
    font-weight: 500;
}
.ff-megamenu__sale-card-now {
    font-size: 1rem;
    color: var(--ff-red, #c8102e);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Empty state */
.ff-megamenu__sale-empty {
    padding: 40px 24px;
    text-align: center;
    background: #fafafb;
    border-radius: 14px;
}
.ff-megamenu__sale-empty-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    margin: 0 0 8px 0;
}
.ff-megamenu__sale-empty-sub {
    font-size: 0.9375rem;
    color: #6e6e73;
    margin: 0 0 14px 0;
    line-height: 1.5;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   SALE PAGE — HORIZONTAL FILTER BAR
   ============================================================
   Modern e-commerce filter pattern (Apple / Nike style):
   chip buttons in a horizontal bar, each opens a popover with
   options, selected filters render as removable pills below.
   Powered by Magento's standard layered nav data so the chip
   options auto-update as products move on/off sale — empty
   options disappear, new options appear, no maintenance.

   Lives on body.category-sale (the SALES category, id 51).
   Template at Magento_LayeredNavigation::layer/view.phtml
   gates the markup on category id == sale_category_id from
   Fusion_DynamicSale config. */

.ff-sale-filters {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    margin: 0 0 24px 0;
    padding: 16px 22px;
    /* Sticky just below the page header so the bar stays
       accessible as the customer scrolls the products grid. */
    position: sticky;
    top: 84px;
    z-index: 12;
}

.ff-sale-filters__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
}

/* "Filter sale by" label on the left */
.ff-sale-filters__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1d1d1f;
}
.ff-sale-filters__label svg {
    color: var(--ff-red, #c8102e);
}

/* Chip group container */
.ff-sale-filters__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.ff-sale-filters__chip-wrapper {
    position: relative;
}

/* Chip button — pill, subtle border at rest, brand-red border
   when its popover is open. */
.ff-sale-filters__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 16px;
    background: #ffffff;
    border: 1.5px solid #e8e8ed;
    border-radius: 999px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
    white-space: nowrap;
}
.ff-sale-filters__chip:hover {
    border-color: #1d1d1f;
}
.ff-sale-filters__chip.is-open {
    border-color: var(--ff-red, #c8102e);
    background: rgba(200, 16, 46, 0.04);
    box-shadow: 0 4px 14px rgba(200, 16, 46, 0.08);
}
.ff-sale-filters__chip:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}
.ff-sale-filters__chip-label {
    font-weight: 500;
}
.ff-sale-filters__chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 8px;
    height: 20px;
    background: #f4f5f7;
    color: #6e6e73;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    font-feature-settings: "tnum";
}
.ff-sale-filters__chip.is-open .ff-sale-filters__chip-count {
    background: var(--ff-red, #c8102e);
    color: #ffffff;
}
.ff-sale-filters__chip-chev {
    width: 14px;
    height: 14px;
    color: #6e6e73;
    transition: transform 0.2s ease;
}
.ff-sale-filters__chip.is-open .ff-sale-filters__chip-chev {
    transform: rotate(180deg);
    color: var(--ff-red, #c8102e);
}

/* Popover — absolute-positioned under the chip, white card,
   scrollable when there are lots of options. */
.ff-sale-filters__popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 240px;
    max-width: 360px;
    max-height: 400px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: 50;
    padding: 8px;
}

.ff-sale-filters__options {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ff-sale-filters__options li + li {
    border-top: 1px solid #f5f5f7;
}
.ff-sale-filters__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    color: #1d1d1f !important;
    text-decoration: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.ff-sale-filters__option:hover {
    background: rgba(0, 113, 227, 0.06);
    color: var(--ff-blue, #0071e3) !important;
}
.ff-sale-filters__option:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: -2px;
}
.ff-sale-filters__option-label {
    flex: 1 1 auto;
    min-width: 0;
}
.ff-sale-filters__option-count {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: #6e6e73;
    font-feature-settings: "tnum";
}
.ff-sale-filters__option:hover .ff-sale-filters__option-count {
    color: var(--ff-blue, #0071e3);
}

/* Clear-all link on the right of the chip bar */
.ff-sale-filters__clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6e6e73 !important;
    text-decoration: none !important;
    padding: 8px 12px;
    border-radius: 999px;
    transition: color 0.18s ease, background 0.18s ease;
}
.ff-sale-filters__clear:hover {
    color: var(--ff-red, #c8102e) !important;
    background: rgba(200, 16, 46, 0.06);
}
.ff-sale-filters__clear:focus-visible {
    outline: 2px solid var(--ff-red, #c8102e);
    outline-offset: 2px;
}

/* Applied filter pills row */
.ff-sale-filters__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0 0;
    padding: 14px 0 0 0;
    border-top: 1px solid #f0f0f3;
}
.ff-sale-filters__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    background: rgba(200, 16, 46, 0.08);
    color: var(--ff-red, #c8102e) !important;
    border: 1px solid rgba(200, 16, 46, 0.20);
    border-radius: 999px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ff-sale-filters__pill:hover {
    background: var(--ff-red, #c8102e);
    color: #ffffff !important;
    border-color: var(--ff-red, #c8102e);
}
.ff-sale-filters__pill-name {
    line-height: 1;
}
.ff-sale-filters__pill-x {
    width: 14px;
    height: 14px;
    background: rgba(200, 16, 46, 0.10);
    border-radius: 50%;
    padding: 2px;
    transition: background 0.18s ease;
}
.ff-sale-filters__pill:hover .ff-sale-filters__pill-x {
    background: rgba(255, 255, 255, 0.20);
}

/* Mobile: chips wrap, popovers go full-width below their chip */
@media (max-width: 768px) {
    .ff-sale-filters {
        position: static;
        padding: 14px 16px;
        border-radius: 14px;
    }
    .ff-sale-filters__bar {
        gap: 10px;
    }
    .ff-sale-filters__chips {
        width: 100%;
    }
    .ff-sale-filters__chip {
        padding: 8px 12px;
        font-size: 0.875rem;
    }
    .ff-sale-filters__popover {
        position: fixed;
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 16px;
        max-width: none;
        max-height: 60vh;
    }
    .ff-sale-filters__clear {
        margin-left: 0;
        margin-top: 4px;
    }
}

/* Hide the sidebar on EVERY category PLP — the horizontal filter
   bar replaces it. The layout move shifts the layered nav block,
   but Magento still emits an empty `.sidebar.sidebar-main`
   wrapper that would push the product grid right; collapse it. */
body.page-products .columns .sidebar.sidebar-main {
    display: none !important;
}
body.page-products .columns .column.main {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}


/* ============================================================
   SIGHTS CATEGORY LANDING — 4-card picker hero
   ============================================================
   Replaces the standard PLP grid on /sights/ with a clear,
   premium 4-card chooser: Pistol Sights, Shotgun/Rifle Sights,
   Revolver Sights, Optics. Lives only on category id 130 (the
   top-level Sights category) via per-category layout XML —
   subcategories keep their normal product grid + filter bar.

   Treven: "Pictures of each that really look amazing at the
   top that make selection clear and easy." */

.ff-sights-landing {
    width: 100%;
    margin: 0 0 48px 0;
}

.ff-sights-landing__header {
    text-align: center;
    margin: 0 0 32px 0;
    padding: 0 16px;
}
.ff-sights-landing__eyebrow {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ff-blue, #0071e3);
    margin: 0 0 10px 0;
}
.ff-sights-landing__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1d1d1f;
    margin: 0 0 12px 0;
    line-height: 1.1;
    text-transform: uppercase;
}
.ff-sights-landing__subtitle {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: #6e6e73;
    margin: 0 auto;
    max-width: 640px;
}

/* Card grid — 4 across on wide desktops, 2 across on tablets,
   1 column on mobile. Generous gaps so each card breathes. */
.ff-sights-landing__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 16px;
}
@media (max-width: 1100px) {
    .ff-sights-landing__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .ff-sights-landing__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Card — full-bleed image on top, white body below with title +
   subtitle + Shop arrow CTA. Hover lifts the card and zooms the
   image slightly. Uses the spark-border base from elsewhere so
   the design feels part of the same family. */
.ff-sights-landing__card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.45s var(--ff-ease, cubic-bezier(0.25, 0.8, 0.25, 1)),
                box-shadow 0.45s var(--ff-ease, cubic-bezier(0.25, 0.8, 0.25, 1)),
                border-color 0.3s ease;
    position: relative;
    isolation: isolate;
}
.ff-sights-landing__card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 113, 227, 0.4);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08),
                0 4px 12px rgba(0, 0, 0, 0.04),
                0 0 0 1px rgba(0, 113, 227, 0.10);
}
.ff-sights-landing__card:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}

/* Image — square aspect on a clean off-white wash. Customer
   sees the actual product shape at a glance. */
.ff-sights-landing__card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #fafbfc, #ffffff);
    border-bottom: 1px solid #f0f0f3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ff-sights-landing__card-img img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    transition: transform 0.5s var(--ff-ease, cubic-bezier(0.25, 0.8, 0.25, 1));
}
.ff-sights-landing__card:hover .ff-sights-landing__card-img img {
    transform: scale(1.06);
}
.ff-sights-landing__card-img source { display: none; }
.ff-sights-landing__card-img--placeholder {
    width: 60%;
    height: 60%;
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.06), rgba(0, 0, 0, 0.02));
    border-radius: 12px;
}

/* Body — Oswald title + Inter subtitle + Shop arrow */
.ff-sights-landing__card-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}
.ff-sights-landing__card-title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.0625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.25;
}
.ff-sights-landing__card-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6e6e73;
    margin: 0;
    flex: 1 1 auto;
}
.ff-sights-landing__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ff-blue, #0071e3);
    margin-top: 4px;
    transition: gap 0.2s ease, color 0.2s ease;
}
.ff-sights-landing__card-cta svg {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}
.ff-sights-landing__card:hover .ff-sights-landing__card-cta {
    gap: 10px;
}
.ff-sights-landing__card:hover .ff-sights-landing__card-cta svg {
    transform: translateX(3px);
}

/* Reduced-motion users — no zoom / lift animations */
@media (prefers-reduced-motion: reduce) {
    .ff-sights-landing__card,
    .ff-sights-landing__card:hover,
    .ff-sights-landing__card-img img,
    .ff-sights-landing__card:hover .ff-sights-landing__card-img img,
    .ff-sights-landing__card-cta,
    .ff-sights-landing__card-cta svg {
        transform: none !important;
        transition: none !important;
    }
}


/* ============================================================
   SIGHTS SUBCATEGORY — sight-style card filter
   ============================================================
   Replaces the chip bar on every Sights subcategory page
   (/sights/pistol-sights, /sights/optics, /sights/sig-sauer,
   etc.) with a premium card grid. Each card represents one
   sight_style option with a real product image, name, and
   match count. Click → applies that filter; the matching
   card highlights with brand-blue border + checkmark.

   Treven: "I want it to be a card or something like that where
   it is an amazing UI Design and incredibly simple and easy for
   the customer." */

.ff-sights-cards {
    width: 100%;
    margin: 0 0 32px 0;
}

.ff-sights-cards__header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 18px 0;
}
.ff-sights-cards__eyebrow {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ff-blue, #0071e3);
    margin: 0;
}
.ff-sights-cards__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.15;
}
.ff-sights-cards__clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ff-red, #c8102e) !important;
    text-decoration: none !important;
    padding: 8px 14px;
    background: rgba(200, 16, 46, 0.06);
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}
.ff-sights-cards__clear:hover {
    background: var(--ff-red, #c8102e);
    color: #ffffff !important;
}

/* Card grid — 6 across on wide desktops, gracefully wrapping. */
.ff-sights-cards__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
@media (max-width: 1280px) {
    .ff-sights-cards__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 900px) {
    .ff-sights-cards__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .ff-sights-cards__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Card — image on top, label + count below. Hover lifts the
   card; selected state pops with brand-blue border + checkmark. */
.ff-sights-cards__card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 2px solid #e8e8ed;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.3s var(--ff-ease, cubic-bezier(0.25, 0.8, 0.25, 1)),
                box-shadow 0.3s var(--ff-ease, cubic-bezier(0.25, 0.8, 0.25, 1)),
                border-color 0.18s ease;
    position: relative;
    isolation: isolate;
}
.ff-sights-cards__card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 113, 227, 0.4);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08),
                0 2px 8px rgba(0, 0, 0, 0.04);
}
.ff-sights-cards__card:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 3px;
}
.ff-sights-cards__card.is-active {
    border-color: var(--ff-blue, #0071e3);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.18),
                0 0 0 4px rgba(0, 113, 227, 0.10);
    transform: translateY(-2px);
}

/* Treven (2026-05-14): "the pictures you are using arent very good
   and are hard to see." The curated brand images shoot the sight
   small in a 560×560 frame with lots of white padding. We can't
   re-shoot the assets, but we can ZOOM IN via CSS so the subject
   fills more of the card. transform: scale(1.55) on brand images
   only — product-photo fallbacks (from the SQL resolver) stay at
   natural size since they're already properly framed.
   Parent has overflow: hidden so the scaled-up white margins clip
   cleanly. */
.ff-sights-cards__card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ff-sights-cards__card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    transition: transform 0.5s var(--ff-ease, cubic-bezier(0.25, 0.8, 0.25, 1));
}
/* Zoom brand-image-only — the curated assets all have ~30% subject
   surrounded by white. Scaling up to 155% makes the sight fill the
   card without affecting product-photo fallbacks. */
.ff-sights-cards__card-img img[src*="/images/brand/sights/styles/"] {
    transform: scale(1.55);
}
.ff-sights-cards__card:hover .ff-sights-cards__card-img img[src*="/images/brand/sights/styles/"] {
    transform: scale(1.64);
}
.ff-sights-cards__card:hover .ff-sights-cards__card-img img {
    transform: scale(1.06);
}
.ff-sights-cards__card-img source { display: none; }
.ff-sights-cards__card-img--placeholder {
    width: 60%;
    height: 60%;
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.08), rgba(0, 0, 0, 0.02));
    border-radius: 12px;
}

/* Checkmark badge in the top-right of the active card's image */
.ff-sights-cards__card-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ff-blue, #0071e3);
    color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.30);
    z-index: 2;
}
.ff-sights-cards__card-check svg {
    width: 16px;
    height: 16px;
}

.ff-sights-cards__card-body {
    padding: 12px 14px 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid #f0f0f3;
}
.ff-sights-cards__card-label {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    line-height: 1.25;
}
.ff-sights-cards__card-count {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.8125rem;
    color: #6e6e73;
    font-feature-settings: "tnum";
}
.ff-sights-cards__card.is-active .ff-sights-cards__card-label {
    color: var(--ff-blue, #0071e3);
}

/* Hide the chip filter bar on Sights subcategory pages — the
   cards above replace it. Smart filters whitelist already strips
   everything except sight_style anyway, so hiding the bar fully
   keeps the page clean. */
body[class*="category-sights"] .ff-sale-filters {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .ff-sights-cards__card,
    .ff-sights-cards__card:hover,
    .ff-sights-cards__card-img img,
    .ff-sights-cards__card:hover .ff-sights-cards__card-img img {
        transform: none !important;
        transition: none !important;
    }
}


/* ============================================================
   PDP CUSTOMIZABLE OPTIONS — "Build your slide" configurator
   ============================================================

   Pairs with template overrides at:
     Magento_Catalog/templates/product/view/options/options.phtml
     Magento_Catalog/templates/product/view/options/type/select.phtml

   Treven: "products with customizable options look horrible and
   are confusing." Hyvä's default options.phtml dumps every option
   (required + optional) into a single bordered-row stack with a
   generic "Customizable Options:" heading. On a builder product
   like 1911SlideGov that has 11 options, this scans as a wall of
   gray dropdowns.

   This block styles the new configurator UI:
     - Section eyebrow + brand title (Oswald uppercase) on top
     - Required-configuration card with live "X of Y selected"
       progress counter, brand-blue left accent
     - Optional-upgrades card below, more muted, with "Skip any
       you don't need" hint copy
     - Each option row is a self-contained block with its own label
       above the card grid built by ff-pdp-options.js

   Visual language matches the existing .ff-pdp-option-card system
   (Apple iPad-Pro-style configurator cards on white). The wrapper
   sections sit on the page background and the cards inside are
   the existing white selection cards.
*/
.ff-pdp-options {
    margin: 28px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}

/* Top header — eyebrow + title + sub. Mirrors the .ff-section-header
   pattern used on the homepage but compact for the info column. */
.ff-pdp-options__header {
    text-align: left;
    border-bottom: 1px solid var(--ff-border-subtle, #e8e8ed);
    padding-bottom: 16px;
}
.ff-pdp-options__eyebrow {
    display: inline-block;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--ff-blue, #0071e3);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.ff-pdp-options__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--ff-text-primary, #1d1d1f);
    margin: 0 0 6px;
    text-transform: uppercase;
}
.ff-pdp-options__sub {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ff-text-secondary, #6e6e73);
    margin: 0;
}

/* Required and optional groupings — visually distinct cards. The
   required card is a touch more present (brand-blue left accent +
   slightly stronger border); the optional card sits quietly below. */
.ff-pdp-options-section {
    background: #ffffff;
    border: 1px solid var(--ff-border-subtle, #e8e8ed);
    border-radius: 16px;
    padding: 20px 20px 12px;
    position: relative;
}
.ff-pdp-options-section--required {
    border-color: rgba(0, 113, 227, 0.18);
    box-shadow: 0 1px 0 rgba(0, 113, 227, 0.05),
                0 8px 28px rgba(0, 0, 0, 0.04);
}
.ff-pdp-options-section--required::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ff-blue, #0071e3);
}

.ff-pdp-options-section__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ff-border-subtle, #e8e8ed);
}
.ff-pdp-options-section__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ff-text-primary, #1d1d1f);
    text-transform: uppercase;
    margin: 0;
}
.ff-pdp-options-section__progress {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ff-text-secondary, #6e6e73);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.04);
    transition: background 0.2s ease, color 0.2s ease;
}
.ff-pdp-options-section__progress.is-complete {
    background: rgba(52, 199, 89, 0.12);
    color: #1f7a3a;
}
.ff-pdp-options-section__hint {
    font-size: 0.8125rem;
    color: var(--ff-text-secondary, #6e6e73);
    font-style: italic;
}

.ff-pdp-options-section__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Single option row — label above, card-grid below. Replaces Hyvä's
   `border-t border-gray-300` row that put the label and dropdown on
   opposing sides of a faint gray divider. */
.ff-pdp-option-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--ff-border-subtle, #e8e8ed);
}
.ff-pdp-option-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.ff-pdp-option-row__label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    cursor: default;
}
.ff-pdp-option-row__title {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ff-text-primary, #1d1d1f);
    letter-spacing: 0;
}
.ff-pdp-option-row__required {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ff-blue, #0071e3);
    line-height: 1;
}
.ff-pdp-option-row__control {
    width: 100%;
}

/* When ff-pdp-options.js builds card grids, they already use white +
   d2d2d7 borders. Nothing to do here — they sit inside the option row
   control wrapper at full width. The .ff-pdp-option-cards selectors
   (around line 27998) handle the visual treatment. */

/* Compact spacing on narrow phones — keep the section padding readable
   but trim margins so it doesn't feel padded out. */
@media (max-width: 480px) {
    .ff-pdp-options-section {
        padding: 16px 14px 8px;
        border-radius: 12px;
    }
    .ff-pdp-options__title {
        font-size: 1.25rem;
    }
}


/* ============================================================
   TOP PICKS STRIP — best-sellers above PLP grid
   ============================================================

   Pairs with template Magento_Catalog/templates/category/top-picks.phtml
   and PopularityReorderer::getTopBestsellers().

   Treven: "top bar that has the top 5 most popular products at the
   top of the category that calls them out, then have the rest of
   the category ordered for best visual appeal."

   Visual contract:
     - Sits above the cluster-sorted main grid
     - Each card numbered (#1 → #5) so it doesn't feel like the
       grid leaking up
     - #1 gets an oversized "TOP PICK" label + a subtle gradient
       accent to make the customer favorite obvious
     - White cards on the page bg, hover lift + brand-blue ring
       (same vocabulary as the .ff-pdp-option-card system)
     - Mobile: horizontal scroll, ~280px cards
*/
.ff-top-picks {
    margin: 8px 0 32px;
    padding: 24px 0 4px;
    border-bottom: 1px solid var(--ff-border-subtle, #e8e8ed);
}

.ff-top-picks__header {
    margin-bottom: 18px;
    text-align: left;
}
.ff-top-picks__eyebrow {
    display: inline-block;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--ff-blue, #0071e3);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ff-top-picks__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--ff-text-primary, #1d1d1f);
    margin: 0 0 6px;
    text-transform: uppercase;
}
.ff-top-picks__sub {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ff-text-secondary, #6e6e73);
    margin: 0;
}

/* 5-card layout that wraps cleanly at narrower widths. On mobile
   it becomes a horizontal scroll strip (`overflow-x: auto`) so
   customers can swipe through. */
.ff-top-picks__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
@media (max-width: 1024px) {
    .ff-top-picks__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* Treven (2026-05-14): "please hide the most popular on mobile it
   looks bad." The horizontal scroll-snap treatment below 640px was
   the experimental fallback for tiny screens; in practice the strip
   doesn't earn the vertical real estate on mobile so we just hide
   it. The cluster-sorted main grid carries the page on its own. */
@media (max-width: 640px) {
    .ff-top-picks {
        display: none;
    }
}

/* Individual top-pick card — white card, dark text, hover lift +
   brand-blue ring. Visual language matches .ff-pdp-option-card. */
.ff-top-pick-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px 16px 14px;
    background: #ffffff;
    border: 1px solid var(--ff-border-subtle, #e8e8ed);
    border-radius: 16px;
    text-decoration: none;
    color: var(--ff-text-primary, #1d1d1f);
    transition: transform 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
    overflow: hidden;
}
.ff-top-pick-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 113, 227, 0.35);
    box-shadow: 0 8px 28px rgba(0, 113, 227, 0.10),
                0 2px 6px rgba(0, 0, 0, 0.04);
}
.ff-top-pick-card:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
    border-color: var(--ff-blue, #0071e3);
}

/* The #1 card gets a brand-blue gradient hairline so the eye lands
   there first. Subtle, not gimmicky. */
.ff-top-pick-card--first {
    border-color: rgba(0, 113, 227, 0.3);
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.08);
}
.ff-top-pick-card--first::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(0, 113, 227, 0.5),
        rgba(255, 45, 45, 0.3));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}

.ff-top-pick-card__rank {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ff-text-primary, #1d1d1f);
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.ff-top-pick-card--first .ff-top-pick-card__rank {
    background: linear-gradient(135deg, var(--ff-blue, #0071e3), #0a4f9e);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.30);
}
.ff-top-pick-card__rank-num {
    line-height: 1;
}
.ff-top-pick-card__rank-label {
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Treven (2026-05-13): the previous #f5f5f7 backdrop was reading as
   a "grey box" inside each card. Since Fusion product photos are
   always shot on pure white, a transparent image wrap lets the
   card's own white surface show through — no visible grey rectangle. */
.ff-top-pick-card__img-wrap {
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}
.ff-top-pick-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 12%;
}

.ff-top-pick-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 4px 0;
    flex: 1;
}
.ff-top-pick-card__name {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ff-text-primary, #1d1d1f);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.7em;
}
.ff-top-pick-card__price {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ff-text-primary, #1d1d1f);
    letter-spacing: 0.02em;
    margin-top: 4px;
}

.ff-top-pick-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--ff-border-subtle, #e8e8ed);
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ff-blue, #0071e3);
    text-transform: uppercase;
}
.ff-top-pick-card__cta-arrow {
    transition: transform 0.25s ease;
}
.ff-top-pick-card:hover .ff-top-pick-card__cta-arrow {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .ff-top-pick-card,
    .ff-top-pick-card:hover,
    .ff-top-pick-card__cta-arrow,
    .ff-top-pick-card:hover .ff-top-pick-card__cta-arrow {
        transform: none !important;
        transition: none !important;
    }
}


/* ============================================================
   PISTOL-LINE PICKER — XP Pro / XP Comp / XF Pro parent PLPs
   ============================================================

   Pairs with template Magento_Catalog/templates/category/pistol-line-picker.phtml
   and the categories created by
   bin/magento fusion:catalog:setup-pistol-categories.

   Visual contract:
     - Renders ABOVE the cluster-sorted main grid on parent pages
     - 2-3 cards per parent (XP Pro = 3, XP Comp = 2, XF Pro = 2)
     - Each card: large product image, label (Standard / Custom Shop
       / Suppressor / Threaded), one-line tagline, model count, CTA
     - Visual vocabulary matches .ff-top-pick-card + .ff-sights-cards
       — white card on the page bg, hover lift, brand-blue focus ring
*/
.ff-pistol-picker {
    margin: 12px 0 36px;
    padding: 28px 0 8px;
}

.ff-pistol-picker__header {
    margin-bottom: 22px;
    text-align: left;
}
.ff-pistol-picker__eyebrow {
    display: inline-block;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--ff-blue, #0071e3);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.ff-pistol-picker__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--ff-text-primary, #1d1d1f);
    margin: 0;
    text-transform: uppercase;
}

/* 1-card (XF Pro when Threaded SKUs are disabled) / 2-card (XP Comp,
   XF Pro normal) / 3-card (XP Pro) grid. auto-fit + (280px, 400px)
   keeps cards proportional — minimum 280px wide so they're tappable
   on mobile, MAX 400px wide so a lone card doesn't blow up to full
   page width and look weirdly oversized. justify-content:start
   left-aligns the cards in their container; with fewer cards the
   empty space sits to the right.
   Treven 2026-05-19: "The one card for the XF looks horrible and is
   huge." */
.ff-pistol-picker__grid {
    display: grid;
    /* Default — let cards share available width. With auto-fit +
       minmax(280px, 1fr) the grid creates as many 280px-min tracks
       as fit the container, distributes leftover space as 1fr, and
       collapses any empty tracks. So 3 cards in any container wide
       enough to hold 3×280+gaps always land side-by-side, with each
       card scaling between 280px and however much room exists.
       Previous code had `minmax(280px, 400px)` which capped each
       column at 400px — that's 3×400+2×18=1236px and overflowed
       the page-main container on common laptop viewports, wrapping
       the 3rd card (Treven 2026-05-22: "Suppressor Packages card
       should be next to the Custom Shop but it is below"). */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    justify-content: start;
}
/* Lone-card case — when a category has just one subcategory tile
   (XF Pistols at one point had only one). Without this cap the 1fr
   track stretches the card to the full container width and looks
   absurd. The `:has(> :only-child)` selector is what scopes the cap
   to that case only; modern browser support is universal in the
   Hyvä-target matrix (Safari 15.4+, Chrome 105+, Firefox 121+).
   Treven 2026-05-19: "The one card for the XF looks horrible and
   is huge." */
.ff-pistol-picker__grid:has(> :only-child) {
    grid-template-columns: minmax(280px, 400px);
}
/* Three-card variant — force 3 columns on desktop even if the
   container is too narrow for `minmax(280px, 1fr)` auto-fit to keep
   all three on one row. minmax(0, 1fr) lets cards shrink past the
   280px floor rather than overflowing.
   Treven 2026-05-22: "Now all 3 cards should be on the same line
   Gear and swag are underneath." */
.ff-pistol-picker__grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Cap + center the whole picker section (eyebrow + title + grid) when
   it has 3 cards. Two-stage fix for Treven 2026-05-22:
     a) "the cards are too big" — cap section at 980px so cards stay
        ~315px regardless of parent container width
     b) "it is not aligned right it is pushed all the way to the left
        and it should be more centered" — margin-inline:auto centers
        the capped section inside wider parents

   On XP Pro the picker renders inside .column.main (~940px) so this
   cap is wider than the parent and behavior is unchanged — section
   fills the column. On /accessories the picker is the landing_page
   CMS block rendered in a wider .container; this rule centers the
   980px section in that ~1200px container. Header text + grid stay
   in alignment because they're both children of the same constrained
   section. */
.ff-pistol-picker:has(.ff-pistol-picker__grid > :nth-child(3):last-child) {
    max-width: 980px;
    margin-inline: auto;
}
@media (max-width: 640px) {
    .ff-pistol-picker__grid,
    .ff-pistol-picker__grid:has(> :only-child),
    .ff-pistol-picker__grid:has(> :nth-child(3):last-child) {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Card chrome — white surface, subtle border, hover lift. Same
   visual vocabulary as the rest of the storefront card system. */
.ff-pistol-picker__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--ff-border-subtle, #e8e8ed);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ff-text-primary, #1d1d1f);
    transition: transform 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}
.ff-pistol-picker__card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 113, 227, 0.35);
    box-shadow: 0 12px 32px rgba(0, 113, 227, 0.10),
                0 4px 10px rgba(0, 0, 0, 0.05);
}
.ff-pistol-picker__card:focus-visible {
    outline: 2px solid var(--ff-blue, #0071e3);
    outline-offset: 2px;
    border-color: var(--ff-blue, #0071e3);
}

/* Image — pure white backdrop matches the rest of the design
   system. Pistol photos sit large in the frame so customers can
   actually see what they're picking. */
.ff-pistol-picker__card-img {
    display: flex;
    width: 100%;
    aspect-ratio: 5 / 4;
    background: #ffffff;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--ff-border-subtle, #e8e8ed);
}
.ff-pistol-picker__card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    padding: 8%;
    transition: transform 0.4s var(--ff-ease, cubic-bezier(0.25, 0.8, 0.25, 1));
}
.ff-pistol-picker__card:hover .ff-pistol-picker__card-img img {
    transform: scale(1.04);
}
.ff-pistol-picker__card-img-placeholder {
    width: 60%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.08), rgba(0, 0, 0, 0.02));
    border-radius: 12px;
}

/* Body — label, tagline, meta row */
.ff-pistol-picker__card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px 18px;
    flex: 1;
}
.ff-pistol-picker__card-label {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ff-text-primary, #1d1d1f);
    text-transform: uppercase;
    line-height: 1.1;
}
.ff-pistol-picker__card-tagline {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ff-text-secondary, #6e6e73);
    margin: 4px 0 0;
    flex: 1;
}
.ff-pistol-picker__card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ff-border-subtle, #e8e8ed);
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ff-pistol-picker__card-count {
    color: var(--ff-text-secondary, #6e6e73);
}
.ff-pistol-picker__card-cta {
    color: var(--ff-blue, #0071e3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ff-pistol-picker__card-cta-arrow {
    transition: transform 0.25s ease;
}
.ff-pistol-picker__card:hover .ff-pistol-picker__card-cta-arrow {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .ff-pistol-picker__card,
    .ff-pistol-picker__card:hover,
    .ff-pistol-picker__card-img img,
    .ff-pistol-picker__card:hover .ff-pistol-picker__card-img img,
    .ff-pistol-picker__card-cta-arrow,
    .ff-pistol-picker__card:hover .ff-pistol-picker__card-cta-arrow {
        transform: none !important;
        transition: none !important;
    }
}


/* Note 2026-05-18: the "Shop by Brand" header + mobile-grid CSS
   shipped in fcde0fae was rejected by Treven ("This doesnt look
   good. I would rather have a dropdown in the menu under pistol
   sights rather than on the page."). Reverted. Brand drill-down
   moved into the mobile menu's SIGHTS section as a nested
   accordion under PISTOL SIGHTS. */


/* ============================================================
   FFL DEALER SELECTOR (custom checkout)
   ------------------------------------------------------------
   Federal law requires firearms to ship to a licensed FFL dealer.
   The dealer-picker panel mounts inside the Delivery section of
   the custom one-page checkout when the cart contains at least
   one firearm. Visual language matches the rest of the checkout:
   Playfair Display headings, dark navy #1d1d1f primary, soft
   gray backgrounds, 8-12px radii.
   ============================================================ */

.ff-checkout__ffl-panel {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ff-checkout__ffl-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #f4f6fb;
    border: 1px solid #d8dfee;
    border-left: 4px solid #1d1d1f;
    border-radius: 12px;
    color: #1d1d1f;
}

.ff-checkout__ffl-banner svg {
    flex-shrink: 0;
    color: #1d1d1f;
    margin-top: 2px;
}

.ff-checkout__ffl-banner strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.ff-checkout__ffl-banner p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #4a4a4d;
}

.ff-checkout__ffl-cta {
    width: 100%;
    height: 56px;
    background: #1d1d1f;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.ff-checkout__ffl-cta:hover {
    background: #000000;
    transform: translateY(-1px);
}

.ff-checkout__ffl-cta:active {
    transform: translateY(0);
}

.ff-checkout__ffl-selected {
    padding: 18px 20px;
    background: #f7f7f8;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
}

.ff-checkout__ffl-selected header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

/* Title block: small "FFL Dealer" eyebrow above the dealer business name.
   Makes it unmistakable to the customer that this card represents the
   licensed dealer who'll receive the firearm — not a shipping address
   they entered. */
.ff-checkout__ffl-selected-titlewrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* allow long names to ellipsize inside flex */
}

.ff-checkout__ffl-eyebrow {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6e6e73;
    line-height: 1.2;
}

.ff-checkout__ffl-selected h3 {
    font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.25;
}

.ff-checkout__ffl-change {
    background: none;
    border: none;
    color: #1d1d1f;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 2px 0;
    white-space: nowrap;
}

.ff-checkout__ffl-change:hover {
    color: #000000;
}

.ff-checkout__ffl-address,
.ff-checkout__ffl-phone {
    margin: 4px 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #4a4a4d;
}

.ff-checkout__ffl-phone {
    color: #1d1d1f;
    font-weight: 600;
}

/* Dealer-result row: phone shown below the address, matches body type. */
.ff-checkout__ffl-result-phone {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #4a4a4d;
}

/* ====== FFL search modal ====== */
.ff-checkout__ffl-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
}

.ff-checkout__ffl-modal-inner {
    background: #ffffff;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ff-checkout__ffl-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ff-checkout__ffl-modal-head h2 {
    font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.2;
}

.ff-checkout__ffl-modal-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: #6d6d6d;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.ff-checkout__ffl-modal-close:hover {
    background: #f0f0f2;
    color: #1d1d1f;
}

.ff-checkout__ffl-modal-intro {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #4a4a4d;
    margin: 0 0 18px;
}

.ff-checkout__ffl-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 16px;
}

.ff-checkout__ffl-search .ff-checkout__field {
    margin: 0;
}

.ff-checkout__ffl-search-btn {
    height: 56px;
    padding: 0 22px;
    background: #1d1d1f;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.ff-checkout__ffl-search-btn:hover:not(:disabled) {
    background: #000000;
}

.ff-checkout__ffl-search-btn:disabled {
    background: #c9c9c9;
    cursor: not-allowed;
}

.ff-checkout__ffl-error {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #fff3f3;
    border: 1px solid #e5818c;
    border-radius: 6px;
    color: #b7001a;
    font-size: 0.875rem;
}

.ff-checkout__ffl-empty {
    margin: 12px 0 0;
    padding: 14px 16px;
    background: #f7f7f8;
    border: 1px dashed #d1d1d4;
    border-radius: 10px;
    color: #4a4a4d;
    font-size: 0.875rem;
    text-align: center;
}

.ff-checkout__ffl-results {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
    /* Visible scroll area inside the modal */
    max-height: 50vh;
}

.ff-checkout__ffl-result {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    font-family: inherit;
}

.ff-checkout__ffl-result:hover,
.ff-checkout__ffl-result:focus-visible {
    border-color: #1d1d1f;
    box-shadow: 0 4px 14px rgba(29, 29, 31, 0.08);
    transform: translateY(-1px);
    outline: none;
}

.ff-checkout__ffl-result-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}

.ff-checkout__ffl-result-head h4 {
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.25;
}

.ff-checkout__ffl-result-distance {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6d6d6d;
    white-space: nowrap;
}

.ff-checkout__ffl-result-addr {
    margin: 0 0 4px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #4a4a4d;
}

/* Note: .ff-checkout__ffl-result-license + .ff-checkout__ffl-license rules
   were removed 2026-05-20. The FFL license number is intentionally not shown
   on the customer-facing UI per dealer preference. The number still flows
   onto sales_order.ffl_license server-side via placeOrder's extension
   attribute path so the dealer + admin have it on the order record. */

@media (max-width: 480px) {
    .ff-checkout__ffl-modal {
        padding: 0;
    }
    .ff-checkout__ffl-modal-inner {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        padding: 20px;
    }
    .ff-checkout__ffl-search {
        grid-template-columns: 1fr;
    }
    .ff-checkout__ffl-search-btn {
        height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ff-checkout__ffl-cta,
    .ff-checkout__ffl-cta:hover,
    .ff-checkout__ffl-result,
    .ff-checkout__ffl-result:hover {
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   MAXIMUM-SPECIFICITY MOBILE ATC OVERRIDE
   ============================================================
   This is the LAST CSS rule in the file so it wins every cascade
   fight on mobile. Treven reported the ATC button still rendering
   as a ~350px-tall dark navy square even after two earlier override
   attempts. Adding `html` prefix bumps the specificity another
   element-level, and we explicitly reset every flex/sizing/aspect
   property that could possibly be making the button square. */
@media (max-width: 767px) {
    html body.catalog-product-view #product-addtocart-button,
    html body.catalog-product-view .ff-pdp-info__cta-row #product-addtocart-button,
    html body.catalog-product-view .ff-pdp-info button[type="submit"].btn-primary,
    html body.catalog-product-view .ff-pdp-info button.btn.btn-primary,
    html body.catalog-product-view .ff-pdp-info__cta button[type="submit"] {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        aspect-ratio: auto !important;
        padding: 0 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    /* Also cap the SVG icon inside the button — without this the
       Hyva 24x24 cart icon could be the thing forcing extra height. */
    html body.catalog-product-view #product-addtocart-button svg {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 auto !important;
    }
}

/* ============================================================
   HIDE QTY INPUT ON PDP (kept in DOM, never visible)
   ============================================================
   Treven feedback (2026-05-21): "I want to get rid of the QTY on
   the product page as this looks bad and you cant add how many
   you want as it wont let you input in that field."

   We keep Hyvä's qty block rendered (inside .ff-pdp-info__qty-hidden)
   so the product-add-to-cart form still submits with qty=1 — but it's
   completely invisible. Customers adjust qty in the cart drawer after
   the item lands in the cart.

   Belt-and-suspenders: hide the wrapper + every possible interior
   element. `position: absolute; width: 1px; height: 1px; overflow:
   hidden` is the WCAG-safe visually-hidden pattern (the input is
   still in the form so it submits, just not perceivable). */
.ff-pdp-info__qty-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* Also kill the legacy .ff-qty-stepper styling on the PDP in case any
   cached template still renders that wrapper, and the field.qty label
   that some Hyvä paths emit alongside it. */
body.catalog-product-view .ff-pdp-info .ff-qty-stepper,
body.catalog-product-view .ff-pdp-info__cta-row .ff-qty-stepper,
body.catalog-product-view .ff-pdp-info .field.qty {
    display: none !important;
}

/* ============================================================
   EDITABLE LINE-ITEM QTY INPUTS (cart drawer + custom checkout)
   ============================================================
   Treven feedback (2026-05-21): bulk customers ordering 100+ qty
   couldn't type the value directly — only step through with +/-.
   Replaced the read-only <span x-text="item.qty"> with editable
   <input type="number"> wired to changeItemQty (cart drawer) or
   setItemQty (custom checkout). Styled here to look like the
   previous value display: compact, centered, native browser
   spinner suppressed (we have our own +/- buttons that work
   for one-step nudges; the input is for direct entry).
*/
.ff-cart-item__qty-input,
.ff-summary-item__qty-input {
    width: 56px;
    height: 32px;
    padding: 0 6px;
    text-align: center;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    background: #ffffff;
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: 0.02em;
    -moz-appearance: textfield;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ff-cart-item__qty-input::-webkit-inner-spin-button,
.ff-cart-item__qty-input::-webkit-outer-spin-button,
.ff-summary-item__qty-input::-webkit-inner-spin-button,
.ff-summary-item__qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ff-cart-item__qty-input:focus,
.ff-summary-item__qty-input:focus {
    outline: none;
    border-color: var(--ff-blue, #0071e3);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.ff-cart-item__qty-input:disabled,
.ff-summary-item__qty-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Custom checkout: the qty input sits between the +/- buttons in the
   summary-item grid. Slightly smaller than the drawer variant since the
   summary tile is denser. */
.ff-summary-item__qty-input {
    width: 48px;
    height: 28px;
    font-size: 0.875rem;
}

/* ============================================================
   OUT-OF-STOCK CUSTOM OPTIONS (MageWorx APO + Hyva)
   ============================================================
   Treven feedback (2026-05-21): customer would pick an OOS custom
   option on a PDP (e.g. /xp-pro-pistol-9mm-black slide colour),
   hit "Add to Cart", and only then see "Product that you are
   trying to add is not available." Companion to the .phtml
   overrides in Hyva_MageWorxAdvancedProductOptions/templates that
   mark OOS values as `disabled` / `data-ff-oos="true"` and append
   "Out of Stock" to the visible title.
*/

/* === Dropdown <option> variant ===
   Browsers do their own muting on disabled <option> elements, but
   the muting is inconsistent across Safari / Chrome / Firefox.
   Force a uniform grey + crossed-out look. */
.product-options-wrapper select option.ff-option-oos,
.product-options-wrapper select option[disabled][data-ff-oos="true"],
.product-options-wrapper option.ff-option-oos {
    color: #9b9ba1 !important;
    text-decoration: line-through;
    background: #f5f5f7;
}

/* === Swatch variant ===
   .apo-swatch is the visible tap-target inside the swatch row.
   Combined CSS treatment: muted/desaturated, diagonal strike,
   pointer-events:none so clicks don't fire the swatch-select JS,
   and a small "Out of Stock" pill underneath for text swatches. */
.apo-swatch.ff-swatch-oos {
    position: relative;
    opacity: 0.45;
    filter: saturate(0.2);
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Diagonal strike on color/image swatches so the OOS state reads
   even when the swatch itself is just a colored square. */
.apo-swatch.ff-swatch-oos::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 1px),
        rgba(157, 8, 8, 0.85) calc(50% - 1px),
        rgba(157, 8, 8, 0.85) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    pointer-events: none;
    border-radius: inherit;
}

/* Small "Out of Stock" pill under text swatches — visible affordance
   when the strike alone doesn't make the state obvious. */
.ff-swatch-oos-label {
    display: block;
    margin-top: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9d0808;
    line-height: 1.1;
}

/* ============================================================
   CUSTOM OPTION PREVIEW IMAGE
   ============================================================
   Treven feedback (2026-05-21): "a lot of these have pictures for
   these options that help customers see what is being installed or
   made. I would like the pictures to display below the option once
   selected so they can see what is being selected if their are
   pictures for it."

   Renders inside the .options-list nested scope from select.phtml
   when the selected value has an image attached via MageWorx
   OptionFeatures (images_data JSON). Light, framed, hairline border
   so the image reads as a "preview" rather than competing with the
   main product gallery above.
*/
.ff-option-preview {
    margin: 12px 0 4px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 12px;
    overflow: hidden;
    max-width: 320px;
    box-shadow: 0 1px 3px rgba(10, 25, 41, 0.04);
}

.ff-option-preview__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #ffffff;
    aspect-ratio: 1 / 1;
}

/* Mobile: full-width on phones since the gallery image area is
   already edge-to-edge — the inline preview should match. */
@media (max-width: 767px) {
    .ff-option-preview {
        max-width: 100%;
        border-radius: 10px;
    }
}

/* (No need to add a global [x-cloak] {display:none} — line 203 already
   has it; the x-cloak attribute on .ff-option-preview reuses that.) */

/* ============================================================
   FUSION_OPTIONSUI MODULE — top-level wrapper
   ============================================================
   The .ff-options-ui root wraps the Alpine-driven options UI built by
   app/code/Fusion/OptionsUi/. Children use the existing .ff-pdp-option-row
   + .ff-pdp-option-card classes so the bulk of the visual treatment
   already cascades from earlier rules. These are just the wrapper-level
   tweaks needed for the new structure.
*/
.ff-options-ui {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0 0 24px;
}

.ff-options-ui .ff-pdp-option-row {
    /* Each option section gets a subtle top border to separate visually,
       except the first one. */
    border-top: 1px solid #e8e8ed;
    padding-top: 20px;
}

.ff-options-ui .ff-pdp-option-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.ff-options-ui .ff-pdp-option-row__label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 12px;
}

.ff-options-ui .ff-pdp-option-row__title {
    font-family: var(--ff-font-heading, 'Oswald', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1d1d1f;
}

.ff-options-ui .ff-pdp-option-row__required {
    color: var(--ff-blue, #0071e3);
    font-weight: 700;
}

/* OOS pill inside a card — small red label so OOS values read
   clearly even before the customer hovers / tries to click. */
.ff-pdp-option-card__oos-label {
    display: block;
    margin-top: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9d0808;
    line-height: 1.1;
}

/* ============================================================
   OUT-OF-STOCK card-grid options
   ============================================================
   ff-pdp-options.js mirrors source <option> elements as <button
   class="ff-pdp-option-card"> cards. When the source <option> is
   marked qty<=0 by our multiple.phtml override, the card builder
   copies the OOS state across — these rules grey + strike the card
   and prevent the hover-lift affordance from suggesting it's
   pickable. */
body.catalog-product-view .ff-pdp-option-card.is-oos {
    opacity: 0.45;
    cursor: not-allowed !important;
    background: #f5f5f7 !important;
    color: #6e6e73 !important;
    position: relative;
    pointer-events: none;
}

body.catalog-product-view .ff-pdp-option-card.is-oos::after {
    /* Diagonal strike across the card — same red the swatch OOS uses
       so the brand-language stays consistent across option types. */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 1px),
        rgba(157, 8, 8, 0.7) calc(50% - 1px),
        rgba(157, 8, 8, 0.7) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    pointer-events: none;
    border-radius: inherit;
}

body.catalog-product-view .ff-pdp-option-card.is-oos:hover,
body.catalog-product-view .ff-pdp-option-card.is-oos:focus-visible {
    transform: none !important;
    box-shadow: none !important;
    background: #f5f5f7 !important;
    border-color: #d2d2d7 !important;
}

/* Display:none for dependency-hidden cards — the inline style set by
   the engine wins over this, this is just a safety net so a stray
   data-ff-dep-hidden attribute also gets visually removed. */
body.catalog-product-view .ff-pdp-option-card[data-ff-dep-hidden="1"] {
    display: none !important;
}

/* ============================================================
   HOMEPAGE PRECISION SHOWROOM POLISH — Round 1 (PRO-194 / Codex)
   Treven 2026-05-22

   Quick wins: suppress homepage chrome that distracts from the
   product story, and shrink mobile hero CTAs. All rules scoped
   under body.cms-index-index so other pages keep their existing
   social rail / chatbot / button sizing.

   Rollback: tag pre-homepage-polish-2026-05-22 + CSS backup at
   var/backups/custom-pre-homepage-polish.css on dev.
   ============================================================ */

/* 1) Hide the left social rail on the homepage. Codex: "The left
   social buttons, bottom accessibility button, and chat button
   make the page feel less curated." Social is still visible in
   the footer and on every other page. */
body.cms-index-index .ff-social-rail {
    display: none;
}

/* 2) Shrink + soften the chatbot FAB on the homepage so it doesn't
   compete with the hero. Stays reachable — just smaller and more
   transparent until hover/focus. Other pages keep the full-size
   chatbot. */
body.cms-index-index #ff-chatbot-fab {
    transform: scale(0.85);
    transform-origin: bottom right;
    opacity: 0.65;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
body.cms-index-index #ff-chatbot-fab:hover,
body.cms-index-index #ff-chatbot-fab:focus-visible {
    opacity: 1;
    transform: scale(1);
}

/* 3) Mobile hero CTAs — Codex: "Mobile CTAs are oversized and
   repetitive ... It starts to feel heavy as the user scrolls."
   Trim padding + font-size on small viewports so the buttons feel
   precise rather than chunky. Desktop unchanged. */
@media (max-width: 640px) {
    body.cms-index-index .ff-apple-hero__links {
        gap: 14px;
        margin-top: 14px;
    }
    body.cms-index-index .ff-apple-hero__links .ff-apple-link,
    body.cms-index-index .ff-apple-hero__links .ff-apple-link:visited {
        font-size: 0.9375rem;
        padding: 11px 22px;
        min-width: 0;
    }
}

/* ============================================================
   HOMEPAGE PRECISION SHOWROOM POLISH — Round 2 (PRO-194 / Codex)
   Treven 2026-05-22

   Hero composition variation. Codex flagged hero repetition as the
   single biggest premium-feel killer: "XP 3C, XP COMP, XP PRO, and
   XF PRO all use nearly the same composition." Vary the rhythm
   without touching CMS content — target each hero by aria-label
   and rebuild .ff-apple-hero__content as a grid for the two middle
   heroes (XP COMP, XP PRO). XP 3C and XF PRO stay centered as
   bookends.

   New rhythm:
     1. XP 3C  — centered marquee (current, the launch focus)
     2. XP COMP — image LEFT, text RIGHT (row layout)
     3. XP PRO  — image RIGHT, text LEFT (mirrored row layout)
     4. XF PRO  — centered marquee (matches XP 3C, bookend)

   Mobile (<900px) falls back to the existing stacked column
   layout — preserves the tightened Round-1 CTA sizing.
   ============================================================ */

@media (min-width: 900px) {
    /* `[aria-label*="XP PRO"]` matches "XP PRO — Flagship 1911" but
       NOT "XF PRO — All-metal striker fire" because the substring
       starts differently. So we don't need an em-dash selector. */

    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"],
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] {
        min-height: 560px;
        padding-top: 64px;
        padding-bottom: 64px;
        align-items: stretch;
        text-align: left;
    }

    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__content {
        display: grid;
        /* XP PRO: text in col 1 (0.85fr, narrower) and image in
           col 2 (1.35fr, wider) — image dominates the right side. */
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
        grid-template-rows: auto auto auto auto;
        column-gap: 56px;
        row-gap: 0;
        align-items: center;
        max-width: 1320px;
        margin: 0 auto;
        text-align: left;
    }

    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__content {
        display: grid;
        /* XP COMP mirrors XP PRO: image on the LEFT (col 1) so
           col 1 must be the WIDER 1.35fr cell and col 2 the
           narrower 0.85fr text column. THIS WAS THE LONG-RUNNING
           XP COMP BUG — I had the grid template at 0.85fr/1.35fr
           (text-then-image weights) for both heroes, then moved
           the XP COMP image to grid-column: 1, which dropped the
           image into the narrow text column. No amount of
           img-level width:100% could rescue an image stuck in a
           488px-wide column. Treven 2026-05-22. */
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
        grid-template-rows: auto auto auto auto;
        column-gap: 56px;
        row-gap: 0;
        align-items: center;
        max-width: 1320px;
        margin: 0 auto;
        text-align: left;
    }

    /* Force the row-layout image to fill its grid column. THE BUG
       that kept the XP COMP image small was the base rule's
       `display: flex; justify-content: center; align-items: center`
       on `.ff-apple-hero__image` — that made the inner anchor a
       flex item, and `justify-content: center` shrink-wrapped the
       anchor to its content width (the image's intrinsic 600px),
       ignoring `width: 100%` because flex items center first then
       size to content when no flex-grow is set.

       Fix: drop the flex container and switch to plain block layout
       for the row-layout image wrapper. Block children fill the
       parent width by default. The inner anchor and picture also
       set to block + 100% so the chain holds all the way down to
       the img. */
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__image,
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__image {
        display: block !important;
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__image-link,
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__image picture,
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__image-link,
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__image picture {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        line-height: 0;
    }

    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__image img,
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__image img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 520px !important;
        height: auto !important;
        object-fit: contain;
        /* Stronger shadow than the centered marquee since the
           image is the dominant visual in the row layout. */
        filter: drop-shadow(0 36px 64px rgba(0, 0, 0, 0.18))
                drop-shadow(0 14px 28px rgba(0, 0, 0, 0.09));
    }

    /* XP PRO baseline: text on the LEFT, image on the RIGHT. */
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__eyebrow,
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__title,
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__subtitle,
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__links {
        grid-column: 1;
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        justify-self: start;
    }
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__image {
        grid-column: 2;
        grid-row: 1 / span 4;
        margin: 0;
        align-self: center;
    }

    /* XP COMP mirrored: image on the LEFT, text on the RIGHT. */
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__image {
        grid-column: 1;
        grid-row: 1 / span 4;
        margin: 0;
        align-self: center;
    }
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__eyebrow,
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__title,
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__subtitle,
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__links {
        grid-column: 2;
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        justify-self: start;
    }

    /* Shared eyebrow/links spacing for both row-layout heroes. */
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__eyebrow,
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__eyebrow {
        margin: 0 0 12px;
    }
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__links,
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__links {
        justify-content: flex-start;
        margin-top: 24px;
    }

    /* Title size bump — side-by-side layout makes the default size
       feel anemic next to the product image. */
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__title,
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__title {
        font-size: clamp(3rem, 6vw, 4.5rem);
        line-height: 1.05;
    }
}

/* Restrain the blue/pink gradient underline — Codex: "The blue/pink
   underline is a good signature, but it appears the same way in
   many sections. It should become a restrained brand system, not a
   repeated decoration." Reduce default opacity site-wide so it
   reads as a quiet accent; the existing :hover / :focus-within
   rules still pump it back up when a section is being interacted
   with. */
body.cms-index-index .ff-apple-hero__eyebrow::after,
body.cms-index-index .ff-apple-hero__title::after {
    opacity: 0.7;
}

/* Round 3: subtle scroll-lift parallax on hero product images.
   The JS in homepage-animations.js sets --ff-parallax-y on each
   visible hero image as the user scrolls. We compose that here
   with the existing hover scale so parallax + hover don't fight.
   Disabled for prefers-reduced-motion users (the JS bails on init).

   Smoothing transition is short (0.18s linear) so scroll-driven
   updates stay visually current — long ease durations would lag
   the image perceptibly behind the scroll. */
body.cms-index-index .ff-apple-hero__image img {
    transform: translate3d(0, var(--ff-parallax-y, 0px), 0);
    transition: transform 0.18s linear, filter 0.4s ease;
}
body.cms-index-index .ff-apple-hero__image-link:hover img {
    transform: translate3d(0, var(--ff-parallax-y, 0px), 0) scale(1.035);
}

/* Cap the XP 3C marquee to the viewport so the whole card —
   eyebrow, title, subtitle, CTAs, AND the product photo — lands
   above the fold. Treven 2026-05-22: "On the XP 3C you cant see
   the full pistol without not being able to see the title. This
   needs to be scaled properly."

   Three coordinated constraints:

   1. Hero min-height clamped to viewport minus header (72px) so
      the marquee occupies exactly the visible area, not more.

   2. Hero ALSO gets `max-height` matching the min-height — without
      this the natural image height (3:2 ratio at 1100px width =
      733px) pushed the hero taller than the viewport, scrolling
      the title off-screen.

   3. The product image gets `max-height` capped to ~55vh so the
      photo always leaves room above for the eyebrow + title +
      subtitle + CTAs. `width: auto` keeps the aspect ratio intact;
      `max-width: 100%` keeps it from blowing out the container on
      narrow screens.

   Padding is tighter than the original (56/32 vs 96/48) so the
   eyebrow lands closer to the header and the buttons sit closer
   to the image. */
body.cms-index-index .ff-apple-hero:first-of-type {
    /* Treven 2026-05-29: removed the `max-height: calc(100vh - 72px)` cap.
       It forced the marquee to exactly viewport height and, combined with
       the 52vh pistol below, clipped the bottom of the pistol and pushed
       the "XP 3C" title up under the header on laptop viewports. Keep a
       min-height so the section still feels full, but let it grow to fit
       the whole title + pistol — nothing gets clipped now. */
    min-height: clamp(560px, calc(100vh - 72px), 900px);
    padding-top: 48px;
    padding-bottom: 56px;
    overflow: hidden;
}

body.cms-index-index .ff-apple-hero:first-of-type .ff-apple-hero__image {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Image wrapper takes whatever vertical room the marquee has
       left after eyebrow/title/subtitle/CTAs. Wider than tall so
       the photo can render large without overflowing horizontally. */
    flex: 0 1 auto;
    width: 100%;
}

/* The <a class="ff-apple-hero__image-link"> and <picture> inside
   .ff-apple-hero__image are inline by default — even with the img
   set to width: 100%, the inline parents shrink-wrap to the image's
   intrinsic size, breaking the grow-to-fill chain. Make both
   block-level so the img:width:100% has something to fill against. */
body.cms-index-index .ff-apple-hero:first-of-type .ff-apple-hero__image-link,
body.cms-index-index .ff-apple-hero:first-of-type .ff-apple-hero__image picture {
    display: block;
    width: 100%;
    line-height: 0;
}

/* Image sized by height (52vh) so the centered-marquee fits the
   viewport with eyebrow + title + subtitle + CTAs comfortably
   visible above. width:auto keeps aspect ratio intact. !important
   guards against the base rules at line 15775 / 15792. */
body.cms-index-index .ff-apple-hero:first-of-type .ff-apple-hero__image img {
    /* Treven 2026-05-29: was `height: 52vh` which tied the pistol size to
       the viewport and (with the hero cap above) clipped it on short
       laptop screens. A fixed px max-height keeps the pistol a consistent,
       fully-visible size on every screen, with the section growing to fit
       it rather than cropping. */
    height: auto !important;
    max-height: 480px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ============================================================
   PRO-194 Round 3 R8 — XP 3C hero wisp background.

   Switched from JS-generated SVG (R3–R7) to a static art file
   approach 2026-05-22. Treven provided `xp-3c-wisps.png` at
   /web/images/brand/hero-wisps/. The image is a wide landscape
   composition with red wisps + smoke on the LEFT half and blue
   wisps + smoke on the RIGHT half, with the center mostly clear
   for the pistol photo to sit cleanly between them.

   The image is positioned as a ::before pseudo-element on the
   XP 3C hero only, behind the pistol image (z-index 0 vs the
   pistol's z-index 1). A very subtle slow drift animation
   (24s loop, ~12px translateX, 1.02 scale) adds ambient
   movement without distracting from the gun.

   Pistol stays stationary — the transform overrides at the
   end of this block kill any inherited hover/scroll transforms
   on the pistol image.

   To swap the art later (better Photoshop / AI composition):
   just replace /web/images/brand/hero-wisps/xp-3c-wisps.png
   with new file of same name. No CSS or JS changes needed.
   ============================================================ */

/* Kill the small white strip between the sticky page-header and
   the first hero on the homepage. Magento wraps the homepage
   content in:
     <main class="page-main">
       <div id="contentarea">  (skip-link anchor)
       <div class="page messages">  (Alpine wrapper, usually empty)
       <div class="columns"><div class="column main">
         <section class="ff-apple-hero ...">  (first hero)
   The .page.messages div has padding-top: 16px from the base
   theme + Alpine wrapper divs that render with their own
   spacing — adds up to ~30-50px of white between header and
   hero. On the homepage we want the marquee to butt right up
   against the header, edge-to-edge. */
body.cms-index-index main.page-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.cms-index-index .page-main > #contentarea,
body.cms-index-index .page-main > .page.messages,
body.cms-index-index .page-main > .page.messages > [x-data],
body.cms-index-index .page-main > .page.messages > div {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
/* If page.messages has no actual visible message content,
   collapse it completely so it adds zero vertical space. */
body.cms-index-index .page-main > .page.messages:not(:has(.messages > *)) {
    display: none;
}

/* All branded hero wisp backgrounds share this base — same
   positioning, z-index, animation. Each hero just overrides
   background-image to point at its own art file.

   Cursor interactions (driven by initHeroInteractions in
   homepage-animations.js):
   - JS sets --ff-cursor-dx, --ff-cursor-dy on the hero element
     in range [-1, +1] from center, smoothly lerped at 0.12.
   - The ffWispDrift @keyframes below reads those vars at each
     keyframe so the cursor offset is added to the ambient drift.
   - The pistol image rule further below reads the same vars
     and shifts WITH the cursor for the engagement / depth feel. */
.cms-index-index .ff-apple-hero[aria-label*="XP 3C"],
.cms-index-index .ff-apple-hero[aria-label*="XP COMP"],
.cms-index-index .ff-apple-hero[aria-label*="XP PRO"],
.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] {
    position: relative;
    isolation: isolate;
    --ff-cursor-dx: 0;
    --ff-cursor-dy: 0;
}

.cms-index-index .ff-apple-hero[aria-label*="XP 3C"]::before,
.cms-index-index .ff-apple-hero[aria-label*="XP COMP"]::before,
.cms-index-index .ff-apple-hero[aria-label*="XP PRO"]::before,
.cms-index-index .ff-apple-hero[aria-label*="XF PRO"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    /* z-index: -1 with isolation:isolate on the parent puts the
       wisp at the back of the hero's local stacking context but
       still inside it — text content renders on top without
       needing any z-index hacks. */
    z-index: -1;
    animation: ffWispDrift 24s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform;
}

/* XP 3C — centered marquee, wisps frame the pistol from both sides */
.cms-index-index .ff-apple-hero[aria-label*="XP 3C"]::before {
    background-image: url('../images/brand/hero-wisps/xp-3c-wisps.webp');
}

/* XP COMP — image-on-LEFT layout. Treven-supplied art (refresh
   2026-05-27): full dark cinematic backdrop with red wisps + smoke
   on the LEFT where the pistol sits, blue light streaks flowing
   right behind the text column. Because the new art covers the
   whole hero edge-to-edge (vs the previous semi-transparent wisp
   composition), the text colors need to flip from dark-on-light
   to light-on-dark for readability. Section background also
   becomes dark navy so any wisp edge transparency reads dark
   instead of light gray. */
.cms-index-index .ff-apple-hero[aria-label*="XP COMP"]::before {
    background-image: url('../images/brand/hero-wisps/xp-comp-wisps.webp');
}

.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] {
    background: #0a1929 !important;     /* navy fallback under wisp art */
}

.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__title {
    color: #f5f5f7 !important;          /* light title on dark */
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);
}

.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__subtitle {
    color: #d2d2d7 !important;          /* muted light subtitle on dark */
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

/* Eyebrow pill keeps its brand-blue text color (already readable
   on dark) but lift the pill background opacity so it reads as a
   clear chip against the wisp art rather than fading into it. */
.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__eyebrow {
    background: rgba(0, 163, 255, 0.16) !important;
    border-color: rgba(0, 163, 255, 0.32) !important;
}

/* "Learn more" outline link gets a light border + light text on
   the dark backdrop. The solid "Shop XP COMP" pill (--buy variant)
   already renders white-on-blue and stays readable on dark. */
.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-link--dark:not(.ff-apple-link--buy) {
    color: #f5f5f7 !important;
    border: 1px solid rgba(245, 245, 247, 0.45) !important;
    background: transparent !important;
}
.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-link--dark:not(.ff-apple-link--buy):hover,
.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-link--dark:not(.ff-apple-link--buy):focus-visible {
    background: rgba(245, 245, 247, 0.08) !important;
    border-color: rgba(245, 245, 247, 0.75) !important;
    color: #ffffff !important;
}

/* XP PRO — image-on-RIGHT layout (mirror of XP COMP). Treven-
   supplied art mirrors the XP COMP composition: red wisps + smoke
   cluster on the RIGHT where the pistol sits, blue wisps stream
   leftward behind the text column. */
.cms-index-index .ff-apple-hero[aria-label*="XP PRO"]::before {
    background-image: url('../images/brand/hero-wisps/xp-pro-wisps.webp');
}

/* XF PRO — Treven-supplied art (2026-05-27): symmetric dark
   composition with red wisps + smoke on the LEFT and blue wisps
   on the RIGHT, clear dark center for the pistol to sit between
   them. Same dark-cinematic treatment as XP COMP — text + outline
   link flip to light-on-dark since the art covers the hero
   edge-to-edge. Section background also becomes dark navy so any
   wisp edge transparency reads dark instead of light gray. */
.cms-index-index .ff-apple-hero[aria-label*="XF PRO"]::before {
    background-image: url('../images/brand/hero-wisps/xf-pro-wisps.webp');
}

.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] {
    background: #0a1929 !important;     /* navy fallback under wisp art */
}

.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-hero__title {
    color: #f5f5f7 !important;          /* light title on dark */
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);
}

.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-hero__subtitle {
    color: #d2d2d7 !important;          /* muted light subtitle on dark */
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

/* "All-Metal Striker Fire" eyebrow pill — brighter chip on dark. */
.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-hero__eyebrow {
    background: rgba(0, 163, 255, 0.16) !important;
    border-color: rgba(0, 163, 255, 0.32) !important;
}

/* "Learn more" outline link goes light-on-dark; "Shop XF PRO"
   solid buy button keeps white-on-brand-blue (already reads). */
.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-link--dark:not(.ff-apple-link--buy) {
    color: #f5f5f7 !important;
    border: 1px solid rgba(245, 245, 247, 0.45) !important;
    background: transparent !important;
}
.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-link--dark:not(.ff-apple-link--buy):hover,
.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-link--dark:not(.ff-apple-link--buy):focus-visible {
    background: rgba(245, 245, 247, 0.08) !important;
    border-color: rgba(245, 245, 247, 0.75) !important;
    color: #ffffff !important;
}

/* No ambient background animation — Treven 2026-05-26: the
   background should NOT move on its own. Only cursor input
   should affect it (via the WebGL displacement canvas below).
   Kept the @keyframes definition so older deploys don't break
   if anything still references it, but nothing applies it. */
@keyframes ffWispDrift {
    0%, 100% { transform: translateX(0) scale(1); }
    50%      { transform: translateX(0) scale(1); }
}

/* WebGL displacement canvas — replaces the static wisp PNG
   background with a shader that warps the SAME wisp pixels
   around the cursor. Not an overlay; not a brighten effect;
   actual pixel displacement that distorts the underlying art.
   The fragment shader samples the wisp texture at offset UVs
   based on cursor proximity, so the WISPS THEMSELVES bend +
   blend toward the cursor.

   Z-INDEX: -1 (same as the ::before fallback). Both sit
   BEHIND all foreground content (text, pistol, buttons —
   none of which are positioned with z-index, so they paint
   in the default non-positioned-descendants stack which is
   ABOVE z-index -1). pointer-events:none so the canvas never
   blocks clicks on actual links. */
.cms-index-index .ff-apple-hero .ff-hero-fluid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* When the WebGL canvas successfully initializes (shader
   compiled + wisp texture loaded), JS adds `has-fluid-cursor`
   to the hero. This fades in the canvas AND fades out the
   static ::before so we don't double-paint the wisp art.
   If WebGL fails (old browser, GPU issue), the class never
   gets added → ::before stays visible as a graceful fallback
   and the page still looks correct just without the cursor
   effect. */
.cms-index-index .ff-apple-hero.has-fluid-cursor .ff-hero-fluid {
    opacity: 1;
}
.cms-index-index .ff-apple-hero.has-fluid-cursor[aria-label*="XP 3C"]::before,
.cms-index-index .ff-apple-hero.has-fluid-cursor[aria-label*="XP COMP"]::before,
.cms-index-index .ff-apple-hero.has-fluid-cursor[aria-label*="XP PRO"]::before,
.cms-index-index .ff-apple-hero.has-fluid-cursor[aria-label*="XF PRO"]::before {
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── XP 3C hero — mobile layout fix (Treven 2026-05-28, r3) ──────────
   r1 (contain) and r2 (min-height:auto + 300px pistol cap) both failed.
   r2 actually shrank the pistol (the "too small" complaint) and the
   section still read tall. min-height was never the lever — nothing
   overrides it, so the height is the content itself, and the light
   background reads as dead space around a small pistol. r3 takes full
   control of the mobile layout: zero the section min-height, zero every
   content child's margin and drive spacing with one tight 12px gap, and
   let the pistol fill the full column so it reads big. The wisp
   ::before/canvas (cover) fills the now-compact section. Scoped to XP 3C
   only — the dark heroes are left alone. */
@media (max-width: 767px) {
    body.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] {
        min-height: 0 !important;
        height: auto !important;
        padding: 28px 16px 32px !important;
        justify-content: flex-start !important;
    }
    body.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] .ff-apple-hero__content {
        gap: 12px !important;
    }
    body.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] .ff-apple-hero__content > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] .ff-apple-hero__image {
        margin: 4px 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] .ff-apple-hero__image img {
        width: 100% !important;
        max-width: 380px !important;
        height: auto !important;
    }
}

/* XP 3C light hero — drop the blue radial glow behind the pistol. It's
   built for the DARK heroes (cinematic on navy); on XP 3C's white
   background it read as an out-of-place smudge below the pistol.
   NOTE: an earlier mask-fade on the wisp layer was removed — it created a
   visible "box" (the toned wisp region up top vs the faded-to-white
   bottom read as a rectangle around the pistol). The wisp now fills the
   section uniformly via cover — no mask, no box. */
.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] .ff-apple-hero__image::before {
    display: none !important;
}

/* ============================================================
   PARTS-ROW FLUID CURSOR (2026-05-27)
   Same WebGL effect that lives on the hero backgrounds is now
   applied to the carousel-row backgrounds for visual consistency.
   isolation: isolate scopes the z-index: -1 canvas to each row
   so it sits BEHIND the intro column + product cards but in
   front of the row's own background-image fallback. */
.cms-index-index .ff-parts-row {
    isolation: isolate;
}

.cms-index-index .ff-parts-row .ff-hero-fluid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cms-index-index .ff-parts-row.has-fluid-cursor .ff-hero-fluid {
    opacity: 1;
}

/* Once the WebGL canvas is up and painting, fade out the row's
   static background-image so we don't double-paint the wisp art.
   Implementing with a CSS variable + ::after overlay would be
   over-engineered; a transparent background-color and the canvas
   covering the row gets us there. The background-color stays as
   the navy fallback for the XF row when JS / WebGL fails. */
.cms-index-index .ff-parts-row.has-fluid-cursor {
    background-image: none;
    transition: background-image 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Pistol image follows the cursor (subtle engagement / depth pop).
   Cursor right → pistol leans right (positive translate). Max
   amplitude ~10px so the gun never drifts far from its
   composition slot. Composes with the existing hover-scale on
   .ff-apple-hero__image-link:hover img via cascade order below. */
body.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] .ff-apple-hero__image img,
body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__image img,
body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__image img,
body.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-hero__image img {
    transform: translate3d(
        calc(var(--ff-cursor-dx, 0) * 10px),
        calc(var(--ff-cursor-dy, 0) * 6px),
        0
    ) !important;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    will-change: transform;
}

/* CTA POP on hover — Treven 2026-05-26: "Now make the buttons just
   pop and not magnetic." Plain CSS scale on hover, no JS, no
   cursor-distance tracking. The button just bumps up to 1.06x when
   you hover and snaps back when you leave. */
.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] .ff-apple-hero__links a,
.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__links a,
.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__links a,
.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-hero__links a {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}
/* The cubic-bezier is an "overshoot" easing — small bounce at the
   end of the scale-up gives the button a slightly springy POP feel
   instead of a flat ramp. */
.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] .ff-apple-hero__links a:hover,
.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__links a:hover,
.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__links a:hover,
.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-hero__links a:hover,
.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] .ff-apple-hero__links a:focus-visible,
.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__links a:focus-visible,
.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__links a:focus-visible,
.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-hero__links a:focus-visible {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .cms-index-index .ff-apple-hero[aria-label*="XP 3C"]::before,
    .cms-index-index .ff-apple-hero[aria-label*="XP COMP"]::before,
    .cms-index-index .ff-apple-hero[aria-label*="XP PRO"]::before,
    .cms-index-index .ff-apple-hero[aria-label*="XF PRO"]::before {
        animation: none;
    }
    /* Pistol cursor-follow + button magnetism are JS-driven and
       bail on init via prefersReducedMotion check, but kill the
       transforms here too for belt-and-suspenders. */
    body.cms-index-index .ff-apple-hero[aria-label*="XP 3C"] .ff-apple-hero__image img,
    body.cms-index-index .ff-apple-hero[aria-label*="XP COMP"] .ff-apple-hero__image img,
    body.cms-index-index .ff-apple-hero[aria-label*="XP PRO"] .ff-apple-hero__image img,
    body.cms-index-index .ff-apple-hero[aria-label*="XF PRO"] .ff-apple-hero__image img {
        transform: none !important;
    }
}

/* ============================================================
   FORM VALIDATION POLISH — site-wide (2026-05-27)
   Pairs with ff-form-validation.js (adds aria-required + focuses
   first invalid field on submit). Pure CSS:
     - Red asterisk after required-field labels
     - Red border + soft ring on invalid input after user types
     - Polished mage-error inline messages (red text + icon)
   ============================================================ */

/* Red asterisk marker — Magento marks required fields with the
   `.required` (or legacy `._required`) class on the .field wrapper.
   Targets the inner label span so we don't double-asterisk fields
   whose label already contains custom HTML. */
.field.required > label > span:first-child::after,
.field._required > label > span:first-child::after,
.field.required > .label > span:first-child::after,
.field._required > .label > span:first-child::after {
    content: ' *';
    color: #ef4444;
    font-weight: 700;
    margin-left: 2px;
}

/* Honeypot fields on the dealer-program form / contact form have
   `tabindex="-1"` + `aria-hidden="true"` to hide them from real
   users; suppress the asterisk so the offscreen field doesn't
   leak visual cruft if CSS positioning ever shifts. */
.field.required input[aria-hidden="true"] ~ *::after,
.field.required input[tabindex="-1"] ~ *::after {
    content: none !important;
}

/* Invalid input state — shows red border once user has tried to
   type something AND moved focus away (so we don't yell at them
   while they're still typing). Uses :not(:placeholder-shown) as
   a "did the user try?" proxy and :not(:focus) so we don't
   distract while they're correcting. */
.field input:invalid:not(:placeholder-shown):not(:focus),
.field textarea:invalid:not(:placeholder-shown):not(:focus),
.field select:invalid:not(:focus) {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08) !important;
}

/* Inline error messages — Magento JS validation renders a sibling
   <div class="mage-error" id="...-error"> beneath the invalid
   field with a plain-text error. Style it as a polished red
   error line with a circle-exclamation icon prefix. */
div.mage-error,
.mage-error,
.field-error,
.message-error {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #ef4444 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Icon prefix on the error message. Uses CSS mask so the icon
   inherits the error color (currentColor). */
div.mage-error::before,
.mage-error::before,
.field-error::before {
    content: '';
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center/contain no-repeat;
}

/* Suppress the icon on empty mage-error containers (Magento
   sometimes renders empty wrappers preemptively, before any
   error exists). :empty matches the container when it has no
   child text/elements. */
div.mage-error:empty,
.mage-error:empty {
    display: none !important;
}

/* Magento page-level error message (form-wide validation summary)
   uses a different selector. Keep it polished too. */
.message-error,
.messages .message.error {
    background: rgba(239, 68, 68, 0.06) !important;
    border-left: 3px solid #ef4444 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 0 0 18px !important;
}


/* ============================================================
   END OF FUSION FIREARMS CUSTOM CSS
   ============================================================ */