/*
 * Floreva Pakistan — Design System + Components
 *
 * Structure:
 *   1. CSS custom properties (design tokens)
 *   2. Base resets
 *   3. Typography utilities
 *   4. Button system
 *   5. Layout utilities
 *   6. Component classes (trust badges, best-seller badge, cart, product)
 *   7. Mobile-first responsive adjustments
 *
 * Colors — Floreva brand palette:
 *   --fl-wine-700: #8a4853 (brand primary, CTAs, accents)
 *   --fl-wine-800: #6e3940 (primary hover)
 *   --fl-wine-900: #3d2e35 (text primary)
 *   --fl-cream-50: #fcfbf9 (body background)
 *   --fl-cream-100: #fdf8f4 (surface)
 *   --fl-gold-500: #c9a55a (review stars, accents)
 *   --fl-slate-500: #857374 (muted text)
 *
 * Usage from templates:
 *   <button class="fl-btn fl-btn-primary">Add to Cart</button>
 *   <section class="fl-section"><div class="fl-container">...</div></section>
 */

/* ===== 1. Design Tokens ===== */
:root {
    /* Brand colors */
    --fl-wine-700: #8a4853;
    --fl-wine-800: #6e3940;
    --fl-wine-900: #3d2e35;
    --fl-cream-50: #fcfbf9;
    --fl-cream-100: #fdf8f4;
    --fl-cream-200: #f4ede6;
    --fl-cream-300: #f0e8e9;
    --fl-cream-400: #e8d8d9;
    --fl-cream-500: #d7c1c3;
    --fl-gold-500: #c9a55a;
    --fl-slate-300: #b0a8a3;
    --fl-slate-500: #857374;
    --fl-slate-600: #625e59;
    --fl-slate-700: #524345;
    --fl-ink-900: #1e1b17;

    /* Semantic aliases */
    --fl-color-primary: var(--fl-wine-700);
    --fl-color-primary-hover: var(--fl-wine-800);
    --fl-color-bg: var(--fl-cream-50);
    --fl-color-surface: #ffffff;
    --fl-color-text: var(--fl-wine-900);
    --fl-color-text-muted: var(--fl-slate-500);
    --fl-color-border: var(--fl-cream-300);
    --fl-color-accent: var(--fl-gold-500);
    --fl-color-success: #065f46;
    --fl-color-error: #991b1b;

    /* Typography */
    --fl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fl-font-display: 'Jost', 'Inter', sans-serif;
    --fl-font-serif: 'Cormorant Garamond', serif;

    --fl-text-xs: 0.6875rem;  /* 11px */
    --fl-text-sm: 0.8125rem;  /* 13px */
    --fl-text-base: 0.9375rem;/* 15px */
    --fl-text-md: 1rem;       /* 16px */
    --fl-text-lg: 1.125rem;   /* 18px */
    --fl-text-xl: 1.375rem;   /* 22px */
    --fl-text-2xl: 1.5rem;    /* 24px */
    --fl-text-3xl: 2rem;      /* 32px */
    --fl-text-4xl: 2.5rem;    /* 40px */

    /* Spacing scale (4px base) */
    --fl-space-1: 0.25rem;
    --fl-space-2: 0.5rem;
    --fl-space-3: 0.75rem;
    --fl-space-4: 1rem;
    --fl-space-5: 1.25rem;
    --fl-space-6: 1.5rem;
    --fl-space-8: 2rem;
    --fl-space-10: 2.5rem;
    --fl-space-12: 3rem;
    --fl-space-16: 4rem;
    --fl-space-20: 5rem;

    /* Radii */
    --fl-radius-sm: 0.25rem;
    --fl-radius-md: 0.5rem;
    --fl-radius-lg: 0.625rem;
    --fl-radius-xl: 0.75rem;
    --fl-radius-2xl: 1rem;
    --fl-radius-full: 9999px;

    /* Shadows */
    --fl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --fl-shadow-md: 0 4px 14px rgba(138, 72, 83, 0.18);
    --fl-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --fl-trans-fast: 0.15s ease;
    --fl-trans: 0.25s ease;
    --fl-trans-slow: 0.4s ease;

    /* Layout */
    --fl-container-sm: 36rem;
    --fl-container-md: 48rem;
    --fl-container-lg: 56rem;
    --fl-container-xl: 80rem;
    --fl-header-height: 4rem;
}

/* ===== 2. Base resets (scoped to Floreva surfaces) ===== */
.fl-page, .fl-section { box-sizing: border-box; }
.fl-page *, .fl-page *::before, .fl-page *::after { box-sizing: border-box; }

/* ===== 3. Typography utilities ===== */
.fl-heading-1 {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-3xl);
    font-weight: 800;
    color: var(--fl-ink-900);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}
.fl-heading-2 {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-2xl);
    font-weight: 800;
    color: var(--fl-ink-900);
    line-height: 1.2;
    margin: 0 0 var(--fl-space-4);
}
.fl-heading-3 {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-lg);
    font-weight: 700;
    color: var(--fl-color-primary);
    margin: 0 0 var(--fl-space-2);
}
.fl-muted { color: var(--fl-color-text-muted); }
.fl-small { font-size: var(--fl-text-sm); }
.fl-xs    { font-size: var(--fl-text-xs); }

.fl-eyebrow {
    font-size: var(--fl-text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fl-color-primary);
}

/* ===== 4. Button system ===== */
.fl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fl-space-2);
    padding: var(--fl-space-3) var(--fl-space-8);
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-base);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: var(--fl-radius-lg);
    cursor: pointer;
    transition: background var(--fl-trans-fast), color var(--fl-trans-fast), transform 0.1s ease;
    height: 3.25rem;
    white-space: nowrap;
}
.fl-btn:active { transform: scale(0.98); }

.fl-btn-primary {
    background: var(--fl-color-primary);
    color: #fff;
    box-shadow: var(--fl-shadow-md);
}
.fl-btn-primary:hover {
    background: var(--fl-color-primary-hover);
    color: #fff;
}

.fl-btn-outline {
    background: #fff;
    color: var(--fl-ink-900);
    border: 1.5px solid var(--fl-ink-900);
}
.fl-btn-outline:hover {
    background: var(--fl-ink-900);
    color: #fff;
}

.fl-btn-block { width: 100%; }

/* ===== 5. Layout utilities ===== */
.fl-container {
    width: 100%;
    max-width: var(--fl-container-xl);
    margin: 0 auto;
    padding: 0 var(--fl-space-4);
}
.fl-container-narrow { max-width: var(--fl-container-md); }

.fl-section {
    padding: var(--fl-space-16) 0;
}
.fl-section-tight { padding: var(--fl-space-10) 0; }

.fl-stack > * + * { margin-top: var(--fl-space-4); }
.fl-stack-lg > * + * { margin-top: var(--fl-space-6); }

.fl-flex-row {
    display: flex;
    align-items: center;
    gap: var(--fl-space-3);
}

/* ===== 6. Components ===== */

/* Trust badges (under Add to Cart) */
.fl-trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fl-space-2);
    margin-top: var(--fl-space-4);
    padding: var(--fl-space-3) 0;
    border-top: 1px solid var(--fl-color-border);
}
.fl-trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--fl-space-2);
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-xs);
    font-weight: 600;
    color: var(--fl-slate-600);
    line-height: 1.35;
}
.fl-trust-badge .icon {
    font-size: 1.25rem;
    margin-bottom: var(--fl-space-1);
}
.fl-trust-badge small {
    display: block;
    font-size: 0.625rem;
    color: var(--fl-slate-500);
    margin-top: 2px;
}

/* Best-seller badge */
.fl-badge-bestseller {
    display: inline-block;
    background: var(--fl-ink-900);
    color: var(--fl-gold-500);
    font-family: var(--fl-font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--fl-space-1) var(--fl-space-3);
    border-radius: var(--fl-radius-full);
    margin-bottom: var(--fl-space-3);
}

/* Review stars */
.fl-stars { display: inline-flex; gap: 2px; color: var(--fl-color-primary); }
.fl-stars .material-symbols-outlined { font-size: var(--fl-text-md); }

/* Verified badge */
.fl-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.625rem;
    color: #22a55a;
    font-weight: 500;
}

/* Price */
.fl-price-main {
    font-size: var(--fl-text-3xl);
    font-weight: 700;
    color: var(--fl-color-primary);
    font-family: var(--fl-font-sans);
    margin: 0;
}
.fl-price-main .woocommerce-Price-amount { color: inherit; }

/* Quantity stepper */
.fl-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--fl-color-border);
    border-radius: var(--fl-radius-lg);
    background: #fff;
    overflow: hidden;
    height: 3.25rem;
}
.fl-qty button {
    width: 2.75rem;
    background: none;
    border: none;
    font-size: var(--fl-text-xl);
    color: var(--fl-color-primary);
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fl-qty input {
    width: 2.5rem;
    border: none;
    text-align: center;
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-md);
    font-weight: 700;
    color: var(--fl-ink-900);
    background: transparent;
    outline: none;
    -moz-appearance: textfield;
}
.fl-qty input::-webkit-outer-spin-button,
.fl-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Card */
.fl-card {
    background: var(--fl-color-surface);
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-xl);
    padding: var(--fl-space-5);
    transition: box-shadow var(--fl-trans);
}
.fl-card:hover { box-shadow: var(--fl-shadow-md); }

/* Divider */
.fl-divider {
    height: 1px;
    background: var(--fl-color-border);
    margin: var(--fl-space-6) 0;
    border: 0;
}

/* Notice banner (WC add-to-cart notifications) */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
    position: fixed;
    top: var(--fl-space-4);
    left: 50%;
    transform: translateX(-50%);
    background: var(--fl-color-success);
    color: #fff;
    padding: 0.9rem 1.5rem;
    border-radius: var(--fl-radius-md);
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-base);
    font-weight: 600;
    box-shadow: var(--fl-shadow-lg);
    z-index: 100000;
    max-width: 90vw;
    text-align: center;
    animation: flNoticeSlide 0.35s ease-out;
}
.woocommerce-notices-wrapper .woocommerce-error { background: var(--fl-color-error); }
.woocommerce-notices-wrapper a.button,
.woocommerce-notices-wrapper a.restore-item { display: none; }

@keyframes flNoticeSlide {
    from { opacity: 0; transform: translate(-50%, -1rem); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* FAQ accordion polish */
details > summary { list-style: none !important; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; content: ""; }
details[open] > summary > .material-symbols-outlined { transform: rotate(45deg); }
details > summary > .material-symbols-outlined { transition: transform 0.2s ease; }
details:hover > summary { color: var(--fl-color-primary); }
details { transition: background var(--fl-trans); }

/* Product description typography (loaded inside #fl-tab-desc) */
#fl-tab-desc h1, #fl-tab-desc h2, #fl-tab-desc h3, #fl-tab-desc h4 {
    font-family: var(--fl-font-sans);
    color: var(--fl-ink-900);
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 2.25rem 0 0.85rem;
}
#fl-tab-desc h1 { font-size: var(--fl-text-3xl); font-weight: 800; }
#fl-tab-desc h2 { font-size: var(--fl-text-xl); font-weight: 800; padding-bottom: var(--fl-space-2); border-bottom: 1px solid var(--fl-color-border); }
#fl-tab-desc h3 { font-size: var(--fl-text-lg); font-weight: 700; color: var(--fl-color-primary); }
#fl-tab-desc h4 { font-size: var(--fl-text-md); font-weight: 700; }
#fl-tab-desc h1:first-child,
#fl-tab-desc h2:first-child,
#fl-tab-desc h3:first-child { margin-top: 0; }
#fl-tab-desc p { margin: 0 0 var(--fl-space-4); color: var(--fl-slate-700); line-height: 1.75; font-size: var(--fl-text-base); }
#fl-tab-desc ul, #fl-tab-desc ol { margin: var(--fl-space-2) 0 var(--fl-space-5); padding-left: var(--fl-space-6); color: var(--fl-slate-700); line-height: 1.75; }
#fl-tab-desc li { margin-bottom: var(--fl-space-2); font-size: var(--fl-text-base); }
#fl-tab-desc li::marker { color: var(--fl-color-primary); }
#fl-tab-desc strong { color: var(--fl-ink-900); font-weight: 700; }
#fl-tab-desc hr { border: none; border-top: 1px solid var(--fl-color-border); margin: var(--fl-space-8) 0; }
#fl-tab-desc table { width: 100%; border-collapse: collapse; margin: var(--fl-space-6) 0; font-size: var(--fl-text-sm); }
#fl-tab-desc table th,
#fl-tab-desc table td {
    padding: var(--fl-space-3) var(--fl-space-4);
    border: 1px solid var(--fl-color-border);
    text-align: left;
    vertical-align: top;
}
#fl-tab-desc table th { background: var(--fl-cream-100); font-weight: 700; color: var(--fl-ink-900); }
#fl-tab-desc table tr:nth-child(even) td { background: var(--fl-cream-50); }
#fl-tab-desc blockquote {
    border-left: 4px solid var(--fl-color-primary);
    padding: var(--fl-space-3) var(--fl-space-5);
    margin: var(--fl-space-6) 0;
    background: var(--fl-cream-100);
    color: var(--fl-slate-700);
    font-style: italic;
}
#fl-tab-desc a {
    color: var(--fl-color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#fl-tab-desc a:hover { color: var(--fl-color-primary-hover); }

/* Tabs (Description, How to Use, Ingredients) */
.fl-tab-btn {
    padding: var(--fl-space-3) var(--fl-space-5);
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    font-weight: 600;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--fl-slate-500);
    transition: all var(--fl-trans-fast);
}
.fl-tab-btn.fl-tab-active {
    color: var(--fl-color-primary);
    border-bottom-color: var(--fl-color-primary);
}
.fl-tab-content { display: none; padding: var(--fl-space-8) 0; }
.fl-tab-content.fl-tab-active { display: block; }

/* ===== 7. Mobile-first responsive ===== */
@media (max-width: 768px) {
    :root {
        --fl-text-3xl: 1.5rem;
        --fl-text-2xl: 1.25rem;
    }
    .fl-section { padding: var(--fl-space-10) 0; }
    .fl-container { padding: 0 var(--fl-space-3); }

    /* Ensure all buttons are comfortably tappable */
    .fl-btn { min-height: 3rem; }
}


/* === Phase 2c additions: ATC button row + utility classes === */

/* Single-product Add-to-Cart row layout */
.fl-atc-row {
    display: flex;
    align-items: stretch;
    gap: var(--fl-space-3);
}

/* Make ATC button fill remaining space alongside the qty stepper */
.fl-btn-grow { flex: 1; }

/* Margin utility */
.fl-mt-3 { margin-top: var(--fl-space-3); }

/* Slim the default fl-btn padding when grown so it sits flush with qty stepper */
.fl-btn.fl-btn-grow { padding-left: var(--fl-space-4); padding-right: var(--fl-space-4); }


/* Cart count badge in header */
.fl-cart-link { width: 1.5rem; height: 1.5rem; }
.fl-cart-count {
    position: absolute;
    top: -0.4rem;
    right: -0.55rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    background: var(--fl-color-primary);
    color: #fff;
    font-family: var(--fl-font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
    border-radius: var(--fl-radius-full);
    box-shadow: 0 0 0 2px rgba(253, 248, 244, 0.95);
    pointer-events: none;
    transition: transform 0.2s ease;
}
.fl-cart-count[hidden] { display: none; }
.fl-cart-link:hover .fl-cart-count { transform: scale(1.1); }

/* ===== 8. Accessibility (Phase 3) ===== */

/* Visible focus rings for keyboard users - 2px wine outline with offset */
*:focus-visible {
    outline: 2px solid var(--fl-color-primary);
    outline-offset: 2px;
    border-radius: var(--fl-radius-sm);
}

/* Skip-to-content link — canonical 'visually hidden' pattern, only appears on keyboard focus */
.fl-skip-link {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    background: var(--fl-color-primary);
    color: #fff;
}
.fl-skip-link:focus {
    position: fixed !important;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    clip-path: none;
    white-space: normal;
    padding: 0.75rem 1.5rem;
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--fl-radius-md) 0;
    z-index: 100000;
}

/* Respect user's reduced-motion preference */
@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;
    }
}

/* Screen-reader-only utility (announce text without visual presence) */
.fl-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;
}

/* Increase tap targets on mobile */
@media (max-width: 768px) {
    button, .fl-btn, a.fl-btn, [role="button"] {
        min-height: 44px;  /* WCAG AAA tap target */
    }
}


/* ===== 9. Cart drawer (slides in from right) ===== */
.fl-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(44, 26, 36, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10050;
}
.fl-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.fl-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 100vw);
    height: 100vh;
    background: var(--fl-cream-100);
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10060;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
}
.fl-drawer.open {
    transform: translateX(0);
}

.fl-drawer-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--fl-color-border);
    background: #fff;
}
.fl-drawer-title {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-lg);
    font-weight: 700;
    color: var(--fl-ink-900);
    margin: 0;
}
.fl-drawer-close {
    background: none;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-full);
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fl-ink-900);
    cursor: pointer;
    transition: background var(--fl-trans-fast);
}
.fl-drawer-close:hover { background: var(--fl-cream-200); }

.fl-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    -webkit-overflow-scrolling: touch;
}
.fl-drawer-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--fl-color-text-muted);
    font-size: var(--fl-text-base);
}

/* Cart item in drawer */
.fl-drawer-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--fl-cream-300);
}
.fl-drawer-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--fl-radius-md);
    background: var(--fl-cream-200);
}
.fl-drawer-item-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}
.fl-drawer-item-name {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    font-weight: 600;
    color: var(--fl-ink-900);
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fl-drawer-item-qty {
    font-size: var(--fl-text-xs);
    color: var(--fl-color-text-muted);
    margin-top: 0.15rem;
}
.fl-drawer-item-price {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    font-weight: 700;
    color: var(--fl-color-primary);
    white-space: nowrap;
    align-self: flex-start;
}
.fl-drawer-item-remove {
    background: none;
    border: none;
    color: var(--fl-color-text-muted);
    font-size: var(--fl-text-xs);
    cursor: pointer;
    text-decoration: underline;
    padding: 0.15rem 0;
    text-align: left;
    align-self: flex-start;
    width: fit-content;
}
.fl-drawer-item-remove:hover { color: var(--fl-color-error); }

.fl-drawer-footer {
    flex-shrink: 0;
    padding: 1.25rem 1.5rem 1.5rem;
    background: #fff;
    border-top: 1px solid var(--fl-color-border);
}
.fl-drawer-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1rem;
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-md);
    color: var(--fl-ink-900);
}
.fl-drawer-subtotal strong {
    font-size: var(--fl-text-lg);
    color: var(--fl-color-primary);
}
.fl-drawer-continue {
    width: 100%;
    background: none;
    border: none;
    color: var(--fl-color-text-muted);
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    padding: 0.85rem 0 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fl-drawer-continue:hover { color: var(--fl-ink-900); }

/* Lock body scroll when drawer is open */
body.fl-drawer-open { overflow: hidden; }


/* MOBILE-FIRST PASS
 * ===================================================================
 * MOBILE-FIRST PASS — site-wide mobile polish (phones 375-428px)
 * ===================================================================
 * Fixes the most common cross-page mobile issues:
 *   1. Horizontal overflow (stops pinch-to-zoom weirdness)
 *   2. iOS input auto-zoom (requires 16px base font on form inputs)
 *   3. Forced single-column on flex/grid containers
 *   4. Touch-target minimum sizes (44px WCAG AAA)
 *   5. Sticky ATC bar spacing so content isn't hidden
 *   6. Tables overflow horizontally instead of breaking layout
 *   7. Hero/heading font scaling
 *   8. Image responsiveness
 *   9. Wide inline elements (like price + qty rows)
 * ================================================================ */

/* === 1. Global: no horizontal overflow === */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* === 2. Form inputs: 16px base (prevents iOS zoom-on-focus) === */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
    font-size: 16px !important;
}

@media (max-width: 768px) {

    /* === 3. Containers force single-column on phone === */
    .fl-container,
    .fl-container-narrow,
    main > section > div[style*="grid-template-columns"],
    main > section > div[style*="display:flex"][style*="flex-wrap:wrap"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Phone: 2-column product grids → 1 col for < 480, 2 col otherwise */
    .products,
    ul.products,
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .products li.product,
    ul.products li.product {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    /* === 4. Touch targets: 44px min on all clickables === */
    button, .fl-btn, a.fl-btn, [role="button"],
    .woocommerce-button, input[type="submit"] {
        min-height: 44px;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }
    /* Except qty steppers which are smaller but adequate */
    .fl-qty button { min-height: unset; height: 3rem; }

    /* === 5. Sticky ATC bar on product page — add body bottom padding === */
    body.single-product {
        padding-bottom: 5rem;
    }
    #fl-sticky-atc {
        padding: 0.75rem 1rem !important;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    }

    /* === 6. Tables: horizontal scroll wrapper === */
    .fl-tab-content table,
    .woocommerce-cart table,
    .shop_table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    /* === 7. Hero + heading scales === */
    h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.2 !important; }
    h2 { font-size: clamp(1.25rem, 5vw, 1.625rem) !important; line-height: 1.25 !important; }
    h3 { font-size: clamp(1.1rem, 4vw, 1.375rem) !important; line-height: 1.3 !important; }

    /* === 8. Section padding on phone === */
    .fl-section,
    section[style*="padding:6rem"],
    section[style*="padding:5rem"],
    section[style*="padding:4rem"] {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* === 9. Cart page: stack totals + items vertically === */
    .woocommerce-cart-form,
    .cart_totals,
    form.woocommerce-cart-form > * {
        width: 100% !important;
        float: none !important;
    }

    /* === 10. Checkout: columns stack === */
    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2,
    #customer_details .col-1,
    #customer_details .col-2 {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }
    .woocommerce-checkout-review-order {
        margin-top: 2rem;
    }

    /* === 11. Product hero: stack image + info === */
    #fl-product-page main > section:first-of-type > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    #fl-img-col {
        position: static !important;
        width: 100% !important;
        min-width: 100% !important;
    }
    #fl-info-col {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* === 12. Review cards: 1 column === */
    #fl-review-grid {
        grid-template-columns: 1fr !important;
    }

    /* === 13. Footer: stack columns === */
    footer .footer-columns,
    footer[role="contentinfo"] > div,
    footer > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center;
    }

    /* === 14. Homepage sections === */
    .fl-hero,
    .fl-hero-inner {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        text-align: center;
    }
    /* Homepage collection grid: 1 col on phone */
    main > section > div[style*="grid-template-columns:repeat(3"],
    main > section > div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* === 15. Cart drawer full-width on phone === */
    .fl-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* === 16. Mobile menu drawer === */
    #fl-mobile-menu {
        width: min(85vw, 320px) !important;
    }

    /* === 17. Trust badges: 3-col stays, shrink text === */
    .fl-trust-badges {
        gap: 0.5rem;
    }
    .fl-trust-badge {
        font-size: 0.625rem;
        padding: 0.5rem 0.25rem;
    }
    .fl-trust-badge .icon {
        font-size: 1rem;
    }

    /* === 18. Forms: labels above inputs, full width === */
    .woocommerce form .form-row {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 1rem !important;
    }
    .woocommerce form .form-row input,
    .woocommerce form .form-row textarea,
    .woocommerce form .form-row select {
        width: 100% !important;
        padding: 0.8rem 1rem !important;
        box-sizing: border-box;
    }

    /* === 19. Buttons that look like links on mobile get more padding === */
    .fl-btn,
    button.fl-btn,
    input[type="submit"].fl-btn {
        width: 100%;
        max-width: 100%;
    }
    /* Except inline button groups keep side-by-side */
    .fl-btn-group > .fl-btn {
        width: auto;
        flex: 1;
    }
    /* ATC row on product page: qty stepper + CTA side-by-side */
    .fl-atc-row {
        flex-wrap: nowrap;
        gap: 0.5rem !important;
    }
    .fl-atc-row .fl-btn { width: auto; }

    /* === 20. Related / cross-sell product grids === */
    .related.products ul.products,
    .cross-sells ul.products,
    .upsells ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* === Smaller phones (< 400px) === */
@media (max-width: 400px) {
    .fl-container,
    .fl-container-narrow {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    /* Single col for product grids at very narrow widths */
    .products,
    ul.products,
    .woocommerce ul.products,
    .related.products ul.products {
        grid-template-columns: 1fr !important;
    }
    /* Reduce sticky ATC height */
    #fl-sticky-atc {
        padding: 0.5rem 0.75rem !important;
    }
    #fl-sticky-atc .fl-btn { padding: 0.5rem 1rem; font-size: 0.75rem; }
}

/* === Tablets (768-1024px) === */
@media (min-width: 768px) and (max-width: 1024px) {
    .products,
    ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .fl-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}


/* ===== JS Accordion (FAQ) ===== */
.fl-faq-accordion { margin: 1rem 0 2rem; }
.fl-acc-item {
    border-bottom: 1px solid var(--fl-color-border);
}
.fl-acc-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-base);
    font-weight: 600;
    color: var(--fl-ink-900);
    text-align: left;
    transition: color var(--fl-trans-fast);
    min-height: unset;
}
.fl-acc-q:hover { color: var(--fl-color-primary); }
.fl-acc-plus {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--fl-color-primary);
    transition: transform var(--fl-trans-fast);
}
.fl-acc-item.fl-acc-open .fl-acc-plus {
    transform: rotate(180deg);
}
.fl-acc-a {
    padding: 0 0 1rem;
    color: var(--fl-slate-700);
    line-height: 1.7;
    font-size: var(--fl-text-sm);
}

/* ===== Fix 4: Drawer close button — protect from global button min-height === */
.fl-drawer-close,
button.fl-drawer-close {
    min-height: 0 !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
    flex-shrink: 0;
}
.fl-drawer-close svg {
    width: 20px;
    height: 20px;
    display: block;
}


/* ===== Cart page (premium rebuild v2) ===== */
.fl-cart-page {
    background: var(--fl-color-bg);
    min-height: calc(100vh - var(--fl-header-height));
    padding-bottom: 6rem; /* room for sticky bar on mobile */
}

/* Ensure cart drawer stays properly hidden on cart page (failsafe) */
.fl-cart-page ~ .fl-drawer,
body.woocommerce-cart .fl-drawer {
    transform: translateX(100%) !important;
}
.fl-cart-page ~ .fl-drawer.open,
body.woocommerce-cart .fl-drawer.open {
    transform: translateX(0) !important;
}

/* Page header */
.fl-cart-header {
    text-align: center;
    margin: 1rem 0 2rem;
}
.fl-cart-header h1 {
    font-family: var(--fl-font-sans);
    font-size: clamp(1.75rem, 5.5vw, 2.5rem);
    font-weight: 800;
    color: var(--fl-ink-900);
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
}
.fl-cart-header p {
    color: var(--fl-color-text-muted);
    font-size: var(--fl-text-sm);
    margin: 0;
}

/* ----- Empty state ----- */
.fl-cart-empty {
    text-align: center;
    background: #fff;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-2xl);
    padding: 3rem 1.5rem 2.5rem;
    box-shadow: 0 2px 12px rgba(44, 26, 36, 0.03);
}
.fl-cart-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fl-cream-200), var(--fl-cream-300));
    color: var(--fl-color-primary);
    margin: 0 auto 1.5rem;
}
.fl-cart-empty h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--fl-ink-900);
    margin: 0 0 0.5rem;
}
.fl-cart-empty p {
    color: var(--fl-color-text-muted);
    font-size: var(--fl-text-base);
    margin: 0 0 1.75rem;
}

/* ----- Free-shipping progress ----- */
.fl-ship-progress {
    background: linear-gradient(135deg, #fff 0%, var(--fl-cream-100) 100%);
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-xl);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(44, 26, 36, 0.03);
}
.fl-ship-progress-text {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    color: var(--fl-ink-900);
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.fl-ship-progress-text strong { color: var(--fl-color-primary); }
.fl-ship-progress-track {
    height: 8px;
    background: var(--fl-cream-300);
    border-radius: var(--fl-radius-full);
    overflow: hidden;
}
.fl-ship-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fl-color-primary), var(--fl-gold-500));
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: var(--fl-radius-full);
}
.fl-ship-progress-done {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.fl-ship-progress-done .fl-ship-progress-text {
    color: var(--fl-color-success);
}
.fl-ship-progress-done .fl-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--fl-color-success);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ----- Cart items card ----- */
.fl-cart-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem !important;
    background: #fff;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-xl);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(44, 26, 36, 0.04);
}

.fl-cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--fl-cream-300);
    align-items: center;
}
.fl-cart-item:last-child { border-bottom: none; }

.fl-cart-item-img {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: var(--fl-radius-lg);
    overflow: hidden;
    background: var(--fl-cream-200);
    border: 1px solid var(--fl-cream-300);
}
.fl-cart-item-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: none !important;
}

.fl-cart-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}
.fl-cart-item-name {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-base);
    font-weight: 600;
    color: var(--fl-ink-900);
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fl-cart-item-name:hover { color: var(--fl-color-primary); }

.fl-cart-item-meta {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
}
.fl-cart-item-remove {
    font-size: var(--fl-text-xs);
    color: var(--fl-slate-500);
    text-decoration: none;
    padding: 0.25rem 0;
    transition: color var(--fl-trans-fast);
}
.fl-cart-item-remove:hover { color: var(--fl-color-error); }
.fl-cart-item-price {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-md);
    font-weight: 700;
    color: var(--fl-ink-900);
    white-space: nowrap;
    text-align: right;
}

/* Small qty stepper for cart */
.fl-qty-sm {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-md);
    background: #fff;
    overflow: hidden;
    height: 2.25rem;
}
.fl-qty-sm button {
    width: 2rem;
    height: 2.25rem;
    background: none;
    border: none;
    font-size: 0.95rem;
    color: var(--fl-color-primary);
    cursor: pointer;
    font-weight: 500;
    min-height: unset !important;
    padding: 0 !important;
}
.fl-qty-sm button:hover { background: var(--fl-cream-100); }
.fl-qty-sm input {
    width: 2rem;
    height: 2.25rem;
    border: none;
    border-left: 1px solid var(--fl-color-border);
    border-right: 1px solid var(--fl-color-border);
    text-align: center;
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    font-weight: 700;
    color: var(--fl-ink-900);
    background: #fff;
    outline: none;
    -moz-appearance: textfield;
}
.fl-qty-sm input::-webkit-outer-spin-button,
.fl-qty-sm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ----- Update cart + coupon row ----- */
.fl-cart-actions {
    margin: 0 0 1.5rem;
    text-align: right;
}
.fl-cart-actions .fl-btn {
    width: auto;
    padding: 0 1.5rem;
    min-height: unset;
    height: 2.5rem;
    font-size: var(--fl-text-xs);
}

.fl-cart-coupon {
    background: #fff;
    border: 1px dashed var(--fl-color-border);
    border-radius: var(--fl-radius-xl);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.fl-cart-coupon > summary {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    font-weight: 600;
    color: var(--fl-ink-900);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fl-cart-coupon > summary::-webkit-details-marker { display: none; }
.fl-cart-coupon > summary::after {
    content: "+";
    font-size: 1.2rem;
    color: var(--fl-color-primary);
    transition: transform 0.2s;
}
.fl-cart-coupon[open] > summary::after { transform: rotate(45deg); }
.fl-cart-coupon-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.875rem;
}
.fl-cart-coupon-form input {
    flex: 1;
    padding: 0.65rem 0.875rem;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-md);
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    outline: none;
    background: var(--fl-cream-100);
}
.fl-cart-coupon-form input:focus {
    border-color: var(--fl-color-primary);
    background: #fff;
}
.fl-cart-coupon-form .fl-btn {
    padding: 0 1.25rem;
    min-height: unset;
    height: auto;
}

/* ----- Totals card (premium feel) ----- */
.fl-cart-totals {
    background: #fff;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-2xl);
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(44, 26, 36, 0.05);
    margin-bottom: 1.5rem;
}
.fl-cart-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-base);
    color: var(--fl-slate-700);
}
.fl-cart-totals-row strong { color: var(--fl-ink-900); font-weight: 700; }
.fl-cart-total {
    font-size: var(--fl-text-lg);
    padding-top: 0.75rem !important;
    margin-top: 0.5rem;
    border-top: 1px solid var(--fl-cream-300);
}
.fl-cart-total strong {
    color: var(--fl-color-primary);
    font-size: 1.5rem;
    font-weight: 800;
}
.fl-cart-totals .fl-btn {
    margin-top: 1.25rem;
    height: 3.5rem;
    font-size: var(--fl-text-md);
    letter-spacing: 0.08em;
}

.fl-cart-trust {
    text-align: center;
    margin: 1rem 0 0;
    font-size: var(--fl-text-xs);
    color: var(--fl-slate-500);
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.fl-cart-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.fl-cart-continue {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    color: var(--fl-color-text-muted);
    text-decoration: none;
    padding: 0.5rem;
}
.fl-cart-continue:hover { color: var(--fl-color-primary); }

/* ----- Mobile: < 500px ----- */
@media (max-width: 500px) {
    .fl-cart-item {
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto;
        gap: 0.75rem 0.875rem;
        padding: 1rem;
    }
    .fl-cart-item-img {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 72px;
        height: 72px;
    }
    .fl-cart-item-body {
        grid-column: 2;
        grid-row: 1;
    }
    .fl-cart-item-price {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        padding-top: 0.25rem;
    }
    .fl-cart-totals-row strong { font-size: var(--fl-text-md); }
    .fl-cart-total strong { font-size: 1.25rem; }
}



/* ===== Homepage FAQ accordion (used by page-floreva-home.php) ===== */
.fl-accordion-item {
    border-bottom: 1px solid var(--fl-color-border);
}
.fl-accordion-item button {
    width: 100%;
    padding: 1.25rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--fl-font-display, 'Jost', sans-serif);
    min-height: unset;
}
.fl-accordion-item button:hover { color: var(--fl-color-primary); }
.fl-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.fl-accordion-item.open .fl-accordion-content {
    max-height: 500px;
}
.fl-accordion-icon {
    transition: transform 0.3s ease;
    display: inline-block;
    flex-shrink: 0;
    color: var(--fl-color-primary);
}
.fl-accordion-item.open .fl-accordion-icon {
    transform: rotate(180deg);
}


/* ===== Right aside summary ===== */
.fl-checkout-aside { position: sticky; top: 5rem; }
.fl-chk-summary {
    background: #fff;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-xl);
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(44, 26, 36, 0.05);
}
.fl-chk-summary-heading {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-lg);
    font-weight: 700;
    color: var(--fl-ink-900);
    margin: 0 0 1rem;
}

.fl-chk-items {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.fl-chk-item {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 0.75rem;
    padding: 0.6rem 0;
    align-items: center;
    border-bottom: 1px dashed var(--fl-cream-300);
}
.fl-chk-item:last-child { border-bottom: none; }
.fl-chk-item-img-wrap {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: var(--fl-radius-md);
    overflow: visible;
    background: var(--fl-cream-200);
}
.fl-chk-item-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--fl-radius-md);
    display: block;
}
.fl-chk-qty-bubble {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    background: var(--fl-slate-700);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    border-radius: var(--fl-radius-full);
}
.fl-chk-item-name {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    color: var(--fl-ink-900);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fl-chk-item-price {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    font-weight: 700;
    color: var(--fl-ink-900);
    white-space: nowrap;
}

.fl-chk-totals {
    border-top: 1px solid var(--fl-cream-300);
    padding-top: 0.85rem;
}
.fl-chk-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0;
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    color: var(--fl-slate-700);
}
.fl-chk-coupon { color: var(--fl-color-primary); }
.fl-chk-free { color: var(--fl-color-success); font-weight: 700; }
.fl-chk-total {
    padding-top: 0.75rem !important;
    margin-top: 0.35rem;
    border-top: 1px solid var(--fl-cream-300);
    font-size: var(--fl-text-md);
    color: var(--fl-ink-900);
}
.fl-chk-total strong {
    color: var(--fl-color-primary);
    font-size: 1.25rem;
}

/* ===== Mobile-only collapsed summary ===== */
.fl-chk-summary-mobile { display: none; }
.fl-chk-summary-mobile > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-xl);
    margin-bottom: 1rem;
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-sm);
    color: var(--fl-ink-900);
    box-shadow: 0 2px 8px rgba(44, 26, 36, 0.03);
}
.fl-chk-summary-mobile > summary::-webkit-details-marker { display: none; }
.fl-chk-sum-toggle-text { display: inline-flex; align-items: center; }
.fl-chk-sum-total { color: var(--fl-color-primary); font-size: var(--fl-text-md); }
.fl-chk-sum-contents {
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-xl);
    padding: 1rem 1.25rem;
}

/* ===== Mobile layout ===== */
@media (max-width: 860px) {
    .fl-checkout-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .fl-checkout-aside { display: none; }
    .fl-chk-summary-mobile { display: block; }
    .fl-field-row { grid-template-columns: 1fr; gap: 0; }
    .fl-chk-section { padding: 1.25rem; }
}
@media (max-width: 480px) {
    .fl-chk-section { padding: 1rem; border-radius: var(--fl-radius-lg); }
    .fl-chk-section-title { font-size: var(--fl-text-md); }
    .fl-checkout-trust { gap: 0.75rem; }
}





/* ===== Checkout v4 (modern, refined) ===== */
.fl-checkout-v3 {
    background:
        radial-gradient(1200px 600px at 50% -100px, rgba(138, 72, 83, 0.05), transparent 70%),
        var(--fl-cream-50);
    min-height: 100vh;
    padding-bottom: 6rem;
}

/* Top summary strip — subtle glass */
.fl-chk-strip {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(138, 72, 83, 0.08);
    position: sticky;
    top: var(--fl-header-height);
    z-index: 20;
}
.fl-chk-strip-toggle > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 0;
    font-family: var(--fl-font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fl-slate-700);
    letter-spacing: 0.01em;
}
.fl-chk-strip-toggle > summary::-webkit-details-marker { display: none; }
.fl-chk-strip-left { display: inline-flex; align-items: center; gap: 0.5rem; }
.fl-chk-strip-left svg { color: var(--fl-color-primary); }
.fl-chk-strip-caret {
    color: var(--fl-slate-500);
    transition: transform .25s ease;
    font-size: 0.7rem;
}
.fl-chk-strip-toggle[open] .fl-chk-strip-caret { transform: rotate(180deg); }
.fl-chk-strip-toggle strong {
    color: var(--fl-ink-900);
    font-size: var(--fl-text-md);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.fl-chk-strip-body {
    padding: 0.75rem 0 1.25rem;
    border-top: 1px solid var(--fl-cream-300);
    margin-top: 0.5rem;
    animation: flSlideDown 0.25s ease-out;
}
@keyframes flSlideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.fl-chk-wrap { padding: 2rem 1rem 2rem; }

/* Heading: larger, refined */
.fl-chk-h1 {
    font-family: var(--fl-font-sans);
    font-weight: 800;
    font-size: clamp(1.75rem, 5.5vw, 2.5rem);
    color: var(--fl-ink-900);
    letter-spacing: -0.03em;
    margin: 0 0 2rem;
    line-height: 1.05;
}

.fl-chk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 3.5rem;
    align-items: start;
}

/* Section group — no more boxy cards */
.fl-chk-group {
    border: none;
    padding: 0 0 1.75rem;
    margin: 0 0 1.75rem;
    border-bottom: 1px solid rgba(138, 72, 83, 0.08);
}
.fl-chk-group:last-of-type { border-bottom: none; }

.fl-chk-legend {
    font-family: var(--fl-font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--fl-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 0;
    margin: 0 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.fl-chk-legend::after {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 1px;
    background: var(--fl-color-primary);
    opacity: 0.4;
}

/* Floating-label input — modern, softer */
.fl-chk-input {
    position: relative;
    margin-bottom: 0.75rem;
}
.fl-chk-input input,
.fl-chk-input textarea,
.fl-chk-input select {
    width: 100%;
    height: 3.75rem;
    padding: 1.35rem 1.1rem 0.5rem;
    border: 1.5px solid rgba(138, 72, 83, 0.12);
    border-radius: 14px;
    font-family: var(--fl-font-sans);
    font-size: 16px;
    color: var(--fl-ink-900);
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.fl-chk-input input:hover,
.fl-chk-input textarea:hover,
.fl-chk-input select:hover {
    border-color: rgba(138, 72, 83, 0.25);
}
.fl-chk-input input:focus,
.fl-chk-input textarea:focus,
.fl-chk-input select:focus {
    border-color: var(--fl-color-primary);
    box-shadow: 0 0 0 4px rgba(138, 72, 83, 0.08);
    background: #fff;
}
.fl-chk-input label {
    position: absolute;
    left: 1.1rem;
    top: 1.2rem;
    font-family: var(--fl-font-sans);
    font-size: 15px;
    font-weight: 400;
    color: var(--fl-slate-500);
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease, letter-spacing 0.18s ease;
}
.fl-chk-input input:focus + label,
.fl-chk-input input:not(:placeholder-shown) + label,
.fl-chk-input textarea:focus + label,
.fl-chk-input textarea:not(:placeholder-shown) + label,
.fl-chk-input.fl-chk-select select:focus ~ label,
.fl-chk-input.fl-chk-select select:valid ~ label {
    top: 0.5rem;
    font-size: 10.5px;
    color: var(--fl-color-primary);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fl-chk-select label {
    top: 0.5rem;
    font-size: 10.5px;
    color: var(--fl-color-primary);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fl-chk-select select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a4853' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    padding-right: 2.75rem;
    cursor: pointer;
}

.fl-chk-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

/* Optional disclosure link */
.fl-chk-more { margin: 0.35rem 0 0.5rem; }
.fl-chk-more > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.5rem 0;
    font-family: var(--fl-font-sans);
    font-size: 13px;
    color: var(--fl-color-primary);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.15s ease;
}
.fl-chk-more > summary::-webkit-details-marker { display: none; }
.fl-chk-more > summary:hover { color: var(--fl-color-primary-hover); }
.fl-chk-more[open] > summary { color: var(--fl-slate-500); margin-bottom: 0.5rem; }

/* Payment — modern pill cards */
.fl-chk-payment { display: flex; flex-direction: column; gap: 0.6rem; }
.fl-pay-option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.1rem;
    background: #fff;
    border: 1.5px solid rgba(138, 72, 83, 0.12);
    border-radius: 14px;
    cursor: pointer;
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-base);
    color: var(--fl-ink-900);
    font-weight: 600;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    position: relative;
}
.fl-pay-option:hover {
    border-color: rgba(138, 72, 83, 0.3);
    background: #fefcfa;
}
.fl-pay-option.is-selected {
    border-color: var(--fl-color-primary);
    background: linear-gradient(180deg, #fff 0%, #fdf8f6 100%);
    box-shadow: 0 0 0 4px rgba(138, 72, 83, 0.06), 0 4px 14px rgba(138, 72, 83, 0.08);
}
.fl-pay-option input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.fl-pay-dot {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid rgba(138, 72, 83, 0.25);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    background: #fff;
    transition: border-color 0.2s ease;
}
.fl-pay-option.is-selected .fl-pay-dot { border-color: var(--fl-color-primary); }
.fl-pay-option.is-selected .fl-pay-dot::after {
    content: "";
    position: absolute;
    inset: 2.5px;
    background: var(--fl-color-primary);
    border-radius: 50%;
    animation: flDotPop 0.2s ease-out;
}
@keyframes flDotPop { from { transform: scale(0); } to { transform: scale(1); } }
.fl-pay-label { flex: 1; letter-spacing: -0.005em; }
.fl-pay-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fl-color-primary);
    background: rgba(201, 165, 90, 0.15);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}
.fl-pay-desc {
    padding: 0.85rem 1.1rem;
    background: rgba(244, 237, 230, 0.6);
    border-radius: 12px;
    font-size: var(--fl-text-sm);
    color: var(--fl-slate-700);
    line-height: 1.55;
    margin-top: -0.15rem;
}
.fl-pay-desc p { margin: 0; }

/* Desktop submit */
.fl-chk-submit-desk {
    margin-top: 1.75rem;
    height: 3.75rem;
    font-size: var(--fl-text-md);
    letter-spacing: 0.08em;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(138, 72, 83, 0.25);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.fl-chk-submit-desk:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(138, 72, 83, 0.3);
}
.fl-chk-submit-desk:active { transform: translateY(0); }

.fl-chk-micro {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 12px;
    color: var(--fl-slate-500);
    letter-spacing: 0.02em;
}

/* Right aside (desktop) — bigger, floatier */
.fl-chk-aside { position: sticky; top: calc(var(--fl-header-height) + 4rem); }
.fl-chk-aside-card {
    background: #fff;
    border: 1px solid rgba(138, 72, 83, 0.08);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 10px 40px rgba(44, 26, 36, 0.06), 0 1px 2px rgba(44, 26, 36, 0.02);
}
.fl-chk-aside-heading {
    font-family: var(--fl-font-sans);
    font-size: var(--fl-text-md);
    font-weight: 700;
    color: var(--fl-ink-900);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--fl-cream-300);
    letter-spacing: -0.005em;
}

/* Sticky mobile bottom bar — gradient, floaty */
.fl-chk-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, #fff 30%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(138, 72, 83, 0.08);
    box-shadow: 0 -8px 32px rgba(44, 26, 36, 0.08);
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
    display: none;
    align-items: center;
    gap: 0.85rem;
}
.fl-chk-mobile-bar-total {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.fl-chk-mobile-bar-total span {
    font-size: 10px;
    color: var(--fl-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}
.fl-chk-mobile-bar-total strong {
    font-size: var(--fl-text-md);
    color: var(--fl-color-primary);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.fl-chk-mobile-bar .fl-btn {
    flex: 1;
    min-height: 3.25rem;
    height: 3.25rem;
    padding: 0 1.5rem;
    font-size: 13px;
    letter-spacing: 0.1em;
    max-width: none;
    width: auto;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(138, 72, 83, 0.3);
}

/* Mobile */
@media (max-width: 860px) {
    .fl-chk-layout { grid-template-columns: 1fr; gap: 0; }
    .fl-chk-aside { display: none; }
    .fl-chk-submit-desk { display: none; }
    .fl-chk-mobile-bar { display: flex; }
    .fl-chk-row { grid-template-columns: 1fr; }
    .fl-chk-strip { top: 4rem; }
    .fl-chk-h1 { font-size: 1.75rem; margin-bottom: 1.25rem; }
    .fl-chk-wrap { padding: 1.25rem 1rem 1.5rem; }
    .fl-chk-group { padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
    .fl-chk-input input,
    .fl-chk-input textarea,
    .fl-chk-input select { height: 3.5rem; border-radius: 12px; }
}

@media (max-width: 400px) {
    .fl-chk-wrap { padding: 1rem 0.875rem 1.5rem; }
    .fl-pay-option { padding: 0.95rem 0.9rem; border-radius: 12px; }
}