/*
 * Frisky Corset — storefront theme.
 *
 * Palette is deliberately rich and a little theatrical: deep wine for
 * primary actions, rose gold for ornament, a cream paper for the page
 * body so product photography stays warm. Type pairs Playfair Display
 * (serif headings) with Inter (sans body) — both load from Google Fonts
 * via the layout so we don't bundle webfonts.
 *
 * Most colours are wired through CSS custom properties so site-wide
 * tweaks live in one place. Components that need brand polish use the
 * `fc-*` prefix; raw Bootstrap classes still work underneath.
 */

:root {
    /* Brand palette */
    --fc-wine: #6F1D2A;
    --fc-wine-dark: #4F121C;
    --fc-wine-deep: #2C0810;
    --fc-rose-gold: #C2A878;
    --fc-rose-gold-soft: #D9C49A;
    --fc-blush: #E8C5BE;
    --fc-paper: #FAF5EE;
    --fc-paper-rule: #E3D8C9;
    --fc-ink: #1E1217;
    --fc-ink-mute: #5C4452;
    --fc-noir: #0A0508;

    /* Spacing rhythm */
    --fc-radius: 0.35rem;

    /* Engine-shared loader accent — Frisky theme paints the
       steampunk gears in rose-gold over a deep-wine wash. */
    --wcy-loader-accent: var(--fc-rose-gold);
    --wcy-loader-bg: rgba(44, 8, 16, 0.92);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--fc-paper);
    color: var(--fc-ink);
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.fc-display {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--fc-noir);
    font-weight: 600;
    letter-spacing: 0.005em;
}

h1, .fc-display { font-weight: 700; letter-spacing: -0.005em; }

a {
    color: var(--fc-wine);
    text-decoration: none;
    transition: color 120ms ease;
}
a:hover {
    color: var(--fc-wine-dark);
    text-decoration: underline;
}

.fc-eyebrow {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.7rem;
    color: var(--fc-ink-mute);
    font-weight: 500;
}

/* ---------------------------------------------------------------- */
/* Top nav                                                          */
/* ---------------------------------------------------------------- */
.fc-nav {
    background: var(--fc-paper);
    border-bottom: 1px solid var(--fc-paper-rule);
    padding: 0.9rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
/* Tightened from gap: 2rem so the brand + nav + search + actions
   fit a typical 1280px viewport without crowding (PBI #14516). On
   wider viewports the search input grows via its own max-width. */
.fc-nav-inner {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
/* Goddess treatment — the brand wordmark is an emblem composite:
   a hairline rose-gold medallion (inline SVG) flanked by the
   italic Playfair wordmark with a soft champagne-to-rose-gold
   foil gradient painted into the letterforms via
   background-clip:text. Hover deepens the wine and brightens the
   emblem with a gentle glow. */
.fc-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.65rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    line-height: 1;
}
.fc-brand-emblem {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(112, 30, 50, 0.18));
    transition: filter 0.25s ease, transform 0.25s ease;
}
.fc-brand-wordmark {
    /* Foil gradient — champagne midtone bracketed by rose-gold +
       wine. Painted into the letters via background-clip. Fallback
       colour (wine) renders on browsers that don't honour the
       clip, so the wordmark still reads in plain wine. */
    background: linear-gradient(180deg,
        var(--fc-wine-deep, #4a1530) 0%,
        var(--fc-wine, #701e32) 25%,
        var(--fc-rose-gold, #d6a89c) 60%,
        #c2a878 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--fc-wine, #701e32);
}
.fc-brand .fc-brand-amp {
    margin: 0 0.05em;
    /* The ampersand stays in its own bracketed gradient — slightly
       lighter so it reads as a graphic flourish rather than a
       letter. Renders correctly in fallback-color browsers too. */
    background: linear-gradient(180deg,
        var(--fc-rose-gold, #d6a89c) 0%,
        #c2a878 50%,
        var(--fc-rose-gold-soft, #f0d4cc) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--fc-rose-gold, #d6a89c);
}
.fc-brand:hover {
    text-decoration: none;
}
.fc-brand:hover .fc-brand-emblem {
    filter: drop-shadow(0 0 6px rgba(214, 168, 156, 0.55))
            drop-shadow(0 1px 1px rgba(112, 30, 50, 0.2));
    transform: rotate(-3deg);
}
.fc-brand:hover .fc-brand-wordmark {
    background: linear-gradient(180deg,
        var(--fc-wine-deep, #4a1530) 0%,
        var(--fc-wine, #701e32) 40%,
        var(--fc-rose-gold, #d6a89c) 90%,
        #c2a878 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Footer brand: smaller emblem + wordmark, same composite. */
.fc-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.fc-brand-emblem-footer {
    width: 26px;
    height: 26px;
}

.fc-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.95rem;          /* was 1.4rem — tighter for PBI #14516 */
}
.fc-nav-links a {
    white-space: nowrap;
    font-size: 0.9rem;     /* was 0.95rem */
}

/* Header search — compact input + glyph button. Flex-grows to fill
   the gap between nav-links and nav-actions so on a wide viewport
   the search has room to breathe; on narrow viewports the input
   shrinks to its minimum and the button stays visible. */
.fc-nav-search {
    display: flex;
    align-items: center;
    flex-grow: 1;
    max-width: 22rem;
    background: var(--fc-paper-soft, #faf3ef);
    border: 1px solid var(--fc-paper-rule);
    border-radius: 999px;
    padding: 0.1rem 0.3rem 0.1rem 0.85rem;
    margin: 0 1rem;
}
.fc-nav-search input[type="search"] {
    flex-grow: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--fc-ink);
    font-size: 0.92rem;
    padding: 0.35rem 0.2rem;
    outline: none;
}
.fc-nav-search input[type="search"]::placeholder {
    color: var(--fc-ink-mute);
    font-style: italic;
}
.fc-nav-search button {
    background: transparent;
    border: 0;
    color: var(--fc-wine);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
    border-radius: 999px;
    transition: background 0.15s ease;
}
.fc-nav-search button:hover {
    background: var(--fc-wine);
    color: #fff;
}
@@media (max-width: 768px) {
    /* On phones the header wraps to a second row. The search input
       still renders — just less wide — so customers can always
       type a query from anywhere on the site. */
    .fc-nav-search {
        margin: 0.5rem 0 0;
        max-width: 100%;
        order: 99;          /* push below the brand + nav row */
        width: 100%;
    }
}
.fc-nav-links a {
    color: var(--fc-ink);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0.3rem 0;
    border-bottom: 1px solid transparent;
}
.fc-nav-links a:hover {
    color: var(--fc-wine);
    border-bottom-color: var(--fc-rose-gold);
    text-decoration: none;
}

.fc-nav-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    /* Keep the user/admin/sign-out/bag row on one line — a long
       email used to wrap "Sign out" + "Bag" onto a second row. The
       greeting now uses the first name only and the row stays
       no-wrap so a stray long token still pushes outward instead
       of stacking. */
    flex-wrap: nowrap;
    white-space: nowrap;
}
.fc-nav-actions a, .fc-nav-actions button {
    color: var(--fc-ink);
    background: none;
    border: none;
    font-size: 0.9rem;
    padding: 0;
    white-space: nowrap;
}
.fc-nav-actions .fc-cart-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--fc-wine);
    border-radius: 999px;
    color: var(--fc-wine);
    font-weight: 500;
}
.fc-nav-actions .fc-cart-pill:hover {
    background: var(--fc-wine);
    color: var(--fc-paper);
    text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* Buttons                                                          */
/* ---------------------------------------------------------------- */
.fc-btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: var(--fc-radius);
    font-weight: 500;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 140ms ease;
    text-decoration: none;
    line-height: 1.2;
}
.fc-btn-primary {
    background: var(--fc-wine);
    color: var(--fc-paper);
}
.fc-btn-primary:hover {
    background: var(--fc-wine-dark);
    color: var(--fc-paper);
    text-decoration: none;
}
.fc-btn-secondary {
    background: transparent;
    color: var(--fc-wine);
    border-color: var(--fc-wine);
}
.fc-btn-secondary:hover {
    background: var(--fc-wine);
    color: var(--fc-paper);
    text-decoration: none;
}
.fc-btn-ghost {
    background: transparent;
    color: var(--fc-ink);
    border-color: var(--fc-paper-rule);
}
.fc-btn-ghost:hover {
    border-color: var(--fc-wine);
    color: var(--fc-wine);
    text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* Parallax band                                                    */
/* ---------------------------------------------------------------- */
/*
 * A full-bleed parallax band. The background photo is pinned to the
 * viewport (background-attachment: fixed) so the foreground copy
 * slides over it as the page scrolls — that's the parallax animation
 * effect. Focal point is anchored to the TOP of the image so the
 * subject (model's face / corseted bodice / vehicle hood) stays in
 * frame on every viewport height — a center-anchored crop hid faces
 * on tall screens.
 *
 * Notes:
 *  - background-attachment:fixed + background-position:center top
 *    gives the parallax animation AND focal-at-top — the image's
 *    top renders at the viewport top, content slides over it.
 *  - Mobile WebKit historically dropped background-attachment:fixed
 *    and the perf cost can be real on large bg images. The
 *    @media (max-width: 768px) override below disables parallax on
 *    narrow screens — the band still renders, just statically.
 *  - The contrast overlay is a separate stop in the background-image
 *    stack (linear-gradient on top of the photo) so the layered CSS
 *    stays in one place. Adjust the overlay alpha to taste per band.
 *  - .fc-parallax-tall is for the homepage hero-style bands;
 *    .fc-parallax-slim is for collection-page heroes which want to
 *    take less vertical room above the grid.
 */
.fc-parallax {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    /* Focal at the top — keeps face/subject visible. The cover-size
       crop trims from the bottom on tall viewports, which is the
       right tradeoff for portrait-style hero photography. */
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--fc-paper);
    overflow: hidden;
    margin: 0 0 5rem;
}
.fc-parallax-slim {
    min-height: 44vh;
    margin: 0 0 2.5rem;
}
.fc-parallax-inner {
    position: relative;
    z-index: 1;
    padding: 4rem 0;
}
.fc-parallax h2 {
    color: var(--fc-paper);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    margin: 0.6rem 0 1.1rem;
    max-width: 22ch;
}
.fc-parallax .fc-eyebrow {
    color: var(--fc-rose-gold);
}
.fc-parallax p.lede {
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 32rem;
    margin-bottom: 1.6rem;
    color: rgba(250, 245, 238, 0.92);
}
.fc-parallax .fc-btn-primary {
    background: var(--fc-rose-gold);
    color: var(--fc-wine-deep);
    border-color: var(--fc-rose-gold);
}
.fc-parallax .fc-btn-primary:hover {
    background: var(--fc-rose-gold-soft);
    color: var(--fc-wine-deep);
}
.fc-parallax .fc-btn-secondary {
    color: var(--fc-paper);
    border-color: rgba(250, 245, 238, 0.4);
}
.fc-parallax .fc-btn-secondary:hover {
    background: rgba(250, 245, 238, 0.12);
    color: var(--fc-paper);
}
/* Anchor variant — letting the band itself be a clickable link wraps
   the whole thing in an <a>, useful when the band IS the CTA. */
a.fc-parallax {
    text-decoration: none;
    color: var(--fc-paper);
}
a.fc-parallax:hover { color: var(--fc-paper); text-decoration: none; }
a.fc-parallax::after {
    /* Subtle "view product" hint on hover */
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 5, 8, 0);
    transition: background 250ms ease;
}
a.fc-parallax:hover::after {
    background: rgba(10, 5, 8, 0.12);
}
@media (max-width: 768px) {
    /* Narrow screens get a shorter band — the full 70vh dominates the
       phone viewport and pushes the grid out of sight. Focal anchor
       inherits center-top from the desktop rule. Fixed-attachment
       parallax is also disabled here: mobile WebKit historically
       dropped it and the perf cost on large bg images is real. The
       band still renders, just statically. */
    .fc-parallax {
        background-attachment: scroll;
        min-height: 50vh;
    }
}

/* ---------------------------------------------------------------- */
/* Hero                                                             */
/* ---------------------------------------------------------------- */
.fc-hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Fallback colour shows through if the photo fails to load —
       same wine gradient as before keeps the brand voice. */
    background:
        radial-gradient(ellipse at 80% 20%, rgba(232, 197, 190, 0.35), transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(194, 168, 120, 0.25), transparent 55%),
        linear-gradient(135deg, var(--fc-wine-deep) 0%, var(--fc-wine) 55%, var(--fc-wine-dark) 100%);
    color: var(--fc-paper);
    margin-bottom: 4rem;
}
/* Layered photo behind the content. object-position keeps the
   model's face + torso in frame instead of clipping at the top —
   showing 35% from the top lands the eyes roughly on the upper
   third of the viewport at typical hero heights. The img is
   slightly TALLER than the section so the parallax JS has room to
   translate it on scroll without exposing the section's wine
   fallback. */
.fc-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    /* +20% gives the parallax translation room. The image stays
       within the section thanks to overflow: hidden on .fc-hero. */
    height: 120%;
    object-fit: cover;
    object-position: center 35%;
    pointer-events: none;
    /* Pre-compose for the parallax JS — translate3d is hardware
       accelerated and avoids layout reflow. */
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.fc-hero::before {
    /* Two-layer overlay: a horizontal wine gradient for readability
       on the text side, plus the existing subtle satin shimmer.
       The wine layer is lighter than before (0.55 / 0.40 / 0.18 vs
       0.78 / 0.62 / 0.35) so the photo carries more of the image —
       still enough contrast for the headline copy to remain
       readable against a busy photo. */
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg,
            rgba(44, 8, 16, 0.55) 0%,
            rgba(111, 29, 42, 0.40) 55%,
            rgba(44, 8, 16, 0.18) 100%),
        repeating-linear-gradient(115deg,
            rgba(255, 255, 255, 0.02) 0px,
            rgba(255, 255, 255, 0.02) 2px,
            transparent 2px,
            transparent 6px);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    /* Respect the OS-level "reduce motion" toggle — disable the
       parallax translate so the photo sits still. */
    .fc-hero-photo {
        will-change: auto;
        transform: none !important;
    }
}
.fc-hero-inner {
    position: relative;
    padding: 5rem 0;
    max-width: 38rem;
}
.fc-hero .fc-eyebrow {
    color: var(--fc-rose-gold);
}
.fc-hero h1 {
    color: var(--fc-paper);
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    line-height: 1.05;
    margin: 0.8rem 0 1.4rem;
    font-weight: 500;
    font-style: italic;
}
.fc-hero h1 em {
    font-style: normal;
    color: var(--fc-rose-gold);
}
.fc-hero p.lede {
    font-size: 1.15rem;
    line-height: 1.65;
    max-width: 32rem;
    margin-bottom: 2rem;
    color: rgba(250, 245, 238, 0.92);
}
.fc-hero .fc-btn-primary {
    background: var(--fc-rose-gold);
    color: var(--fc-wine-deep);
    border-color: var(--fc-rose-gold);
}
.fc-hero .fc-btn-primary:hover {
    background: var(--fc-rose-gold-soft);
    color: var(--fc-wine-deep);
}
.fc-hero .fc-btn-secondary {
    color: var(--fc-paper);
    border-color: rgba(250, 245, 238, 0.4);
}
.fc-hero .fc-btn-secondary:hover {
    background: rgba(250, 245, 238, 0.12);
    color: var(--fc-paper);
}

/* ---------------------------------------------------------------- */
/* Section header                                                   */
/* ---------------------------------------------------------------- */
.fc-section {
    margin-bottom: 4.5rem;
}
.fc-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--fc-paper-rule);
}
.fc-section-header h2 {
    margin: 0;
    font-size: 1.85rem;
    font-style: italic;
}

/* Product-type banners (PBI #14539) — tabbed area below the buy-box
   that surfaces banners admins have targeted to the product's
   ProductType. Native button-strip tabs with a coupled hidden/
   visible panel grid; the JS toggle in Product.cshtml swaps the
   active classes + hidden attr. */
.fc-product-banner-tabs {
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    background: #fff;
    overflow: hidden;
}
.fc-banner-tabs-strip {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--fc-paper-rule);
    background: var(--fc-paper-soft, #faf3ef);
    overflow-x: auto;
}
.fc-banner-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--fc-ink-mute);
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 120ms, border-color 120ms, background 120ms;
    white-space: nowrap;
}
.fc-banner-tab:hover { color: var(--fc-wine); }
.fc-banner-tab-active {
    color: var(--fc-wine-deep);
    border-bottom-color: var(--fc-rose-gold);
    background: #fff;
}
.fc-banner-tab-panel { padding: 1.25rem 1.5rem; }
.fc-banner-tab-panel[hidden] { display: none; }
.fc-banner-tab-body {
    display: grid;
    grid-template-columns: minmax(200px, 0.45fr) 1fr;
    gap: 1.5rem;
    align-items: center;
}
.fc-banner-tab-image {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    border-radius: var(--fc-radius);
}
.fc-banner-tab-title {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
    font-style: italic;
}
.fc-banner-tab-desc {
    margin: 0 0 1rem;
    color: var(--fc-ink);
    line-height: 1.55;
}
.fc-banner-tab-cta {
    display: inline-block;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
}
@@media (max-width: 640px) {
    .fc-banner-tab-body {
        grid-template-columns: 1fr;
    }
}

/* Specifications panel (PBI #14540). Two-column dl: bold label
   on the left, value on the right. Each row alternates a subtle
   blush stripe so the customer's eye can track across long
   labels without losing the matching value. The "default" marker
   sits inline next to a fallback value, brushed in muted ink so
   it's noticeable to admins but doesn't shout at customers. */
.fc-spec-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
}
.fc-spec-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.4fr) 1fr;
    gap: 1.5rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--fc-paper-rule);
}
.fc-spec-row:nth-child(even) {
    background: var(--fc-paper-soft, #faf3ef);
}
.fc-spec-row:last-child {
    border-bottom: 0;
}
.fc-spec-label {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--fc-noir);
    font-size: 0.92rem;
}
.fc-spec-value {
    margin: 0;
    color: var(--fc-ink);
    font-size: 0.95rem;
}
.fc-spec-unit {
    color: var(--fc-ink-mute);
    font-size: 0.85rem;
    margin-left: 0.15rem;
}
.fc-spec-default-flag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--fc-paper-rule);
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fc-ink-mute);
    background: rgba(43, 26, 16, 0.04);
    cursor: help;
}
/* Rows whose value came from the default get a slightly muted
   colour so the customer can scan the sheet and see "this row
   is a fallback, that row is real". */
.fc-spec-row-default .fc-spec-value {
    color: var(--fc-ink-mute);
    font-style: italic;
}

/* ---------------------------------------------------------------- */
/* Product card                                                     */
/* ---------------------------------------------------------------- */
.fc-card {
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.fc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(44, 8, 16, 0.10);
    border-color: var(--fc-rose-gold-soft);
}
.fc-card-image {
    aspect-ratio: 3 / 4;
    background:
        linear-gradient(135deg, var(--fc-blush) 0%, var(--fc-rose-gold-soft) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.fc-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fc-card-image .fc-card-placeholder {
    /* When no image — render a stylised silhouette */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 2rem;
    color: var(--fc-wine);
    opacity: 0.35;
    letter-spacing: 0.05em;
}
.fc-card-body {
    padding: 1rem 1.1rem 1.2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.fc-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    margin: 0 0 0.35rem;
    line-height: 1.25;
}
.fc-card-title a {
    color: var(--fc-ink);
}
.fc-card-title a:hover {
    color: var(--fc-wine);
    text-decoration: none;
}
.fc-card-price {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--fc-noir);
    margin-top: auto;
    padding-top: 0.7rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.fc-card-price-sale {
    color: var(--fc-wine);
}
.fc-card-price-strike {
    color: var(--fc-ink-mute);
    text-decoration: line-through;
    font-size: 0.85rem;
}
.fc-card-badge {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    background: var(--fc-wine);
    color: var(--fc-paper);
    font-size: 0.65rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}
.fc-card-badge-sale { background: var(--fc-rose-gold); color: var(--fc-wine-deep); }

/* ---------------------------------------------------------------- */
/* Collection feature tiles                                         */
/* ---------------------------------------------------------------- */
.fc-collection-tile {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--fc-radius);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 1.4rem;
    color: var(--fc-paper);
    background:
        linear-gradient(180deg, transparent 40%, rgba(10, 5, 8, 0.75) 100%),
        linear-gradient(135deg, var(--fc-wine) 0%, var(--fc-wine-deep) 100%);
    text-decoration: none;
    transition: transform 200ms ease;
}
.fc-collection-tile:hover {
    transform: scale(1.012);
    color: var(--fc-paper);
    text-decoration: none;
}
.fc-collection-tile .fc-tile-meta {
    position: relative;
    z-index: 1;
}
.fc-collection-tile .fc-tile-meta .fc-eyebrow {
    color: var(--fc-rose-gold);
}
.fc-collection-tile h3 {
    color: var(--fc-paper);
    font-size: 1.65rem;
    font-style: italic;
    margin: 0.3rem 0 0;
}

/* ---------------------------------------------------------------- */
/* Feature tiles (homepage "shop the looks" row)                    */
/* ---------------------------------------------------------------- */
/*
 * Photo-forward tiles that anchor the homepage between the hero and
 * the new-arrivals grid. Each tile links to a SPECIFIC PRODUCT (not a
 * category) — they're editorial features, not navigation.
 *
 * The "parallax" feel is achieved with a slow CSS scale transform on
 * the inner <img>: at rest the photo is scaled 1.08; on hover it
 * eases back to 1.0 so the image "recedes" — a soft depth cue that
 * mimics parallax movement without page-scroll coupling. A dark
 * bottom gradient keeps the title legible on any photo, and the
 * rose-gold eyebrow grounds it in the brand palette.
 */
.fc-feature-tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--fc-radius);
    text-decoration: none;
    color: var(--fc-paper);
    background: var(--fc-wine-deep);
    isolation: isolate;
}
.fc-feature-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
    z-index: 0;
}
.fc-feature-tile::after {
    /* Dark bottom scrim — title overlay area. */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 5, 8, 0) 35%,
        rgba(10, 5, 8, 0.35) 65%,
        rgba(10, 5, 8, 0.85) 100%);
    z-index: 1;
    transition: background 400ms ease;
}
.fc-feature-tile:hover img {
    transform: scale(1.0);
}
.fc-feature-tile:hover::after {
    background: linear-gradient(180deg,
        rgba(10, 5, 8, 0) 20%,
        rgba(10, 5, 8, 0.5) 55%,
        rgba(10, 5, 8, 0.9) 100%);
}
.fc-feature-tile:hover {
    color: var(--fc-paper);
    text-decoration: none;
}
.fc-feature-tile .fc-feature-meta {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.4rem 1.5rem;
    z-index: 2;
}
.fc-feature-tile .fc-eyebrow {
    color: var(--fc-rose-gold);
}
.fc-feature-tile h3 {
    color: var(--fc-paper);
    font-style: italic;
    font-size: 1.55rem;
    line-height: 1.15;
    margin: 0.35rem 0 0.2rem;
    max-width: 22ch;
}
.fc-feature-tile .fc-feature-cta {
    display: inline-block;
    color: var(--fc-rose-gold-soft);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 0.3rem;
    border-bottom: 1px solid transparent;
    padding-bottom: 0.15rem;
    transition: border-color 200ms ease;
}
.fc-feature-tile:hover .fc-feature-cta {
    border-bottom-color: var(--fc-rose-gold);
}

/* ---------------------------------------------------------------- */
/* Filter rail (Browse)                                             */
/* ---------------------------------------------------------------- */
/* Filter rail is now a <details> element — collapsed by default,
   opens when the customer has any active filter or clicks the
   summary. Padding tightened from 1.3rem 1.4rem to 0.7rem 1.1rem
   for the collapsed state; the form body inside expands the
   visible area when open. */
/* Browse / collection / search-results page chrome. Tightened
   per user feedback: the old layout had ~150px of "page chrome"
   (padding-top 3rem + huge italic h1 + count row + filter-rail
   summary) before the first product card. Now the section starts
   at 1.25rem padding, the header is a single grid row with the
   eyebrow stacked tight on the title, and the right-hand cluster
   (count + page-size selector) shrinks to fit. */
.fc-browse-section {
    padding-top: 1.25rem;
}
.fc-browse-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}
.fc-browse-header-titles {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    min-width: 0;
}
.fc-browse-header-titles .fc-eyebrow {
    /* No vertical-stacked block when we have room: eyebrow sits
       inline with the title, separated by a thin rose-gold rule on
       the right. On narrow viewports it wraps above the title. */
    line-height: 1;
    flex: 0 0 auto;
    padding-right: 0.85rem;
    border-right: 1px solid var(--fc-paper-rule);
}
.fc-browse-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.7rem;
    line-height: 1.1;
    margin: 0;
    min-width: 0;
}
@@media (max-width: 768px) {
    .fc-browse-header-titles {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .fc-browse-header-titles .fc-eyebrow {
        flex-basis: 100%;
        padding-right: 0;
        border-right: 0;
    }
}

.fc-filter-rail {
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    padding: 0.45rem 1.1rem;
    margin-bottom: 0.85rem;
}
.fc-filter-rail[open] {
    padding: 0.6rem 1rem 0.85rem;
}
/* Denser internals when open — labels smaller, inputs tighter,
   so even the "everything visible" state stays compact. The
   row gutter is also tighter than the default g-3. */
.fc-filter-rail[open] .row { row-gap: 0.5rem !important; }
.fc-filter-rail[open] label {
    font-size: 0.68rem;
    margin-bottom: 0.15rem;
    letter-spacing: 0.13em;
}
.fc-filter-rail[open] input,
.fc-filter-rail[open] select {
    padding: 0.3rem 0.55rem;
    font-size: 0.85rem;
}
.fc-filter-rail[open] .fc-flag-facets {
    margin-top: 0.5rem !important;
    gap: 0.6rem;
}
.fc-filter-rail[open] .fc-flag-toggle {
    font-size: 0.82rem;
}
.fc-filter-rail[open] .fc-btn {
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
}
.fc-filter-rail-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    cursor: pointer;
    list-style: none;
    padding: 0.25rem 0;
    color: var(--fc-wine-deep);
}
/* Hide the default disclosure marker; we render our own chevron
   for consistent styling across browsers. */
.fc-filter-rail-summary::-webkit-details-marker { display: none; }
.fc-filter-rail-summary::marker { content: ''; }
.fc-filter-rail-summary-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}
.fc-filter-rail-chevron {
    color: var(--fc-rose-gold);
    font-size: 1.1rem;
    transition: transform 0.18s ease;
}
.fc-filter-rail[open] .fc-filter-rail-chevron {
    transform: rotate(180deg);
}
.fc-filter-rail label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fc-ink-mute);
    margin-bottom: 0.3rem;
    display: block;
}
.fc-filter-rail input,
.fc-filter-rail select {
    border: 1px solid var(--fc-paper-rule);
    background: var(--fc-paper);
    border-radius: var(--fc-radius);
    padding: 0.45rem 0.7rem;
    color: var(--fc-ink);
    font-size: 0.92rem;
}
/* Inputs in the price/sort row fill their grid column (col-md-3 etc.),
   but select dropdowns shouldn't stretch to ~300px — "Sort by: Name"
   doesn't need a 300px target. Cap selects to a content-sized width
   so the filter rail looks tidy on wide viewports. (PBI #14516
   follow-up.) */
.fc-filter-rail input { width: 100%; }
.fc-filter-rail select {
    width: auto;
    max-width: 14rem;
}
.fc-filter-rail input:focus,
.fc-filter-rail select:focus {
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: -1px;
    border-color: transparent;
}

/* ---------------------------------------------------------------- */
/* Browse: 2-column layout (facet sidebar + results)                */
/* ---------------------------------------------------------------- */
.fc-browse-form {
    /* The whole browse experience lives inside a single GET form so
       facet checkboxes share state with search + price + paging
       without javascript ceremony. */
}
.fc-browse-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 1rem;
}
@media (min-width: 992px) {
    .fc-browse-grid:has(.fc-browse-sidebar) {
        grid-template-columns: 16rem 1fr;
    }
}
.fc-browse-sidebar {
    /* Sticky on desktop so customers don't scroll back up to toggle
       a facet after clicking through a long product list. */
    align-self: start;
}
@media (min-width: 992px) {
    .fc-browse-sidebar {
        position: sticky;
        top: 1.5rem;
    }
}

/* ---------------------------------------------------------------- */
/* Facet sidebar (Browse refine pane)                               */
/* ---------------------------------------------------------------- */
.fc-facets {
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    padding: 1.1rem 1.2rem;
    font-family: 'Inter', sans-serif;
}
.fc-facet-group + .fc-facet-group {
    border-top: 1px solid var(--fc-paper-rule);
    margin-top: 1rem;
    padding-top: 1rem;
}
.fc-facet-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--fc-ink-mute);
    margin: 0 0 0.6rem 0;
    font-weight: 600;
}
.fc-facet-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fc-facet-item label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.18rem 0;
    cursor: pointer;
    color: var(--fc-ink);
    font-size: 0.92rem;
}
.fc-facet-item input[type="checkbox"] {
    /* Make the checkbox itself feel atelier — rose-gold accent,
       slightly enlarged hit target. */
    accent-color: var(--fc-rose-gold);
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    cursor: pointer;
}
.fc-facet-label {
    flex: 1 1 auto;
}
.fc-facet-count {
    color: var(--fc-ink-mute);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.fc-facet-item-empty label {
    color: var(--fc-ink-mute);
    cursor: not-allowed;
}
.fc-facet-item-empty input[type="checkbox"] {
    cursor: not-allowed;
}

/* Search-within-facet typeahead (#14565). Renders at the top of
   groups with > 20 options. Tighter than the inputs elsewhere so
   it doesn't compete visually with the checkbox rows below. */
.fc-facet-search {
    width: 100%;
    padding: 0.4rem 0.6rem;
    margin: 0 0 0.5rem;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    background: #fff;
    font-size: 0.85rem;
}
.fc-facet-search:focus {
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: 1px;
    border-color: var(--fc-rose-gold);
}

/* Range slider for numeric facets (#14566). Renders below the
   group title for any attribute whose DataType is integer/decimal.
   Single visual track with two thumbs — built on stacked
   <input type="range"> elements pinned to the same track. */
.fc-facet-range {
    margin: 0.4rem 0 0.8rem;
}
.fc-facet-range-display {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--fc-ink-mute);
    margin-bottom: 0.25rem;
}
.fc-facet-range-track {
    position: relative;
    height: 24px;
}
.fc-facet-range-track input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    appearance: none;
    background: transparent;
    pointer-events: none;
}
.fc-facet-range-track input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--fc-wine);
    cursor: pointer;
    margin-top: -5px;
}
.fc-facet-range-track input[type="range"]::-moz-range-thumb {
    pointer-events: all;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--fc-wine);
    cursor: pointer;
    border: none;
}
.fc-facet-range-track::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 0; right: 0;
    height: 2px;
    background: var(--fc-paper-rule);
}

/* "Show more / fewer" affordance on long facet groups (#14549).
   Overflow rows are display:none by default; .fc-facet-group-expanded
   on the parent section reveals them. Server-rendered selected items
   are always above the fold (the partial sorts selected first) so
   the toggle doesn't have to deal with state. */
.fc-facet-group-collapsible .fc-facet-item-overflow {
    display: none;
}
.fc-facet-group-expanded .fc-facet-item-overflow {
    display: block;
}
.fc-facet-toggle {
    background: none;
    border: none;
    padding: 0.35rem 0;
    color: var(--fc-wine);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 0.15rem;
}
.fc-facet-toggle:hover {
    text-decoration: underline;
}

/* Per-rail "hide empty options" toggle (#14549). Sits below the
   last facet group with a hairline divider. Activating it adds
   .fc-facets-hide-empty to the rail; that class display:none's
   every disabled (zero-count) row. */
.fc-facet-rail-options {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fc-paper-rule);
}
.fc-facet-rail-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--fc-ink-mute);
}
.fc-facet-rail-option input[type="checkbox"] {
    accent-color: var(--fc-wine);
}
.fc-facets-hide-empty .fc-facet-item-empty {
    display: none;
}

/* ---------------------------------------------------------------- */
/* Flag-facet toggles (on-sale / in-stock / fits-my-items)          */
/* ---------------------------------------------------------------- */
.fc-flag-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}
.fc-flag-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    color: var(--fc-ink);
    font-size: 0.92rem;
    margin: 0;
}
.fc-flag-toggle input[type="checkbox"] {
    accent-color: var(--fc-rose-gold);
    width: 1rem;
    height: 1rem;
}

/* ---------------------------------------------------------------- */
/* Filter breadcrumb chips (Browse — active filter list)            */
/* ---------------------------------------------------------------- */
.fc-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0.5rem 0;
}
.fc-crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--fc-blush);
    color: var(--fc-wine-deep);
    border: 1px solid var(--fc-paper-rule);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 120ms ease;
}
.fc-crumb:hover {
    background: var(--fc-rose-gold);
    color: #fff;
}
.fc-crumb-x {
    font-size: 1.05rem;
    line-height: 1;
    opacity: 0.6;
}
.fc-crumb:hover .fc-crumb-x {
    opacity: 1;
}

/* ---------------------------------------------------------------- */
/* Product detail layout                                            */
/* ---------------------------------------------------------------- */
/* Gallery frame — vertical thumb rail on the left + main image on
   the right. Both columns are CAPPED to the same viewport-relative
   max-height; whichever is shorter shrinks naturally so we don't
   manufacture white space (gallery fits the actual image, rail
   scrolls internally if there are more thumbs than fit).
   align-items: flex-start so neither column stretches the other.
   Mobile collapses to a horizontal rail under the image. */
.fc-product-gallery-frame {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}
.fc-product-gallery {
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    max-height: 80vh;
}
.fc-product-gallery img {
    max-width: 100%;
    max-height: calc(80vh - 2rem);  /* viewport cap minus gallery padding */
    object-fit: contain;
    display: block;
}

/* Vertical thumb rail. Has its OWN max-height (matching the
   gallery's cap) and scrolls internally — so adding more thumbs
   scrolls the column rather than pushing the page down or
   stretching the gallery. align-items:flex-start on the frame
   means the rail's height is independent of the gallery's,
   matching the viewport cap directly. */
.fc-product-thumbs {
    flex: 0 0 84px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overflow-y: auto;
    overflow-x: hidden;
    /* Faint inner shadow at the bottom hints that more thumbs are
       below the visible area — a "fade out" cue without needing JS. */
    mask-image: linear-gradient(180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) calc(100% - 28px),
        rgba(0,0,0,0.4) 100%);
    -webkit-mask-image: linear-gradient(180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) calc(100% - 28px),
        rgba(0,0,0,0.4) 100%);
    /* Subtle scrollbar styling — wine-tinted on hover. */
    scrollbar-width: thin;
    scrollbar-color: var(--fc-rose-gold) transparent;
}
.fc-product-thumbs::-webkit-scrollbar { width: 6px; }
.fc-product-thumbs::-webkit-scrollbar-thumb {
    background: var(--fc-rose-gold);
    border-radius: 999px;
}
.fc-product-thumbs::-webkit-scrollbar-track { background: transparent; }

.fc-product-thumb {
    flex: 0 0 auto;
    aspect-ratio: 1;
    width: 100%;
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.fc-product-thumb:hover {
    border-color: var(--fc-rose-gold);
}
.fc-product-thumb.is-active {
    border-color: var(--fc-wine);
    border-width: 2px;
}
.fc-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Phone fallback — col-md-6 stacks vertically, the thumb rail to
   the LEFT of the photo gets awkward at 320px-wide. Collapse the
   layout to a horizontal scrolling row UNDER the image. */
@@media (max-width: 768px) {
    .fc-product-gallery-frame {
        flex-direction: column;
    }
    .fc-product-thumbs {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 0.5rem;
        overflow-y: hidden;
        overflow-x: auto;
        order: 2;     /* thumb row below the image */
        max-height: 92px;
        mask-image: linear-gradient(90deg,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) calc(100% - 28px),
            rgba(0,0,0,0.4) 100%);
        -webkit-mask-image: linear-gradient(90deg,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) calc(100% - 28px),
            rgba(0,0,0,0.4) 100%);
    }
    .fc-product-thumb {
        flex: 0 0 70px;
        width: 70px;
    }
}

.fc-product-title { font-size: 2.2rem; line-height: 1.1; margin: 0.5rem 0; font-style: italic; }
.fc-product-price { font-size: 1.6rem; font-weight: 500; margin: 0.6rem 0 1.3rem; color: var(--fc-noir); }
.fc-product-price-sale { color: var(--fc-wine); }
.fc-product-price-strike { color: var(--fc-ink-mute); text-decoration: line-through; font-size: 1.1rem; margin-left: 0.6rem; }
.fc-product-desc { font-size: 1.02rem; line-height: 1.7; color: var(--fc-ink); margin-bottom: 1.5rem; }

.fc-option-group { margin-bottom: 1.1rem; }
.fc-option-group label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fc-ink-mute);
    margin-bottom: 0.4rem;
    display: block;
}
.fc-option-group select {
    border: 1px solid var(--fc-paper-rule);
    background: #fff;
    border-radius: var(--fc-radius);
    padding: 0.55rem 0.8rem;
    font-size: 0.95rem;
    width: 100%;
    max-width: 18rem;
}

/* ---------------------------------------------------------------- */
/* Cart + checkout                                                  */
/* ---------------------------------------------------------------- */
.fc-cart-line {
    display: flex;
    gap: 1.1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--fc-paper-rule);
    align-items: center;
}
.fc-cart-thumb {
    width: 80px;
    height: 100px;
    background: var(--fc-blush);
    border-radius: var(--fc-radius);
    overflow: hidden;
    flex-shrink: 0;
}
.fc-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }

.fc-summary {
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    padding: 1.4rem 1.5rem;
    position: sticky;
    top: 5.5rem;
}
.fc-summary h4 {
    font-style: italic;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--fc-paper-rule);
}
.fc-summary-line {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.95rem;
}
.fc-summary-total {
    border-top: 1px solid var(--fc-paper-rule);
    margin-top: 0.6rem;
    padding-top: 0.7rem !important;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--fc-noir);
}

/* ---------------------------------------------------------------- */
/* Auth + Account                                                   */
/* ---------------------------------------------------------------- */
.fc-paper-card {
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    padding: 1.8rem 2rem;
}
.fc-paper-card h1,
.fc-paper-card h2 {
    font-style: italic;
}
.fc-paper-card label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fc-ink-mute);
    margin-bottom: 0.35rem;
    display: block;
}
.fc-paper-card input[type="text"],
.fc-paper-card input[type="email"],
.fc-paper-card input[type="password"],
.fc-paper-card input[type="tel"],
.fc-paper-card input[type="number"],
.fc-paper-card select,
.fc-paper-card textarea {
    border: 1px solid var(--fc-paper-rule);
    background: var(--fc-paper);
    border-radius: var(--fc-radius);
    padding: 0.55rem 0.8rem;
    font-size: 0.95rem;
    width: 100%;
    color: var(--fc-ink);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.fc-paper-card input:focus,
.fc-paper-card select:focus,
.fc-paper-card textarea:focus {
    outline: none;
    border-color: var(--fc-rose-gold);
    box-shadow: 0 0 0 2px rgba(194, 168, 120, 0.25);
}

/* Account-area side nav — sticky link list down the left of each
   /Account/ page so the customer always sees their orientation. */
.fc-account-shell {
    padding-top: 3rem;
}
.fc-account-nav {
    position: sticky;
    top: 5.5rem;
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    padding: 1rem 0;
    overflow: hidden;
}
.fc-account-nav a {
    display: block;
    padding: 0.55rem 1.2rem;
    color: var(--fc-ink);
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    text-decoration: none;
}
.fc-account-nav a:hover {
    background: var(--fc-paper);
    color: var(--fc-wine);
    text-decoration: none;
}
.fc-account-nav a.active {
    background: var(--fc-paper);
    color: var(--fc-wine);
    border-left-color: var(--fc-rose-gold);
    font-weight: 500;
}
.fc-account-nav form button {
    background: none;
    border: 0;
    color: var(--fc-wine);
    padding: 0.55rem 1.2rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
}
.fc-account-nav form button:hover {
    background: rgba(111, 29, 42, 0.05);
}

/* Inline data tables on account pages — a softer alternative to
   default Bootstrap .table that fits the warm paper background. */
.fc-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.fc-data-table th {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: var(--fc-ink-mute);
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--fc-paper-rule);
    font-weight: 600;
}
.fc-data-table td {
    padding: 0.95rem 0.8rem;
    border-bottom: 1px solid var(--fc-paper-rule);
    vertical-align: middle;
}
.fc-data-table tr:last-child td { border-bottom: 0; }

/* Status pills used in order tables. */
.fc-pill {
    display: inline-block;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    background: var(--fc-paper);
    color: var(--fc-ink-mute);
}
.fc-pill-ok { background: rgba(63, 122, 78, 0.14); color: #2e5b3a; }
.fc-pill-warn { background: rgba(194, 168, 120, 0.22); color: #6e5524; }
.fc-pill-bad { background: rgba(180, 60, 60, 0.14); color: #8a2c2c; }

/* ---------------------------------------------------------------- */
/* Footer                                                           */
/* ---------------------------------------------------------------- */
.fc-footer {
    background: var(--fc-noir);
    color: var(--fc-rose-gold-soft);
    padding: 3.5rem 0 1.5rem;
    margin-top: 5rem;
}
.fc-footer h5 {
    color: var(--fc-rose-gold);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}
.fc-footer a {
    color: rgba(250, 245, 238, 0.7);
    display: block;
    padding: 0.18rem 0;
    font-size: 0.92rem;
}
.fc-footer a:hover {
    color: var(--fc-rose-gold);
    text-decoration: none;
}
.fc-footer .fc-footer-brand {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--fc-rose-gold);
    margin-bottom: 0.5rem;
}
.fc-footer-bottom {
    border-top: 1px solid rgba(194, 168, 120, 0.2);
    margin-top: 2rem;
    padding-top: 1.3rem;
    font-size: 0.8rem;
    color: rgba(250, 245, 238, 0.4);
    text-align: center;
}
.fc-footer-disclaimer {
    /* Fine-print disclaimer under the copyright line — the storefront
       is a demo for the engine, not a real shop. Same colour family
       as the copyright but italicised so it reads as a footnote,
       and a hairline rose-gold ✦ separator pulls the eye gently. */
    margin-top: 0.85rem;
    padding: 0 1rem;
    font-size: 0.72rem;
    line-height: 1.55;
    color: rgba(250, 245, 238, 0.32);
    text-align: center;
    letter-spacing: 0.03em;
}
.fc-footer-disclaimer span[aria-hidden] {
    color: var(--fc-rose-gold);
    margin-right: 0.4rem;
    opacity: 0.6;
}
.fc-footer-disclaimer em {
    font-style: italic;
    color: rgba(250, 245, 238, 0.45);
}

/*
 * Accessibility: skip-to-content link.
 * Visually hidden until focused; floats over the nav on tab focus.
 * WCAG 2.1 SC 2.4.1 (Bypass Blocks) — lets keyboard / screen-reader
 * users jump past the masthead straight to the page body.
 */
.fc-skip-link {
    position: absolute;
    top: -60px;
    left: 1rem;
    background: var(--fc-wine);
    color: #fff;
    padding: 0.7rem 1.2rem;
    border-radius: var(--fc-radius);
    z-index: 2000;
    text-decoration: none;
    font-weight: 500;
    transition: top 0.15s ease;
}
.fc-skip-link:focus,
.fc-skip-link:focus-visible {
    top: 1rem;
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: 2px;
}

/*
 * Visible focus ring for keyboard users on every interactive element.
 * Uses :focus-visible so mouse clicks don't paint a ring, but tab
 * keys do — keeps the design quiet for sighted-mouse users while
 * meeting WCAG 2.1 SC 2.4.7 (Focus Visible) for keyboard nav.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: 2px;
}
/* The <main> tab-stop target should never paint its own ring — the
   skip-link's job is "scroll the user to here", not "highlight the
   container". */
main:focus-visible {
    outline: none;
}

/*
 * Variant chip swatches — colour / material option groups on the
 * Product page render as clickable image chips instead of a text
 * dropdown when any option in the group has an OptionIconUrl set.
 * Square chip, image inset, brand-tinted border on the selected
 * state. Non-icon options inside a swatch group fall back to a
 * compact text chip via .fc-swatch-text.
 */
.fc-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.4rem;
}
.fc-swatch {
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 1px solid var(--fc-paper-rule);
    background: #fff;
    border-radius: var(--fc-radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    position: relative;
}
.fc-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fc-swatch:hover {
    border-color: var(--fc-rose-gold);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(111, 29, 42, 0.08);
}
.fc-swatch-selected {
    border-color: var(--fc-wine);
    border-width: 2px;
    box-shadow: 0 0 0 2px var(--fc-blush);
}
.fc-swatch-selected::after {
    /* Small wine dot bottom-right marks the chosen chip explicitly,
       redundantly with the border ring, for accessibility / glance
       scannability. */
    content: '';
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--fc-wine);
}
.fc-swatch-text {
    width: auto;
    min-width: 3.25rem;
    padding: 0 0.75rem;
    font-size: 0.85rem;
    color: var(--fc-ink);
    background: var(--fc-paper);
}
.fc-swatch-text .fc-swatch-label {
    line-height: 3.25rem;
    white-space: nowrap;
}

/*
 * Promo strip — thin announcement bar above the storefront nav.
 * Driven by the top active Banner row (site-wide, in date range).
 * Wine background + rose-gold text gives a couture-house feel
 * rather than a generic ecom banner; clickable variant shows an
 * underline on hover.
 */
.fc-promo-strip {
    display: block;
    background: var(--fc-wine);
    color: var(--fc-rose-gold-soft);
    text-align: center;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
}
.fc-promo-strip strong {
    color: #fff;
    font-weight: 600;
    margin-right: 0.4rem;
}
a.fc-promo-strip:hover {
    background: var(--fc-wine-dark);
    text-decoration: underline;
    color: var(--fc-rose-gold-soft);
}
a.fc-promo-strip:focus-visible {
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: -2px;
}

/*
 * FAQ accordion — native <details>/<summary>, brand-styled. No JS
 * dependency; keyboard expand/collapse + screen-reader announcement
 * come from the browser primitive.
 */
.fc-faq-list {
    border-top: 1px solid var(--fc-paper-rule);
}
.fc-faq-item {
    border-bottom: 1px solid var(--fc-paper-rule);
    padding: 0.2rem 0;
}
.fc-faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 2rem 1.1rem 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--fc-wine-deep);
    position: relative;
    transition: color 0.15s ease;
}
.fc-faq-item > summary::-webkit-details-marker {
    display: none;
}
.fc-faq-item > summary::after {
    content: '+';
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--fc-rose-gold);
    transition: transform 0.2s ease;
    line-height: 1;
}
.fc-faq-item[open] > summary::after {
    content: '−';
    color: var(--fc-wine);
}
.fc-faq-item > summary:hover {
    color: var(--fc-wine);
}
.fc-faq-item > summary:focus-visible {
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: 4px;
    border-radius: 2px;
}
.fc-faq-answer {
    padding: 0 2rem 1.4rem 0;
    color: var(--fc-ink);
    font-size: 0.95rem;
    line-height: 1.7;
}

/*
 * Inline product video player. Matches the image's natural box so
 * swapping between image and video doesn't shift the layout.
 */
#fcMainVideo {
    width: 100%;
    display: block;
    background: #000;
    border-radius: var(--fc-radius);
}

/*
 * Video gallery thumb — same square shape as image thumbs, with a
 * subtle play-badge overlay so the customer knows it's clickable to
 * a different media type. The badge is decorative; the button has
 * an aria-label with the video description for screen readers.
 */
.fc-product-thumb-video {
    position: relative;
}
.fc-product-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(10, 5, 8, 0.15), rgba(10, 5, 8, 0.45));
    color: var(--fc-rose-gold-soft);
    font-size: 1.2rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: background 0.15s ease;
    pointer-events: none;
}
.fc-product-thumb-video:hover .fc-product-thumb-play {
    background: linear-gradient(135deg, rgba(111, 29, 42, 0.35), rgba(10, 5, 8, 0.5));
    color: #fff;
}

/*
 * Star rating bar — Unicode glyphs in two colours so we don't need
 * an SVG/image asset for the v0.1 baseline. Used on the PDP next
 * to the title, in the reviews section per-card, and in any future
 * product-card surface that wants to surface ratings.
 */
.fc-stars {
    letter-spacing: 0.05em;
    font-size: 1rem;
    line-height: 1;
    user-select: none;
}
.fc-star-filled { color: var(--fc-wine); }
.fc-star-empty  { color: var(--fc-paper-rule); }

.fc-product-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.25rem 0 0.9rem 0;
    color: var(--fc-ink-mute);
    font-size: 0.85rem;
}
.fc-product-stars .fc-stars-text a {
    color: var(--fc-wine);
    text-decoration: none;
    border-bottom: 1px dotted var(--fc-rose-gold);
}
.fc-product-stars .fc-stars-text a:hover {
    color: var(--fc-wine-deep);
}

/*
 * Review card — one per snippet in the PDP "What the house is
 * saying" row. Compact wine-on-paper styling, three across on
 * desktop via the col-md-4 grid.
 */
.fc-review-card {
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    padding: 1.2rem 1.3rem;
    height: 100%;
}
.fc-review-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--fc-wine-deep);
    margin: 0.6rem 0 0.5rem 0;
}
.fc-review-body {
    color: var(--fc-ink);
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0;
}

/*
 * Mini-cart drawer — right-side slide-out. Backdrop fades; drawer
 * translates from off-screen-right to fully visible. Animation
 * uses CSS transitions; the JS just toggles classes.
 */
.fc-minicart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 5, 8, 0.55);
    z-index: 1900;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}
.fc-minicart-backdrop[hidden] { display: none; }
.fc-minicart-backdrop-open { opacity: 1; }

.fc-minicart {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(420px, 92vw);
    background: var(--fc-paper);
    box-shadow: -12px 0 32px rgba(10, 5, 8, 0.25);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease;
}
.fc-minicart[hidden] { display: none; }
.fc-minicart-open { transform: translateX(0); }

.fc-minicart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 1.4rem 1.5rem 1rem;
    border-bottom: 1px solid var(--fc-paper-rule);
}
.fc-minicart-head h2 {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--fc-wine-deep);
}
.fc-minicart-close {
    background: none;
    border: 0;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--fc-rose-gold);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
}
.fc-minicart-close:hover { color: var(--fc-wine); }
.fc-minicart-close:focus-visible {
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: 2px;
}

.fc-minicart-empty {
    padding: 2rem 1.5rem;
    color: var(--fc-ink-mute);
    font-size: 0.95rem;
}
.fc-minicart-empty a {
    color: var(--fc-wine);
    text-decoration: none;
    border-bottom: 1px dotted var(--fc-rose-gold);
}

.fc-minicart-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}
.fc-minicart-line {
    display: flex;
    gap: 0.9rem;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--fc-paper-rule);
}
.fc-minicart-thumb {
    width: 4.5rem;
    height: 5.5rem;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fc-minicart-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.fc-minicart-thumb-placeholder {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    color: var(--fc-wine);
    opacity: 0.5;
    font-size: 0.85rem;
}
.fc-minicart-line-body {
    flex: 1;
    min-width: 0;
}
.fc-minicart-line-name {
    color: var(--fc-ink);
    text-decoration: none;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.3rem;
    line-height: 1.3;
}
.fc-minicart-line-name:hover { color: var(--fc-wine); }
.fc-minicart-line-meta {
    color: var(--fc-ink-mute);
    font-size: 0.85rem;
}

.fc-minicart-foot {
    padding: 1.2rem 1.5rem 1.5rem;
    border-top: 1px solid var(--fc-paper-rule);
    background: rgba(232, 197, 190, 0.18);
}
.fc-minicart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.9rem;
    font-size: 0.95rem;
    color: var(--fc-ink-mute);
}
.fc-minicart-subtotal strong {
    color: var(--fc-wine-deep);
    font-size: 1.15rem;
    font-weight: 600;
}
.fc-minicart-actions {
    display: flex;
    gap: 0.6rem;
}
.fc-minicart-actions .fc-btn { flex: 1; text-align: center; }

/*
 * Cart coupon row: two states behind the same maxwidth container.
 * Apply state — input + button side-by-side.
 * Applied state — pill with code + discount + remove×.
 */
.fc-coupon-row { margin-top: 1.5rem; }
.fc-coupon-form {
    display: flex;
    gap: 0.5rem;
}
.fc-coupon-input {
    flex: 1;
    border: 1px solid var(--fc-paper-rule);
    background: #fff;
    border-radius: var(--fc-radius);
    padding: 0.55rem 0.8rem;
    font-size: 0.95rem;
}
.fc-coupon-input:focus-visible {
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: 2px;
    border-color: var(--fc-rose-gold);
}

.fc-coupon-applied {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--fc-wine);
    color: #fff;
    padding: 0.55rem 0.75rem 0.55rem 0.9rem;
    border-radius: 999px;
    font-size: 0.88rem;
    border: 0;
    margin: 0;
}
.fc-coupon-applied-icon { color: var(--fc-rose-gold-soft); }
.fc-coupon-applied-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}
.fc-coupon-applied code {
    background: rgba(255, 255, 255, 0.18);
    padding: 0.1rem 0.45rem;
    border-radius: 0.3rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--fc-rose-gold-soft);
}
.fc-coupon-applied strong {
    color: #fff;
    font-weight: 600;
}
.fc-coupon-applied-amount {
    color: var(--fc-rose-gold-soft);
    font-weight: 500;
}
.fc-coupon-remove {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 0.25rem;
}
.fc-coupon-remove:hover { background: rgba(255, 255, 255, 0.25); }
.fc-coupon-remove:focus-visible {
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: 2px;
}

/*
 * Order confirmation receipt block — line-by-line summary of what
 * the customer paid for, with thumbs + per-line totals + the
 * grand-total breakdown + ship-to address. Sits below the
 * thank-you card.
 */
.fc-receipt {
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    overflow: hidden;
}
.fc-receipt-head {
    padding: 1.5rem 1.8rem 0.8rem;
    border-bottom: 1px solid var(--fc-paper-rule);
}
.fc-receipt-head h2 {
    margin: 0.2rem 0 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    color: var(--fc-wine-deep);
    font-size: 1.5rem;
}
.fc-receipt-meta {
    color: var(--fc-ink-mute);
    font-size: 0.85rem;
    margin-top: 0.3rem;
}
.fc-receipt-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fc-receipt-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.8rem;
    border-bottom: 1px solid var(--fc-paper-rule);
}
.fc-receipt-line:last-child { border-bottom: 0; }
.fc-receipt-thumb {
    width: 4.5rem;
    height: 5.5rem;
    flex: 0 0 auto;
    background: var(--fc-paper);
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fc-receipt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fc-receipt-line-body { flex: 1; min-width: 0; }
.fc-receipt-line-name {
    display: block;
    color: var(--fc-ink);
    text-decoration: none;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}
.fc-receipt-line-name:hover { color: var(--fc-wine); }
.fc-receipt-line-meta {
    color: var(--fc-ink-mute);
    font-size: 0.85rem;
}
.fc-receipt-line-total {
    color: var(--fc-wine-deep);
    font-weight: 600;
    font-size: 1.05rem;
    flex: 0 0 auto;
}
.fc-receipt-totals {
    padding: 1.2rem 1.8rem 0.5rem;
    border-top: 1px solid var(--fc-paper-rule);
    background: rgba(232, 197, 190, 0.18);
}
.fc-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.65rem;
    color: var(--fc-ink-mute);
    font-size: 0.95rem;
}
.fc-receipt-total {
    border-top: 1px solid var(--fc-paper-rule);
    margin-top: 0.5rem;
    padding-top: 0.7rem;
    color: var(--fc-wine-deep);
    font-size: 1.15rem;
    font-weight: 600;
}
.fc-receipt-shipto {
    padding: 1rem 1.8rem 1.4rem;
    color: var(--fc-ink);
}
.fc-receipt-shipto address {
    margin: 0.4rem 0 0;
    font-style: normal;
    line-height: 1.6;
    color: var(--fc-ink);
}

/* ---------------------------------------------------------------- */
/* Quick-add from product cards (Browse grid)                       */
/* ---------------------------------------------------------------- */
/* Small pill button that sits under the price on each card. Form
   wraps it so the POST handler can read productId + returnUrl; the
   form itself has no chrome so the button alone is the visual. */
.fc-card-quickadd-form {
    margin: 0.65rem 0 0;
}
.fc-card-quickadd {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--fc-wine);
    background: transparent;
    color: var(--fc-wine);
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.fc-card-quickadd:hover {
    background: var(--fc-wine);
    color: #fff;
}
.fc-card-quickadd:focus-visible {
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: 2px;
}
.fc-card-quickadd-icon {
    font-size: 0.95rem;
    line-height: 1;
}
.fc-card-quickadd-label {
    line-height: 1;
}

/* Sticky page-size selector — sits next to the result count on
   /Storefront/Browse and /Storefront/Search. Same preference cookie
   drives both surfaces, so picking 48 on the corsets page keeps 48
   on search and on tomorrow's visit (PBI #14519). The form is its
   own micro-form so toggling page size doesn't get entangled with
   the main filter submission. */
.fc-page-size-form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}
.fc-page-size-select {
    padding: 0.2rem 1.6rem 0.2rem 0.5rem;
    border: 1px solid var(--fc-rose-gold-soft, #c89e8f);
    border-radius: var(--fc-radius, 4px);
    background-color: transparent;
    color: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
.fc-page-size-select:focus-visible {
    outline: 2px solid var(--fc-rose-gold, #b58471);
    outline-offset: 1px;
}

/* TempData toast surfaced after the quick-add POST round-trips. Sits
   at the top of the Browse section; one wine "added" variant and
   one paper "error" variant. Spec'd as a pill so it sits comfortably
   above the filter rail without dominating. */
.fc-quickadd-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: var(--fc-radius);
    margin-bottom: 1.2rem;
    font-size: 0.92rem;
}
.fc-quickadd-toast-ok {
    background: var(--fc-wine);
    color: #fff;
}
.fc-quickadd-toast-ok .fc-quickadd-toast-icon {
    color: var(--fc-rose-gold-soft);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1;
}
.fc-quickadd-toast-text { flex: 1; }
.fc-quickadd-toast-link {
    color: #fff;
    text-decoration: underline;
    font-size: 0.88rem;
}
.fc-quickadd-toast-link:hover { color: var(--fc-rose-gold-soft); }
.fc-quickadd-toast-err {
    background: var(--fc-blush);
    color: var(--fc-wine-deep);
    border: 1px solid rgba(232, 197, 190, 0.7);
}
.fc-quickadd-toast-err .fc-quickadd-toast-icon {
    background: var(--fc-wine);
    color: #fff;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------- */
/* Skills & tokens (account-area PAT page)                          */
/* ---------------------------------------------------------------- */
/* Single-line reveal of a freshly-minted token — large, monospace,
   read-only, click-to-select-all. Bordered in rose gold so the
   visual gravity matches the "this is shown once, copy it now"
   message above it. */
.fc-token-reveal {
    width: 100%;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.95rem;
    background: #fff;
    border: 1px solid var(--fc-rose-gold);
    border-radius: var(--fc-radius);
    padding: 0.6rem 0.8rem;
    color: var(--fc-wine-deep);
    resize: none;
    cursor: text;
}
.fc-token-reveal:focus {
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: 2px;
}

/* Code block — same dark wash the receipt totals use, with mono
   font + scroll on overflow for wide curl one-liners. */
.fc-codeblock {
    background: rgba(20, 14, 6, 0.06);
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    padding: 0.75rem 1rem;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}
.fc-codeblock code {
    background: transparent;
    color: var(--fc-wine-deep);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    white-space: pre;
    padding: 0;
}

/* Starter prompt card — code block + click-to-copy button laid out
   inline so the prompt and its action live together. The text wraps
   (instead of overflowing) because these are sentences, not curl
   one-liners; pre-wrap keeps the readability without horizontal
   scroll. (PBI #14515 — Skills & tokens starter prompts.) */
.fc-starter-prompt {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.fc-starter-prompt-text {
    flex: 1 1 auto;
    margin: 0;
}
.fc-starter-prompt-text code {
    white-space: pre-wrap;
    word-break: break-word;
}
.fc-starter-prompt-copy {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: 0.8rem;
    padding: 0.35rem 0.8rem;
}
.fc-starter-prompt-copy-done {
    background: var(--fc-rose-gold-soft);
    color: var(--fc-wine-deep);
    border-color: var(--fc-rose-gold);
}

/* ---------------------------------------------------------------- */
/* Product lightbox — full-bleed dark overlay with a vertical thumb */
/* strip on the right, prev/next chevrons, and a slideshow toggle.  */
/* ---------------------------------------------------------------- */
.fc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 5, 8, 0.92);
    z-index: 1000;
    display: none;
    grid-template-columns: 1fr 11rem;
    gap: 1.5rem;
    padding: 2rem 2rem 2rem 4rem;
    /* Center both columns vertically so the thumb strip doesn't
       stretch the full viewport height — its sized to match the
       rendered image height via JS (the natural aspect-ratio
       crop of a portrait product photo at viewport height leaves
       empty space top + bottom; strip should match the photo, not
       the empty space). */
    align-items: center;
}
.fc-lightbox.is-open { display: grid; }

@@media (max-width: 768px) {
    .fc-lightbox {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        padding: 1rem;
    }
}

.fc-lightbox-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
}
.fc-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    background: #fff;
    object-fit: contain;
}

/* Prev/Next chevrons sit just inside the stage area, vertically
   centered. Big tap targets, faint until hovered so they don't
   compete with the photo. */
.fc-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10, 5, 8, 0.55);
    color: var(--fc-rose-gold-soft, #f0d4cc);
    border: 1px solid rgba(232, 197, 190, 0.3);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.fc-lightbox-nav:hover {
    background: var(--fc-wine);
    color: #fff;
}
.fc-lightbox-prev { left: 0.5rem; }
.fc-lightbox-next { right: 0.5rem; }

.fc-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: rgba(10, 5, 8, 0.55);
    border: 1px solid rgba(232, 197, 190, 0.3);
    color: var(--fc-rose-gold, #d6a89c);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    z-index: 1001;
}
.fc-lightbox-close:hover { background: var(--fc-wine); color: #fff; }

/* Vertical thumb strip on the right of the stage. Height is set
   inline by JS to match the rendered image's clientHeight after it
   loads (and on resize); the CSS just defines the visual shape +
   overflow. Toolbar pins to the top, thumb list takes the rest
   with its own scroll. */
.fc-lightbox-strip {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
    color: #fff;
    min-height: 0;       /* allow children to compute against 0 base */
    align-self: center;
}
.fc-lightbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.fc-lightbox-slideshow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(232, 197, 190, 0.3);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    cursor: pointer;
}
.fc-lightbox-slideshow:hover { background: rgba(232, 197, 190, 0.2); }
.fc-lightbox-slideshow[aria-pressed="true"] {
    background: var(--fc-wine);
    border-color: var(--fc-wine);
}
.fc-lightbox-counter {
    font-size: 0.85rem;
    color: var(--fc-rose-gold-soft, #f0d4cc);
    font-variant-numeric: tabular-nums;
}

.fc-lightbox-thumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    flex-grow: 1;
}
.fc-lightbox-thumb button {
    background: transparent;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1;
    display: block;
    border-radius: 4px;
    overflow: hidden;
}
.fc-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.fc-lightbox-thumb button:hover img,
.fc-lightbox-thumb.is-active img {
    opacity: 1;
}
.fc-lightbox-thumb.is-active button {
    border-color: var(--fc-rose-gold, #d6a89c);
}

/* ---------------------------------------------------------------- */
/* Header search autocomplete + search results page                 */
/* ---------------------------------------------------------------- */

/* Suggest dropdown — anchored under the header search input. Search
   is the customer's primary jump-off so the popup is widened beyond
   the input itself: the input is ~22rem (narrow enough not to crowd
   the nav), but the dropdown extends past it so product names can
   render in full. Right-aligned to the input so it grows leftward
   on wider viewports without overflowing the page edge.
   (PBI #14516 follow-up — was ellipsis-truncating product names.) */
.fc-nav-search { position: relative; }
.fc-nav-search-suggest {
    position: absolute;
    top: calc(100% + 0.4rem);
    /* Anchor to the right edge of the input; let it grow leftward
       up to ~32rem. The input is the right-most element in the row
       on wide viewports so this stays inside the page boundary. */
    right: 0;
    min-width: 100%;
    width: max-content;
    max-width: 32rem;
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    box-shadow: 0 10px 28px rgba(44, 8, 16, 0.18);
    z-index: 200;
    max-height: 28rem;
    overflow-y: auto;
}
.fc-nav-search-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.8rem;
    color: var(--fc-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--fc-paper-rule);
}
.fc-nav-search-row:last-child { border-bottom: 0; }
.fc-nav-search-row:hover {
    background: var(--fc-blush);
    color: var(--fc-wine-deep);
    text-decoration: none;
}
.fc-nav-search-thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--fc-paper-soft, #faf3ef);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fc-nav-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fc-nav-search-thumb-placeholder {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 0.75rem;
    color: var(--fc-rose-gold);
}
.fc-nav-search-name {
    font-size: 0.9rem;
    flex: 1;
    min-width: 0;
    /* No truncation — the dropdown widens to fit names instead.
       Long names wrap to a second line; tighter line-height keeps
       multi-line rows compact. (PBI #14516 follow-up — search is
       the key jump-off, an ellipsised result is a useless result.) */
    line-height: 1.25;
    word-break: break-word;
}
.fc-nav-search-empty {
    padding: 0.9rem 1rem;
    color: var(--fc-ink-mute);
    font-style: italic;
    font-size: 0.9rem;
}

/* Inline "refine search" form on /Storefront/Search. Larger
   input + wine pill submit. Lays out as a compact two-cell row. */
.fc-search-refine {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 44rem;
}
.fc-search-refine input[type="search"] {
    flex: 1 1 auto;
    border: 1px solid var(--fc-paper-rule);
    background: #fff;
    border-radius: var(--fc-radius);
    padding: 0.7rem 1rem;
    font-size: 1rem;
    color: var(--fc-ink);
}
.fc-search-refine input[type="search"]:focus {
    outline: 2px solid var(--fc-rose-gold);
    outline-offset: 2px;
    border-color: var(--fc-rose-gold);
}

/* Inline instant-search suggest panel on /Storefront/Search. Same
   row template as the header version (.fc-nav-search-row), but the
   panel sits flat in the page flow rather than absolute-positioned —
   the refine form has more room to breathe than the header. */
.fc-search-refine-suggest {
    max-width: 44rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    box-shadow: 0 6px 18px rgba(46, 22, 36, 0.08);
    overflow: hidden;
}
.fc-search-refine-suggest[hidden] { display: none; }
.fc-search-refine-suggest .fc-nav-search-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.85rem;
    color: var(--fc-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--fc-paper-rule);
}
.fc-search-refine-suggest .fc-nav-search-row:last-child { border-bottom: none; }
.fc-search-refine-suggest .fc-nav-search-row:hover {
    background: var(--fc-blush);
    text-decoration: none;
}

/* Narrow-by chip strip — appears above the search-result grid when
   we have enough hits to bucket. Chips deep-link to /Browse with the
   current query AND the chosen categoryId so the full facet sidebar
   carries the customer the rest of the way. */
.fc-search-narrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    background: var(--fc-blush);
    border-radius: var(--fc-radius);
    border: 1px dashed rgba(180, 95, 95, 0.25);
}
.fc-search-narrow-label {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    color: var(--fc-wine-deep);
    margin-right: 0.4rem;
    font-size: 0.95rem;
}
.fc-search-narrow-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: 999px;
    color: var(--fc-ink);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.fc-search-narrow-chip:hover {
    border-color: var(--fc-wine);
    background: var(--fc-paper);
    text-decoration: none;
}
.fc-search-narrow-count {
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
    padding: 0 0.4em;
    background: var(--fc-wine);
    color: var(--fc-paper);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.5;
}
.fc-search-narrow-more {
    margin-left: auto;
    color: var(--fc-wine-deep);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}
.fc-search-narrow-more:hover { text-decoration: underline; }

/* Result card on /Storefront/Search — icon preview + name. Mirrors
   the Browse card shape but tighter; this surface is dedicated to
   scan-and-click. */
.fc-search-card {
    display: block;
    background: #fff;
    border: 1px solid var(--fc-paper-rule);
    border-radius: var(--fc-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    height: 100%;
}
.fc-search-card:hover {
    transform: translateY(-2px);
    border-color: var(--fc-rose-gold);
    box-shadow: 0 6px 18px rgba(44, 8, 16, 0.12);
    text-decoration: none;
    color: inherit;
}
.fc-search-card-thumb {
    aspect-ratio: 3 / 4;
    background: var(--fc-paper-soft, #faf3ef);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.fc-search-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fc-search-card-placeholder {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 2rem;
    color: var(--fc-rose-gold);
    opacity: 0.6;
}
.fc-search-card-body {
    padding: 0.7rem 0.85rem 0.9rem;
}
.fc-search-card-name {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--fc-ink);
}

/* Cookie consent banner (PBI #14577). Pinned to bottom-of-viewport
   on first visit until the visitor records a decision. */
.wcy-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080; /* above mini-cart backdrop (1050) */
    background: rgba(28, 18, 22, 0.96);
    color: #f6efe9;
    border-top: 1px solid rgba(217, 178, 152, 0.35);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.wcy-consent-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.wcy-consent-copy {
    flex: 1 1 320px;
    font-size: 0.9rem;
    line-height: 1.45;
}
.wcy-consent-copy strong {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    color: var(--fc-rose-gold, #c9a07c);
    margin-right: 0.4rem;
}
.wcy-consent-copy a {
    color: var(--fc-rose-gold, #c9a07c);
    text-decoration: underline;
    margin-left: 0.25rem;
}
.wcy-consent-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.wcy-consent-detail {
    border-top: 1px solid rgba(217, 178, 152, 0.2);
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}
.wcy-consent-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: start;
    font-size: 0.85rem;
    line-height: 1.4;
}
.wcy-consent-row input[type=checkbox] {
    margin-top: 0.2rem;
}
.wcy-consent-row strong {
    display: block;
    color: var(--fc-rose-gold, #c9a07c);
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.wcy-consent-detail-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

/* PBI #14566 — additional dual-thumb price-range slider polish.
   Builds on the .fc-facet-range / .fc-facet-range-track scaffolding
   from #14565. The fill div paints between the two thumbs; the
   readout shows the current numeric values; the fallback inputs
   render quietly below for JS-off / keyboard users. */
.fc-facet-range-readout {
    margin-left: 0.4rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--fc-wine, #6f3950);
    font-variant-numeric: tabular-nums;
}
.fc-facet-range-fill {
    position: absolute;
    top: 12px;
    height: 2px;
    background: var(--fc-rose-gold, #c9a07c);
    pointer-events: none;
    z-index: 1;
}
.fc-facet-range-thumb {
    z-index: 2;
}
.fc-facet-range-fallback {
    /* Visually secondary — the slider is the primary affordance. */
    opacity: 0.65;
    font-size: 0.85rem;
}
.fc-facet-range-fallback:focus-within {
    opacity: 1;
}

/* ----------------------------------------------------------------
 * Collection pages (PBI #14521). Themed editorial landings at
 * /collections/{slug}. Composed of:
 *   1. .fc-collection-hero — full-bleed parallax hero with title +
 *      lede stacked over a darkening gradient. Same aesthetic as the
 *      home hero but slimmer so the body lands closer to the fold.
 *   2. .fc-collection-body — admin-authored container that wraps
 *      any number of .fc-collection-band-* sections (image strip,
 *      text block, horizontal strip).
 *   3. .fc-collection-picks — curated product card grid with the
 *      merchandiser's blurb under each.
 * ---------------------------------------------------------------- */
.fc-collection-hero {
    background-size: cover;
    /* Top-anchor: image's top edge sits flush with the band's top edge.
       Previously center 30% (split-the-difference); switched at op
       request (#14872) so the photo's top reads first. */
    background-position: center top;
    background-attachment: fixed;
    min-height: 56vh;
    color: var(--fc-paper, #f6efe9);
    display: flex;
    align-items: flex-end;
    padding: 4rem 0 3.5rem;
}
.fc-collection-hero-inner {
    max-width: 44rem;
}
.fc-collection-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(2.4rem, 5vw, 4rem);
    margin: 0.4rem 0 0.8rem;
    color: #fffdfb;
    text-shadow: 0 2px 18px rgba(0,0,0,0.25);
}
.fc-collection-hero .fc-eyebrow {
    color: var(--fc-rose-gold, #c9a07c);
    letter-spacing: 0.18em;
}
.fc-collection-hero p.lede {
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: 36rem;
    color: rgba(255,253,251,0.92);
}
@media (prefers-reduced-motion: reduce) {
    .fc-collection-hero { background-attachment: scroll; }
}

.fc-collection-header {
    padding: 4rem 1rem 1rem;
    max-width: 52rem;
}
.fc-collection-header h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(2rem, 4vw, 3rem);
}

.fc-collection-body {
    margin: 0;
}

/* Editorial transition band (#14869). Sits between the hero and the
   first body band. The SVG inside uses currentColor so the ornament
   inherits the rose-gold accent from this rule. Generous vertical
   breathing room is deliberate — agency editorial pages aren't shy
   about negative space, and the gap is what makes the next band's
   parallax reveal feel intentional rather than abrupt. */
.fc-collection-transition {
    background: var(--fc-paper, #f6efe9);
    color: var(--fc-rose-gold, #c9a07c);
    padding: 4.5rem 1rem 4rem;
    overflow: hidden;
}
.fc-collection-transition-inner {
    max-width: 72rem;
    margin: 0 auto;
}
.fc-collection-transition svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
}
/* On narrow screens the SVG's text labels get cramped; tightening the
   wrapping padding keeps the rule fully visible and the eye still
   reads the composition. */
@media (max-width: 640px) {
    .fc-collection-transition {
        padding: 3rem 0.5rem 2.5rem;
    }
}

.fc-collection-band {
    margin: 0;
}
/* Full-bleed vertical-parallax image band. Authors set the
   background-image inline. Image is top-aligned so the eye reads
   the photo's primary subject first as the band scrolls into view
   (#14870 feedback). background-attachment scrolls with the page —
   true vertical parallax comes from the wrapper's translate-Y
   keyed to scroll position below. */
.fc-collection-band-image {
    height: 70vh;
    background-size: cover;
    background-position: top center;
    background-attachment: scroll;
    /* A subtle scroll-driven Y-translate gives the image a slower-
       than-content drift — the band reveals its bottom edge as it
       passes through the viewport. */
    animation: fcBandImageDrift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}
@keyframes fcBandImageDrift {
    from { background-position: top center; }
    to   { background-position: bottom center; }
}
@media (prefers-reduced-motion: reduce) {
    .fc-collection-band-image { animation: none; background-position: top center; }
}

/* Full-bleed video parallax band (#14870). Same height as
   .fc-collection-band-image but renders a looping muted video as
   the background. The video is the actual location dawn timelapse
   from the Goddess Hour shoot (2015-10-07, Morongo Valley) — Moon,
   Venus, and Regulus in Leo as the sun rises. */
.fc-collection-band-video {
    position: relative;
    height: 70vh;
    overflow: hidden;
    background: #0a0508;
}
.fc-collection-band-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* Slower-than-content drift — same scroll-timeline trick as the
       image band, applied here via a transform. */
    animation: fcVideoDrift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}
@keyframes fcVideoDrift {
    from { transform: translateY(-6%); }
    to   { transform: translateY(6%); }
}
@media (prefers-reduced-motion: reduce) {
    .fc-collection-band-video video { animation: none; transform: none; }
}
/* Vignette overlay so the body text on the next band reads cleanly
   off the video's brighter sunrise frames. */
.fc-collection-band-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,5,8,0.0) 60%, rgba(10,5,8,0.45) 100%);
    pointer-events: none;
}
.fc-collection-band-video-caption {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    color: rgba(255,253,251,0.85);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 1;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* Editorial outdoor-photo gallery with lightbox (#14871). Mosaic
   grid below the picks, click to open full-bleed overlay with
   prev/next + esc to close. Pure vanilla — no external library. */
.fc-collection-gallery {
    padding: 4rem 1rem 3rem;
    background: var(--fc-paper, #f6efe9);
}
.fc-collection-gallery-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin: 0 0 0.4rem;
    text-align: center;
    color: var(--fc-ink, #2b1f24);
}
.fc-collection-gallery-eyebrow {
    text-align: center;
    color: var(--fc-rose-gold, #c9a07c);
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2.2rem;
}
.fc-collection-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 14rem;
    gap: 0.5rem;
    max-width: 72rem;
    margin: 0 auto;
}
.fc-collection-gallery-grid button {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: #2b1f24;
    cursor: zoom-in;
    overflow: hidden;
    position: relative;
}
.fc-collection-gallery-grid button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease, opacity 0.3s ease;
    opacity: 0.95;
}
.fc-collection-gallery-grid button:hover img,
.fc-collection-gallery-grid button:focus-visible img {
    transform: scale(1.04);
    opacity: 1;
}
.fc-collection-gallery-grid button:focus-visible {
    outline: 2px solid var(--fc-rose-gold, #c9a07c);
    outline-offset: 2px;
}
/* Asymmetric mosaic — two tiles take 2 columns / 2 rows so the
   grid doesn't read as a flat 4-by-N table. */
.fc-collection-gallery-grid > :nth-child(1)  { grid-column: span 2; grid-row: span 2; }
.fc-collection-gallery-grid > :nth-child(6)  { grid-column: span 2; }
@media (max-width: 768px) {
    .fc-collection-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 10rem;
    }
    .fc-collection-gallery-grid > :nth-child(1)  { grid-column: span 2; grid-row: span 2; }
    .fc-collection-gallery-grid > :nth-child(6)  { grid-column: span 2; grid-row: auto; }
}

/* Lightbox overlay. Hidden by default, JS toggles [data-open]. The
   overlay traps focus to the close button while open and ESC / overlay-
   click both close it. */
.fc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 5, 8, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 1rem;
}
.fc-lightbox[data-open] { display: flex; }
.fc-lightbox-stage {
    max-width: min(96vw, 1400px);
    max-height: 90vh;
    position: relative;
}
.fc-lightbox-stage img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.fc-lightbox-counter {
    position: absolute;
    left: 0;
    top: -2rem;
    color: rgba(255, 253, 251, 0.7);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.fc-lightbox-close {
    position: absolute;
    right: 0;
    top: -2rem;
    background: none;
    border: 0;
    color: rgba(255, 253, 251, 0.85);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}
.fc-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10, 5, 8, 0.4);
    border: 1px solid rgba(255, 253, 251, 0.25);
    color: rgba(255, 253, 251, 0.85);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}
.fc-lightbox-nav:hover { background: rgba(10, 5, 8, 0.7); }
.fc-lightbox-nav-prev { left: -3.5rem; }
.fc-lightbox-nav-next { right: -3.5rem; }
@media (max-width: 768px) {
    .fc-lightbox-nav-prev { left: 0.5rem; }
    .fc-lightbox-nav-next { right: 0.5rem; }
}

/* Horizontal scroll-driven marquee accent (#14870). Sits in its own
   thin band immediately below the hero. The inner <g class="fc-marquee-track">
   translates X as the band scrolls through the viewport — the eye
   reads it as a drift, not an animation. Falls back to a stationary
   rule on browsers without scroll-driven animations. */
.fc-collection-marquee {
    background: var(--fc-paper, #f6efe9);
    color: var(--fc-rose-gold, #c9a07c);
    padding: 1.25rem 0 1rem;
    overflow: hidden;
}
.fc-collection-marquee svg {
    display: block;
    width: 100%;
    height: 60px;
}
.fc-marquee-track {
    animation: fcMarqueeDrift linear both;
    animation-timeline: scroll(root block);
    animation-range: 0vh 60vh;
}
@keyframes fcMarqueeDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(-320px); }
}
@media (prefers-reduced-motion: reduce) {
    .fc-marquee-track { animation: none; }
}

/* Centred prose band — alternates with the photo bands for rhythm. */
.fc-collection-band-text {
    padding: 4rem 1rem;
    background: var(--fc-paper, #f6efe9);
}
.fc-collection-band-text .container {
    max-width: 44rem;
}
.fc-collection-band-text p.lede {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--fc-wine, #6f3950);
    margin-bottom: 1.5rem;
}
.fc-collection-band-text h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.6rem;
    margin: 0 0 0.8rem;
    color: var(--fc-ink, #2a1820);
}

/* Horizontal-parallax photo strip — three or more images in a row.
   Wide screens: full-width row. Narrower: horizontal scroll so the
   strip stays readable on mobile. */
.fc-collection-band-strip {
    padding: 2rem 1rem;
    background: #fdf8f4;
    overflow-x: auto;
}
.fc-collection-strip-track {
    display: flex;
    gap: 1rem;
    max-width: 1280px;
    margin: 0 auto;
}
.fc-collection-strip-track img {
    flex: 1 1 0;
    min-width: 280px;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center 30%;
    border-radius: var(--fc-radius, 4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Curated picks grid. Cards link to the PDP; blurb is the
   merchandiser's editorial note under the photo. */
.fc-collection-picks {
    padding: 4rem 1rem;
}
.fc-collection-picks-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 2rem;
    text-align: center;
    color: var(--fc-wine, #6f3950);
    margin-bottom: 2rem;
}
.fc-collection-pick {
    display: block;
    text-decoration: none;
    color: var(--fc-ink, #2a1820);
    background: #fff;
    border: 1px solid var(--fc-paper-rule, #ebe3dd);
    border-radius: var(--fc-radius, 4px);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
}
.fc-collection-pick:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
    text-decoration: none;
}
.fc-collection-pick img,
.fc-collection-pick-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fc-paper-soft, #faf3ef);
    color: var(--fc-rose-gold, #c9a07c);
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 2rem;
}
.fc-collection-pick-body {
    padding: 1rem 1.1rem 1.2rem;
}
.fc-collection-pick-body h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.2rem;
    margin: 0 0 0.4rem;
}
.fc-collection-pick-body p {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--fc-ink-mute, #6a5a60);
    margin: 0 0 0.6rem;
}
.fc-collection-pick-cta {
    color: var(--fc-rose-gold, #c9a07c);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}
.fc-collection-foot {
    padding: 1rem 1rem 5rem;
    text-align: center;
}

/* Per-line tax breakdown on the customer receipt (PBI #14843). */
.fc-receipt-line-tax {
    color: var(--fc-ink-mute, #6a5a60);
    font-style: italic;
}

/* "Viewing now" PDP social-proof readout (PBI #14839). Sits under
   the price block; rose-gold accent + italic phrasing in keeping
   with the Frisky aesthetic. */
.fc-product-viewers {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.45rem 0.8rem;
    background: rgba(201, 160, 124, 0.10);
    border: 1px solid rgba(201, 160, 124, 0.30);
    border-radius: var(--fc-radius, 4px);
    color: var(--fc-wine, #6f3950);
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.35;
}
.fc-product-viewers > span:first-child {
    color: var(--fc-rose-gold, #c9a07c);
    font-style: normal;
    font-size: 1rem;
}
.fc-product-viewers strong {
    color: var(--fc-ink, #2a1820);
    font-style: normal;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Cart cross-sell rail (PBI #14851). Sits below the cart + totals
   columns; 6 thumb cards in a row on wide screens, 2 per row on
   mobile. */
.fc-cart-crosssell {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--fc-paper-rule, #ebe3dd);
}
.fc-cart-crosssell-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
    color: var(--fc-wine, #6f3950);
}
.fc-cart-crosssell-card {
    display: block;
    text-decoration: none;
    color: var(--fc-ink, #2a1820);
    transition: transform 0.2s ease;
}
.fc-cart-crosssell-card:hover {
    transform: translateY(-3px);
    text-decoration: none;
}
.fc-cart-crosssell-card img,
.fc-cart-crosssell-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center 30%;
    background: var(--fc-paper-soft, #faf3ef);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fc-rose-gold, #c9a07c);
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.5rem;
    border-radius: var(--fc-radius, 4px);
    margin-bottom: 0.5rem;
}
.fc-cart-crosssell-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.25;
}
.fc-cart-crosssell-price {
    color: var(--fc-ink-mute, #6a5a60);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}