/*
 * SupremeDrops Store — premium monochrome theme.
 *
 * Foundation: pure white surfaces, jet-black ink, hairline borders, multi-layer
 * soft shadows, one warm-amber accent reserved for CTAs and key highlights.
 * Inspired by Aesop / Tom Ford / Apple — restraint over ornament.
 */
@import url('https://fonts.googleapis.com/css2?family=Birthstone&family=Inter:wght@200;400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=Stack+Sans+Notch:wght@400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* === Surfaces (white-on-white with whisper-warm elevation) === */
    --surface-page:       #ffffff;
    --surface-panel:      #ffffff;
    --surface-elevated:   #fafaf7;   /* whisper-warm cream for cards needing emphasis */
    --surface-hover:      #f5f4f0;   /* hover/pressed state on light surfaces */
    --surface-subtle:     #f5f4f0;
    --surface-inverse:    #0a0a0a;   /* near-black for inverted blocks (hero banners) */

    --bg-primary:   var(--surface-page);
    --bg-secondary: var(--surface-elevated);
    --bg-white:     var(--surface-panel);
    --bg-dark:      var(--surface-inverse);

    /* === Ink (text) — refined neutral scale, true black at the top === */
    --ink-900: #0a0a0a;   /* headings, near-black */
    --ink-800: #1a1a1a;
    --ink-700: #2a2a2a;
    --ink-600: #4a4a4a;
    --ink-500: #6a6a6a;   /* secondary text */
    --ink-400: #8a8a8a;   /* muted text */
    --ink-300: #b8b8b8;   /* dim / disabled */
    --ink-200: #d8d8d8;
    --ink-100: #ececec;
    --ink-50:  #f4f4f4;

    --text-primary:   var(--ink-900);
    --text-secondary: var(--ink-600);
    --text-muted:     var(--ink-500);
    --text-dim:       var(--ink-400);
    --text-dark:      var(--ink-900);
    --text-medium:    var(--ink-700);
    --text-light:     var(--ink-500);

    /* === Accent — warm "coffee gold" amber, sparingly used === */
    --accent:        #b08247;
    --accent-hover:  #c9974e;
    --accent-dark:   #8a5e2d;
    --accent-soft:   #f5ecdb;       /* subtle tint background */

    --caramel:       var(--accent);
    --caramel-light: var(--accent-hover);
    --caramel-dark:  var(--accent-dark);
    --caramel-700:   var(--accent-dark);

    --success: #16a34a;
    --white:   #ffffff;

    /* === Coffee scale (legacy aliases, retuned to neutrals) === */
    --coffee-50:      #fafaf7;
    --coffee-100:     #f5f4f0;
    --coffee-200:     #ececea;
    --coffee-300:     #b8b8b8;
    --coffee-400:     #8a8a8a;
    --coffee-500:     #6a6a6a;
    --coffee-600:     #2a2a2a;
    --coffee-700:     #1a1a1a;
    --coffee-800:     #0f0f0f;
    --coffee-900:     #0a0a0a;
    --coffee-darkest: #050505;

    --cream:          var(--surface-elevated);
    --shadow-gold:    var(--shadow-accent);

    /* === Inverted dark scale — used by hero banners on the light theme === */
    --dark-950: #0a0a0a;
    --dark-900: #161616;
    --dark-850: #1f1f1f;
    --dark-800: #2a2a2a;
    --dark-750: #383838;
    --dark-700: #4a4a4a;
    --dark-600: #5e5e5e;

    /* === Borders — hairlines, almost imperceptible === */
    --border-subtle: rgba(10, 10, 10, 0.06);
    --border-medium: rgba(10, 10, 10, 0.10);
    --border-strong: rgba(10, 10, 10, 0.18);

    /* === Radii — restrained, premium === */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 999px;

    /* === Shadows — multi-layer for soft "depth" without bruising === */
    --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
    --shadow-sm: 0 2px 6px rgba(10, 10, 10, 0.05),
                 0 1px 2px rgba(10, 10, 10, 0.04);
    --shadow-md: 0 8px 24px rgba(10, 10, 10, 0.06),
                 0 2px 6px rgba(10, 10, 10, 0.04);
    --shadow-lg: 0 16px 40px rgba(10, 10, 10, 0.08),
                 0 4px 12px rgba(10, 10, 10, 0.05);

    --shadow-accent: 0 0 0 1px rgba(176, 130, 71, 0.18),
                     0 10px 28px rgba(176, 130, 71, 0.18);

    --ring-focus: 0 0 0 2px var(--surface-panel),
                  0 0 0 4px rgba(176, 130, 71, 0.32);

    /* === Layout / typography === */
    --store-content-max-width: 1800px;
    --store-content-gutter: clamp(16px, 3vw, 32px);
    --store-panel-shell-max-width: 1120px;
    --store-panel-shell-padding-left: max(16px, env(safe-area-inset-left, 0px));
    --store-panel-shell-padding-right: max(16px, env(safe-area-inset-right, 0px));
    --container-width: var(--store-content-max-width);
    --section-padding: 72px;
    /* Compact sticky bar; integrated (top-of-page) bar uses --store-navbar-height-expanded */
    --store-navbar-height: clamp(56px, 6.5svh, 72px);
    --store-navbar-height-expanded: clamp(104px, 14svh, 150px);
    --store-navbar-link-size-expanded: clamp(16px, 2.2svh, 24px);

    --font-sans:           'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display:        'Plus Jakarta Sans', var(--font-sans);
    --font-nav:            Georgia, 'Times New Roman', serif;
    --font-banner-chips:   'Inter', var(--font-sans);
    --font-section-strip:  'Birthstone', cursive;
    --font-dream-avenue:   'Dream Avenue', Georgia, 'Times New Roman', serif;
    --font-viaoda-libra:   'Viaoda Libra', Georgia, 'Times New Roman', serif;
    --font-family-primary: var(--font-sans);
}

html {
    scroll-behavior: smooth;
    overflow-anchor: none;
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    background: var(--surface-page);
    /* Whisper-warm radial above the fold + barely-there hairline grid for
       paper-stock texture. Tuned to be felt rather than seen. */
    background-image: url('/themes/supremedrops/assets/images/backgrounds/light.png');
    background-attachment: scroll;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

/* Typography — display font on headings (SaaS marketing feel) */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-dark);
}

a {
    text-decoration: none;
    color: inherit;
}

/* Container */
.container {
    max-width: var(--store-content-max-width);
    margin: 0 auto;
    padding: 0 var(--store-content-gutter);
}

/* Same outer width + side padding as the GDPR cookies bar shell */
.store-panel-shell {
    max-width: var(--store-panel-shell-max-width);
    margin-inline: auto;
    padding-inline: var(--store-panel-shell-padding-left) var(--store-panel-shell-padding-right);
}

/* ===== NAVIGATION ===== */
.navbar .nav-link,
.navbar .nav-link--dropdown-anchor,
.navbar .nav-link--dropdown,
.navbar .nav-dropdown-link,
.navbar .nav-dropdown-heading {
    font-family: var(--font-nav);
    letter-spacing: 0.02em;
}

.navbar .nav-link,
.navbar .nav-link--dropdown-anchor,
.navbar .nav-link--dropdown {
    font-weight: 500;
}

.navbar .nav-dropdown-link,
.navbar .nav-dropdown-heading {
    font-weight: 500;
}

.navbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    overflow-anchor: none;
    --nav-progress: 0;
    --nav-inv: calc(1 - var(--nav-progress));
}

/* Non-integrated navbars still use a simple frosted state */
.navbar:not(.navbar--integrated).scrolled {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--border-subtle);
    box-shadow: var(--shadow-sm);
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease,
        -webkit-backdrop-filter 0.35s ease;
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 28px);
    height: var(--store-navbar-height);
    max-width: var(--store-content-max-width);
    margin: 0 auto;
    padding: 0 var(--store-content-gutter);
}

.navbar-inner--center-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 24px);
}

.navbar-side {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
}

.navbar-side--left {
    justify-content: flex-start;
    max-width: calc(50% - 2.75rem);
}

.navbar-side--right {
    justify-content: flex-end;
    gap: clamp(10px, 1.5vw, 20px);
    max-width: calc(50% - 2.75rem);
}

.navbar--integrated {
    --navbar-logo-compact-height: calc(var(--store-navbar-height) * 0.68);
    --navbar-logo-compact-width: calc(var(--navbar-logo-compact-height) * 2.75);
    --navbar-logo-height: calc(var(--store-navbar-height-expanded) * 0.95);
    --navbar-logo-width: calc(var(--navbar-logo-height) * 1.5);
    --navbar-logo-live-width: calc(
        (var(--navbar-logo-width) * var(--nav-inv)) +
        (var(--navbar-logo-compact-width) * var(--nav-progress))
    );
    --navbar-logo-live-height: calc(
        (var(--navbar-logo-height) * var(--nav-inv)) +
        (var(--navbar-logo-compact-height) * var(--nav-progress))
    );
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Frosted plate fades in with scroll progress — no hard on/off */
.navbar--integrated::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    opacity: var(--nav-progress);
}

.navbar--integrated .navbar-inner {
    position: relative;
    z-index: 1;
    height: calc(
        (var(--store-navbar-height-expanded) * var(--nav-inv)) +
        (var(--store-navbar-height) * var(--nav-progress))
    );
}

.navbar--integrated .navbar-side--left,
.navbar--integrated .navbar-side--right {
    max-width: calc(50% - (var(--navbar-logo-live-width) / 2) - 0.5rem);
}

.navbar--integrated .nav-link,
.navbar--integrated .nav-link--dropdown-anchor,
.navbar--integrated .nav-link--dropdown {
    font-size: calc(
        (var(--store-navbar-link-size-expanded) * var(--nav-inv)) +
        (0.9rem * var(--nav-progress))
    );
    padding-top: calc((10px * var(--nav-inv)) + (8px * var(--nav-progress)));
    padding-bottom: calc((14px * var(--nav-inv)) + (10px * var(--nav-progress)));
    padding-left: calc((16px * var(--nav-inv)) + (12px * var(--nav-progress)));
    padding-right: calc((16px * var(--nav-inv)) + (12px * var(--nav-progress)));
}

.navbar--integrated .nav-link--dropdown-anchor {
    padding-right: calc((10px * var(--nav-inv)) + (12px * var(--nav-progress)));
}

.navbar--integrated .nav-link::after {
    bottom: calc((9px * var(--nav-inv)) + (6px * var(--nav-progress)));
}

/* Links + icons grouped on the right (legacy layout). */
.navbar-cluster {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 2vw, 28px);
    min-width: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--coffee-900);
    text-decoration: none;
}

.logo--center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    flex-shrink: 0;
    pointer-events: auto;
}

.logo-swap {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: clamp(44px, 5vw, 56px);
    height: clamp(44px, 5vw, 56px);
}

.navbar--integrated .logo-swap {
    width: var(--navbar-logo-live-width);
    height: var(--navbar-logo-live-height);
    max-width: min(var(--navbar-logo-live-width), calc(100vw - 3rem));
}

.logo--integrated,
.logo--compact {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Continuous crossfade — never snap visibility */
    visibility: visible;
    pointer-events: none;
}

.logo--integrated {
    opacity: var(--nav-inv);
    transform: scale(calc(1 + (0.02 * var(--nav-progress))));
}

.logo--compact {
    opacity: var(--nav-progress);
    transform: scale(calc(0.97 + (0.03 * var(--nav-progress))));
}

.logo-compact {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.logo-carousel {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .navbar--integrated::before {
        transition: none;
    }
}

.logo-carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.94);
    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo-carousel-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.nav-links--left,
.nav-links--right {
    flex-wrap: nowrap;
}

.logo-brand-text {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 3px;
    margin: 0;
    padding: 0;
    letter-spacing: 0;
}

.logo-brand-char {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.12em 0.22em;
    min-height: 1.2em;
    min-width: 0.42em;
    box-sizing: border-box;
    font: inherit;
    font-weight: 800;
    line-height: 1;
    border-radius: 2px;
}

/* Odd positions (1st, 3rd, …): white tile, dark text */
.logo-brand-char--odd {
    background: #ffffff;
    color: #0a0a0a;
    border: 1px solid rgba(10, 10, 10, 0.18);
}

/* Even positions: black tile, white text */
.logo-brand-char--even {
    background: #0a0a0a;
    color: #ffffff;
    border: 1px solid #0a0a0a;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    overflow: hidden;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1vw, 8px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin: 0;
    padding: 0;
}

.nav-link {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-medium);
    padding: 8px 12px 10px;
    text-decoration: none;
    position: relative;
    background: transparent;
    transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

/* Accent line grows from centre — avoids the “muted blob” hover. */
.nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: calc(100% - 14px);
    max-width: 100%;
    height: 2px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--caramel) 35%,
        var(--caramel) 65%,
        transparent 100%
    );
    opacity: 0.92;
    pointer-events: none;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        bottom 0.2s linear;
}

.nav-link:hover {
    color: var(--coffee-900);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-link:focus-visible {
    color: var(--coffee-900);
    outline: 2px solid var(--coffee-700);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Dropdown (desktop navbar) */
.nav-item--dropdown {
    position: relative;
}

.nav-dropdown-split {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border-radius: var(--radius-sm);
}

.nav-link--dropdown-anchor {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-medium);
    padding: 8px 8px 10px 12px;
    text-decoration: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    white-space: nowrap;
    transition:
        color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        font-size 0.4s ease,
        padding 0.4s ease;
}

.nav-link--dropdown-anchor:hover {
    color: var(--coffee-900);
}

.nav-link--dropdown-anchor:focus-visible {
    outline: 2px solid var(--coffee-700);
    outline-offset: 3px;
}

.nav-dropdown-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px 10px 4px;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.nav-dropdown-caret:focus-visible {
    outline: 2px solid var(--coffee-700);
    outline-offset: 3px;
}

.nav-dropdown-caret .nav-chevron {
    display: inline-flex;
    opacity: 0.75;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-item--dropdown:hover .nav-dropdown-caret .nav-chevron,
.nav-item--dropdown:focus-within .nav-dropdown-caret .nav-chevron {
    transform: rotate(-180deg);
}

.nav-link--dropdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-medium);
    padding: 8px 12px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition:
        color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        font-size 0.4s ease,
        padding 0.4s ease;
}

.nav-link--dropdown:hover {
    color: var(--coffee-900);
}

.nav-link--dropdown:focus-visible {
    outline: 2px solid var(--coffee-700);
    outline-offset: 3px;
}

.nav-link--dropdown .nav-chevron {
    display: inline-flex;
    opacity: 0.75;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-item--dropdown:hover .nav-link--dropdown .nav-chevron,
.nav-item--dropdown:focus-within .nav-link--dropdown .nav-chevron,
.nav-item--dropdown:hover .nav-dropdown-caret .nav-chevron,
.nav-item--dropdown:focus-within .nav-dropdown-caret .nav-chevron {
    transform: rotate(-180deg);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    min-width: 208px;
    max-width: 350px;
    max-height: min(70vh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity 0.22s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.22s;
}

.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-link {
    display: block;
    padding: 9px 16px;
    font-size: 0.875rem;
    color: var(--text-medium);
    text-decoration: none;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible {
    background: var(--bg-secondary);
    color: var(--coffee-900);
    outline: none;
}

.nav-account {
    position: relative;
}

.nav-dropdown--account {
    left: auto;
    right: 0;
    min-width: 248px;
}

.nav-dropdown-link--icon {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: normal;
}

.nav-dropdown-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--coffee-600);
}

.nav-dropdown-link__icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.nav-dropdown-link__text {
    line-height: 1.35;
}

.nav-dropdown-link--logout {
    font-weight: 600;
    color: var(--coffee-800);
}

.nav-dropdown-link--logout .nav-dropdown-link__icon {
    color: var(--coffee-700);
}

.nav-dropdown--account .nav-dropdown-link {
    font-family: var(--font-family-primary);
    letter-spacing: normal;
    font-weight: 500;
}

.nav-dropdown-sep {
    height: 1px;
    margin: 6px 10px;
    padding: 0;
    list-style: none;
    background: var(--border-subtle);
    border: none;
}

.nav-dropdown-li-heading {
    list-style: none;
}

.nav-dropdown-heading {
    display: block;
    padding: 9px 16px;
    font-size: 0.875rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-medium);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .nav-link,
    .nav-link::after {
        transition-duration: 0.01ms;
    }

    .nav-link:hover::after,
    .nav-link:focus-visible::after {
        transform: translateX(-50%) scaleX(1);
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Desktop: Menu stays first; Search sits with account/cart (no orphan gap) */
.navbar-side--left {
    order: 1;
}

.nav-actions--start {
    order: 4;
}

.logo--center {
    order: 2;
}

.navbar-side--right {
    order: 3;
}

@media (min-width: 769px) {
    /* Toggle-only slot — hide so search/cart stay flush in the right cluster */
    .navbar-inner--center-logo > .nav-actions--start {
        display: none;
    }
}

/* Divider between text nav and utility icons — subtle rhythm */
.navbar-cluster > .nav-actions::before,
.navbar-side--right > .nav-actions::before {
    content: '';
    display: block;
    width: 1px;
    height: 26px;
    margin-right: clamp(6px, 1vw, 10px);
    background: var(--border-subtle);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .nav-links {
        gap: 2px;
    }

    .nav-link {
        padding: 8px 8px 10px;
        font-size: 0.865rem;
    }
}

.icon-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-panel);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    box-shadow: var(--shadow-xs);
}

.icon-btn:hover {
    background: var(--cream);
    border-color: var(--border-medium);
    transform: translateY(-1px);
}

.icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--coffee-700);
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: var(--caramel);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-count--empty {
    display: none;
}

a.icon-btn {
    text-decoration: none;
    color: inherit;
}

.mobile-toggle {
    display: none;
}

/* Navbar is in document flow (sticky); main content follows it naturally. */
.store-main {
    padding-top: 0;
}

@media (max-width: 720px) {
    body.store-page-catalog-viewer .cvr-nav {
        width: 36px;
        height: 64px;
        font-size: 1.15rem;
    }

    body.store-page-catalog-viewer #cvr-prev {
        left: 4px;
    }

    body.store-page-catalog-viewer #cvr-next {
        right: 4px;
    }
}

/* ===== HERO CAROUSEL ===== */
.hero-carousel {
    position: relative;
    padding-top: 0;
    overflow: hidden;
}

.carousel-container {
    position: relative;
    width: 100%;
    max-width: var(--store-content-max-width);
    height: 500px;
    margin: 0 auto;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.7) 0%, rgba(26, 15, 10, 0.4) 50%, rgba(26, 15, 10, 0.6) 100%);
    pointer-events: none;
}

.carousel-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    padding: 40px 24px;
}

.carousel-content h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    margin-bottom: 20px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.carousel-content p {
    font-size: 1.25rem;
    margin-bottom: 32px;
    opacity: 0.95;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.carousel-indicators {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-indicator:hover {
    border-color: white;
    transform: scale(1.2);
}

.carousel-indicator.active {
    background: white;
    border-color: white;
    transform: scale(1.2);
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-control:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 30px;
}

.carousel-next {
    right: 30px;
}

/* ===== HERO SECTION (Fallback) ===== */
.hero {
    min-height: 100vh;
    background: linear-gradient(145deg, var(--coffee-900) 0%, var(--coffee-800) 42%, var(--coffee-700) 100%);
    display: flex;
    align-items: center;
    padding-top: 0;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 18% 88%, rgba(162, 105, 36, 0.16) 0%, transparent 42%),
        radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.06) 0%, transparent 38%),
        linear-gradient(180deg, rgba(12, 10, 8, 0.35) 0%, transparent 45%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 60px 24px;
}

.hero-text h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: white;
    margin-bottom: 14px;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.hero-text h1 span {
    color: var(--caramel-light);
}

.hero-text p {
    font-size: 1.15rem;
    color: var(--coffee-200);
    margin-bottom: 22px;
    max-width: 480px;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    text-decoration: none;
    line-height: 1.2;
}

.btn-primary {
    background: var(--caramel);
    color: white;
    border: 1px solid color-mix(in srgb, var(--caramel-dark) 55%, var(--caramel) 45%);
    box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
    background: var(--caramel-light);
    border-color: var(--caramel-light);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(176, 130, 71, 0.32);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.btn:focus-visible,
.icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10rem;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* ===== SECTION STYLES ===== */
section {
    padding: var(--section-padding) 0;
}

.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 32px;
}

.section-header--below-strip {
    margin-top: 0;
}

.section-label-strip {
    display: flex;
    align-items: center;
    gap: clamp(18px, 4vw, 42px);
    width: 100%;
    margin: 0 0 clamp(24px, 4vw, 40px);
    padding: 0 var(--store-content-gutter);
}

.section-label-strip::before,
.section-label-strip::after {
    content: '';
    flex: 1 1 0;
    min-width: 0;
    height: 1px;
    background: var(--border-medium);
}

.section-label {
    flex-shrink: 0;
    display: inline-block;
    font-family: var(--font-section-strip);
    color: var(--coffee-800);
    font-size: clamp(2.1rem, 5.5vw, 3.35rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.section-label-strip--inline {
    margin-bottom: clamp(14px, 2.5vw, 20px);
    padding: 0;
}

.section-label-strip--inline::before,
.section-label-strip--inline::after {
    opacity: 0.55;
}

.section-label-strip--on-dark::before,
.section-label-strip--on-dark::after {
    background: rgba(255, 255, 255, 0.22);
}

.section-label-strip--on-dark .section-label {
    color: rgba(255, 255, 255, 0.92);
}

.section-title {
    font-size: clamp(1.85rem, 3.5vw, 2.65rem);
    margin-bottom: 8px;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}

.section-more-link {
    display: inline-block;
    margin-left: 0.4em;
    font-weight: 600;
    color: var(--coffee-700);
    text-decoration: none;
    white-space: nowrap;
}

.section-more-link:hover {
    color: var(--coffee-900);
    text-decoration: underline;
}

/* ===== PRODUCT LINES ===== */
.product-lines {
    background: var(--bg-white);
}

.lines-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.line-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.line-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.line-count {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ===== FEATURED PRODUCTS ===== */
.featured-products {
    background: var(--bg-primary);
}

.line-card {
    background: var(--surface-panel);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
}

.line-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--caramel) 35%, var(--border-medium));
    background: var(--surface-panel);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.product-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    background: var(--surface-panel);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
}

/* Image zoom only — no lift/shadow on the card shell (avoids badge overlap with scaled img). */

/* Full-card click target. Sits above the image/info but below the cart button
   so the entire card navigates to the detail page except for the CTA. */
.product-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
    border-radius: inherit;
}

.product-card-link:focus-visible {
    outline: 2px solid var(--coffee-700);
    outline-offset: 2px;
}

.product-card .btn-cart {
    position: relative;
    z-index: 2;
}

.product-image {
    position: relative;
    flex-shrink: 0;
    aspect-ratio: 5 / 4;
    background: white;
    overflow: hidden;
    isolation: isolate;
    z-index: 2;
    pointer-events: none;
}

.product-card-favorite,
.product-badges {
    pointer-events: auto;
}

.product-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: clamp(6px, 1.5vw, 10px);
}

.product-image-frame img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transition: transform 0.6s ease;
}

.product-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.5rem;
    color: var(--coffee-400);
    background: linear-gradient(145deg, var(--coffee-100), var(--coffee-50));
}

.product-card:hover .product-image-frame img {
    transform: scale(1.04);
}

.product-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: calc(100% - 64px);
}

.product-badge {
    position: static;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-out {
    background: #dc2626;
    color: white;
}

.badge-low {
    background: rgb(228, 163, 79);
    color: white;
}

.badge-discount {
    background: #dc2626;
    color: #fff;
}

.product-prices {
    display: flex;
    align-items: baseline;
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
}

.product-prices--single {
    justify-content: flex-start;
}

.product-prices--discounted {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
}

.product-price--sale {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0;
    white-space: nowrap;
}

.product-prices--discounted .product-price--was {
    text-align: left;
}

.product-price--single {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0;
    white-space: nowrap;
    text-align: left;
}

.product-price--was {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-bottom: 0;
    white-space: nowrap;
}

.product-price-discounted {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #383838 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

.product-info {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
    min-height: 0;
    pointer-events: none;
}

.product-info--grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
    min-height: 0;
    height: 100%;
    flex: 1;
}

.product-card .btn-cart,
.product-card-cta-row {
    pointer-events: auto;
    margin-top: 0;
    flex-shrink: 0;
}

.product-card-cta-sep {
    height: 1px;
    margin-top: auto;
    margin-bottom: 0;
    background: var(--border-subtle);
    flex-shrink: 0;
}

.product-card-cta-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.product-card-cta-row .btn-cart {
    margin-top: 0;
}

.product-card-cta-row .btn-cart:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.product-card-cta-row .btn-cart--syrup-box,
.product-card-cta-row .btn-cart--pack-six {
    flex: 0 0 auto;
    width: auto;
    aspect-ratio: 1;
    align-self: stretch;
    padding: 0;
    min-width: 0;
    letter-spacing: 0.02em;
}

.product-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-card-price-slot {
    grid-area: price;
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: flex-end;
    justify-content: flex-start;
}

.product-name {
    grid-area: title;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-dark);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.product-excerpt {
    grid-area: excerpt;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.product-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

.product-price {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--coffee-700);
    margin: 0;
}

.product-stock-row {
    grid-area: stock;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.product-stock-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 22%, transparent);
}

.product-stock-dot--ok {
    background: #16a34a;
    box-shadow: 0 0 0 2px color-mix(in srgb, #16a34a 22%, transparent);
}

.product-stock-dot--low {
    background: #ea580c;
    box-shadow: 0 0 0 2px color-mix(in srgb, #ea580c 22%, transparent);
}

.product-stock-dot--out {
    background: #dc2626;
    box-shadow: 0 0 0 2px color-mix(in srgb, #dc2626 22%, transparent);
}

.product-stock {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-muted);
    margin: 0;
    min-width: 0;
}

.btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding: 10px 12px;
    background: var(--coffee-800);
    color: white;
    border: 1px solid color-mix(in srgb, var(--coffee-900) 70%, var(--coffee-700) 30%);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow-xs);
}

.product-card .btn-cart,
.product-card-cta-row .btn-cart {
    transition: background 0.2s ease;
    box-shadow: var(--shadow-xs);
}

.product-card .btn-cart:hover:not(:disabled),
.product-card-cta-row .btn-cart:hover:not(:disabled) {
    background: var(--coffee-900);
    box-shadow: var(--shadow-xs);
    transform: none;
}

.btn-cart__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-cart:hover:not(:disabled) {
    background: var(--coffee-900);
    box-shadow: var(--shadow-sm);
}

.btn-cart:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

/* Product cards — compact horizontal layout on mobile */
@media (max-width: 768px) {
    .product-card {
        grid-template-columns: clamp(104px, 30vw, 136px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        height: auto;
        align-items: stretch;
    }

    .product-image {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: auto;
        height: 100%;
        min-height: 112px;
        align-self: stretch;
    }

    .product-info,
    .product-info--grid {
        grid-column: 2;
        grid-row: 1;
        padding: 10px 12px 12px;
        gap: 4px;
        justify-content: center;
    }

    .product-image-frame {
        padding: 6px;
    }

    .product-badges {
        top: 6px;
        left: 6px;
        gap: 4px;
        max-width: calc(100% - 36px);
    }

    .product-badge {
        padding: 3px 7px;
        font-size: 0.5625rem;
    }

    .product-name {
        font-size: 0.9375rem;
        line-height: 1.25;
        -webkit-line-clamp: 2;
    }

    .product-excerpt {
        display: none;
    }

    .product-stock {
        font-size: 0.75rem;
    }

    .product-stock-dot {
        width: 7px;
        height: 7px;
    }

    .product-card-price-slot {
        align-items: center;
    }

    .product-card-price-slot .product-price--single,
    .product-card-price-slot .product-price--sale {
        font-size: 0.9375rem;
    }

    .product-card-price-slot .product-price--was {
        font-size: 0.75rem;
    }

    .product-card-cta-sep {
        display: none;
    }

    .product-card .btn-cart,
    .product-card-cta-row .btn-cart {
        padding: 8px 10px;
        font-size: 0.8125rem;
        gap: 6px;
    }

    .btn-cart__icon {
        width: 16px;
        height: 16px;
    }

    .product-card-cta-row {
        gap: 6px;
    }

    .product-card-cta-row .btn-cart--syrup-box,
    .product-card-cta-row .btn-cart--pack-six {
        min-width: 2.75rem;
        padding-inline: 10px;
    }
}

/* ----- Cart page + toast (localStorage cart) ----- */
.store-cart-page {
    padding-top: 16px;
    padding-bottom: 64px;
}

.store-cart-root {
    max-width: 1100px;
    margin: 0 auto;
}

.store-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: clamp(24px, 4vw, 40px);
    align-items: start;
}

@media (max-width: 860px) {
    .store-cart-layout {
        grid-template-columns: 1fr;
    }
}

.store-cart-main {
    min-width: 0;
}

.store-cart-aside {
    position: sticky;
    top: 88px;
}

@media (max-width: 860px) {
    .store-cart-aside {
        position: static;
    }
}

.store-cart-summary {
    padding: 22px 22px 20px;
    background: var(--bg-white);
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

.store-cart-summary-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 16px;
}

.store-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.store-cart-summary-row--total {
    margin: 16px 0 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(26, 15, 10, 0.08);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
}

.store-cart-summary-row--total span:last-child {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--coffee-700);
}

.store-cart-empty {
    text-align: center;
    padding: 56px 28px;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

.store-cart-empty-title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-dark);
}

.store-cart-empty-text {
    margin: 0 0 24px;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.store-cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.store-cart-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--bg-white);
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 560px) {
    .store-cart-line {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "media info"
            "controls controls";
    }

    .store-cart-line-media { grid-area: media; }
    .store-cart-line-info { grid-area: info; }
    .store-cart-line-controls {
        grid-area: controls;
        justify-content: space-between;
        width: 100%;
    }
}

.store-cart-line-media {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
}

.store-cart-line-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.store-cart-line-media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--coffee-100), var(--coffee-50));
}

.store-cart-line-placeholder {
    font-size: 2rem;
    line-height: 1;
    opacity: 0.88;
}

@media (max-width: 480px) {
    .store-cart-line-media {
        width: 72px;
        height: 72px;
    }
}

.store-cart-line-info {
    min-width: 0;
}

.store-cart-line-name {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.store-cart-line-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.store-cart-line-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 14px;
}

.store-cart-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid rgba(26, 15, 10, 0.08);
}

.store-cart-qty-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: var(--bg-white);
    border-radius: 9px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(26, 15, 10, 0.06);
    transition: background 0.2s, color 0.2s;
}

.store-cart-qty-btn:hover:not(:disabled) {
    background: var(--coffee-100);
    color: var(--coffee-800);
}

.store-cart-qty-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.store-cart-qty-value {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    color: var(--coffee-700);
}

.store-cart-line-total {
    min-width: 5.5rem;
    text-align: right;
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--text-dark);
}

.store-cart-remove {
    border: none;
    background: transparent;
    color: var(--coffee-600);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 4px 0;
}

.store-cart-remove:hover {
    color: var(--coffee-900);
}

.store-cart-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.store-cart-checkout-btn,
.store-cart-continue-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.store-cart-checkout-note {
    margin: 14px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
    text-align: center;
}

.store-cart-section {
    margin-bottom: 28px;
}

.store-cart-section-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 12px;
}

.store-cart-boxes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.store-cart-box {
    background: var(--bg-white);
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.store-cart-box-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 16px 18px;
}

.store-cart-box-info {
    min-width: 0;
    flex: 1 1 180px;
}

.store-cart-box-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.store-cart-box-toggle {
    border: 1px solid rgba(26, 15, 10, 0.12);
    background: var(--bg-secondary);
    color: var(--text-dark);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.store-cart-box-toggle:hover {
    background: var(--coffee-100);
    border-color: var(--coffee-700);
}

.store-cart-box-body {
    padding: 0 18px 18px;
    border-top: 1px solid rgba(26, 15, 10, 0.06);
}

.store-cart-box--expanded .store-cart-box-body {
    padding-top: 16px;
}

.store-cart-box .store-syrup-box-panel {
    margin-bottom: 12px;
}

.store-cart-box .store-syrup-box-visual-label {
    display: none;
}

.store-cart-box .store-syrup-remove-hint {
    margin-bottom: 0;
}

.store-syrup-box {
    margin-bottom: 28px;
    padding: 20px 20px 8px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--coffee-600) 28%, var(--border-subtle));
    background: linear-gradient(165deg, color-mix(in srgb, var(--coffee-50) 90%, white), var(--surface-panel));
    box-shadow: var(--shadow-sm);
}

.store-syrup-box-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.store-syrup-box-icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.store-syrup-box-title {
    display: block;
    font-size: 1.05rem;
    color: var(--coffee-800);
}

.store-syrup-box-desc {
    margin: 6px 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.store-cart-lines--in-box {
    margin-bottom: 8px;
}

.store-syrup-box-status {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    line-height: 1.45;
}

.store-syrup-box-status--ok {
    background: color-mix(in srgb, #15803d 12%, var(--surface-panel));
    color: #14532d;
    border: 1px solid color-mix(in srgb, #15803d 22%, transparent);
}

.store-syrup-box-status--warn {
    background: color-mix(in srgb, #b45309 10%, var(--surface-panel));
    color: #7c2d12;
    border: 1px solid color-mix(in srgb, #b45309 20%, transparent);
}

.store-cart-checkout-blocked {
    cursor: not-allowed;
    opacity: 0.72;
    pointer-events: auto;
}

.store-checkout-next--blocked {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Syrup box — floating on all store pages (store.js) */
.store-syrup-overlay {
    position: fixed;
    z-index: 9500;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    max-width: min(440px, calc(100vw - 32px));
    pointer-events: none;
}

.store-syrup-overlay[hidden] {
    display: none !important;
}

.store-syrup-overlay-card {
    position: relative;
    pointer-events: auto;
    padding: 8px 8px 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--coffee-600) 26%, var(--border-subtle));
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--coffee-50) 88%, white),
        var(--bg-white)
    );
    box-shadow:
        0 4px 6px rgba(26, 15, 10, 0.06),
        0 18px 40px rgba(26, 15, 10, 0.12);
    transition:
        opacity 0.28s ease,
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        max-width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: bottom right;
    max-width: min(440px, calc(100vw - 32px));
    cursor: default;
}

/* Minimize control (top-right of the pop-up) */
.store-syrup-overlay-minimize {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #3ecf6e 0%, #22a84f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 1px 3px rgba(0, 0, 0, 0.18);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

.store-syrup-overlay-minimize:hover {
    filter: brightness(1.06);
    transform: scale(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 2px 6px rgba(0, 0, 0, 0.2);
}

.store-syrup-overlay-minimize:active {
    transform: scale(0.96);
    filter: brightness(0.96);
}

.store-syrup-overlay-minimize:focus-visible {
    outline: 2px solid #22a84f;
    outline-offset: 2px;
}

.store-syrup-overlay-minimize__icon {
    display: block;
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.12);
}

.store-syrup-overlay--minimized .store-syrup-overlay-minimize,
.store-syrup-overlay--launching .store-syrup-overlay-minimize {
    display: none;
}

.store-syrup-overlay--minimized .store-syrup-overlay-card {
    padding: 4px;
    max-width: 168px;
    transform: scale(0.88);
    cursor: pointer;
}

.store-syrup-overlay--launching .store-syrup-overlay-card {
    transition: none !important;
    transform: none !important;
    max-width: min(440px, calc(100vw - 32px));
    padding: 8px 8px 12px;
}

.store-syrup-overlay--launching .store-syrup-overlay-info {
    max-height: 420px;
    opacity: 1;
}

.store-syrup-overlay-count {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    min-width: 2.1rem;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: #1f120c;
    background: color-mix(in srgb, var(--caramel) 22%, white);
    border: 1px solid color-mix(in srgb, var(--caramel) 35%, transparent);
    box-shadow: 0 2px 8px rgba(26, 15, 10, 0.12);
    pointer-events: none;
}

.store-syrup-overlay--minimized .store-syrup-overlay-count {
    display: block;
}

.store-syrup-overlay-info {
    padding: 2px 4px 0;
    overflow: hidden;
    max-height: 420px;
    opacity: 1;
    transition:
        max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease,
        margin 0.28s ease,
        padding 0.28s ease;
}

.store-syrup-overlay--minimized .store-syrup-overlay-info {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.store-syrup-overlay--minimized .store-syrup-overlay-visual {
    margin: 0;
}

.store-syrup-overlay--minimized .store-syrup-overlay-remove-hint {
    display: none;
}

@media (max-width: 768px) {
    .store-syrup-overlay--mobile-compact.store-syrup-overlay--minimized .store-syrup-overlay-minimize {
        display: none;
    }

    .store-syrup-overlay--mobile-compact.store-syrup-overlay--minimized .store-syrup-overlay-count {
        display: block;
    }

    .store-syrup-overlay--mobile-compact.store-syrup-overlay--minimized .store-syrup-overlay-info,
    .store-syrup-overlay--mobile-compact.store-syrup-overlay--minimized .store-syrup-overlay-remove-hint {
        max-height: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

    .store-syrup-overlay--mobile-compact.store-syrup-overlay--minimized:not(.store-syrup-overlay--launching) .store-syrup-overlay-card {
        padding: 4px;
        max-width: 168px;
        transform: scale(0.88);
        cursor: pointer;
    }

    .store-syrup-overlay--mobile-compact.store-syrup-overlay--minimized .store-syrup-overlay-visual {
        margin: 0;
    }
}

.store-syrup-overlay-visual {
    margin: 0 0 10px;
    width: 100%;
    max-width: 100%;
    position: relative;
}

.store-syrup-overlay-visual--pending .store-syrup-box-visual {
    opacity: 0;
    pointer-events: none;
}

.store-syrup-overlay-visual__loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: clamp(120px, 28vw, 180px);
    border-radius: 12px;
    background: color-mix(in srgb, var(--coffee-50) 55%, transparent);
}

.store-syrup-overlay-visual--pending .store-syrup-overlay-visual__loader {
    display: flex;
}

.store-syrup-overlay-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--coffee-100);
    border-top-color: var(--caramel);
    border-radius: 50%;
    animation: storeSpin 0.8s linear infinite;
}

.store-syrup-overlay-visual__loader-text {
    font-size: 0.82rem;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .store-syrup-overlay-spinner {
        animation: none;
        border-top-color: var(--caramel);
        opacity: 0.85;
    }
}

.store-syrup-overlay-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 2px;
}

.store-syrup-overlay-info-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5e8dc;
    color: #3d2318;
}

.store-syrup-overlay-info-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.store-syrup-overlay-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: #2a1810;
    font-size: 0.9rem;
    line-height: 1.35;
}

.store-syrup-overlay-info-text strong {
    font-weight: 700;
    font-size: 0.92rem;
    color: #1f120c;
}

.store-syrup-overlay-info-text span {
    font-weight: 400;
    color: #3d2a1f;
}

.store-syrup-overlay-info-divider {
    height: 1px;
    margin: 0 2px;
    background: color-mix(in srgb, var(--coffee-600) 14%, transparent);
}

.store-syrup-overlay-remove-hint,
.store-syrup-remove-hint {
    margin: 10px 2px 0;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center;
    color: #5c4030;
    background: color-mix(in srgb, var(--coffee-100) 55%, transparent);
    border: 1px dashed color-mix(in srgb, var(--coffee-600) 18%, transparent);
}

.store-syrup-remove-hint {
    margin: 0 0 16px;
    text-align: left;
}

.store-syrup-overlay-card--launching {
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
}

.store-syrup-fly-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10050;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
    backface-visibility: hidden;
    overflow: visible;
}

.store-syrup-fly-ghost__inner {
    width: 100%;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.store-syrup-fly-ghost__inner .store-syrup-overlay-visual,
.store-syrup-fly-ghost__inner .store-syrup-box-visual {
    max-width: none;
    margin: 0;
    overflow: visible;
    width: 100%;
}

.store-syrup-fly-ghost .store-syrup-box-visual__stage {
    overflow: visible;
}

.store-syrup-fly-ghost .store-syrup-box-visual__bg {
    position: relative;
    z-index: 1;
}

.store-syrup-fly-ghost .store-syrup-box-visual__slots {
    z-index: 2;
}

.store-syrup-fly-ghost .store-syrup-box-visual__slot--enter,
.store-syrup-fly-ghost .store-syrup-box-visual__slot--filled {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.store-syrup-fly-ghost .store-syrup-box-visual__crop,
.store-syrup-fly-ghost .store-syrup-box-visual__crop img {
    opacity: 1 !important;
    animation: none !important;
}

.store-syrup-fly-ghost .store-syrup-box-visual__slots {
    left: 5%;
    right: 5%;
    bottom: 6%;
    height: 90%;
}

#cartBtn.store-cart-btn--pulse {
    animation: storeCartBtnPulse 0.62s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes storeCartBtnPulse {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.22);
    }
    65% {
        transform: scale(0.94);
    }
    100% {
        transform: scale(1);
    }
}

.store-syrup-overlay .store-syrup-box-visual--sm {
    max-width: none;
    margin: 0;
}

/* Visual syrup box — main_box.webp + product images */
.store-syrup-box-visual {
    width: 100%;
    margin: 0 auto;
}

.store-syrup-box-visual--sm {
    max-width: 340px;
}

.store-syrup-box-visual--md {
    max-width: 420px;
}

.store-syrup-box-visual--lg {
    max-width: 560px;
}

.store-syrup-box-visual__stage {
    position: relative;
    width: 100%;
    line-height: 0;
    overflow: visible;
}

.store-syrup-box-visual__bg {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}

.store-syrup-box-visual__bg--fallback {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--coffee-100, #efe6dc), var(--coffee-50, #f8f4ef));
}

.store-syrup-box-visual__slots {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 6%;
    height: 90%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
    gap: 0;
    align-items: end;
    justify-items: center;
    pointer-events: none;
}

.store-syrup-box-visual__slot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0.35;
    overflow: visible;
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease;
    will-change: transform, opacity;
}

.store-syrup-box-visual__slot--filled {
    opacity: 1;
    pointer-events: auto;
}

.store-syrup-box-visual__slot--removing {
    opacity: 0 !important;
    transform: scale(0.72);
    pointer-events: none;
    z-index: 0;
}

.store-syrup-box-visual__slot--shift-left {
    transform: translateX(-100%);
    z-index: 1;
}

.store-syrup-box-visual[data-syrup-box-animating] .store-syrup-box-visual__crop[data-syrup-draft-index],
.store-syrup-box-visual[data-syrup-box-animating] .store-syrup-box-visual__crop[data-syrup-cart-line-id] {
    pointer-events: none;
    cursor: default;
}

.store-syrup-box-visual__crop {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 112%;
    height: 100%;
}

.store-syrup-box-visual__crop[data-syrup-draft-index],
.store-syrup-box-visual__crop[data-syrup-cart-line-id] {
    cursor: pointer;
    pointer-events: auto;
    border: none;
    padding: 0;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}

.store-syrup-box-visual__crop[data-syrup-draft-index]:hover img,
.store-syrup-box-visual__crop[data-syrup-draft-index]:focus-visible img,
.store-syrup-box-visual__crop[data-syrup-cart-line-id]:hover img,
.store-syrup-box-visual__crop[data-syrup-cart-line-id]:focus-visible img {
    filter: drop-shadow(0 3px 6px rgba(15, 11, 9, 0.32)) brightness(1.06);
}

.store-syrup-box-visual__crop[data-syrup-draft-index]:focus-visible,
.store-syrup-box-visual__crop[data-syrup-cart-line-id]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--caramel, #c9862e) 70%, white);
    outline-offset: 1px;
}

.store-syrup-draft-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 0.84rem;
    line-height: 1.45;
    color: #7c2d12;
    background: color-mix(in srgb, #b45309 10%, var(--surface-panel));
    border: 1px solid color-mix(in srgb, #b45309 20%, transparent);
}

.store-syrup-box-visual__crop img {
    position: absolute;
    display: block;
    max-width: none;
    max-height: none;
    filter: drop-shadow(0 2px 4px rgba(15, 11, 9, 0.22));
}

.store-syrup-box-visual__slot--enter .store-syrup-box-visual__crop {
    opacity: 0;
    transform: translateY(10px);
    animation: storeSyrupBottleFadeIn 0.5s ease-out forwards;
}

@keyframes storeSyrupBottleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.store-syrup-box-panel {
    margin: 0 0 16px;
}

.store-syrup-box-visual-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 3vw, 24px);
    justify-content: center;
}

.store-syrup-box-visual-wrap {
    flex: 1 1 420px;
    max-width: 600px;
    min-width: min(100%, 300px);
}

.store-syrup-box-visual-wrap--partial .store-syrup-box-visual-label {
    color: #7c2d12;
}

.store-syrup-box-visual-wrap--full .store-syrup-box-visual-label {
    color: #14532d;
}

.store-syrup-box-visual-label {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-dark);
}

.store-syrup-overlay-anim {
    width: 40px;
    height: 40px;
    position: relative;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--coffee-100) 82%, white),
        color-mix(in srgb, var(--coffee-50) 85%, white)
    );
    border: 1px solid color-mix(in srgb, var(--coffee-700) 20%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.store-syrup-overlay-box {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 24px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(180deg, #b27a47, #8c5a31);
    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.store-syrup-overlay-box::before {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    top: -4px;
    height: 5px;
    border-radius: 2px;
    background: linear-gradient(180deg, #c69056, #9c673a);
}

.store-syrup-overlay-bottle {
    position: absolute;
    left: 19px;
    bottom: 17px;
    width: 8px;
    height: 17px;
    border-radius: 3px 3px 2px 2px;
    background: linear-gradient(180deg, #7d4f2e, #5b351f);
    transform-origin: 50% 100%;
    animation: storeSyrupBottleTilt 2.3s ease-in-out infinite;
}

.store-syrup-overlay-bottle::before {
    content: '';
    position: absolute;
    left: 2px;
    top: -4px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #d7a35e;
}

.store-syrup-overlay-bottle::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 5px;
    width: 6px;
    height: 5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
}

.store-syrup-overlay-anim::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(26, 15, 10, 0.14);
    filter: blur(1px);
    transform-origin: 50% 50%;
    animation: storeSyrupShadowPulse 2.3s ease-in-out infinite;
}

.store-syrup-overlay-title {
    font-size: 0.95rem;
    color: var(--coffee-800);
}

.store-syrup-overlay-hint {
    margin: 4px 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.store-syrup-overlay-status {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.store-syrup-overlay-status--ok {
    background: color-mix(in srgb, #15803d 11%, var(--surface-panel));
    color: #14532d;
    border: 1px solid color-mix(in srgb, #15803d 20%, transparent);
}

.store-syrup-overlay-status--warn {
    background: color-mix(in srgb, #b45309 9%, var(--surface-panel));
    color: #7c2d12;
    border: 1px solid color-mix(in srgb, #b45309 18%, transparent);
}

.store-syrup-box-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.store-syrup-box-chip-list--checkout {
    margin: 0;
}

.store-syrup-box-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.store-syrup-box-chip--full {
    background: color-mix(in srgb, #15803d 12%, var(--surface-panel));
    color: #14532d;
    border-color: color-mix(in srgb, #15803d 22%, transparent);
}

.store-syrup-box-chip--partial {
    background: color-mix(in srgb, #b45309 10%, var(--surface-panel));
    color: #7c2d12;
    border-color: color-mix(in srgb, #b45309 20%, transparent);
}

.store-syrup-overlay-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 12px;
    font-size: 0.85rem;
}

.store-checkout-syrup-boxes {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-subtle);
}

.store-checkout-syrup-boxes-title {
    margin: 0 0 8px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-dark);
}

@keyframes storeSyrupBottleTilt {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-1px) rotate(-7deg); }
    65% { transform: translateY(0) rotate(6deg); }
}

@keyframes storeSyrupShadowPulse {
    0%, 100% { transform: scaleX(1); opacity: 0.42; }
    30% { transform: scaleX(0.88); opacity: 0.3; }
    65% { transform: scaleX(0.95); opacity: 0.36; }
}

@media (prefers-reduced-motion: reduce) {
    .store-syrup-overlay-bottle,
    .store-syrup-overlay-anim::after,
    .store-syrup-box-visual__slot--enter .store-syrup-box-visual__crop,
    #cartBtn.store-cart-btn--pulse,
    .store-syrup-fly-ghost {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .store-syrup-box-visual__slot,
    .store-syrup-overlay-card {
        transition: none !important;
    }
}

.store-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    max-width: min(420px, calc(100vw - 32px));
    padding: 14px 20px;
    background: var(--coffee-900);
    color: white;
    border-radius: 12px;
    font-size: 0.95rem;
    box-shadow: 0 10px 40px rgba(26, 15, 10, 0.25);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.store-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.card-elevated {
    background: var(--bg-white);
    border-radius: 20px;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid rgba(26, 15, 10, 0.07);
    box-shadow: var(--shadow-md);
}

.store-checkout-panel--muted p {
    color: var(--text-muted);
    margin: 0;
}

.store-checkout-panel--success .store-checkout-h2 {
    color: var(--coffee-700);
}

.store-checkout-panel--success {
    border-color: rgba(22, 163, 74, 0.25);
    box-shadow: 0 12px 40px rgba(22, 163, 74, 0.12);
}

.store-checkout-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(145deg, #16a34a, #15803d);
    color: #fff;
    font-size: 2rem;
    line-height: 64px;
    font-weight: 800;
    box-shadow: var(--shadow-gold);
}

.store-checkout-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border: 3px solid var(--coffee-100);
    border-top-color: var(--caramel);
    border-radius: 50%;
    animation: storeSpin 0.8s linear infinite;
}

.store-checkout-spinner--inline {
    width: 18px;
    height: 18px;
    margin: 0;
    border-width: 2px;
    flex: 0 0 auto;
}

.store-checkout-discount-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: var(--text-muted, #6b7280);
    font-size: 0.88rem;
}

.store-checkout-discount-loading[hidden] {
    display: none !important;
}

.store-checkout-discount-loading-text {
    line-height: 1.3;
}

.store-checkout-panel.is-discount-loading .store-checkout-discount-input,
.store-checkout-panel.is-discount-loading .store-checkout-discount-apply,
.store-checkout-panel.is-discount-loading .store-checkout-claimed-chip,
.store-checkout-panel.is-discount-loading .store-checkout-applied-remove {
    opacity: 0.65;
    cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
    .store-checkout-spinner,
    .store-checkout-spinner--inline {
        animation: none;
        border-top-color: var(--caramel);
        opacity: 0.85;
    }
}

@keyframes storeSpin {
    to { transform: rotate(360deg); }
}

.store-checkout-banner {
    max-width: 560px;
    margin: 0 auto 32px;
    padding: 24px 28px;
    border-radius: 16px;
    text-align: center;
}

.store-checkout-banner--error {
    background: #f7eae9;
    border: 1px solid #eab7b7;
    color: #991b1b;
}

.store-checkout-banner--error p {
    margin: 12px 0 20px;
    font-size: 0.95rem;
}

.store-checkout-lead {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin: 0 0 20px;
}

.store-checkout-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.store-checkout-item-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-top: 1px solid rgba(26, 15, 10, 0.08);
}

.store-checkout-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(26, 15, 10, 0.06);
    font-size: 0.95rem;
}

.store-checkout-item-name {
    font-weight: 600;
    color: var(--text-dark);
    grid-column: 1 / -1;
}

.store-checkout-item-meta {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.store-checkout-item-meta del {
    color: var(--text-muted);
    margin-right: 4px;
}

.store-checkout-discount-block {
    margin-bottom: 16px;
    padding-top: 8px;
    border-top: 1px solid rgba(26, 15, 10, 0.08);
}

.store-checkout-discount-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--coffee-800);
    margin-bottom: 8px;
}

.store-checkout-discount-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.store-checkout-discount-input {
    flex: 1 1 140px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(26, 15, 10, 0.12);
    border-radius: 10px;
    font-size: 0.95rem;
    background: var(--bg-secondary);
}

.store-checkout-discount-apply {
    flex: 0 0 auto;
    padding-left: 18px;
    padding-right: 18px;
}

.store-checkout-discount-msg {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--coffee-700);
}

.store-checkout-discount-msg--error {
    color: #b91c1c;
}

.store-checkout-breakdown {
    border-top: 1px solid rgba(26, 15, 10, 0.08);
    padding-top: 12px;
}

.store-checkout-total-row--muted {
    font-size: 0.95rem;
    color: var(--text-muted);
    padding-top: 4px;
}

.store-checkout-total-row--saving {
    font-size: 0.95rem;
    color: #15803d;
    padding-top: 4px;
}

.store-checkout-total-row--note {
    font-size: 0.85rem;
    font-style: italic;
    justify-content: center;
}

.store-checkout-total-row--grand {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(26, 15, 10, 0.08);
}

.store-checkout-total-row--grand strong {
    font-size: 1.45rem;
    color: var(--coffee-700);
}

.store-checkout-item-price {
    font-weight: 700;
    color: var(--coffee-700);
    text-align: right;
}

.store-checkout-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 8px;
    font-size: 1.1rem;
}

.store-checkout-total-row strong {
    font-size: 1.45rem;
    color: var(--coffee-700);
}

.store-checkout-hint {
    margin: 16px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.store-checkout-card-hint {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: -8px 0 18px;
    line-height: 1.5;
}

.store-checkout-card-box {
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid rgba(26, 15, 10, 0.1);
    border-radius: 12px;
    margin-bottom: 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.store-checkout-card-box:focus-within {
    border-color: var(--caramel);
    box-shadow: 0 0 0 3px rgba(162, 105, 36, 0.2);
}

.store-checkout-pay-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.store-checkout-pay-btn:disabled,
.store-checkout-pay-btn.is-loading {
    opacity: 0.72;
    cursor: wait;
}

.store-checkout-pay-progress {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 12px;
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(176, 130, 71, 0.28);
    background: rgba(176, 130, 71, 0.08);
    color: var(--caramel-dark, #8a6230);
    font-size: 0.92rem;
    font-weight: 600;
}

.store-checkout-pay-progress[hidden] {
    display: none !important;
}

.store-checkout-pay-progress-text {
    line-height: 1.35;
}

.store-checkout-card.is-card-payment-busy .store-checkout-payment-element,
.store-checkout-card.is-card-payment-busy .store-checkout-method-options {
    opacity: 0.55;
    pointer-events: none;
}

.store-checkout-pay-actions .btn.is-disabled,
.store-checkout-pay-actions a.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: wait;
}

.store-checkout-result {
    margin-top: 16px;
    font-size: 0.9rem;
    color: #b91c1c;
    min-height: 1.25em;
}

/* All products (/products) + filters */
.store-products-page .section-header {
    max-width: 720px;
}

.store-products-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 40px);
    align-items: start;
}

.store-products-filters {
    position: sticky;
    top: calc(var(--store-navbar-height) + 20px);
}

.store-products-layout:has(.store-products-empty) {
    align-items: stretch;
}

.store-products-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.store-products-main:has(.store-products-empty) {
    min-height: min(70vh, 640px);
}

.store-products-empty {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.store-products-empty .cta-box-text {
    max-width: 28rem;
}

.store-products-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink-900, #0a0a0a) 6%, transparent);
    color: var(--ink-900, #0a0a0a);
}

.store-products-empty-icon svg {
    display: block;
}

.store-products-mobile-tools {
    display: none;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 18px;
}

.store-products-sort {
    position: relative;
}

.store-products-sort-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 140px;
}

.store-products-sort-trigger::-webkit-details-marker {
    display: none;
}

.store-products-sort-caret {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.65;
    margin-top: -2px;
}

.store-products-sort[open] .store-products-sort-caret {
    transform: rotate(-135deg);
    margin-top: 2px;
}

.store-products-sort-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 50;
    width: min(280px, 82vw);
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(26, 15, 10, 0.1);
    background: white;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Catalog grid in the split layout (narrower main column). */
.store-products-page .store-products-main .products-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1200px) {
    .store-products-page .store-products-main .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .store-products-page .store-products-main .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .store-products-layout {
        grid-template-columns: 1fr;
        gap: clamp(20px, 4vw, 28px);
    }

    .store-products-filters {
        display: none;
    }

    .store-products-mobile-tools {
        display: flex;
    }

    .store-products-page .store-products-main .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .store-products-page .store-products-main .products-grid {
        grid-template-columns: 1fr;
    }
}

.product-filters {
    padding: clamp(16px, 3vw, 22px);
    background: var(--bg-white);
    border-radius: 16px;
    border: 1px solid rgba(26, 15, 10, 0.06);
    box-shadow: var(--shadow-md);
}

.product-filter-group + .product-filter-group {
    margin-top: clamp(18px, 3vw, 24px);
    padding-top: clamp(18px, 3vw, 24px);
    border-top: 1px solid rgba(26, 15, 10, 0.08);
}

.product-filter-group-title {
    margin: 0 0 12px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.product-filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-filter-dropdown {
    display: none;
}

.product-filter-btn {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-size: 0.92rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    color: var(--text-dark);
    background: var(--bg-primary);
    border: 1px solid rgba(26, 15, 10, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.product-filter-btn:hover,
.product-filter-btn:focus-visible {
    border-color: var(--coffee-400);
    background: color-mix(in srgb, var(--coffee-100) 55%, var(--bg-white));
    color: var(--coffee-900);
    outline: none;
}

.product-filter-btn--active {
    border-color: var(--coffee-600);
    background: var(--coffee-800);
    color: #fff;
    box-shadow: 0 4px 14px rgba(45, 24, 16, 0.18);
}

.product-filter-btn--active:hover,
.product-filter-btn--active:focus-visible {
    background: var(--coffee-700);
    border-color: var(--coffee-500);
    color: #fff;
}

.product-filter-actions {
    margin-top: clamp(18px, 3vw, 24px);
    padding-top: clamp(18px, 3vw, 24px);
    border-top: 1px solid rgba(26, 15, 10, 0.08);
}

.product-filters-reset {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
}

.product-filters-results {
    margin: 16px 0 0;
    font-size: 0.92rem;
    color: var(--text-muted);
}

.values {
    /*background: var(--bg-secondary);*/
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.value-card {
    background: var(--bg-white);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.4s ease;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.value-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--caramel) 0%, var(--caramel-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px;
}

.value-title {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.value-text {
    color: var(--text-muted);
    line-height: 1.7;
}

/* ===== NEWSLETTER ===== */
.newsletter {
    /*background: linear-gradient(135deg, var(--coffee-800) 0%, var(--coffee-900) 100%); */
    background: rgb(18,18,18);
    padding: 20px 0;
    position: relative;
    overflow: hidden;
}

.newsletter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c9862e' fill-opacity='0.05'%3E%3Cpath d='M20 20c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10zm20 0c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10z'/%3E%3C/g%3E%3C/svg%3E");*/
}

.newsletter-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter h2 {
    color: white;
    margin-bottom: 12px;
}

.newsletter h2 span {
    color: var(--caramel-light);
}

.newsletter p {
    color: var(--coffee-200);
    margin-bottom: 20px;
}

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

.newsletter-input {
    flex: 1;
    padding: 14px 22px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 1rem;
}

.newsletter-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--caramel);
    background: rgba(255,255,255,0.15);
}

/* ===== FOOTER ===== */
.footer {
    background: var(--coffee-darkest);
    color: var(--coffee-200);
    padding: 80px 0 0px;
    font-family: var(--font-sans);
}

.footer :is(h1, h2, h3, h4, .footer-title) {
    font-family: var(--font-sans);
}

.footer-brand {
    display: grid;
    justify-items: center;
    width: 100%;
    text-align: center;
}

.footer-brand__logo-wrap {
    display: grid;
    place-items: center;
    width: 100%;
    margin-bottom: 4px;
}

.footer-logo {
    display: block;
    line-height: 0;
    text-decoration: none;
}

.footer-logo__img {
    display: block;
    width: auto;
    height: clamp(64px, 9vw, 96px);
    max-width: min(100%, 180px);
    margin-inline: auto;
    object-fit: contain;
    object-position: center;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(0, 3fr);
    gap: 48px;
    margin-bottom: 48px;
    align-items: start;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 48px;
    min-width: 0;
}

.footer-column {
    min-width: 0;
}

.footer-brand p {
    margin: 16px 0;
    line-height: 1.7;
    max-width: 280px;
    width: 100%;
}

.footer-social {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.social-link {
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, 0.94);
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    text-decoration: none;
}

.social-link__icon {
    display: block;
    flex-shrink: 0;
}

.social-link:hover {
    background: var(--caramel);
    color: var(--coffee-darkest);
    transform: translateY(-3px);
}

.social-link:focus-visible {
    outline: 2px solid var(--caramel-light);
    outline-offset: 2px;
}

.footer-title {
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
}

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

.footer-links a {
    color: var(--coffee-300);
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--caramel-light);
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    color: var(--coffee-400);
    font-size: 0.9rem;
}

.footer-anpc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    margin-top: 16px;
}

.footer-anpc__link {
    display: inline-flex;
    line-height: 0;
    opacity: 0.95;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-anpc__link:hover,
.footer-anpc__link:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
}

.footer-anpc__img {
    display: block;
    height: clamp(40px, 6vw, 52px);
    width: auto;
    max-width: min(220px, 42vw);
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    padding: 4px 6px;
}

.footer-bottom-logo {
    width: 100%;
    height: clamp(110px, 12vw, 140px);
    margin-top: 14px;
    overflow: hidden;
}

.footer-bottom-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.footer-newsletter {
    margin-bottom: 40px;
    padding: clamp(28px, 4vw, 36px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.04);
    /* background-image: url('/themes/supremedrops/assets/images/backgrounds/dark.png'); */
    background-size: cover;
    background-position: center;
}

.footer-newsletter-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 40px);
    align-items: center;
}

.footer-newsletter-title {
    margin: 0 0 10px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.footer-newsletter-text {
    margin: 0 0 8px;
    color: var(--coffee-200);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 42ch;
}

.footer-newsletter-note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--coffee-400);
}

.footer-newsletter-form {
    display: flex;
    gap: 12px;
    width: 100%;
}

.footer-newsletter-input {
    min-width: 0;
}

.footer-newsletter-submit {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ===== NOTIFICATION ===== */
.notification {
    position: fixed;
    top: 100px;
    right: 20px;
    background: var(--coffee-900);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification.hide {
    animation: slideOut 0.3s ease forwards;
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100px);
        opacity: 0;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-text p {
        margin: 0 auto 22px;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-visual {
        display: none;
    }
    
    .lines-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .carousel-container {
        height: 450px;
    }
    
    .carousel-prev {
        left: 15px;
    }
    
    .carousel-next {
        right: 15px;
    }
    
    .carousel-control {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    /*
     * Mobile single row:
     * Left: Menu + Search | Middle: Logo | Right: Account + Cart
     * Morph distances / logo ratios match desktop for the same scroll feel.
     */
    .navbar-inner--center-logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .navbar-side--left {
        display: none;
    }

    .nav-actions--start {
        order: 1;
        position: relative;
        z-index: 3;
        display: flex;
        flex: 0 0 auto;
        justify-content: flex-start;
        gap: 8px;
    }

    .navbar-side--right {
        display: contents;
    }

    .nav-links--right {
        display: none;
    }

    .nav-actions--end {
        display: contents;
    }

    #mobileToggle {
        order: 1;
        position: relative;
        z-index: 3;
    }

    #searchBtn {
        order: 2;
        position: relative;
        z-index: 3;
    }

    .logo--center {
        order: 3;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        margin: 0;
        pointer-events: auto;
    }

    .nav-account {
        order: 4;
        position: relative;
        z-index: 3;
        margin-left: auto;
    }

    #cartBtn {
        order: 5;
        position: relative;
        z-index: 3;
    }

    /* Same live logo box as desktop; only reserve room for side icons */
    .navbar--integrated .logo-swap {
        max-width: min(var(--navbar-logo-live-width), calc(100vw - 7.25rem));
    }

    /*
     * Only the wide wordmark slide: keep the logo box (and S mark) unchanged,
     * but shrink this image so it cannot run under Menu/Search/Account/Cart.
     */
    .navbar--integrated .logo-carousel-slide--wide {
        inset: auto;
        left: 50%;
        top: 50%;
        width: auto;
        height: auto;
        max-width: min(100%, calc(100vw - 16rem));
        max-height: 100%;
        object-fit: contain;
        transform: translate(-50%, -50%) scale(0.94);
    }

    .navbar--integrated .logo-carousel-slide--wide.is-active {
        transform: translate(-50%, -50%) scale(1);
    }

    .navbar-cluster > .nav-actions::before,
    .navbar-side--right > .nav-actions::before {
        display: none;
    }

    .navbar-cluster {
        gap: 12px;
    }

    .navbar .logo-brand-text {
        font-size: 1rem;
        max-width: min(56vw, 260px);
    }

    .navbar .logo {
        gap: 8px;
        min-width: 0;
    }

    .mobile-toggle {
        display: flex;
    }
    
    .lines-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }
    
    .footer-brand p {
        max-width: none;
    }
    
    .footer-social {
        justify-content: center;
    }

    .footer-newsletter-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-newsletter-text {
        max-width: none;
        margin-inline: auto;
    }

    .footer-newsletter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-newsletter-submit {
        width: 100%;
    }

    .footer-bottom-logo {
        height: clamp(44px, 12vw, 72px);
    }
    
    .carousel-container {
        height: 380px;
        border-radius: 0;
    }
    
    .carousel-content h1 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }
    
    .carousel-content p {
        font-size: 0.95rem;
    }
}

/* Mobile: hide hero/page-header types strip (chips row). */
@media (max-width: 768px) {
    .hero-types-strip {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .lines-grid {
        grid-template-columns: 1fr;
    }
    
    .carousel-container {
        height: 320px;
    }
    
    .carousel-content {
        padding: 30px 20px;
    }
    
    .carousel-content h1 {
        font-size: 1.5rem;
    }
    
    .carousel-indicators {
        bottom: 15px;
        gap: 8px;
    }
    
    .carousel-indicator {
        width: 10px;
        height: 10px;
    }
    
    .carousel-prev {
        left: 10px;
    }
    
    .carousel-next {
        right: 10px;
    }
    
    .carousel-control {
        width: 40px;
        height: 40px;
    }
}
/* ===== ADDITIONAL BUTTON VARIANTS ===== */
.btn-dark {
    background: var(--coffee-900);
    color: white;
    border: none;
    box-shadow: var(--shadow-sm);
}
.btn-dark:hover {
    background: var(--coffee-darkest);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: white;
}
.btn-outline {
    background: var(--surface-panel);
    color: var(--coffee-800);
    border: 1px solid var(--border-medium);
    box-shadow: var(--shadow-xs);
}
.btn-outline:hover {
    border-color: var(--coffee-400);
    background: var(--cream);
    color: var(--coffee-900);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* ===== MOBILE NAV DRAWER ===== */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 15, 10, 0.55);
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}
.mobile-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* Products page: ensure filter drawer sits above sticky navbar + syrup overlay. */
#productsFilterOverlay {
    z-index: 12000;
}

#productsFilterPanel {
    z-index: 60000;
}

body.mobile-nav-open .navbar {
    z-index: 0;
    pointer-events: none;
}
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(300px, 85vw);
    height: 100dvh;
    background: white;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 24px;
    box-shadow: var(--shadow-lg);
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    font-family: var(--font-sans);
}
.mobile-nav.open {
    right: 0;
}
.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cream);
}
.mobile-nav-header .logo-brand-text {
    font-family: var(--font-sans);
}
.mobile-nav-close {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-medium);
    font-family: var(--font-sans);
    font-size: 1.25rem;
    transition: background 0.2s;
}
.mobile-nav-close:hover { background: var(--cream); }
.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.mobile-nav .mobile-nav-link,
.mobile-nav .mobile-nav-dropdown-trigger,
.mobile-nav .mobile-nav-link--sub,
.mobile-nav .mobile-nav-link--dropdown-parent {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: var(--text-dark);
    padding: 12px 16px;
    border-radius: 10px;
    transition: color 0.2s ease, background 0.2s ease;
}

.mobile-nav .mobile-nav-dropdown-trigger:not(.mobile-nav-dropdown-trigger--split) {
    padding: 12px 0 12px 16px;
}

.mobile-nav-link {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-nav-link--icon {
    overflow: visible;
    white-space: normal;
}
.mobile-nav-link--icon .mobile-nav-link__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-nav-dropdown-trigger .mobile-nav-link__text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible,
.mobile-nav-dropdown-trigger:hover,
.mobile-nav-dropdown-trigger:focus-visible {
    color: var(--coffee-900);
    background: var(--bg-secondary);
}
.mobile-nav-block--dropdown {
    border-radius: 10px;
    margin-bottom: 4px;
    width: 100%;
}

.mobile-nav-block--dropdown > .mobile-nav-dropdown-trigger,
.mobile-nav-block--dropdown > .mobile-nav-dropdown-row {
    width: 100%;
}
.mobile-nav-block--split .mobile-nav-dropdown-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
    border-radius: 10px;
    overflow: hidden;
    min-width: 0;
    min-height: 44px;
}
.mobile-nav-dropdown-row.is-expanded,
.mobile-nav-dropdown-row:hover {
    background: var(--bg-secondary);
}
.mobile-nav-link--dropdown-parent {
    flex: 1 1 auto;
    display: block;
    width: auto;
    min-width: 0;
    margin: 0 !important;
    padding: 12px 0 12px 16px !important;
    border-radius: 0 !important;
    overflow: hidden;
}
.mobile-nav-link--dropdown-parent .mobile-nav-link__text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-nav-link--dropdown-parent:hover,
.mobile-nav-link--dropdown-parent:focus-visible {
    background: transparent;
}
.mobile-nav-dropdown-trigger--split {
    flex: 0 0 48px;
    align-self: stretch;
    width: 48px;
    min-height: 44px;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
}
.mobile-nav-dropdown-trigger--split:hover,
.mobile-nav-dropdown-trigger--split:focus-visible {
    background: transparent !important;
}
.mobile-nav-dropdown-row:hover .mobile-nav-link--dropdown-parent,
.mobile-nav-dropdown-row:hover .mobile-nav-dropdown-trigger--split,
.mobile-nav-dropdown-row.is-expanded .mobile-nav-link--dropdown-parent,
.mobile-nav-dropdown-row.is-expanded .mobile-nav-dropdown-trigger--split {
    color: var(--coffee-900);
}
.mobile-nav-block--split {
    overflow: hidden;
}
.mobile-nav-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 44px;
    min-width: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    position: static;
}

.mobile-nav-chevron {
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: auto;
    align-self: stretch;
    flex-shrink: 0;
    margin: 0;
    position: static;
    opacity: 0.65;
}

.mobile-nav-chevron svg {
    display: block;
    flex-shrink: 0;
}

.mobile-nav-dropdown-trigger[aria-expanded="true"] .mobile-nav-chevron {
    transform: rotate(180deg);
}

.mobile-nav-dropdown-trigger--account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 12px 16px !important;
}

.mobile-nav-dropdown-trigger--account .mobile-nav-link__text {
    flex: 1 1 auto;
    min-width: 0;
}

.mobile-nav-dropdown-trigger--account .mobile-nav-chevron {
    flex: 0 0 48px;
    align-self: stretch;
}

.mobile-nav-link--icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-nav-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--coffee-600);
}

.mobile-nav-link__icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.mobile-nav-link__icon--leading {
    width: 20px;
    height: 20px;
}

.mobile-nav-submenu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 8px 12px;
}
.mobile-nav-submenu[hidden] {
    display: none !important;
}
.mobile-nav-submenu .mobile-nav-link,
.mobile-nav-submenu .mobile-nav-subheading {
    padding-left: 28px;
}
.mobile-nav-subheading {
    display: block;
    padding: 12px 16px;
    margin: 0;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text-dark);
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-nav-sep {
    height: 1px;
    margin: 8px 12px;
    background: var(--border-medium);
    border: none;
}
.mobile-nav-footer {
    padding-top: 24px;
    border-top: 1px solid var(--cream);
    display: flex;
    gap: 10px;
}
.mobile-nav-footer .btn {
    flex: 1;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    padding: 11px 16px;
}

/* ===== HERO — product types strip (top bar, same width as banners) ===== */
.hero-banner-stack {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.hero-banner-shell:has(.hero-types-strip) .hero-banner-stack {
    border-radius: 0 0 10px 10px;
}

.hero-banner-shell:not(:has(.hero-types-strip)) .hero-banner-stack {
    border-radius: 10px;
}

.hero-types-strip {
    width: 100%;
}

.hero-types-strip-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    height: 48px;
    margin: 0;
    gap: 0;
    background: transparent ;
}

.hero-banner-shell:has(.hero-types-strip) .hero-types-strip-track {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

@keyframes hero-types-strip-pop-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-types-strip-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    overflow: hidden;
    text-decoration: none;
    color: #0a0a0a;
    background-color: color-mix(in srgb, var(--hero-type-color, var(--coffee-800)) 48%, transparent);
    background-image: none;
    box-shadow:
        inset 0 4px 0 color-mix(in srgb, #000 12%, transparent),
        inset 0 -1px 0 rgba(255, 255, 255, 0.35);
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    animation: hero-types-strip-pop-in 0.55s cubic-bezier(0.22, 1.12, 0.36, 1) forwards;
    animation-delay: calc(0.1s + var(--hero-type-i, 0) * 0.07s);
    transition:
        color 0.25s ease,
        background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        background-image 0.3s ease,
        filter 0.25s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}


.hero-types-strip-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.25s ease;
    pointer-events: none;
}

.hero-types-strip-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.14) 48%,
        transparent 96%
    );
    transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.hero-types-strip-item--has-color {
    background-color: color-mix(in srgb, var(--hero-type-color) 72%, transparent);
}

.hero-types-strip-item--fallback {
    background-color: color-mix(in srgb, var(--coffee-800) 72%, transparent);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--coffee-700) 40%, transparent) 0%,
        color-mix(in srgb, var(--coffee-900) 72%, transparent) 100%
    );
}

.hero-types-strip-item:hover,
.hero-types-strip-item:focus-visible {
    color: #0a0a0a;
    outline: none;
    z-index: 2;
    filter: none;
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        inset 0 4px 0 rgba(0, 0, 0, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.28),
        0 8px 20px rgba(0, 0, 0, 0.16);
}

.hero-types-strip-item--has-color:hover,
.hero-types-strip-item--has-color:focus-visible {
    background-color: var(--hero-type-color);
    background-image: none;
}

.hero-types-strip-item--fallback:hover,
.hero-types-strip-item--fallback:focus-visible {
    background-color: var(--coffee-800);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--coffee-700) 55%, var(--coffee-800)) 0%,
        var(--coffee-900) 100%
    );
}

.hero-types-strip-item:hover::after,
.hero-types-strip-item:focus-visible::after {
    left: 100%;
}

.hero-types-strip-item--has-color:hover::before,
.hero-types-strip-item--has-color:focus-visible::before,
.hero-types-strip-item--fallback:hover::before,
.hero-types-strip-item--fallback:focus-visible::before {
    background: transparent;
}

/* Products page — selected type chip is solid; others stay translucent */
.hero-types-strip--products .hero-types-strip-item--active.hero-types-strip-item--has-color {
    background-color: var(--hero-type-color);
    background-image: none;
    filter: none;
    box-shadow:
        inset 0 4px 0 rgba(0, 0, 0, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

.hero-types-strip--products .hero-types-strip-item--active.hero-types-strip-item--fallback {
    background-color: var(--coffee-800);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--coffee-700) 55%, var(--coffee-800)) 0%,
        var(--coffee-900) 100%
    );
    filter: none;
    box-shadow:
        inset 0 4px 0 rgba(0, 0, 0, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

.hero-types-strip--products .hero-types-strip-item--active::after {
    display: none;
}

.hero-types-strip-name {
    position: relative;
    z-index: 1;
    font-family: var(--font-banner-chips);
    font-size: clamp(0.88rem, 1.45vw, 1.08rem);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    font-weight: 200;
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-shadow: none;
}

.hero-types-strip-item:hover .hero-types-strip-name,
.hero-types-strip-item:focus-visible .hero-types-strip-name {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .hero-types-strip-item {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .hero-types-strip-item::after {
        display: none;
    }

    .hero-types-strip-item:hover,
    .hero-types-strip-item:focus-visible,
    .hero-types-strip-item:hover .hero-types-strip-name,
    .hero-types-strip-item:focus-visible .hero-types-strip-name {
        transform: none;
    }
}

.hero-banner-section--types-only {
    padding-top: 24px;
    padding-bottom: 0;
}

.hero-banner-section--types-only .hero-types-strip-track {
    border-radius: 10px;
}

/* ===== HERO BANNER — DB-driven split carousel ===== */
.hero-banner-section {
    position: relative;
    z-index: 1;
    padding-top: 24px;
    padding-bottom: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.hero-banner-section--with-types {
    padding-top: 24px;
}

.hero-banner-shell {
    width: 100%;
    max-width: var(--store-content-max-width);
    margin: 0 auto;
    padding: 0 var(--store-content-gutter);
    position: relative;
}

.hero-banner-stack .hero-banner-track {
    position: relative;
    /* Fill most of the first screen on large desktops; stay smaller on short viewports */
    height: clamp(360px, calc(100svh - var(--store-navbar-height-expanded) - 4.75rem), 686px);
    width: 100%;
    border-radius: 0;
    overflow: hidden;
}

.hero-banner-shell:has(.hero-types-strip) .hero-banner-track {
    border-radius: 0 0 10px 10px;
}

.hero-banner-track {
    position: relative;
    height: clamp(360px, calc(100svh - var(--store-navbar-height-expanded) - 4.75rem), 686px);
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}
/* Each slide absolutely stacked; only .active is visible */
.hero-banner-slide {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
.hero-banner-slide.active {
    opacity: 1;
    visibility: visible;
}
.hero-banner-slide--image-only .hero-banner-right {
    width: 100%;
    flex: 1 1 100%;
}
/* Left 40% — solid colour or gradient from DB */
.hero-banner-left {
    width: 40%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
    /* Angled edge without skewing a duplicate background (breaks DB gradients) */
    clip-path: polygon(0 0, 100% 0, calc(100% - 36px) 100%, 0 100%);
    margin-right: -36px;
}
.hero-banner-left::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 40%, rgba(255,255,255,0.09) 0%, transparent 65%);
    pointer-events: none;
}
.hero-banner-left--fade {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 100%);
}
.hero-banner-content {
    position: relative;
    z-index: 3;
    padding: 36px 44px 36px 7%;
    width: 100%;
}
.hero-banner-eyebrow {
    display: inline-block;
    color: rgba(255,255,255,0.75);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.12);
    padding: 4px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.22);
}
.hero-banner-title {
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 800;
    color: white;
    line-height: 1.1;
    margin-bottom: 10px;
    text-shadow: 0 2px 14px rgba(0,0,0,0.18);
}
.hero-banner-subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,0.86);
    margin-bottom: 20px;
    line-height: 1.65;
    max-width: 340px;
}
.hero-banner-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
/* Hero button styles (work on any coloured background) */
.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    background: rgba(255,255,255,0.95);
    color: #1a0f0a;
    border: 2px solid transparent;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.hero-btn-primary:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    background: rgba(255,255,255,0.14);
    color: white;
    border: 2px solid rgba(255,255,255,0.45);
    backdrop-filter: blur(6px);
}
.hero-btn-secondary:hover {
    background: rgba(255,255,255,0.24);
    border-color: rgba(255,255,255,0.75);
    transform: translateY(-2px);
}
.hero-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,0.55);
}
.hero-btn-outline:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.9);
    transform: translateY(-2px);
}
/* Right 60% — image or video from DB */
.hero-banner-right {
    flex: 1;
    background-color: var(--coffee-100);
    position: relative;
    overflow: hidden;
}
.hero-banner-right--video {
    background-image: none !important;
}
.hero-banner-media,
.hero-banner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.hero-banner-right-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--coffee-50);
    color: var(--text-muted);
    font-size: 0.9rem;
    gap: 8px;
}
/* Carousel controls */
.hero-carousel-prev,
.hero-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.92);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
}
.hero-carousel-prev { left: 16px; }
.hero-carousel-next { right: 16px; }
.hero-banner-track:hover .hero-carousel-prev,
.hero-banner-track:hover .hero-carousel-next,
.hero-carousel-prev:focus-visible,
.hero-carousel-next:focus-visible {
    opacity: 1;
    pointer-events: auto;
}
.hero-carousel-prev:hover,
.hero-carousel-next:hover {
    color: #ffffff;
    transform: translateY(-50%) scale(1.08);
}
.hero-carousel-prev svg,
.hero-carousel-next svg {
    display: block;
    width: 18px;
    height: 18px;
}
.hero-carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    z-index: 20;
}
.hero-carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
.hero-carousel-dot.active,
.hero-carousel-dot:hover {
    background: white;
    border-color: white;
    transform: scale(1.3);
}
/* Responsive */
@media(max-width: 900px) {
    .hero-banner-stack .hero-banner-track,
    .hero-banner-track { height: clamp(300px, calc(100svh - var(--store-navbar-height-expanded) - 3.5rem), 480px); }
    .hero-banner-content { padding: 36px 32px 36px 5%; }
}
@media (max-width: 768px) {
    .hero-banner-section,
    .store-page-header-band.hero-banner-section {
        padding-top: 0;
    }

    .hero-banner-shell {
        padding-left: 0;
        padding-right: 0;
        max-width: none;
    }

    .hero-banner-stack .hero-banner-track,
    .hero-banner-track,
    .store-page-header-panel,
    .store-page-header-image-panel {
        border-radius: 0;
    }

    .hero-banner-stack .hero-banner-track,
    .hero-banner-track {
        height: 180px;
        min-height: 0;
        position: relative;
        overflow: hidden;
        touch-action: pan-y;
        transition: none;
        isolation: isolate;
        background: var(--coffee-900, #1a0f0a);
    }

    .hero-banner-slide {
        position: absolute;
        top: 0;
        left: 0;
        display: flex !important;
        flex-direction: column-reverse;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(100%, 0, 0);
        transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        z-index: 0;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        background: var(--hero-banner-bg, var(--coffee-900, #1a0f0a));
    }

    .hero-banner-slide.active {
        transform: translate3d(0, 0, 0);
        pointer-events: auto;
        z-index: 2;
    }

    .hero-banner-slide:not(.active) {
        transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 1;
    }

    @media (prefers-reduced-motion: reduce) {
        .hero-banner-slide,
        .hero-banner-slide.active,
        .hero-banner-slide:not(.active) {
            transition: none !important;
        }
    }

    /* Image area fills remaining space; media stays fully visible while the frame morphs */
    .hero-banner-right {
        position: relative;
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        width: 100%;
        inset: auto;
        border-radius: 0;
        overflow: hidden;
        z-index: 0;
        background: var(--hero-banner-bg, var(--coffee-900, #1a0f0a));
    }

    .hero-banner-slide--image-only .hero-banner-right {
        flex: 1 1 auto;
        height: 100%;
        width: 100%;
    }

    .hero-banner-media,
    .hero-banner-video {
        position: absolute !important;
        inset: 0 !important;
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    /* While dragging, fill the frame completely — no letterbox gaps */
    .hero-banner-track.is-swiping .hero-banner-media,
    .hero-banner-track.is-swiping .hero-banner-video {
        object-fit: cover;
    }

    /* Content panel */
    .hero-banner-left {
        position: relative;
        z-index: 1;
        width: 100%;
        flex: 0 0 auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        overflow: hidden;
        margin: 0;
        clip-path: none;
    }

    .hero-banner-content {
        position: relative;
        z-index: 1;
        padding: clamp(18px, 4.2vw, 28px) clamp(16px, 4vw, 24px);
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    .hero-banner-left::before {
        display: none;
    }

    .hero-banner-left::after {
        display: block;
        background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.1) 0%, transparent 65%);
    }

    .hero-banner-left--fade {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
    }

    .hero-banner-title {
        font-size: clamp(1.15rem, 5.4vw, 1.7rem);
        margin-bottom: clamp(4px, 1.2vw, 8px);
        line-height: 1.15;
    }

    .hero-banner-subtitle {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(0.78rem, 3.25vw, 0.95rem);
        margin-bottom: clamp(8px, 2.4vw, 14px);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .hero-banner-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: center;
        gap: clamp(6px, 2vw, 10px);
        width: 100%;
    }

    .hero-btn-primary,
    .hero-btn-secondary,
    .hero-btn-outline {
        justify-content: center;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding: clamp(8px, 2.4vw, 10px) clamp(10px, 3vw, 16px);
        font-size: clamp(0.68rem, 2.85vw, 0.8125rem);
        white-space: nowrap;
    }

    .hero-carousel-prev,
    .hero-carousel-next {
        display: none;
    }

    .hero-carousel-dots {
        display: none;
    }
}

/* ===== STORE HERO (full-bleed) — static fallback ===== */
.store-hero-section {
    position: relative;
    z-index: 1;
    padding-top: 24px;
    padding-bottom: 0;
    margin-bottom: 0;
    min-height: 550px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.store-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--coffee-800);
    transition: transform 8s ease;
}
.store-hero-section:hover .store-hero-bg {
    transform: scale(1.03);
}
.store-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(26, 15, 10, 0.88) 0%,
        rgba(26, 15, 10, 0.65) 45%,
        rgba(26, 15, 10, 0.35) 100%
    );
}
.store-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 64px 0;
}
.store-hero-text {
    max-width: 600px;
}
.store-hero-eyebrow {
    display: inline-block;
    color: var(--caramel-light);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    background: rgba(162, 105, 36, 0.15);
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(162, 105, 36, 0.3);
}
.store-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.75rem);
    font-weight: 800;
    color: white;
    line-height: 1.06;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
}
.store-hero-title span { color: var(--caramel-light); }
.store-hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 36px;
    max-width: 480px;
    line-height: 1.7;
}
.store-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
@media(max-width: 600px) {
    .store-hero-section { min-height: auto; padding-top: 0; }
    .store-hero-content { padding: 56px 0 48px; }
    .store-hero-actions { flex-direction: column; }
    .store-hero-actions .btn { width: 100%; justify-content: center; }
}

/* ===== FEATURE STRIP ===== */
/* The feature strip stands on its own as a self-contained card below the
   hero — clear breathing room above, all corners rounded, hairline border
   + soft shadow so it doesn't feel like the hero's footer. */
.feature-strip {
    background: transparent;
    border-radius: 0;
}

/* The inner row is just a layout grid now — no border, no shadow, no rounded
   wrapper. Each tile is its own dark pill with visible gaps between them. */
.feature-strip-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.4vw, 20px);
    padding: clamp(10px, 1vw, var(--section-padding)) 0;
}
.feature-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface-inverse);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    letter-spacing: -0.005em;
}
.feature-tile-icon { font-size: 1.05rem; flex-shrink: 0; line-height: 1; }

/* ===== STORE CATEGORIES ===== */
.store-categories {
    padding-top: 24px;
    padding-bottom: 24px;
}
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
/* Category card: image → color tint → name */
.category-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 128px;
    padding: 18px 14px;
    text-decoration: none;
    text-align: center;
    border: 1px solid rgba(201, 134, 46, 0.18);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--coffee-900), var(--coffee-800));
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.12);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.category-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background-color: var(--coffee-800);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: transform 0.35s ease;
}

.category-card--has-image .category-card__image {
    background-color: var(--dark-900);
}

.category-card__tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Tint from `product_categories.color` via --category-tint on the card. */
.category-card--has-tint .category-card__tint {
    background-color: color-mix(in srgb, var(--category-tint) 15%, transparent);
}

/* No color set: light scrim so the name stays readable on photos. */
.category-card--has-image:not(.category-card--has-tint) .category-card__tint {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.22) 100%
    );
}

.category-card__name {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.category-card:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 134, 46, 0.35);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.25),
        0 16px 36px rgba(0, 0, 0, 0.18);
}

.category-card--has-image:hover .category-card__image {
    transform: scale(1.05);
}
@media (max-width: 1024px) {
    .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .store-categories {
        padding-top: 20px;
    }
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}
@media (max-width: 520px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
}
@media(max-width: 768px) {
    .feature-strip-inner { grid-template-columns: repeat(2, 1fr); }
    .feature-tile:nth-child(2) { border-right: none; }
    .feature-tile:nth-child(1),
    .feature-tile:nth-child(2) { border-bottom: 1px solid rgba(26,15,10,0.07); }
}
@media(max-width: 420px) {
    .feature-strip-inner { grid-template-columns: 1fr 1fr; }
}

/* ===== PAGE HEADER ===== */
.page-header {
    padding: clamp(10px, 1vw, 40px);
    background: white;
    border-bottom: 1px solid rgba(26, 15, 10, 0.07);
    text-align: center;
}
.page-header-eyebrow {
    display: inline-block;
    color: var(--caramel);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
}
.page-header-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 14px;
    line-height: 1.15;
}
.page-header-subtitle,
.page-header-excerpt {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.65;
}

.page-header-excerpt {
    margin-bottom: 0;
}

/* ===== CONTENT SECTIONS ===== */
.content-section {
    padding: clamp(10px, 2.5vw, var(--section-padding)) 0;
}
.content-section--light {
    /*background: var(--surface-subtle);*/
}
.content-section--white {
    /*background: var(--surface-panel);*/
}
.content-section--dark {
    background: var(--coffee-900);
    color: white;
}

/* ===== Homepage — Our Innovation ===== */
.store-our-innovation {
    background: transparent;
}

.store-our-innovation-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--surface-inverse, #0a0a0a);
    background-image: var(--store-our-innovation-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-md);
}

.store-our-innovation-layout {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: clamp(280px, 38vw, 480px);
    padding: clamp(24px, 4vw, 48px);
    padding-right: clamp(72px, 16vw, 240px);
}

.store-our-innovation-visual-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: min(100%, clamp(220px, 30vw, 360px));
}

.store-our-innovation-visual {
    width: 100%;
    margin: 0;
    overflow: visible;
    border: none;
    box-shadow: none;
    background: transparent;
}

.store-our-innovation-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.store-our-innovation-caption {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

.store-our-innovation-caption .btn,
.store-our-innovation-caption .btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.store-our-innovation-caption .btn-outline {
    background: #000;
    color: #fff;
    border-color: transparent;
    box-shadow: none;
}

.store-our-innovation-caption .btn-outline:hover,
.store-our-innovation-caption .btn-outline:focus-visible {
    background: #111;
    color: #fff;
    border-color: transparent;
}

.store-our-innovation-caption .btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.85;
}

@media (max-width: 900px) {
    .store-our-innovation-panel {
        background-image: var(--store-our-innovation-bg-mobile, var(--store-our-innovation-bg));
        /* Height fills the panel; higher % pulls the cup to the left of the crop. */
        background-size: auto 100%;
        background-position: 62% center;
    }

    .store-our-innovation-layout {
        align-items: flex-end;
        justify-content: flex-end;
        min-height: clamp(320px, 72vw, 440px);
        padding: clamp(20px, 4vw, 32px);
        padding-right: clamp(12px, 3vw, 20px);
        padding-bottom: clamp(20px, 5vw, 36px);
    }

    .store-our-innovation-visual-wrap {
        align-items: stretch;
        width: min(42%, 168px);
    }

    .store-our-innovation-caption {
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .store-our-innovation-panel {
        background-size: auto 100%;
        background-position: 65% center;
    }

    .store-our-innovation-visual-wrap {
        width: min(38%, 148px);
    }
}

/* ===== Homepage — Our Brands + blog pillar ===== */
.store-brands-pillars.content-section {
    position: relative;
    z-index: 2;
    padding-top: clamp(24px, 3.5vw, 40px);
    padding-bottom: clamp(28px, 3.5vw, 48px);
}

/* Match `.hero-banner-shell` width; sits in normal document flow below the hero. */
.store-brands-pillars-shell {
    width: 100%;
    max-width: var(--store-content-max-width);
    margin: 0 auto;
    padding: 0 var(--store-content-gutter);
}

.store-brands-pillars-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    gap: clamp(12px, 2vw, 20px);
    align-items: stretch;
}

.store-brands-pillars-inner--pillars-only {
    grid-template-columns: minmax(0, 1fr);
    width: 90%;
    max-width: 720px;
    margin-inline: auto;
}

.store-brands-pillars-brands {
    grid-column: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    margin-top: clamp(12px, 2vw, 24px);
}

.store-brands-pillars-title {
    /* margin: 0 0 clamp(18px, 3vw, 28px); */
    width: 100%;
    font-family: Georgia, 'Times New Roman', serif;
    /* font-size: clamp(1.65rem, 3.2vw, 2.35rem); */
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text-dark, #1a120e);
}

.store-brands-pillars-logos {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--brands-pillars-logo-cols, 3), minmax(0, 1fr));
    gap: clamp(12px, 2vw, 24px);
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    justify-items: center;
}

.store-brands-pillars-logo-item {
    margin: 0;
    padding: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-brands-pillars-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    text-decoration: none;
}

.store-brands-pillars-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: clamp(72px, 10vw, 132px);
    object-fit: contain;
}

.store-brands-pillars-cards {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    justify-self: center;
    align-self: stretch;
    min-width: 0;
    min-height: 100%;
    width: 90%;
    max-width: 90%;
    margin-inline: auto;
    padding-right: 0;
    box-sizing: border-box;
    margin-top: clamp(-88px, -8.5vw, -56px);
}

.store-pillar {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: var(--surface-panel, #fff);
    border: 1px solid rgba(44, 34, 29, 0.1);
    box-shadow:
        0 1px 4px rgba(15, 11, 9, 0.05),
        0 8px 20px rgba(15, 11, 9, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.store-pillar__main {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    overflow: hidden;
}

a.store-pillar:hover,
a.store-pillar:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(15, 11, 9, 0.07),
        0 12px 28px rgba(15, 11, 9, 0.09);
    outline: none;
}

.store-pillar__head {
    padding: 6px 10px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(26, 18, 14, 0.82);
    background: color-mix(in srgb, var(--caramel, #c9862e) 38%, #e8dfd2);
    border-bottom: 1px solid rgba(44, 34, 29, 0.08);
    flex-shrink: 0;
}

.store-pillar__main::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(15, 11, 9, 0.92) 0%,
        rgba(15, 11, 9, 0.62) 38%,
        rgba(15, 11, 9, 0.18) 68%,
        transparent 100%
    );
}

.store-pillar__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(145deg, var(--coffee-100, #efe6dc), var(--coffee-50, #f8f4ef));
}

.store-pillar__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-pillar__media--fallback {
    background:
        linear-gradient(145deg, rgba(201, 134, 46, 0.12), rgba(44, 34, 29, 0.04)),
        var(--coffee-50, #f8f4ef);
}

.store-pillar__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    margin-top: auto;
    padding: clamp(14px, 2.5vw, 20px) clamp(12px, 2vw, 16px);
    min-width: 0;
}

.store-pillar__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(0.78rem, 1.3vw, 0.9rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.store-pillar__text {
    margin: 0;
    flex: 0 1 auto;
    font-size: 0.74rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.store-pillar__more {
    align-self: flex-end;
    margin-top: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.store-pillar--empty .store-pillar__more {
    display: none;
}

@media (max-width: 900px) {
    .store-brands-pillars-inner,
    .store-brands-pillars-inner--pillars-only {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(14px, 3vw, 20px);
        max-width: none;
        align-items: start;
    }

    .store-brands-pillars-brands {
        grid-column: auto;
        align-items: center;
        text-align: center;
        margin-top: 0;
    }

    .store-brands-pillars-cards {
        grid-column: auto;
        justify-self: center;
        align-self: start;
        width: 90%;
        max-width: 90%;
        min-height: 0;
        height: auto;
        margin-inline: auto;
        padding-right: 0;
        margin-top: clamp(-40px, -5vw, -20px);
    }

    .store-pillar {
        flex: none;
        min-height: 0;
        height: auto;
    }

    .store-brands-pillars-logos {
        justify-items: center;
    }
}

@media (max-width: 768px) {
    .store-brands-pillars-logos {
        gap: clamp(10px, 2.5vw, 18px);
    }

    .store-brands-pillars-logo {
        max-height: clamp(56px, 12vw, 88px);
    }

    .store-brands-pillars-cards {
        display: none;
    }
}

@media (max-width: 520px) {
    .store-pillar__body {
        padding: 12px 12px 14px;
    }

    .store-pillar__title {
        font-size: 0.72rem;
    }

    .store-pillar__text {
        font-size: 0.7rem;
        line-height: 1.35;
        -webkit-line-clamp: 2;
    }
}

/* ===== Homepage — Partner logos ===== */
.store-partners-head.section-header {
    text-align: center;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.store-partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: clamp(16px, 3vw, 28px);
    align-items: center;
    justify-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.store-partners-item {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 220px;
}

.store-partners-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: clamp(14px, 3vw, 22px);
    border-radius: var(--radius-lg, 14px);
    border: 1px solid rgba(44, 34, 29, 0.08);
    background: var(--surface-subtle);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.2s ease;
}

.store-partners-card--link {
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.store-partners-card--link:hover,
.store-partners-card--link:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(162, 105, 36, 0.35);
    box-shadow: var(--shadow-sm);
    outline: none;
}

.store-partners-logo {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 48px;
    object-fit: contain;
    filter: grayscale(0.06);
}

@media (prefers-reduced-motion: reduce) {
    .store-partners-card--link:hover,
    .store-partners-card--link:focus-visible {
        transform: none;
        transition: none;
    }
}

/* ===== Homepage — Google Maps (factory embed + link to full Maps) ===== */
.store-location-map__frame-wrap {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    border: 1px solid rgba(44, 34, 29, 0.1);
    box-shadow: var(--shadow-sm);
    aspect-ratio: 16 / 9;
    max-height: min(52vh, 520px);
    background: var(--surface-subtle);
}

.store-location-map__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Embed + secondary “Open in Google Maps”; `factory_maps_link` setting. */
.store-location-map--map-only .store-location-map__frame-wrap {
    max-width: 100%;
    max-height: min(56vh, 560px);
}

.store-location-map__cta {
    display: flex;
    justify-content: center;
    margin: clamp(1rem, 2.8vw, 1.65rem) 0 0;
}

.store-location-map__open-map {
    min-width: 12rem;
}

/* ===== B2B PAGE (Supabase-like marketing: hero mesh + elevated form card) ===== */
.b2b-page {
    overflow-x: hidden;
}

.b2b-page > section {
    padding: 0;
    margin: 0;
}

/* Extra breathing room (hooked from b2b.php via `b2b-page--comfortable`) */
.b2b-page--comfortable {
    padding-bottom: clamp(40px, 8vw, 80px);
}

.b2b-page--comfortable .b2b-hero {
    padding-inline: clamp(16px, 5vw, 40px);
    margin-bottom: clamp(4px, 1.5vw, 12px);
}

.b2b-page--comfortable .b2b-perks {
    padding-inline: clamp(12px, 4vw, 32px);
    padding-block: clamp(40px, 7vw, 72px);
    margin-top: 0;
}

.b2b-page--comfortable .b2b-perks-header {
    margin-bottom: clamp(32px, 5vw, 48px);
}

.b2b-page--comfortable .b2b-perks-grid {
    gap: clamp(28px, 5vw, 48px);
}

.b2b-page--comfortable .b2b-split {
    gap: clamp(32px, 6vw, 64px);
}

.b2b-page--comfortable .b2b-aside {
    padding-inline: clamp(0px, 1vw, 8px);
}

.b2b-page--comfortable .b2b-form-shell {
    padding-inline: clamp(0px, 1vw, 8px);
}

.b2b-page--comfortable .b2b-form {
    gap: clamp(22px, 3vw, 28px);
}

@media (max-width: 960px) {
    .b2b-page--comfortable .b2b-aside {
        padding-bottom: clamp(20px, 5vw, 32px);
        margin-bottom: clamp(12px, 3vw, 24px);
    }

    .b2b-page--comfortable .b2b-form-shell {
        padding-top: clamp(4px, 1.5vw, 12px);
    }
}

/* Slightly more horizontal room than global .container on narrow screens */
.b2b-page .container {
    padding-left: max(clamp(20px, 5vw, 36px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(20px, 5vw, 36px), env(safe-area-inset-right, 0px));
}

.b2b-hero {
    position: relative;
    /* Notch + text offset below bar (navbar offset is on `.store-main`) */
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(40px, 8vw, 72px));
    padding-bottom: max(clamp(64px, 10vw, 96px), env(safe-area-inset-bottom, 0px));
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    background: linear-gradient(155deg, var(--coffee-900) 0%, var(--coffee-800) 45%, var(--coffee-700) 100%);
    overflow: hidden;
    text-align: center;
}

/* Default page header — carousel shell width + optional types strip */
.store-page-header-band.hero-banner-section {
    margin-bottom: 0;
}

.store-page-header-panel {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.hero-banner-shell:has(.hero-types-strip) .store-page-header-panel {
    border-radius: 0 0 10px 10px;
}

.hero-banner-shell:not(:has(.hero-types-strip)) .store-page-header-panel {
    border-radius: 10px;
}

.store-page-header-panel.b2b-hero,
.store-page-header.b2b-hero {
    padding: clamp(14px, 2.2vw, 28px) clamp(16px, 3vw, 32px);
    background-color: var(--coffee-900, #1a0f0a);
    background-image: url('/themes/supremedrops/assets/images/backgrounds/dark.png');
    background-size: cover;
    background-position: center;
    font-family: var(--font-sans);
}

.store-page-header-panel.store-page-header-panel--bg-image {
    background-color: #fff;
    background-image: var(--store-page-header-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark:not(.store-page-header-panel--bg-image) {
    background-color: #fff;
    background-image: none;
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .b2b-hero-title:not(.store-page-header-breadcrumb) {
    color: #111;
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .b2b-hero-accent {
    color: var(--coffee-800);
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .b2b-hero-lead,
.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .store-page-header-syrups-copy p {
    color: rgba(17, 17, 17, 0.82);
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .b2b-hero-badge {
    color: var(--coffee-800);
    background: rgba(26, 15, 10, 0.06);
    border-color: rgba(26, 15, 10, 0.14);
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .b2b-pill {
    color: var(--coffee-900);
    background: rgba(26, 15, 10, 0.06);
    border-color: rgba(26, 15, 10, 0.14);
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .store-page-header-breadcrumb__link {
    color: rgba(17, 17, 17, 0.62);
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .store-page-header-breadcrumb__link:hover {
    color: var(--coffee-800);
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .store-page-header-breadcrumb__current {
    color: #111;
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .store-page-header-breadcrumb__sep {
    color: rgba(17, 17, 17, 0.35);
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .store-page-header-syrups-top::before {
    background: rgba(26, 15, 10, 0.05);
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark .store-page-header-syrups-top .store-page-header-breadcrumb::after {
    background: rgba(17, 17, 17, 0.2);
}

.store-page-header-panel.b2b-hero.store-page-header-panel--text-dark.store-page-header-panel--type-bg {
    background-color: #fff;
    background-image: none;
    min-height: 0;
}

.store-page-header-panel.b2b-hero .b2b-hero-badge {
    margin-bottom: clamp(12px, 2vw, 18px);
}

.store-page-header-inner.b2b-hero-inner {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: clamp(4px, 1vw, 10px) 0;
}

.store-page-header-panel.b2b-hero .b2b-hero-title:not(.store-page-header-breadcrumb) {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.12;
    margin-bottom: 10px;
}

.store-page-header-panel.b2b-hero .b2b-hero-lead,
.store-page-header-panel.b2b-hero .b2b-pill {
    font-family: var(--font-sans);
}

.store-page-header-panel.b2b-hero .b2b-hero-pills {
    margin-top: 4px;
    gap: 8px;
}

.store-page-header-breadcrumb.b2b-hero-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.4rem;
    font-size: clamp(0.92rem, 1.9vw, 1.15rem);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 10px;
}

.store-page-header-breadcrumb__link {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.15s ease;
}

.store-page-header-breadcrumb__link:hover {
    color: var(--caramel-light);
}

.store-page-header-breadcrumb__current {
    color: #fff;
}

.store-page-header-breadcrumb__sep {
    color: rgba(255, 255, 255, 0.38);
    font-weight: 400;
    user-select: none;
}

.store-page-header-panel.b2b-hero .b2b-hero-lead {
    max-width: none;
    width: 100%;
    margin: 0 0 10px;
}

.store-page-header-copy,
.store-page-header-syrups-copy {
    width: 100%;
    margin: 6px auto 0;
    text-align: left;
}

.store-page-header-panel.b2b-hero .b2b-hero-lead,
.store-page-header-syrups-copy p {
    font-family: var(--font-sans);
    font-size: clamp(0.875rem, 1.5vw, 0.98rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.84);
}

.store-page-header-syrups-copy p {
    width: 100%;
    max-width: none;
    margin: 0 0 10px;
}

/* Product type listing header — copy on left, type image as panel background */
.store-page-header-band--syrups-split .store-page-header-panel.b2b-hero {
    text-align: left;
}

.store-page-header-panel--syrups-split.store-page-header-panel--type-bg {
    background-color: var(--coffee-900, #1a0f0a);
    background-image: var(--store-page-header-type-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: clamp(200px, 28vw, 320px);
}

.store-page-header-syrups-split {
    display: block;
    width: 100%;
}

.store-page-header-syrups-main {
    max-width: min(80%, 52rem);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.store-page-header-syrups-split--no-visual .store-page-header-syrups-main {
    max-width: min(80%, 52rem);
}

.store-page-header-syrups-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
    margin-bottom: 10px;
    padding: clamp(10px, 1.5vw, 16px) clamp(12px, 2vw, 20px);
    border-radius: 8px;
    overflow: hidden;
    isolation: isolate;
}

.store-page-header-syrups-top::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 0;
}

.store-page-header-syrups-top > * {
    position: relative;
    z-index: 1;
}

.store-page-header-syrups-logo {
    display: block;
    height: clamp(44px, 7vw, 64px);
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.store-page-header-syrups-top .store-page-header-breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    margin-bottom: 0;
    font-size: clamp(0.85rem, 1.6vw, 1.05rem);
}

.store-page-header-syrups-top .store-page-header-breadcrumb::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    margin-left: clamp(10px, 1.8vw, 18px);
    min-width: 1.5rem;
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 900px) {
    .store-page-header-syrups-main,
    .store-page-header-syrups-split--no-visual .store-page-header-syrups-main {
        max-width: 100%;
    }

    .store-page-header-syrups-top {
        flex-wrap: wrap;
    }

    .store-page-header-syrups-top .store-page-header-breadcrumb {
        flex-wrap: wrap;
        width: 100%;
    }

    .store-page-header-syrups-top .store-page-header-breadcrumb::after {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 8px;
    }
}

.store-page-header-panel .b2b-hero-mesh {
    display: none;
}

.store-page-header-image-panel {
    position: relative;
    width: 100%;
    height: clamp(280px, 42vw, 420px);
    overflow: hidden;
    border-radius: 10px;
    background: var(--coffee-800);
}

.hero-banner-shell:has(.hero-types-strip) .store-page-header-image-panel {
    border-radius: 0 0 10px 10px;
}

.hero-banner-shell:not(:has(.hero-types-strip)) .store-page-header-image-panel {
    border-radius: 10px;
}

/* Mobile: types strip is hidden — full-bleed, square corners. */
@media (max-width: 768px) {
    .hero-banner-shell:has(.hero-types-strip) .hero-banner-stack,
    .hero-banner-shell--with-types .hero-banner-stack,
    .hero-banner-shell:has(.hero-types-strip) .hero-banner-track,
    .hero-banner-shell--with-types .hero-banner-track,
    .hero-banner-shell:has(.hero-types-strip) .store-page-header-panel,
    .hero-banner-shell--with-types .store-page-header-panel,
    .hero-banner-shell:has(.hero-types-strip) .store-page-header-image-panel,
    .hero-banner-shell--with-types .store-page-header-image-panel,
    .hero-banner-shell:not(:has(.hero-types-strip)) .hero-banner-track,
    .hero-banner-shell:not(:has(.hero-types-strip)) .store-page-header-panel,
    .hero-banner-shell:not(:has(.hero-types-strip)) .store-page-header-image-panel {
        border-radius: 0;
    }
}

.store-page-header-image-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.store-page-header-image-panel::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent, rgba(26, 15, 10, 0.45));
    pointer-events: none;
}

.store-page-header-image-panel--fallback img {
    opacity: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.article-header--after-page-image {
    padding-top: clamp(40px, 6vw, 56px);
}

.b2b-hero-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 20%, rgba(162, 105, 36, 0.22) 0%, transparent 42%),
        radial-gradient(circle at 88% 72%, rgba(162, 105, 36, 0.12) 0%, transparent 48%),
        radial-gradient(circle at 72% 8%, rgba(255, 255, 255, 0.07) 0%, transparent 36%),
        linear-gradient(180deg, rgba(8, 6, 5, 0.45) 0%, transparent 55%);
}

.b2b-hero-inner {
    padding: clamp(10px, 1vw, var(--section-padding)) 0;
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.b2b-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    padding: 7px 14px 7px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    margin-bottom: 22px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.b2b-hero-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--caramel-light);
    box-shadow: 0 0 12px rgba(162, 105, 36, 0.75);
}

.b2b-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.5vw, 3.4rem);
    font-weight: 800;
    color: white;
    line-height: 1.06;
    letter-spacing: -0.035em;
    margin-bottom: 18px;
}

.b2b-hero-accent {
    color: var(--caramel-light);
}

.b2b-hero-lead {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    max-width: 560px;
    margin: 0 auto 28px;
}

.store-page-header-syrups-copy p:last-child {
    margin-bottom: 0;
}

.b2b-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.b2b-pill {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Beat `.b2b-page > section { padding/margin: 0 }` so spacing after the page header sticks. */
.b2b-page .b2b-main {
    padding: clamp(24px, 5vw, 48px) 0 max(clamp(56px, 9vw, var(--section-padding)), env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    position: relative;
    z-index: 2;
}

.b2b-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 580px);
    gap: clamp(28px, 5vw, 56px);
    align-items: start;
}

@media (max-width: 960px) {
    .b2b-split {
        grid-template-columns: 1fr;
        gap: clamp(24px, 5vw, 36px);
    }
    .b2b-page .b2b-main {
        padding-top: clamp(24px, 5vw, 40px);
    }
}

.b2b-aside {
    padding-top: 12px;
}

.b2b-aside-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--coffee-900);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.b2b-aside-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 22px;
    max-width: 420px;
}

.b2b-checklist {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 440px;
}

.b2b-checklist li {
    position: relative;
    padding-left: 28px;
    font-size: 0.9rem;
    color: var(--text-medium);
    line-height: 1.5;
}

.b2b-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--caramel) 16%, var(--surface-panel));
    border: 1px solid color-mix(in srgb, var(--caramel) 35%, var(--border-subtle));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a26924' stroke-width='2.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center;
}

.b2b-aside-contact {
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
    max-width: 380px;
}

.b2b-aside-contact-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.b2b-aside-contact-link {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--caramel-dark);
}

.b2b-aside-contact-link:hover {
    color: var(--caramel);
}

.b2b-form-shell {
    min-width: 0;
}

.b2b-alert {
    margin-bottom: 16px;
}

.b2b-alert[hidden] {
    display: none !important;
}

.b2b-form-card {
    background: var(--surface-panel);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xl);
    padding: clamp(10px, 1vw, 40px);
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.b2b-form-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--caramel) 22%, var(--border-medium));
}

.b2b-form,
.contact-message-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.b2b-form-triple {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
}

@media (max-width: 700px) {
    .b2b-form-triple {
        grid-template-columns: 1fr;
    }
}

.b2b-submit {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 1rem;
}

.b2b-perks {
    padding: clamp(48px, 8vw, 88px) 0 max(clamp(56px, 10vw, 96px), env(safe-area-inset-bottom, 0px));
    background: transparent;
    border: none;
}

.b2b-perks-header {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto clamp(36px, 5vw, 52px);
}

.b2b-perks-title {
    margin-bottom: 12px;
}

.b2b-perks-sub {
    margin: 0 auto;
    max-width: 36rem;
}

.b2b-perks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 5vw, 48px);
    align-items: start;
}

@media (max-width: 900px) {
    .b2b-perks-grid {
        grid-template-columns: 1fr;
        max-width: 28rem;
        margin-inline: auto;
        gap: clamp(28px, 6vw, 36px);
    }
}

.b2b-perk {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(24px, 3.5vw, 32px);
    background: var(--surface-panel, #fff);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.04));
}

.b2b-perk-title {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    font-weight: 700;
    color: var(--ink-900);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.b2b-perk-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
    max-width: none;
}

/* ===== Contact page (/contact) ===== */
.contact-page {
    background: transparent;
}

.contact-hero {
    padding: clamp(40px, 8vw, 72px) 0 clamp(28px, 5vw, 48px);
    background: linear-gradient(165deg, var(--coffee-900) 0%, var(--coffee-800) 55%, color-mix(in srgb, var(--caramel-dark) 25%, var(--coffee-800)) 100%);
    color: var(--coffee-50);
}

.contact-hero-inner {
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
}

.contact-hero-kicker {
    display: inline-block;
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.88;
}

.contact-hero-title {
    margin: 0 0 12px;
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(2rem, 5vw, 2.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.contact-hero-lead {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.65;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.92;
}

.contact-main-section {
    padding: clamp(40px, 6vw, 64px) 0 clamp(64px, 10vw, 96px);
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.35fr);
    gap: clamp(24px, 4vw, 40px);
    align-items: start;
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

.contact-company-card {
    background: var(--surface-panel);
    border: 1px solid rgba(44, 34, 29, 0.1);
    border-radius: var(--radius-xl, 18px);
    padding: clamp(22px, 4vw, 28px);
    box-shadow: var(--shadow-xs);
}

.contact-company-heading {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--coffee-900);
    font-family: var(--font-display);
}

.contact-company-note {
    margin: 0 0 20px;
    font-size: 0.82rem;
    color: var(--coffee-700);
    line-height: 1.5;
}

.contact-code-inline {
    font-size: 0.78em;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--surface-subtle);
}

.contact-detail-list {
    margin: 0 0 20px;
}

.contact-detail {
    margin-bottom: 16px;
}

.contact-detail:last-child {
    margin-bottom: 0;
}

.contact-detail dt {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--coffee-700);
    margin-bottom: 4px;
}

.contact-detail dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--coffee-darkest, #2c221d);
}

.contact-link {
    color: var(--coffee-900);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-link:hover,
.contact-link:focus-visible {
    color: var(--caramel-dark, #a06924);
}

.contact-phone-placeholder {
    color: var(--coffee-darkest, #2c221d);
}

.contact-mailto-quick {
    width: 100%;
    justify-content: center;
    text-decoration: none;
}

.contact-form-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-alert.alert {
    border-radius: var(--radius-md);
}

.contact-alert[hidden] {
    display: none !important;
}

.contact-form-card .contact-form-heading {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--coffee-900);
}

.contact-textarea.store-input {
    min-height: 160px;
    resize: vertical;
    line-height: 1.5;
}

.contact-submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

.contact-success-card {
    background: var(--surface-panel);
    border: 1px solid rgba(44, 34, 29, 0.1);
    border-radius: var(--radius-xl, 18px);
    padding: clamp(24px, 4vw, 32px);
    box-shadow: var(--shadow-sm);
}

.contact-success-title {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--coffee-900);
    font-family: var(--font-display);
}

.contact-success-text {
    margin: 0 0 22px;
    color: var(--coffee-700);
    line-height: 1.6;
}

.contact-success-actions .btn-primary {
    text-decoration: none;
    justify-content: center;
    width: 100%;
    max-width: 320px;
}

.contact-noscript {
    margin: 12px 0 0;
    font-size: 0.9rem;
    color: var(--coffee-700);
}

/* B2B success — one-off modal after form submit (appended to body) */
body.b2b-success-modal-open {
    overflow: hidden;
}

/* Keep navbar from receiving hover/focus while the modal is open */
body.b2b-success-modal-open .navbar,
body.b2b-success-modal-open .mobile-nav,
body.b2b-success-modal-open .nav-dropdown {
    pointer-events: none;
}

.b2b-success-modal {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 32px);
}

.b2b-success-modal[hidden] {
    display: none;
}

.b2b-success-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 7, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.b2b-success-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    text-align: center;
    padding: clamp(28px, 5vw, 40px) clamp(24px, 4vw, 36px);
    border-radius: var(--radius-xl);
    background: var(--surface-panel, #fff);
    border: 1px solid var(--border-medium, rgba(26, 15, 10, 0.1));
    box-shadow: 0 24px 60px rgba(10, 10, 10, 0.18);
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.35s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.b2b-success-modal.is-visible .b2b-success-modal__backdrop {
    opacity: 1;
}

.b2b-success-modal.is-visible .b2b-success-modal__panel {
    opacity: 1;
    transform: translateY(0);
}

.b2b-success-modal.is-closing .b2b-success-modal__backdrop {
    opacity: 0;
}

.b2b-success-modal.is-closing .b2b-success-modal__panel {
    opacity: 0;
    transform: translateY(12px);
}

.b2b-success-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary, #5c4338);
    cursor: pointer;
}

.b2b-success-modal__close:hover,
.b2b-success-modal__close:focus-visible {
    background: var(--surface-subtle, #f5f4f0);
    color: var(--coffee-900, #1a0f0a);
    outline: none;
}

.b2b-success-modal__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg, 12px);
    background: color-mix(in srgb, var(--caramel, #c4922a) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--caramel, #c4922a) 28%, transparent);
    color: var(--caramel-dark, #9a6808);
}

.b2b-success-modal__title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--coffee-900, #1a0f0a);
    letter-spacing: -0.03em;
    margin: 0 0 10px;
}

.b2b-success-modal__text {
    font-size: 0.95rem;
    color: var(--text-secondary, #5c4338);
    line-height: 1.65;
    margin: 0 0 24px;
}

.b2b-success-modal__cta {
    width: 100%;
    justify-content: center;
}

/* ===== STORE DOWNLOADS (catalog media) — compact ===== */
.downloads-page {
    background: transparent;
}

.downloads-main {
    padding-bottom: clamp(28px, 5vw, 48px);
    background: transparent;
}

.downloads-block {
    margin-bottom: clamp(22px, 4vw, 38px);
}

.downloads-block:last-child {
    margin-bottom: 0;
}

.downloads-catalog-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 20px;
}

.downloads-catalog-heading {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}

.downloads-catalog-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin: 0;
}

.downloads-catalog-stats dt {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.downloads-catalog-stats dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--coffee-900);
    line-height: 1;
}

.downloads-empty {
    text-align: center;
    padding: clamp(28px, 8vw, 48px) 12px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-medium);
    background: var(--surface-elevated);
}

.downloads-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.downloads-empty-text {
    margin-top: 8px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.downloads-folder {
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-panel);
    box-shadow: var(--shadow-xs);
}

.downloads-folder-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    min-height: 0;
}

.downloads-folder-summary::-webkit-details-marker {
    display: none;
}

.downloads-folder-path {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.downloads-folder-badges {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.downloads-product-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.downloads-folder .downloads-product-slug.mono,
.downloads-product-slug.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    color: var(--text-muted);
    word-break: break-all;
}

@media (min-width: 520px) {
    .downloads-product-slug.mono {
        max-width: 42%;
    }
}

.downloads-folder-count {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--coffee-50);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.downloads-status {
    font-size: 0.59375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    padding: 2px 6px;
}

.downloads-status--on {
    color: var(--success);
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.downloads-status--off {
    color: var(--text-muted);
    background: var(--coffee-50);
    border: 1px solid var(--border-subtle);
}

.downloads-folder[open] > .downloads-folder-summary {
    border-bottom: 1px solid var(--border-subtle);
}

.downloads-product-body {
    padding: 8px 10px 10px;
}

.downloads-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.downloads-product-store-link {
    font-weight: 700;
    color: var(--caramel-dark);
    font-size: 0.75rem;
}

.downloads-product-store-link:hover {
    color: var(--caramel);
}

.downloads-product-noimg {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

.downloads-img-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 8px;
}

.downloads-img-cell {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--coffee-50);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.downloads-img-thumb-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    background: #fff;
    border-bottom: 1px solid var(--border-subtle);
}

.downloads-img-thumb {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.downloads-img-actions {
    padding: 6px 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.downloads-img-link.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.59375rem;
    line-height: 1.3;
    color: var(--text-medium);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.downloads-action-btn {
    font-size: 0.6875rem;
    padding: 4px 9px;
    flex-shrink: 0;
}

/* Taxonomy rows (categories & types): one image per tile, grid layout */
.downloads-tax-grid-shell {
    margin-top: 0;
}

.downloads-tax-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
    gap: 10px;
}

.downloads-tax-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.downloads-tax-thumb {
    background: var(--coffee-50);
    border-bottom: 1px solid var(--border-subtle);
}

.downloads-tax-thumb-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    max-height: 120px;
    padding: 6px;
    background: #fff;
}

.downloads-tax-thumb-link img {
    max-width: 100%;
    max-height: 108px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.downloads-tax-thumb-placeholder {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink-300);
    background: var(--coffee-50);
}

.downloads-tax-thumb-empty {
    margin: 0;
    padding: 8px 10px 10px;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.downloads-tax-body {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.downloads-tax-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}

.downloads-tax-slug {
    margin: 0;
    font-size: 0.6875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text-muted);
    word-break: break-all;
}

.downloads-tax-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 0.6875rem;
}

.downloads-tax-meta-bit {
    color: var(--text-muted);
}

.downloads-tax-store {
    margin-left: auto;
    font-size: 0.6875rem !important;
}

.downloads-tax-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.downloads-tax-more {
    margin: 0;
    font-size: 0.6875rem;
}

.downloads-tax-more summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--caramel-dark);
    list-style: none;
}

.downloads-tax-more summary::-webkit-details-marker {
    display: none;
}

.downloads-tax-more-list {
    margin: 8px 0 0;
    padding-left: 1rem;
    font-size: 0.625rem;
}

.downloads-tax-more-list li {
    margin-bottom: 4px;
    word-break: break-all;
}

.downloads-bucket-doc {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--coffee-100), var(--coffee-50));
    border-bottom: 1px solid var(--border-subtle);
}

.downloads-bucket-ext {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.downloads-page .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}

/* ===== POST GRID & CARDS (blog + recipes) ===== */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
@media(max-width: 700px) {
    .post-grid { grid-template-columns: 1fr; }
}
.post-card {
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(26, 15, 10, 0.08);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.post-card-img {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--coffee-50);
    display: block;
    text-decoration: none;
    color: inherit;
}
.post-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.post-card:hover .post-card-img img {
    transform: scale(1.06);
}
.post-card-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.post-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.post-card-dot { color: var(--coffee-200); }
.post-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--coffee-50);
    color: var(--coffee-700);
}
.post-card-tag--featured {
    background: #f0e4c8;
    color: #d97706;
}
.post-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.4;
}
.post-card-title-link {
    color: inherit;
    text-decoration: none;
}
.post-card-title-link:hover,
.post-card-title-link:focus-visible {
    color: var(--coffee-800, var(--text-dark));
    text-decoration: underline;
    text-underline-offset: 3px;
}
.post-card-excerpt {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 16px;
    flex: 1;
}
.post-card-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 0.8rem;
    color: var(--text-light);
}
.post-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(26, 15, 10, 0.06);
    margin-top: auto;
}
.post-card-link {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--caramel);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.2s, color 0.2s;
}
.post-card-link:hover {
    gap: 9px;
    color: var(--coffee-700);
}
.post-card-link svg { flex-shrink: 0; }

.post-card--recipe-hit {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    color: inherit;
    text-decoration: none;
}
.post-card--recipe .post-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.post-card--recipe .post-card-meta:empty {
    display: none;
}
.post-card--recipe .post-card-steps {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.post-card-read-arrow {
    display: none;
}

/* Recipes listing — image overlay cards (all breakpoints) */
.post-grid[data-recipes-grid] {
    grid-template-columns: 1fr;
    gap: 16px;
}

.post-card--recipe {
    position: relative;
    min-height: min(72vw, 420px);
    border: none;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.post-card--recipe[hidden],
.post-card--recipe.is-search-hidden,
.post-grid[data-recipes-grid] [data-recipe-card][hidden],
.post-grid[data-recipes-grid] [data-recipe-card].is-search-hidden {
    display: none !important;
}

.post-card--recipe:hover {
    transform: none;
    box-shadow: var(--shadow-md);
}

.post-card--recipe .post-card--recipe-hit {
    position: relative;
    min-height: inherit;
    height: 100%;
    display: block;
}

.post-card--recipe .post-card-img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    height: 100%;
    z-index: 0;
}

.post-card--recipe .post-card-img img {
    transform: none;
    transition: transform 0.55s ease;
}

.post-card--recipe:hover .post-card-img img {
    transform: scale(1.04);
}

.post-card--recipe .post-card-body {
    position: relative;
    z-index: 1;
    min-height: inherit;
    height: 100%;
    box-sizing: border-box;
    justify-content: flex-end;
    padding: 28px 20px 22px;
    background: linear-gradient(
        to top,
        rgba(10, 10, 10, 0.58) 0%,
        rgba(10, 10, 10, 0.28) 42%,
        rgba(10, 10, 10, 0.08) 72%,
        rgba(10, 10, 10, 0.02) 100%
    );
}

.post-card--recipe-no-cover .post-card-body {
    background:
        linear-gradient(
            to top,
            rgba(10, 10, 10, 0.55) 0%,
            rgba(10, 10, 10, 0.2) 55%,
            transparent 100%
        ),
        linear-gradient(145deg, var(--coffee-800), var(--coffee-600));
}

.post-card--recipe .post-card-meta,
.post-card--recipe .post-card-stats,
.post-card--recipe .post-card-tags,
.post-card--recipe .post-card-footer {
    display: none;
}

.post-card--recipe .post-card-title {
    color: #fff;
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    margin-bottom: 8px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.post-card--recipe .post-card-excerpt {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 0;
    flex: 0 1 auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

.post-card--recipe .post-card-read-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 44px;
    height: 44px;
    margin-top: 18px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.post-card--recipe .post-card-read-arrow svg {
    display: block;
    animation: storeRecipeReadArrow 1.8s ease-in-out infinite;
}

/* Desktop — mosaic (equal columns, varied heights — no holes) */
@media (min-width: 769px) {
    .post-grid[data-recipes-grid] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 48px;
        grid-auto-flow: dense;
        gap: 16px;
        align-items: stretch;
    }

    .post-card--recipe {
        min-height: 0;
        height: 100%;
        width: 100%;
        grid-column: span 1;
        grid-row: span 7; /* ~336px + gaps */
        border-radius: 16px;
    }

    .post-card--recipe .post-card--recipe-hit,
    .post-card--recipe .post-card-body {
        min-height: 0;
    }

    .post-card--recipe .post-card-body {
        padding: clamp(20px, 2vw, 28px);
    }

    .post-card--recipe .post-card-excerpt {
        -webkit-line-clamp: 2;
    }

    /* Height rhythm only — keeps every column filled with no empty cells */
    .post-card--recipe:nth-child(6n + 1) {
        grid-row: span 9; /* tall */
    }
    .post-card--recipe:nth-child(6n + 2) {
        grid-row: span 6; /* short */
    }
    .post-card--recipe:nth-child(6n + 3) {
        grid-row: span 8;
    }
    .post-card--recipe:nth-child(6n + 4) {
        grid-row: span 6;
    }
    .post-card--recipe:nth-child(6n + 5) {
        grid-row: span 9;
    }
    .post-card--recipe:nth-child(6n + 6) {
        grid-row: span 7;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .post-grid[data-recipes-grid] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 52px;
    }

    .post-card--recipe,
    .post-card--recipe:nth-child(n) {
        grid-column: span 1;
        grid-row: span 7;
    }

    .post-card--recipe:nth-child(4n + 1) {
        grid-row: span 9;
    }
    .post-card--recipe:nth-child(4n + 2) {
        grid-row: span 6;
    }
    .post-card--recipe:nth-child(4n + 3) {
        grid-row: span 8;
    }
    .post-card--recipe:nth-child(4n + 4) {
        grid-row: span 7;
    }
}

.post-card--recipe.is-mosaic-flush {
    z-index: 1;
}

@keyframes storeRecipeReadArrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .post-card--recipe .post-card-read-arrow svg {
        animation: none;
    }

    .post-card--recipe:hover .post-card-img img {
        transform: none;
    }
}

/* Homepage blog promos — horizontal carousel on mobile (2+ posts only) */
@media (max-width: 768px) {
    .blog-promos .post-grid--carousel {
        display: grid;
        grid-template-columns: unset;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 2px;
        padding: 4px 2px 10px;
        scrollbar-width: thin;
        scrollbar-color: var(--border-medium) transparent;
        -webkit-overflow-scrolling: touch;
    }

    .blog-promos .post-grid--carousel .post-card {
        scroll-snap-align: start;
        min-width: 0;
        height: 100%;
    }

    .blog-promos .post-grid--carousel::-webkit-scrollbar {
        height: 8px;
    }

    .blog-promos .post-grid--carousel::-webkit-scrollbar-thumb {
        background: var(--border-medium);
        border-radius: 999px;
    }

    .blog-promos .post-grid--carousel::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* ===== TAG PILLS ===== */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--coffee-50);
    color: var(--coffee-700);
}
.tag-products { background: #dbeafe; color: #1e40af; }
.tag-recipes  { background: #d1fae5; color: #065f46; }
.tag-guides   { background: #f0e4c8; color: #d97706; }

/* ===== CTA BOX ===== */
.cta-box {
    background: white;
    border-radius: 20px;
    padding: 48px 40px;
    border: 1px solid rgba(26, 15, 10, 0.08);
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.cta-box-emoji {
    font-size: 3rem;
    margin-bottom: 16px;
    display: block;
}
.cta-box-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}
.cta-box-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.store-recipes-subscribe-cta {
    width: 100%;
    margin-top: clamp(32px, 5vw, 48px);
}

.store-recipes-filters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin: 0 0 28px;
    max-width: 720px;
}

.store-recipes-cats {
    display: block;
    text-align: left;
    line-height: 1.7;
    font-size: 0.95rem;
}

.store-recipes-cat {
    display: inline;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transition: color 0.15s ease;
}

.store-recipes-cat:hover,
.store-recipes-cat:focus-visible {
    color: var(--text-dark);
    background: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.store-recipes-cat.is-active {
    color: var(--text-dark);
    font-weight: 700;
    background: none;
    box-shadow: none;
}

.store-recipes-cat-sep {
    display: inline;
    padding: 0 8px;
    color: var(--ink-300);
    font-weight: 400;
    user-select: none;
}

.store-recipes-search-label {
    position: relative;
    display: block;
    width: 100%;
}

.store-recipes-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    display: inline-flex;
    line-height: 0;
}

.store-recipes-search {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px 12px 42px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-white);
    color: var(--text-dark);
    font-size: 0.95rem;
    font-family: inherit;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.store-recipes-search::placeholder {
    color: var(--text-muted);
}

.store-recipes-search:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-medium));
    box-shadow: var(--ring-focus);
}

.store-recipes-search-status {
    margin: 0;
    min-height: 1.25em;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.store-recipes-search-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-muted);
}

.store-recipes-search-empty p {
    margin: 0;
    font-size: 0.98rem;
}

.store-recipes-empty {
    margin-top: 8px;
}

@media (max-width: 640px) {
    .store-recipes-cats {
        text-align: left;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .store-recipes-cats::-webkit-scrollbar {
        display: none;
    }
}

/* ===== SIDEBAR WIDGETS ===== */
.sidebar-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.sidebar-widget {
    background: white;
    border-radius: 16px;
    padding: 28px 32px;
    border: 1px solid rgba(26, 15, 10, 0.08);
    text-align: center;
    flex: 1;
    min-width: 220px;
    max-width: 320px;
}
.sidebar-widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.sidebar-widget-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.6;
}

/* ===== BLOG ARTICLE TYPOGRAPHY ===== */
.blog-content {
    line-height: 1.85;
    font-size: 1.05rem;
    color: var(--text-dark);
}
.blog-content h1 { font-size: 2rem; margin: 36px 0 18px; font-weight: 800; color: var(--text-dark); }
.blog-content h2 { font-size: 1.6rem; margin: 32px 0 16px; font-weight: 700; color: var(--text-dark); padding-bottom: 10px; border-bottom: 2px solid var(--cream); }
.blog-content h3 { font-size: 1.25rem; margin: 24px 0 12px; font-weight: 700; color: var(--text-dark); }
.blog-content p { margin-bottom: 20px; }
.blog-content ul, .blog-content ol { margin-bottom: 20px; padding-left: 26px; }
.blog-content li { margin-bottom: 8px; }
.blog-content blockquote {
    border-left: 3px solid var(--caramel);
    padding: 18px 24px;
    margin: 28px 0;
    color: var(--text-light);
    font-style: italic;
    background: var(--cream);
    border-radius: 0 10px 10px 0;
    font-size: 1.05rem;
}
.blog-content a { color: var(--caramel); font-weight: 600; }
.blog-content a:hover { text-decoration: underline; color: var(--coffee-700); }
.blog-content code {
    background: var(--coffee-50);
    padding: 2px 8px;
    border-radius: 5px;
    font-family: var(--font-family-primary);
    font-size: 0.88em;
    color: var(--coffee-700);
}
.blog-content pre {
    background: var(--coffee-darkest);
    color: var(--coffee-100);
    padding: 24px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 28px 0;
    font-size: 0.9rem;
}
.blog-content pre code { background: transparent; padding: 0; color: inherit; }
.blog-content img { max-width: 100%; border-radius: 12px; margin: 28px 0; display: block; }
.blog-content hr { border: none; border-top: 2px solid var(--cream); margin: 36px 0; }
.blog-content strong { color: var(--text-dark); font-weight: 700; }
.blog-content em { font-style: italic; }

/* ===== ARTICLE COVER IMAGE ===== */
.article-cover {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: var(--coffee-800);
    padding-top: 0;
}
.article-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.article-cover::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent, rgba(26,15,10,0.55));
    pointer-events: none;
}
@media(max-width: 640px) {
    .article-cover { height: 280px; }
}

/* ===== ARTICLE LAYOUT ===== */
.article-header {
    padding: 80px 0 56px;
    background: transparent;
    border-bottom: 1px solid rgba(26, 15, 10, 0.08);
}
.article-container {
    max-width: var(--store-panel-shell-max-width);
    margin: 0 auto;
    padding-inline: var(--store-panel-shell-padding-left) var(--store-panel-shell-padding-right);
}
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.article-title {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.15;
}
.article-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.article-byline-dot { color: var(--coffee-200); }
.article-excerpt {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.7;
    font-style: italic;
    padding: 20px 24px;
    background: var(--bg-secondary);
    border-left: 3px solid var(--caramel);
    border-radius: 0 10px 10px 0;
}
.article-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: #f0e4c8;
    color: #d97706;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.article-body {
    padding: 64px 0 80px;
    background: transparent;
}
.article-card {
    background: white;
    border-radius: 20px;
    border: 1px solid rgba(26, 15, 10, 0.08);
    padding: 56px;
    box-shadow: var(--shadow-sm);
}
.article-back {
    margin-top: 48px;
    text-align: center;
}

/* ===== RECIPE DETAIL PAGE ===== */
.store-recipe-page {
    --store-recipe-radius: 16px;
    font-family: var(--font-sans);
}

.store-recipe-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 32px);
}

.store-recipe-hero {
    padding: clamp(40px, 6vw, 64px) 0 clamp(28px, 4vw, 40px);
    border-bottom: 1px solid rgba(26, 15, 10, 0.08);
}

.store-recipe-hero--after-image {
    padding-top: clamp(32px, 5vw, 48px);
}

.store-recipe-title {
    margin-bottom: 16px;
}

.store-recipe-lead {
    margin-bottom: 20px;
}

.store-recipe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.store-recipe-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid rgba(26, 15, 10, 0.08);
}

.store-recipe-difficulty--easy {
    color: #166534;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.store-recipe-difficulty--medium {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.store-recipe-difficulty--hard {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.store-recipe-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.store-recipe-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(26, 15, 10, 0.08);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.store-recipe-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.store-recipe-stat--accent {
    background: linear-gradient(145deg, var(--coffee-900) 0%, var(--coffee-800) 100%);
    border-color: transparent;
    color: #fff;
}

.store-recipe-stat--accent .store-recipe-stat-val,
.store-recipe-stat--accent .store-recipe-stat-lbl,
.store-recipe-stat--accent .store-recipe-stat-icon {
    color: #fff;
}

.store-recipe-stat-icon {
    color: var(--caramel);
    margin-bottom: 2px;
}

.store-recipe-stat-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.1;
}

.store-recipe-stat-lbl {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-align: center;
}

.store-recipe-body {
    padding: clamp(32px, 5vw, 56px) 0 clamp(64px, 8vw, 96px);
}

.store-recipe-grid {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: clamp(20px, 3vw, 32px);
    align-items: start;
}

.store-recipe-sidebar {
    position: sticky;
    top: calc(var(--store-nav-height, 72px) + 16px);
}

.store-recipe-card {
    background: #fff;
    border: 1px solid rgba(26, 15, 10, 0.08);
    border-radius: var(--store-recipe-radius);
    box-shadow: var(--shadow-sm);
    padding: clamp(20px, 3vw, 28px);
}

.store-recipe-card--ingredients {
    background-color: var(--coffee-900, #1a0f0a);
    background-image: url('/themes/supremedrops/assets/images/backgrounds/dark.png');
    background-size: cover;
    background-position: center;
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
}

.store-recipe-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.store-recipe-card-head--steps {
    align-items: center;
}

.store-recipe-card-title,
.recipe-section-title {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
    border: 0;
    color: inherit;
}

.store-recipe-card--steps .store-recipe-card-title {
    color: var(--text-dark);
}

.store-recipe-servings {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.store-recipe-servings-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
}

.store-recipe-servings-control {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 2px;
}

.store-recipe-servings-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.store-recipe-servings-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}

.store-recipe-servings-out {
    min-width: 2ch;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.store-recipe-ingredient-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.store-recipe-ingredient {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 10px;
    margin: 0 -10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.store-recipe-ingredient:last-child {
    border-bottom: 0;
}

.store-recipe-ingredient:hover {
    background: rgba(255, 255, 255, 0.06);
}

.store-recipe-ingredient.is-checked {
    opacity: 0.55;
}

.store-recipe-ingredient.is-checked .store-recipe-ingredient-text {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.store-recipe-ingredient-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.store-recipe-ingredient.is-checked .store-recipe-ingredient-check {
    background: var(--caramel-light);
    border-color: var(--caramel-light);
}

.store-recipe-ingredient.is-checked .store-recipe-ingredient-check::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.store-recipe-ingredient-text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.5;
}

.store-recipe-card--ingredients .recipe-measure,
.store-recipe-measure {
    color: var(--caramel-light);
}

.store-recipe-text-btn {
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.store-recipe-text-btn:hover {
    color: #fff;
}

.store-recipe-card--steps .store-recipe-text-btn {
    color: var(--text-muted);
}

.store-recipe-card--steps .store-recipe-text-btn:hover {
    color: var(--coffee-700);
}

.store-recipe-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.store-recipe-steps-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.store-recipe-cook-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.store-recipe-progress-wrap {
    margin-bottom: 20px;
}

.store-recipe-progress-track {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-secondary);
    overflow: hidden;
    margin-bottom: 8px;
}

.store-recipe-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--caramel) 0%, var(--caramel-light) 100%);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.store-recipe-progress-text {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.store-recipe-step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.store-recipe-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(26, 15, 10, 0.08);
    background: var(--bg-secondary);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
}

.store-recipe-step:hover {
    border-color: rgba(162, 105, 36, 0.25);
    transform: translateX(4px);
}

.store-recipe-step.is-active {
    border-color: var(--caramel);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.store-recipe-step.is-done {
    opacity: 0.65;
}

.store-recipe-step.is-done .store-recipe-step-body {
    text-decoration: line-through;
    text-decoration-color: rgba(26, 15, 10, 0.35);
}

.store-recipe-step-check {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--caramel) 0%, var(--caramel-light) 100%);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.store-recipe-step-check:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(162, 105, 36, 0.35);
}

.store-recipe-step.is-done .store-recipe-step-check {
    background: #22c55e;
}

.store-recipe-step-body {
    flex: 1;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-dark);
    padding-top: 6px;
}

.store-recipe-card--notes {
    padding-top: 24px;
}

.store-recipe-card--notes .recipe-notes {
    margin: 0;
    padding: 0;
    border: 0;
}

.store-recipe-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.store-recipe-card--ingredients .store-recipe-empty {
    color: rgba(255, 255, 255, 0.65);
}

/* Cook mode overlay */
.store-recipe-cook-mode {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 8, 6, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.store-recipe-cook-mode[hidden] {
    display: none !important;
}

.store-recipe-cook-mode-inner {
    width: min(640px, 100%);
    max-height: min(78vh, 560px);
    overflow: auto;
    background: #fff;
    border-radius: 20px 20px 16px 16px;
    padding: clamp(20px, 4vw, 28px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    animation: store-recipe-cook-slide 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes store-recipe-cook-slide {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.store-recipe-cook-mode-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.store-recipe-cook-mode-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--caramel);
}

.store-recipe-cook-mode-step {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.store-recipe-cook-close {
    border: 0;
    background: var(--bg-secondary);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dark);
}

.store-recipe-cook-step-body {
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 24px;
    min-height: 120px;
}

.store-recipe-cook-nav {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

body.store-recipe-cook-mode-open {
    overflow: hidden;
}

.store-recipe-nav {
    margin-top: clamp(32px, 5vw, 48px);
}

.store-recipe-nav-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.store-recipe-nav-card:hover {
    border-color: rgba(162, 105, 36, 0.3);
}

.store-recipe-back {
    margin-top: 40px;
}

/* ── Split recipe layout (detail mockup) ─────────────────────── */
.store-recipe-page--split {
    font-family: var(--font-sans);
}

.store-recipe-split {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: var(--store-content-max-width);
    margin-inline: auto;
    padding-inline: var(--store-content-gutter);
    min-height: clamp(900px, 95vh, 1200px);
    overflow: visible;
    --recipe-syrup-height: 58vh;
    --recipe-syrup-offset: clamp(48px, 9vh, 110px);
    --recipe-syrup-zone: calc(var(--recipe-syrup-height) + 3.5rem);
    --recipe-syrup-half: min(26vw, 340px);
}

.store-recipe-split__content {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    background: transparent;
    padding: var(--recipe-syrup-offset) clamp(20px, 3vw, 36px) clamp(48px, 6vw, 72px) 0;
}

.store-recipe-split__inner {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
    display: grid;
    grid-template-rows: var(--recipe-syrup-zone) auto;
}

.store-recipe-split__intro {
    grid-row: 1;
    align-self: center;
    width: 100%;
    max-width: 100%;
}

.store-recipe-split__details {
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding-top: clamp(12px, 2vh, 24px);
}

.store-recipe-split__meta {
    margin: 0 0 20px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: #8a8a86;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.store-recipe-split__meta-sep {
    margin-inline: 1em;
}

.store-recipe-split__title {
    margin: 0 0 24px;
    font-family: var(--font-sans);
    font-size: clamp(1.75rem, 4.5vw, 3.25rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4d4d49;
    max-width: calc(100% - var(--recipe-syrup-half) - 1.5rem);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.store-recipe-split__title--short {
    font-size: clamp(2.4rem, 7vw, 5rem);
    line-height: 1.02;
}

.store-recipe-split__title--medium {
    font-size: clamp(2rem, 5.5vw, 4rem);
}

.store-recipe-split__title--long {
    font-size: clamp(1.6rem, 4vw, 3rem);
    line-height: 1.1;
}

.store-recipe-split__title--xlong {
    font-size: clamp(1.35rem, 3.2vw, 2.4rem);
    line-height: 1.12;
    letter-spacing: 0.04em;
}

.store-recipe-split__desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: #8a8a86;
    max-width: calc(100% - min(12vw, 160px));
}

.store-recipe-split__rule {
    margin: 0 0 clamp(24px, 3vh, 36px);
    border: 0;
    border-top: 1px solid rgba(26, 15, 10, 0.12);
}

.store-recipe-split__rule--bottom {
    margin: clamp(28px, 4vh, 44px) 0 0;
}

.store-recipe-split__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
}

.store-recipe-split__col-title,
.store-recipe-split__sub-title {
    margin: 0 0 16px;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #55554f;
}

.store-recipe-split__sub-title {
    margin-top: 30px;
}

.store-recipe-split__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.store-recipe-split__list-item {
    position: relative;
    padding-left: 12px;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8a86;
}

.store-recipe-split__list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.66em;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #8a8a86;
}

.store-recipe-split__list-item strong {
    font-weight: inherit;
}

.store-recipe-split__empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.store-recipe-split__visual {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 1;
    min-height: 100%;
    overflow: hidden;
    background: #1a0f0a;
}

.store-recipe-split__cover {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(900px, 95vh, 1200px);
    object-fit: cover;
    object-position: center;
}

.store-recipe-split__cover--placeholder {
    min-height: clamp(900px, 95vh, 1200px);
    background: linear-gradient(160deg, #3d1515 0%, #1a0f0a 55%, #0d0705 100%);
}

.store-recipe-product-pillar {
    grid-column: 1 / -1;
    grid-row: 1;
    place-self: start center;
    margin-top: var(--recipe-syrup-offset);
    position: relative;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: min(48vw, 620px);
    pointer-events: none;
}

.store-recipe-product-pillar__image-link {
    pointer-events: auto;
    display: block;
    line-height: 0;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.22));
    transition: transform 0.25s ease;
}

.store-recipe-product-pillar__image-link:hover {
    transform: translateY(-4px);
}

.store-recipe-product-pillar__image {
    display: block;
    width: auto;
    height: var(--recipe-syrup-height);
    max-width: min(48vw, 620px);
    max-height: var(--recipe-syrup-height);
    object-fit: contain;
}

.store-recipe-product-pillar__cta {
    pointer-events: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    padding: 11px 48px;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(145deg, #2e2219 0%, #1a120e 48%, #0d0907 100%);
    border: 1px solid rgba(176, 130, 71, 0.5);
    border-radius: 999px;
    box-shadow:
        0 3px 14px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(176, 130, 71, 0.12);
    overflow: hidden;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.store-recipe-product-pillar__cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 40%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 255, 255, 0.06) 60%,
        transparent 100%
    );
    transform: translateX(-130%);
    transition: transform 0.6s ease;
}

.store-recipe-product-pillar__cta:hover {
    transform: translateY(-2px);
    border-color: var(--caramel-light);
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(176, 130, 71, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.store-recipe-product-pillar__cta:hover::before {
    transform: translateX(130%);
}

.store-recipe-product-pillar__cta:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.store-recipe-product-pillar__cta-text {
    position: relative;
    z-index: 1;
}

.store-recipe-split-footer {
    max-width: var(--store-content-max-width);
    margin: 0 auto;
    padding: clamp(32px, 5vw, 56px) var(--store-content-gutter) clamp(48px, 6vw, 72px);
}

.store-recipe-split-footer--solo {
    padding-top: clamp(24px, 4vw, 40px);
}

@media (max-width: 960px) {
    .store-recipe-split {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-inline: var(--store-content-gutter);
    }

    .store-recipe-split__content {
        grid-column: 1;
        grid-row: auto;
        order: 1;
        align-items: stretch;
        padding: clamp(32px, 6vw, 48px) clamp(20px, 5vw, 32px);
    }

    .store-recipe-split__inner {
        max-width: none;
        margin-left: 0;
    }

    .store-recipe-split__inner {
        display: flex;
        flex-direction: column;
    }

    .store-recipe-split__intro {
        padding-top: 0;
        max-width: none;
        padding-right: 0;
    }

    .store-recipe-split__title,
    .store-recipe-split__title--short,
    .store-recipe-split__title--medium,
    .store-recipe-split__title--long,
    .store-recipe-split__title--xlong,
    .store-recipe-split__desc {
        max-width: 100%;
    }

    .store-recipe-split__title--short {
        font-size: clamp(2rem, 9vw, 3.4rem);
    }

    .store-recipe-split__title--medium {
        font-size: clamp(1.75rem, 8vw, 3rem);
    }

    .store-recipe-split__title--long {
        font-size: clamp(1.5rem, 7vw, 2.5rem);
    }

    .store-recipe-split__title--xlong {
        font-size: clamp(1.25rem, 6vw, 2.1rem);
    }

    .store-recipe-split__details {
        margin-top: clamp(32px, 6vw, 48px);
        padding-top: 0;
    }

    .store-recipe-split__visual {
        grid-column: 1;
        grid-row: auto;
        order: 0;
        min-height: clamp(240px, 52vw, 380px);
    }

    .store-recipe-split__cover,
    .store-recipe-split__cover--placeholder {
        min-height: clamp(240px, 52vw, 380px);
    }

    .store-recipe-product-pillar {
        grid-column: 1;
        grid-row: auto;
        place-self: auto;
        order: 2;
        margin: clamp(20px, 4vw, 32px) auto 0;
        max-width: min(320px, 72vw);
    }

    .store-recipe-product-pillar__image {
        height: 44vh;
        max-height: 44vh;
        max-width: min(320px, 72vw);
    }

    .store-recipe-split__cols {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Legacy recipe classes (listing / fallbacks) */
.recipe-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.recipe-kpi {
    background: var(--bg-secondary);
    border: 1px solid rgba(26, 15, 10, 0.08);
    border-radius: 12px;
    padding: 12px 18px;
    min-width: 100px;
    text-align: center;
}
.recipe-kpi-val {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
}
.recipe-kpi-lbl {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.recipe-detail-card { padding-top: 48px; }
.recipe-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cream);
}
.recipe-two-col {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 40px;
    align-items: start;
}
.recipe-ingredient-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.recipe-ingredient-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(26, 15, 10, 0.07);
    font-size: 0.95rem;
    line-height: 1.5;
}
.recipe-measure {
    color: var(--coffee-700);
    margin-right: 4px;
}
.recipe-step-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: recipe-step;
}
.recipe-step-row {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    align-items: flex-start;
}
.recipe-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--caramel) 0%, var(--caramel-light) 100%);
    color: white;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recipe-step-body {
    flex: 1;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-dark);
    padding-top: 4px;
}
.recipe-notes {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(26, 15, 10, 0.08);
}
.recipe-nav-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
}
.recipe-nav-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: white;
    border: 1px solid rgba(26, 15, 10, 0.08);
    border-radius: 14px;
    padding: 20px 24px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: inherit;
}
.recipe-nav-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.recipe-nav-card--next {
    align-items: flex-end;
    text-align: right;
}
.recipe-nav-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.recipe-nav-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.35;
}
@media (max-width: 900px) {
    .store-recipe-grid {
        grid-template-columns: 1fr;
    }

    .store-recipe-sidebar {
        position: static;
    }
}

@media(max-width: 768px) {
    .recipe-two-col { grid-template-columns: 1fr; }
    .recipe-nav-prevnext { grid-template-columns: 1fr; }
    .recipe-nav-card--next { align-items: flex-start; text-align: left; }

    .store-recipe-cook-mode {
        align-items: stretch;
        padding: 0;
    }

    .store-recipe-cook-mode-inner {
        max-height: 100vh;
        border-radius: 20px 20px 0 0;
        margin-top: auto;
    }

    .store-recipe-steps-actions {
        width: 100%;
    }

    .store-recipe-cook-btn {
        flex: 1;
        justify-content: center;
    }
}

@media(max-width: 640px) {
    .article-card { padding: 28px 20px; }
    .article-header { padding: 56px 0 36px; }
}

/* ===== STORE FORM INPUTS ===== */
.store-input {
    width: 100%;
    padding: 13px 18px;
    border: 1.5px solid rgba(26, 15, 10, 0.15);
    border-radius: 10px;
    background: white;
    font-size: 0.95rem;
    color: var(--text-dark);
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-sizing: border-box;
}
.store-input:focus {
    border-color: var(--caramel);
    box-shadow: 0 0 0 3px rgba(162, 105, 36, 0.12);
}
.store-input::placeholder { color: var(--text-muted); }
.store-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b5a45' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
    cursor: pointer;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-medium);
}
.form-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
@media(max-width: 600px) {
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}

/* ===== LOGIN / ACCOUNT ===== */
.login-page {
    padding-top: 48px;
    padding-bottom: var(--section-padding);
    min-height: 70vh;
}
.login-card {
    max-width: 560px;
    margin: 0 auto;
    background: var(--surface-panel);
    border-radius: var(--radius-lg);
    padding: 44px 48px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}
.login-card--wide {
    max-width: 640px;
}
@media (max-width: 600px) {
    .login-card,
    .login-card--wide {
        padding: 32px 22px;
    }
}
.login-card h1 {
    font-family: var(--font-display);
    font-size: 1.65rem;
    margin-bottom: 8px;
    color: var(--coffee-900);
}
.login-card .lead {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 28px;
    line-height: 1.55;
}
.login-form .form-group {
    margin-bottom: 18px;
}
.form-group--checkbox {
    margin-bottom: 20px;
}
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.5;
    cursor: pointer;
}
.form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--coffee-600);
    cursor: pointer;
}
.login-field-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.login-forgot {
    font-size: 0.8125rem;
    color: var(--coffee-600);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.login-forgot:hover {
    color: var(--caramel);
}
.login-card .alert {
    margin-bottom: 20px;
}
.login-card .btn-primary {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}
.login-oauth {
    margin-top: 20px;
}
.login-oauth-separator {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.login-oauth-separator::before,
.login-oauth-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--coffee-900) 12%, transparent);
}
.login-oauth .btn-google {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--coffee-900) 16%, transparent);
    border-radius: var(--radius-sm, 8px);
    background: #fff;
    color: var(--coffee-900);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-oauth .btn-google:hover {
    background: color-mix(in srgb, var(--coffee-900) 4%, #fff);
    border-color: color-mix(in srgb, var(--coffee-900) 28%, transparent);
    color: var(--coffee-900);
}
.login-oauth .btn-google-icon {
    flex-shrink: 0;
}
.login-meta {
    margin-top: 22px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.login-meta a {
    color: var(--coffee-600);
    font-weight: 600;
}
.login-meta a:hover {
    color: var(--caramel);
}

/* ===== ACCOUNT PANEL ===== */
.account-shell {
    max-width: var(--container-width);
}
.account-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}
.account-kicker {
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.account-kicker__icon {
    display: inline-flex;
    color: var(--coffee-600);
}
.account-kicker__icon svg {
    width: 16px;
    height: 16px;
}
.account-flash {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.account-flash__icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 1px;
}
.account-flash__icon svg {
    width: 18px;
    height: 18px;
}
.account-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.account-btn-icon__glyph {
    display: inline-flex;
}
.account-btn-icon__glyph svg {
    width: 16px;
    height: 16px;
}
.account-title {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3vw, 2.1rem);
    color: var(--coffee-900);
    margin-bottom: 6px;
    letter-spacing: -0.03em;
}
.account-sub {
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 520px;
    line-height: 1.55;
}
.account-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.account-layout {
    display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 40px);
    align-items: start;
}
@media (max-width: 900px) {
    .account-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
.account-nav {
    position: sticky;
    top: calc(var(--store-navbar-height, 72px) + 24px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
@media (max-width: 900px) {
    .account-nav {
        position: static;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .account-nav::-webkit-scrollbar {
        display: none;
    }
}
.account-nav-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-medium);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.account-nav-link__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--coffee-500);
}
.account-nav-link__icon svg {
    width: 17px;
    height: 17px;
}
.account-nav-link.is-active .account-nav-link__icon {
    color: var(--coffee-700);
}
.account-nav-link:hover {
    background: var(--surface-subtle);
    color: var(--coffee-900);
}
.account-nav-link.is-active {
    background: color-mix(in srgb, var(--caramel) 14%, var(--surface-subtle));
    color: var(--coffee-900);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--caramel) 24%, var(--border-subtle));
}
.account-panels {
    min-width: 0;
    overflow: visible;
}
.account-card--panel {
    min-height: 280px;
}
.account-marketing-card {
    padding: 18px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--cream) 35%, var(--surface-panel));
}
.account-marketing-text {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 56ch;
}
.account-marketing-status {
    margin: 0 0 16px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.account-marketing-status__icon {
    display: inline-flex;
}
.account-marketing-status__icon svg {
    width: 16px;
    height: 16px;
}
.account-marketing-status--on {
    color: #15803d;
}
.account-marketing-status--off {
    color: var(--text-muted);
}
.account-card {
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(22px, 3vw, 30px);
    box-shadow: var(--shadow-xs);
}
.account-card--highlight {
    background: linear-gradient(135deg, color-mix(in srgb, var(--cream) 85%, var(--surface-panel)), var(--surface-panel));
    border-color: color-mix(in srgb, var(--caramel) 22%, var(--border-subtle));
}
.account-card-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--coffee-900);
    display: flex;
    align-items: center;
    gap: 10px;
}
.account-card-title__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--caramel) 14%, var(--surface-panel));
    color: var(--coffee-700);
    border: 1px solid color-mix(in srgb, var(--caramel) 22%, var(--border-subtle));
}
.account-card-title__icon svg {
    width: 17px;
    height: 17px;
}
.account-card-lead {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.55;
}
.account-subtitle {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--coffee-800);
}
.account-subtitle--icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.account-subtitle--sm {
    font-size: 0.9rem;
    margin-bottom: 8px;
}
.account-subtitle__icon {
    display: inline-flex;
    color: var(--coffee-600);
}
.account-subtitle__icon svg {
    width: 16px;
    height: 16px;
}
.account-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 26px 0;
}
.account-form .btn-primary,
.account-form .btn-outline {
    margin-top: 6px;
}
.account-form--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.account-form-grow {
    flex: 1 1 220px;
}
.account-fav-add-btn {
    flex-shrink: 0;
}
.loyalty-meter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.loyalty-meter__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--caramel) 18%, var(--surface-panel));
    color: var(--caramel);
    border: 1px solid color-mix(in srgb, var(--caramel) 28%, var(--border-subtle));
}
.loyalty-meter__icon svg {
    width: 22px;
    height: 22px;
}
.loyalty-value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--coffee-900);
    line-height: 1;
}
.loyalty-label {
    font-size: 0.9rem;
    color: var(--text-light);
}
.account-empty {
    color: var(--text-muted);
    font-size: 0.95rem;
}
.account-empty a {
    color: var(--coffee-600);
    font-weight: 600;
}
.account-order-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
}
.account-order-card {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 90%, var(--coffee-400));
    border-radius: 14px;
    background: var(--surface-panel);
    overflow: visible;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.account-order-card:has(.account-order-card__refund[open]) {
    z-index: 30;
}
.account-order-card:hover {
    border-color: color-mix(in srgb, var(--caramel) 28%, var(--border-subtle));
    box-shadow: 0 4px 18px color-mix(in srgb, var(--coffee-900) 6%, transparent);
}
.account-order-card__head {
    position: relative;
    z-index: 1;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 12px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cream) 32%, var(--surface-panel)),
        var(--surface-panel)
    );
    border-bottom: 1px solid var(--border-subtle);
}
.account-order-card__head-start {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    min-width: 0;
}
.account-order-card__id {
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--coffee-900);
}
.account-order-card__date {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.account-order-card__statuses {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}
.account-order-card__head-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.account-order-card__total {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--coffee-900);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.account-order-card__total small {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.account-order-card__refund {
    position: static;
}
.account-order-card__refund-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-panel);
    color: var(--coffee-600);
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.account-order-card__refund-toggle::-webkit-details-marker {
    display: none;
}
.account-order-card__refund-toggle:hover {
    border-color: color-mix(in srgb, var(--caramel) 35%, var(--border-subtle));
    color: var(--coffee-800);
    background: color-mix(in srgb, var(--cream) 45%, var(--surface-panel));
}
.account-order-card__refund-toggle svg {
    width: 13px;
    height: 13px;
}
.account-refund-flow {
    position: fixed;
    z-index: 1200;
    width: min(320px, calc(100vw - 24px));
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--surface-panel);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--coffee-900) 16%, transparent);
    max-height: min(85vh, 520px);
    overflow-y: auto;
}
.account-refund-flow.is-above {
    box-shadow: 0 -10px 32px color-mix(in srgb, var(--coffee-900) 14%, transparent);
}
.account-refund-flow__step[hidden] {
    display: none !important;
}
.account-refund-flow__title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--coffee-900);
}
.account-refund-flow__lead {
    margin: 0 0 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.account-refund-flow__note {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.account-refund-reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    max-height: min(42vh, 280px);
    overflow-y: auto;
}
.account-refund-reason {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--surface-panel);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.account-refund-reason:hover {
    border-color: color-mix(in srgb, var(--caramel) 30%, var(--border-subtle));
    background: color-mix(in srgb, var(--cream) 35%, var(--surface-panel));
}
.account-refund-reason__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.account-refund-reason__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--cream) 45%, var(--surface-panel));
    color: var(--coffee-600);
    flex-shrink: 0;
}
.account-refund-reason__icon svg {
    width: 14px;
    height: 14px;
}
.account-refund-reason__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.account-refund-reason__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--coffee-900);
    line-height: 1.3;
}
.account-refund-reason__hint {
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--text-muted);
}
.account-refund-reason__check {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    color: transparent;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.account-refund-reason__check svg {
    width: 11px;
    height: 11px;
}
.account-refund-reason:has(.account-refund-reason__input:checked) {
    border-color: var(--caramel);
    background: color-mix(in srgb, var(--cream) 48%, var(--surface-panel));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--caramel) 35%, transparent);
}
.account-refund-reason:has(.account-refund-reason__input:checked) .account-refund-reason__check {
    background: var(--caramel);
    border-color: var(--caramel);
    color: #fff;
}
.account-refund-flow__next {
    width: 100%;
    justify-content: center;
}
.account-refund-confirm {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cream) 32%, var(--surface-panel));
    border: 1px solid var(--border-subtle);
}
.account-refund-confirm__order {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--coffee-900);
}
.account-refund-confirm__reason {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--coffee-800);
}
.account-refund-confirm__reason-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.account-refund-flow__actions {
    display: flex;
    gap: 8px;
}
.account-refund-flow__actions .btn-outline {
    flex-shrink: 0;
}
.account-refund-flow__actions .btn-primary {
    flex: 1;
    justify-content: center;
}
.account-order-card__refunded {
    display: inline-flex;
    color: #1d4ed8;
}
.account-order-card__refunded svg {
    width: 15px;
    height: 15px;
}
.account-order-lines {
    list-style: none;
    margin: 0;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.account-order-line {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 8px 10px;
    padding: 5px 6px;
    border-radius: 10px;
    font-size: 0.78rem;
    line-height: 1.3;
    transition: background 0.12s ease;
}
.account-order-line:hover {
    background: color-mix(in srgb, var(--cream) 35%, transparent);
}
.account-order-line__media {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-order-line__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-order-line__placeholder {
    display: inline-flex;
    color: var(--coffee-500);
}
.account-order-line__placeholder svg {
    width: 14px;
    height: 14px;
}
.account-order-line__name {
    font-weight: 600;
    color: var(--coffee-900);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-order-line__qty,
.account-order-line__unit {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.account-order-line__unit::after {
    content: ' RON';
    font-size: 0.68rem;
    opacity: 0.85;
}
.account-order-line__total {
    font-weight: 700;
    color: var(--coffee-800);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 4.5rem;
    text-align: right;
}
.account-order-line__total::after {
    content: ' RON';
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
}
.account-order-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px 10px;
    border-top: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
    background: color-mix(in srgb, var(--cream) 12%, var(--surface-panel));
}
.account-order-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-panel);
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--coffee-800);
}
.account-order-chip__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--coffee-500);
}
.account-order-chip__icon svg {
    width: 11px;
    height: 11px;
}
.account-order-chip__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.62rem;
    color: var(--text-muted);
}
.account-order-chip__value {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-order-chip__hint {
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}
.account-order-chip--discount {
    border-color: color-mix(in srgb, #166534 22%, var(--border-subtle));
    background: #f0fdf4;
    color: #166534;
}
.account-order-chip--discount .account-order-chip__icon {
    color: #15803d;
}
.account-order-chip--address {
    max-width: min(100%, 280px);
}
.account-pill--compact {
    font-size: 0.64rem;
    padding: 3px 8px;
    letter-spacing: 0.03em;
    gap: 0;
}
.account-pill--compact .account-pill__icon {
    display: none;
}
@media (max-width: 720px) {
    .account-order-card__head {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
    }
    .account-order-card__statuses {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    .account-order-line {
        grid-template-columns: 32px minmax(0, 1fr) auto auto;
    }
    .account-order-line__unit {
        display: none;
    }
}
@media (max-width: 480px) {
    .account-order-card__head {
        padding: 8px 10px;
    }
    .account-order-lines {
        padding: 4px 6px;
    }
    .account-order-card__foot {
        padding: 6px 8px 8px;
    }
}
.account-pill {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--caramel) 14%, var(--surface-panel));
    color: var(--coffee-800);
    border: 1px solid color-mix(in srgb, var(--caramel) 28%, transparent);
}
.account-pill--muted {
    background: var(--surface-subtle);
    border-color: var(--border-medium);
    color: var(--text-light);
}
.account-pill--success {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #166534;
}
.account-pill--info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.account-pill--warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}
.account-pill--danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}
.account-pill--pending {
    background: color-mix(in srgb, var(--caramel) 14%, var(--surface-panel));
    border-color: color-mix(in srgb, var(--caramel) 28%, transparent);
    color: var(--coffee-800);
}
.account-pill--status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.account-pill__icon {
    display: inline-flex;
}
.account-pill__icon svg {
    width: 13px;
    height: 13px;
}
/* Legacy order id/date classes reused in refunds section */
.account-order-id {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--coffee-900);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.account-order-id__icon {
    display: inline-flex;
    color: var(--coffee-500);
}
.account-order-id__icon svg {
    width: 15px;
    height: 15px;
}
.account-order-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.account-order-date__icon {
    display: inline-flex;
}
.account-order-date__icon svg {
    width: 13px;
    height: 13px;
}
.refund-form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 440px;
}
.account-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.account-note__icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 1px;
}
.account-note__icon svg {
    width: 15px;
    height: 15px;
}
.account-refund-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.account-refund {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px;
    background: var(--surface-page);
}
.account-refund-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.account-refund-reason {
    font-size: 0.9rem;
    color: var(--text-medium);
    line-height: 1.5;
    margin-bottom: 8px;
}
.account-fav-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.account-fav-card {
    display: flex;
    gap: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px;
    background: var(--surface-page);
    box-shadow: var(--shadow-xs);
}
.account-fav-img {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface-subtle);
}
.account-fav-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-fav-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--coffee-500);
}
.account-fav-placeholder svg {
    width: 28px;
    height: 28px;
}
.account-fav-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.account-fav-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--coffee-900);
}
.account-fav-price {
    font-size: 0.88rem;
    color: var(--caramel-dark);
    font-weight: 600;
}
.account-fav-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.account-reviews-one-shot {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.account-reviews-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.account-reviews-block__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.account-reviews-block__head--list {
    align-items: center;
    margin-bottom: 4px;
}
.account-reviews-block__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--caramel) 14%, var(--surface-panel));
    color: var(--coffee-700);
    border: 1px solid color-mix(in srgb, var(--caramel) 22%, var(--border-subtle));
}
.account-reviews-block__icon svg {
    width: 18px;
    height: 18px;
}
.account-reviews-block__hint {
    margin: 4px 0 0;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.account-reviews-optional {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.85em;
}
.account-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 12px 0 4px;
}
.account-empty-state__icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--cream) 55%, var(--surface-panel));
    color: var(--coffee-600);
}
.account-empty-state__icon svg {
    width: 22px;
    height: 22px;
}
.account-review-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.account-review-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    text-align: center;
}
.account-review-product-card:hover {
    border-color: color-mix(in srgb, var(--caramel) 35%, var(--border-subtle));
    background: color-mix(in srgb, var(--cream) 35%, var(--surface-panel));
}
.account-review-product-card__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.account-review-product-card__check {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--caramel);
    color: #fff;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.account-review-product-card__check svg {
    width: 13px;
    height: 13px;
}
.account-review-product-card__input:checked + .account-review-product-card__check {
    opacity: 1;
    transform: scale(1);
}
.account-review-product-card__input:checked ~ .account-review-product-card__media,
.account-review-product-card__input:checked ~ .account-review-product-card__name {
    opacity: 1;
}
.account-review-product-card:has(.account-review-product-card__input:checked) {
    border-color: var(--caramel);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--caramel) 40%, transparent);
    background: color-mix(in srgb, var(--cream) 45%, var(--surface-panel));
}
.account-review-product-card__media {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: color-mix(in srgb, var(--cream) 40%, var(--surface-panel));
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-review-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-review-product-card__placeholder {
    display: inline-flex;
    color: var(--coffee-500);
}
.account-review-product-card__placeholder svg {
    width: 28px;
    height: 28px;
}
.account-review-product-card__name {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--coffee-900);
}
.account-star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 6px;
}
.account-star-rating__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.account-star-rating__star {
    display: inline-flex;
    cursor: pointer;
    color: color-mix(in srgb, var(--coffee-400) 70%, var(--border-subtle));
    transition: color 0.12s ease, transform 0.12s ease;
}
.account-star-rating__star svg {
    width: 30px;
    height: 30px;
}
.account-star-rating__star:hover,
.account-star-rating__star:hover ~ .account-star-rating__star,
.account-star-rating__input:checked ~ .account-star-rating__star {
    color: var(--caramel);
}
.account-star-rating__star:hover {
    transform: scale(1.06);
}
.account-reviews-field {
    display: block;
}
.account-reviews-textarea {
    min-height: 130px;
    resize: vertical;
}
.account-reviews-submit {
    width: 100%;
    justify-content: center;
    gap: 10px;
}
.account-reviews-submit__icon {
    display: inline-flex;
}
.account-reviews-submit__icon svg {
    width: 18px;
    height: 18px;
}
.account-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.account-review-item {
    padding: 16px 18px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
}
.account-review-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.account-review-item-product {
    color: var(--coffee-900);
}
.account-review-stars,
.store-product-review-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--caramel);
}
.account-review-stars__star svg,
.store-product-review-stars__star svg {
    width: 16px;
    height: 16px;
}
.account-review-item-title {
    margin: 8px 0 0;
    font-weight: 700;
    color: var(--coffee-800);
}
.account-review-item-body {
    margin: 8px 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-medium);
}
.account-review-item-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.account-review-item-date__icon {
    display: inline-flex;
}
.account-review-item-date__icon svg {
    width: 14px;
    height: 14px;
}
.btn--sm {
    padding: 7px 14px;
    font-size: 0.82rem;
}
.store-input--inline {
    max-width: 200px;
}

/* ===== ALERT CARDS ===== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}
.alert-error {
    background: #f7eae9;
    border: 1px solid #eab7b7;
    color: #c41c1c;
}
.alert-success {
    background: #e8f5ed;
    border: 1px solid #9fd4ae;
    color: #15803d;
}

/* ===== EMPTY / SUCCESS STATES ===== */
.state-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 48px 24px;
}
.state-box {
    text-align: center;
    max-width: 460px;
}
.state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 2rem;
}
.state-icon--success { background: #cfe8d8; }
.state-icon--error   { background: #f0d8d8; }
.state-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 12px;
}
.state-text {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 28px;
    line-height: 1.65;
}

/* ===== CHECKOUT WIZARD ===== */
.store-checkout-page.content-section {
    padding-top: clamp(24px, 5vw, 48px);
    padding-bottom: clamp(48px, 8vw, 96px);
    min-height: 52vh;
}
.store-checkout-container {
    max-width: 720px;
    margin: 0 auto;
}
.store-checkout-wizard {
    margin-bottom: 28px;
    padding: 14px 12px;
    background: var(--bg-white);
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
}
.store-checkout-wizard-steps {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.store-checkout-wizard-steps::-webkit-scrollbar {
    display: none;
}
.store-checkout-wizard-step {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.store-checkout-wizard-step.has-arrow::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    color: var(--ink-300);
    flex-shrink: 0;
}
.store-checkout-wizard-step.has-arrow.arrow-done::after {
    color: var(--success);
}
.store-checkout-wizard-step.has-arrow.arrow-current::after {
    color: #3b82f6;
}
.store-checkout-wizard-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.store-checkout-wizard-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.store-checkout-wizard-check {
    display: block;
}
.store-checkout-wizard-label {
    letter-spacing: 0.01em;
}
.store-checkout-wizard-step.is-done .store-checkout-wizard-pill {
    background: var(--success);
    color: #fff;
    border-color: color-mix(in srgb, var(--success) 80%, #14532d);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--success) 28%, transparent);
}
.store-checkout-wizard-step.is-done .store-checkout-wizard-marker {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.store-checkout-wizard-step.is-done .store-checkout-wizard-pill:hover {
    filter: brightness(1.05);
}
.store-checkout-wizard-step.is-current .store-checkout-wizard-pill {
    background: #fff;
    color: #1d4ed8;
    border-color: #3b82f6;
    box-shadow:
        0 0 0 3px color-mix(in srgb, #3b82f6 16%, transparent),
        0 1px 2px rgba(37, 99, 235, 0.12);
}
.store-checkout-wizard-step.is-current .store-checkout-wizard-marker {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}
.store-checkout-wizard-step.is-upcoming .store-checkout-wizard-pill {
    background: var(--surface-subtle);
    color: var(--ink-500);
    border-color: var(--border-subtle);
}
.store-checkout-wizard-step.is-upcoming .store-checkout-wizard-marker {
    background: #fff;
    color: var(--ink-400);
    border: 1px solid var(--border-subtle);
}
@media (max-width: 520px) {
    .store-checkout-wizard {
        padding: 12px 10px;
    }
    .store-checkout-wizard-pill {
        padding: 7px 10px 7px 7px;
        gap: 6px;
        font-size: 0.75rem;
    }
    .store-checkout-wizard-marker {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }
    .store-checkout-wizard-step.has-arrow::after {
        margin: 0 5px;
        width: 8px;
        height: 8px;
    }
}
.store-checkout-hero {
    margin-bottom: 28px;
}
.store-checkout-hero .section-label {
    margin-bottom: 10px;
}
.store-checkout-layout {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}
.store-checkout-card {
    background: var(--surface-panel);
    border-radius: var(--radius-lg);
    padding: clamp(22px, 4vw, 32px);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}
.store-checkout-h2 {
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--coffee-800);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.store-checkout-panel {
    margin: 0;
    padding: 0 0 20px;
    margin-bottom: 20px;
    text-align: left;
    border-bottom: 1px solid rgba(26, 15, 10, 0.08);
}
.store-checkout-panel:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.store-checkout-totals-host {
    padding-top: 4px;
}
.store-checkout-muted {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.55;
}
.store-checkout-lines {
    list-style: none;
    padding: 0;
    margin: 0;
}
.store-checkout-line {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 14px 18px;
    padding: 14px 0;
    font-size: 0.95rem;
    color: var(--text-medium);
    border-bottom: 1px solid rgba(26, 15, 10, 0.06);
}
.store-checkout-line:last-child {
    border-bottom: none;
}
.store-checkout-line-thumb {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid rgba(26, 15, 10, 0.08);
    flex-shrink: 0;
}
.store-checkout-line-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.store-checkout-line-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    opacity: 0.45;
}
.store-checkout-line-thumb--empty::after {
    content: '☕';
}
.store-checkout-line-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.store-checkout-line-name {
    font-weight: 600;
    color: var(--text-dark);
    min-width: 0;
    line-height: 1.35;
}
.store-checkout-line-qty {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.store-checkout-line-price {
    font-weight: 700;
    color: var(--coffee-800);
    text-align: right;
    white-space: nowrap;
    align-self: center;
}
@media (max-width: 480px) {
    .store-checkout-line {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
        gap: 10px 12px;
        align-items: start;
    }
    .store-checkout-line-thumb {
        width: 56px;
        height: 56px;
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .store-checkout-line-body {
        grid-column: 2;
        grid-row: 1;
    }
    .store-checkout-line-price {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        align-self: start;
    }
}
.store-checkout-totals {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 20px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(26, 15, 10, 0.1);
    font-size: 0.95rem;
}
.store-checkout-totals dt {
    margin: 0;
    font-weight: 500;
    color: var(--text-muted);
}
.store-checkout-totals dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
    color: var(--coffee-900);
}
.store-checkout-totals dd:last-of-type {
    font-size: 1.2rem;
    color: var(--caramel);
    font-weight: 800;
}
.store-checkout-discount-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}
.store-checkout-card .store-checkout-discount-row .form-control,
.store-checkout-card .store-checkout-discount-input {
    flex: 1 1 200px;
    width: auto;
    min-width: 0;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(26, 15, 10, 0.15);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.3;
    background: var(--bg-white, #fff);
    color: var(--text-dark, #1a0f0a);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.store-checkout-card .store-checkout-discount-row .form-control::placeholder,
.store-checkout-card .store-checkout-discount-input::placeholder {
    color: var(--text-muted, #8a7a6e);
    opacity: 1;
}
.store-checkout-card .store-checkout-discount-row .form-control:hover,
.store-checkout-card .store-checkout-discount-input:hover {
    border-color: rgba(26, 15, 10, 0.28);
}
.store-checkout-card .store-checkout-discount-row .form-control:focus,
.store-checkout-card .store-checkout-discount-input:focus {
    outline: none;
    border-color: var(--coffee-400, #6f3f2c);
    box-shadow: 0 0 0 3px rgba(111, 63, 44, 0.15);
}
.store-checkout-card .store-checkout-discount-row .btn,
.store-checkout-card .store-checkout-discount-apply {
    min-height: 46px;
    align-self: stretch;
    flex: 0 0 auto;
    padding-left: 18px;
    padding-right: 18px;
}
@media (max-width: 520px) {
    .store-checkout-discount-row {
        flex-direction: column;
    }
    .store-checkout-card .store-checkout-discount-row .form-control,
    .store-checkout-card .store-checkout-discount-input,
    .store-checkout-card .store-checkout-discount-row .btn,
    .store-checkout-card .store-checkout-discount-apply {
        width: 100%;
        flex: 1 1 auto;
    }
}
.store-checkout-claimed {
    margin-bottom: 12px;
}
.store-checkout-discount-login-hint {
    margin: 0 0 4px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-muted, #6b7280);
}
.store-checkout-discount-login-hint a {
    color: var(--coffee-900, #1a0f0a);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.store-checkout-claimed-label {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
}
.store-checkout-claimed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.store-checkout-claimed-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(26, 15, 10, 0.14);
    border-radius: 999px;
    background: #fff;
    color: var(--coffee-900, #1a0f0a);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.store-checkout-claimed-chip:hover,
.store-checkout-claimed-chip:focus-visible {
    border-color: var(--caramel, #b08247);
    outline: none;
}
.store-checkout-claimed-chip.is-active {
    background: rgba(176, 130, 71, 0.12);
    border-color: var(--caramel, #b08247);
    color: var(--caramel-dark, #8a6230);
}
.store-checkout-applied {
    margin-top: 12px;
}
.store-checkout-applied-label {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
}
.store-checkout-applied-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.store-checkout-applied-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 8px 8px 8px 12px;
    border: 1px solid rgba(176, 130, 71, 0.45);
    border-radius: 999px;
    background: rgba(176, 130, 71, 0.12);
    color: var(--caramel-dark, #8a6230);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.store-checkout-applied-chip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.store-checkout-applied-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(26, 15, 10, 0.08);
    color: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}
.store-checkout-applied-remove:hover,
.store-checkout-applied-remove:focus-visible {
    background: rgba(26, 15, 10, 0.16);
    outline: none;
}
.store-checkout-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 8px;
}
.store-checkout-actions .btn {
    min-height: 46px;
}
@media (max-width: 520px) {
    .store-checkout-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .store-checkout-actions .btn {
        width: 100%;
        justify-content: center;
    }
}
.store-checkout-alert {
    margin-bottom: 16px;
}
.store-checkout-form > .form-group {
    margin-bottom: 16px;
}
.store-checkout-form .form-control {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(26, 15, 10, 0.15);
    font-size: 1rem;
    font-family: inherit;
    background: var(--bg-white);
    color: var(--text-dark);
}
.store-checkout-form .form-control:focus {
    outline: none;
    border-color: var(--coffee-400);
    box-shadow: 0 0 0 3px rgba(111, 63, 44, 0.15);
}
.store-checkout-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 16px;
}
.store-checkout-form-row .form-group {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
    margin-bottom: 0;
}
.store-checkout-section-title {
    margin: 8px 0 14px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
}
.store-checkout-kind-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(26, 15, 10, 0.05);
}
.store-checkout-kind-tab {
    flex: 1 1 0;
    appearance: none;
    border: 0;
    border-radius: 9px;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-medium);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.store-checkout-kind-tab:hover {
    color: var(--text-dark);
}
.store-checkout-kind-tab.is-active {
    color: var(--text-dark);
    background: #fff;
    box-shadow: 0 1px 2px rgba(26, 15, 10, 0.08);
}
.store-checkout-company-section {
    margin: 0 0 12px;
}
.store-checkout-company-section[hidden] {
    display: none !important;
}
.store-checkout-billing-toggle {
    margin-top: 8px;
    margin-bottom: 8px;
}
.store-checkout-billing-section {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(26, 15, 10, 0.08);
}
.store-checkout-billing-section[hidden] {
    display: none !important;
}
.store-checkout-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-medium);
}
.store-checkout-required-mark {
    color: #b45309;
    font-weight: 700;
}
.store-checkout-pay-methods {
    margin-bottom: 8px;
}
.store-checkout-stripe-unavailable {
    margin-bottom: 16px;
    font-size: 0.9rem;
}
.store-checkout-method-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.store-checkout-method-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    border: 2px solid rgba(26, 15, 10, 0.1);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.store-checkout-method-option:has(input:checked) {
    border-color: var(--coffee-500);
    background: var(--cream);
    box-shadow: var(--shadow-sm);
}
.store-checkout-method-option:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}
.store-checkout-method-option input {
    margin-top: 4px;
    flex-shrink: 0;
    accent-color: var(--coffee-600);
}
.store-checkout-method-option-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.store-checkout-method-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--coffee-900);
}
.store-checkout-method-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.store-checkout-pay-actions {
    flex-wrap: wrap;
}

.store-checkout-pay-wrap {
    padding: 4px 0 8px;
}
.store-checkout-pay-wrap--hidden {
    display: none !important;
}
.store-checkout-payment-element {
    padding: 16px 18px;
    margin-bottom: 12px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid rgba(26, 15, 10, 0.08);
}
.store-checkout-empty {
    text-align: center;
    padding: 16px 8px 8px;
}
.store-checkout-empty-text {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 20px;
    line-height: 1.6;
}
.store-checkout-final {
    text-align: center;
    padding: 28px 20px 36px;
}
.store-checkout-final .state-icon {
    margin-bottom: 16px;
}
.store-checkout-final .state-title {
    margin-bottom: 10px;
}
.store-checkout-final .state-text {
    margin-bottom: 24px;
}
.store-checkout-final .state-text strong {
    color: var(--text-dark);
    font-weight: 700;
}
.store-checkout-next-steps {
    text-align: left;
    max-width: 440px;
    margin: 0 auto 28px;
    padding: 18px 18px 8px;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
}
.store-checkout-next-steps-title {
    margin: 0 0 14px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.02em;
}
.store-checkout-next-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.store-checkout-next-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.store-checkout-next-step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #93c5fd;
}
.store-checkout-next-step-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(26, 15, 10, 0.06);
}
.store-checkout-next-step:last-child .store-checkout-next-step-body {
    border-bottom: none;
    padding-bottom: 6px;
}
.store-checkout-next-step-body strong {
    font-size: 0.92rem;
    color: var(--text-dark);
    font-weight: 700;
}
.store-checkout-next-step-body span {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.store-checkout-final .store-checkout-actions-row {
    margin-top: 4px;
}

/* === Featured products: per-type horizontal rows === */
.products-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.products-row-block {
    width: 100%;
}

.products-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.products-row-title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.2;
}

.products-row-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.products-row-more {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-medium);
    background: var(--surface-panel);
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.products-row-more:hover {
    background: var(--coffee-900);
    color: #fff;
    border-color: var(--coffee-900);
}

.products-row-arrows {
    display: flex;
    gap: 6px;
}

.products-row-arrow {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-medium);
    background: var(--surface-panel);
    color: var(--text-dark);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
        transform 0.18s ease;
}

.products-row-arrow:hover {
    background: var(--coffee-900);
    color: #fff;
    border-color: var(--coffee-900);
    transform: translateY(-1px);
}

.products-row-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 300px);
    gap: 16px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    padding: 4px 2px 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.products-row-strip > .product-card {
    scroll-snap-align: start;
    min-width: 0;
    height: 100%;
}

.products-row-strip .product-card--strip .product-card-cta-row .btn-cart {
    padding-inline: 10px;
    font-size: 0.8125rem;
}

.products-row-strip .product-card--strip .product-card-cta-row .btn-cart span {
    letter-spacing: 0.02em;
}

.products-row-strip::-webkit-scrollbar {
    height: 8px;
}

.products-row-strip::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 999px;
}

.products-row-strip::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 768px) {
    .products-row-arrows {
        display: none;
    }

    .products-row-strip {
        grid-auto-columns: 78%;
    }
}

/* === Become a member CTA === */
.store-member-cta {
    background: transparent;
}

.store-member-cta-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(ellipse 80% 70% at 100% 0%, rgba(201, 134, 46, 0.1), transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 246, 240, 0.98) 100%);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
}

.store-member-cta-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: clamp(280px, 32vw, 420px);
}

.store-member-cta-media {
    margin: 0;
    min-height: 100%;
    background: var(--surface-subtle);
}

.store-member-cta-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(220px, 32vw, 420px);
    object-fit: cover;
    object-position: center;
}

.store-member-cta-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 4vw, 48px);
}

.store-member-cta-copy .section-label-strip--inline {
    margin-bottom: 12px;
}

.store-member-cta-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.8vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--coffee-900);
    margin: 0 0 12px;
    line-height: 1.08;
}

.store-member-cta-title span {
    color: var(--caramel);
}

.store-member-cta-text {
    margin: 0 0 24px;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 46ch;
}

.store-member-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.store-member-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding-inline: 22px;
}

.store-member-cta-btn--ghost {
    background: transparent;
    color: var(--coffee-800);
    border: 1px solid var(--border-subtle);
    box-shadow: none;
}

.store-member-cta-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.75);
    color: var(--coffee-900);
    border-color: color-mix(in srgb, var(--caramel) 35%, var(--border-subtle));
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .store-member-cta-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .store-member-cta-image {
        min-height: clamp(200px, 42vw, 280px);
    }

    .store-member-cta-copy {
        padding: clamp(24px, 5vw, 36px);
    }
}

@media (max-width: 600px) {
    .store-member-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .store-member-cta-btn {
        width: 100%;
    }
}

/* === Recent orders marquee === */
.recent-orders-section {
    /*background: var(--bg-primary);*/
    overflow: hidden; /* contain the full-width marquee strip */
}

/* Two identical groups in a row, both sliding left at the same speed; the
   second is offset by one group-width + gap so it lands exactly where the
   first started, producing a seamless infinite loop with no JS. */
.recent-orders-marquee {
    --marquee-gap: 20px;
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Soft fades at the edges so cards appear/disappear gracefully. */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000 6%,
        #000 94%,
        transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0,
        #000 6%,
        #000 94%,
        transparent 100%);
}

.recent-orders-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--marquee-gap);
    width: max-content;
}

.recent-orders-marquee-group {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--marquee-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    animation: recent-orders-scroll var(--marquee-duration, 60s) linear infinite;
}

/* Pause when a visitor wants to read or click a card. */
.recent-orders-marquee:hover .recent-orders-marquee-group,
.recent-orders-marquee:focus-within .recent-orders-marquee-group {
    animation-play-state: paused;
}

@keyframes recent-orders-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - var(--marquee-gap))); }
}

.recent-orders-marquee-item {
    flex: 0 0 240px;
    width: 240px;
}

.recent-orders-marquee-item .product-card {
    height: 100%;
}

@media (max-width: 768px) {
    .recent-orders-marquee {
        --marquee-gap: 14px;
    }
    .recent-orders-marquee-item {
        flex-basis: 200px;
        width: 200px;
    }
}

@media (max-width: 480px) {
    .recent-orders-marquee-item {
        flex-basis: 170px;
        width: 170px;
    }
}

/* Respect reduced-motion preferences: stop animating, but keep the strip
   horizontally scrollable so visitors still get something useful. */
@media (prefers-reduced-motion: reduce) {
    .recent-orders-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .recent-orders-marquee-group {
        animation: none;
    }
    /* Hide the duplicate group; with no animation it would just be repeats. */
    .recent-orders-marquee-track > .recent-orders-marquee-group[aria-hidden="true"] {
        display: none;
    }
}

/* === Combined shop section (categories + product shelves) === */
.store-shop {
    /*background: var(--bg-primary);*/  
}

.store-shop-shelves {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.store-shop-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 2px 0;
    opacity: 0.7;
}

/* Compact (categories) variant of the shelf: narrower cells, no aspect ratio. */
.products-row-block--compact .products-row-strip {
    grid-auto-columns: minmax(180px, 220px);
}

.products-row-block--compact .products-row-strip > .category-card {
    scroll-snap-align: start;
    min-width: 0;
    height: 100%;
    min-height: 128px;
    padding: 18px 14px;
}

@media (max-width: 768px) {
    .products-row-block--compact .products-row-strip {
        grid-auto-columns: 62%;
    }
}

/* === Single product detail page === */
.store-product-page {
   /* background: var(--bg-primary);*/
}

.store-product-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 22px;
}

.store-product-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.18s ease;
}

.store-product-breadcrumb a:hover {
    color: var(--coffee-900);
}

.store-product-breadcrumb .is-current {
    color: var(--text-dark);
    font-weight: 600;
}

.store-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 48px);
    align-items: flex-start;
}

/* --- Gallery --- */
.store-product-gallery {
    position: sticky;
    top: 96px;
}

.store-product-gallery-main {
    position: relative;
    aspect-ratio: 1;
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.store-product-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.store-product-gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--coffee-100), var(--coffee-50));
    font-size: 4rem;
}

.store-product-flag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.store-product-flag--out {
    background: var(--coffee-900);
    color: #fff;
}

.store-product-flag--low {
    background: var(--caramel);
    color: #fff;
}

.store-product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.store-product-thumb {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.store-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.store-product-thumb:hover {
    transform: translateY(-2px);
}

.store-product-thumb.is-active {
    border-color: var(--coffee-800);
    box-shadow: 0 0 0 2px var(--surface-panel) inset;
}

/* --- Details panel --- */
.store-product-details {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.8vw, 12px);
    max-width: 34rem;
}

.store-product-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
}

.store-product-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 4px;
    background: var(--surface-panel);
    color: var(--coffee-700);
    border: 1px solid var(--border-medium);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.25;
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.store-product-pill--type {
    font-weight: 600;
    color: var(--coffee-900);
    background: #fff;
    border-color: var(--border-medium);
    border-left: 3px solid var(--caramel);
    padding-left: 10px;
}

a.store-product-pill {
    color: var(--coffee-700);
}

a.store-product-pill:hover,
a.store-product-pill:focus-visible {
    background: #fff;
    color: var(--coffee-900);
    border-color: var(--coffee-600);
    outline: none;
    box-shadow: var(--ring-focus);
}

.store-product-title {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.18;
    margin: 0;
    letter-spacing: -0.02em;
}

.store-product-stock-row {
    margin: 0;
}

.store-product-price-row {
    margin: 0;
}

.store-product-price-row--discounted {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.store-product-savings {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #166534;
}

.store-product-savings strong {
    font-weight: 700;
    color: #15803d;
}

.store-product-price-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    row-gap: 2px;
}

.store-product-price {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.store-product-price--single {
    display: inline-block;
    font-size: clamp(1.45rem, 2.35vw, 1.95rem);
    font-weight: 800;
    color: var(--coffee-700);
    line-height: 1.1;
}

.store-product-price--sale {
    display: inline-block;
    font-size: clamp(1.45rem, 2.5vw, 2.05rem);
    font-weight: 800;
    color: #15803d;
    line-height: 1.1;
}

.store-product-price--was {
    display: inline-block;
    font-size: 1.02rem;
    font-weight: 600;
    color: #dc2626;
    text-decoration: line-through;
    opacity: 0.95;
    line-height: 1.2;
}

.store-product-price-currency {
    font-size: 0.68em;
    font-weight: 700;
    margin-left: 0.06em;
    opacity: 0.92;
}

.store-product-price-vat {
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.store-product-stock-row + .store-product-price-row {
    margin-top: 2px;
}

.store-product-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, #16a34a 14%, var(--surface-panel));
    color: #166534;
    border: 1px solid color-mix(in srgb, #16a34a 32%, transparent);
    font-size: 0.82rem;
    font-weight: 600;
}

.store-product-stock--low {
    background: color-mix(in srgb, var(--caramel) 18%, var(--surface-panel));
    color: var(--coffee-800);
    border-color: color-mix(in srgb, var(--caramel) 35%, transparent);
}

.store-product-stock--out {
    background: var(--surface-subtle);
    color: var(--text-muted);
    border-color: var(--border-medium);
}

.store-product-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 4px;
}

.store-product-cta + .store-product-shipping {
    margin-top: 18px;
}

.store-product-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 220px;
    min-height: 48px;
    font-weight: 700;
    background: var(--coffee-900, #1a0f0a);
    color: #fff;
    border: 1px solid var(--coffee-900, #1a0f0a);
    box-shadow: var(--shadow-xs);
}

.store-product-cart-btn .btn-cart__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.store-product-cart-btn:hover:not(:disabled) {
    background: var(--coffee-800, #3d2518);
    border-color: var(--coffee-800, #3d2518);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.store-product-cart-btn:disabled {
    background: var(--text-muted, #6b584d);
    border-color: var(--text-muted, #6b584d);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.store-product-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
}

.store-product-back-btn__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.store-product-full-box-btn {
    flex: 1 1 100%;
    width: 100%;
    min-height: 48px;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--caramel) 55%, var(--border-subtle));
    background: color-mix(in srgb, var(--caramel) 12%, var(--surface-panel));
    color: var(--coffee-900, #1a0f0a);
    box-shadow: var(--shadow-xs);
}

.store-product-full-box-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--caramel) 22%, var(--surface-panel));
    border-color: var(--caramel);
    color: var(--coffee-900, #1a0f0a);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.store-product-full-box-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.store-product-shipping {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 4px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--caramel) 24%, var(--border-subtle));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--caramel) 10%, var(--surface-panel)),
        var(--surface-panel)
    );
    box-shadow: var(--shadow-xs);
}

.store-product-shipping-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--caramel) 16%, #fff);
    color: var(--caramel-dark, #9a6808);
}

.store-product-shipping-icon--flag {
    padding: 9px 8px;
}

.store-product-shipping-icon--flag svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(26, 15, 10, 0.1);
}

.store-product-shipping + .store-product-shipping {
    margin-top: 10px;
}

.store-product-shipping-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.store-product-shipping-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--coffee-900, #1a0f0a);
}

.store-product-shipping-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary, #5c4338);
}

.store-product-shipping-text strong {
    color: var(--coffee-900, #1a0f0a);
    font-weight: 700;
}

.store-product-shipping-link {
    margin-top: 2px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--caramel-dark, #9a6808);
    text-decoration: none;
}

.store-product-shipping-link:hover {
    text-decoration: underline;
}

.store-product-section-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 12px;
}

.store-product-description {
    margin-top: 4px;
    border-top: 1px solid var(--border-subtle);
    padding-top: clamp(14px, 3vw, 18px);
}

.store-product-description-body {
    color: var(--text-dark);
    line-height: 1.7;
    font-size: 0.98rem;
}

/* --- Product insights (description + specs) --- */
.store-product-insights {
    margin-top: clamp(32px, 5vw, 48px);
    padding-top: clamp(28px, 4vw, 40px);
    border-top: 1px solid var(--border-subtle);
}

.store-product-insights-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.store-product-insights-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    font-weight: 700;
    color: var(--coffee-900, #1a0f0a);
    margin: 0 0 14px;
}

.store-product-insights-body,
.store-product-insights-lead {
    color: var(--text-dark);
    line-height: 1.75;
    font-size: 0.98rem;
}

.store-product-insights-lead {
    margin: 0;
}

.store-product-insights-specs {
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.store-product-spec-tabs {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--cream) 40%, var(--surface-panel));
    overflow-x: auto;
    scrollbar-width: thin;
}

.store-product-spec-tab {
    flex: 1 1 auto;
    min-width: max-content;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary, #5c4338);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.store-product-spec-tab:hover {
    color: var(--coffee-900, #1a0f0a);
    background: rgba(255, 255, 255, 0.7);
}

.store-product-spec-tab.is-active {
    color: var(--coffee-900, #1a0f0a);
    background: #fff;
    border-color: color-mix(in srgb, var(--caramel) 28%, var(--border-subtle));
    box-shadow: var(--shadow-xs);
}

.store-product-spec-panels {
    position: relative;
    min-height: 180px;
    font-family: var(--font-sans);
}

.store-product-spec-panel {
    padding: 18px 20px 20px;
    animation: store-product-spec-fade 0.22s ease;
}

.store-product-spec-panel[hidden] {
    display: none;
}

@keyframes store-product-spec-fade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.store-product-spec-facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.store-product-spec-fact {
    display: grid;
    grid-template-columns: minmax(110px, 38%) 1fr;
    gap: 10px 16px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--cream) 35%, #fff);
    border: 1px solid var(--border-subtle);
}

.store-product-spec-fact dt {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6b584d);
}

.store-product-spec-fact dd {
    margin: 0;
    font-size: 0.95rem;
    color: var(--coffee-900, #1a0f0a);
}

.store-product-spec-fact dd code {
    font-size: 0.88rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(92, 67, 56, 0.08);
}

.store-product-spec-hint,
.store-product-spec-note,
.store-product-spec-empty {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary, #5c4338);
}

.store-product-spec-hint {
    margin-bottom: 12px;
}

.store-product-spec-note {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--caramel) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--caramel) 24%, var(--border-subtle));
    color: var(--coffee-900, #1a0f0a);
}

.store-product-spec-download {
    border-top: 1px solid var(--border-subtle);
    padding: 14px 16px 16px;
    background: color-mix(in srgb, var(--cream) 35%, var(--surface-panel));
}

.store-product-spec-download-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--caramel) 28%, var(--border-subtle));
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.store-product-spec-download-link:hover {
    border-color: var(--caramel);
    box-shadow: var(--shadow-xs);
    transform: translateY(-1px);
}

.store-product-spec-download-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--caramel) 14%, #fff);
    color: var(--caramel-dark, #9a6808);
    flex-shrink: 0;
}

.store-product-spec-download-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.store-product-spec-download-text strong {
    font-size: 0.95rem;
    color: var(--coffee-900, #1a0f0a);
}

.store-product-spec-download-text span {
    font-size: 0.82rem;
    color: var(--text-secondary, #5c4338);
}

.store-product-allergen-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.store-product-allergen-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-medium);
    background: #fff;
    color: var(--coffee-800, #3d2518);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.store-product-allergen-chip:hover {
    border-color: color-mix(in srgb, var(--caramel) 40%, var(--border-medium));
    transform: translateY(-1px);
}

.store-product-allergen-chip.is-active {
    border-color: var(--caramel, #c8860a);
    background: color-mix(in srgb, var(--caramel) 14%, #fff);
    box-shadow: 0 6px 16px rgba(200, 134, 10, 0.14);
}

.store-product-nutrition-wrap {
    overflow-x: auto;
}

.store-product-nutrition-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.store-product-nutrition-caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    color: var(--coffee-900, #1a0f0a);
    margin-bottom: 10px;
    padding-bottom: 8px;
}

.store-product-nutrition-table th,
.store-product-nutrition-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
}

.store-product-nutrition-table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6b584d);
    background: color-mix(in srgb, var(--cream) 45%, #fff);
}

.store-product-nutrition-row {
    transition: background 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.store-product-nutrition-row:hover,
.store-product-nutrition-row:focus,
.store-product-nutrition-row.is-highlighted {
    background: color-mix(in srgb, var(--caramel) 10%, #fff);
    box-shadow: inset 3px 0 0 var(--caramel, #c8860a);
}

@media (max-width: 900px) {
    .store-product-insights-layout {
        grid-template-columns: 1fr;
    }

    .store-product-spec-fact {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* --- Product reviews --- */
.store-product-reviews {
    margin-top: clamp(36px, 5vw, 56px);
    padding-top: clamp(28px, 4vw, 40px);
    border-top: 1px solid var(--border-subtle);
}

.store-product-reviews-header {
    margin-bottom: clamp(20px, 3vw, 28px);
}

.store-product-reviews-title {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ink-900);
}

.store-product-reviews-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink-600);
}

.store-product-reviews-summary-stars,
.store-product-review-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--caramel, #f59e0b);
}

.store-product-reviews-summary-stars__star svg {
    width: 20px;
    height: 20px;
}

.store-product-review-stars__star svg {
    width: 16px;
    height: 16px;
}

.store-product-reviews-summary--empty {
    color: var(--ink-500);
}

.store-product-reviews-flash {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.store-product-reviews-flash--success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.store-product-reviews-flash--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.store-product-reviews-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}

.store-product-reviews-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.store-product-review-item {
    padding: 18px 20px;
    background: var(--surface-panel, #fff);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.store-product-review-item--featured {
    border-color: #fcd34d;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 60%);
}

.store-product-review-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.store-product-review-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.store-product-review-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
}

.store-product-review-item-author {
    font-size: 0.85rem;
    color: var(--ink-500);
    text-align: right;
}

.store-product-review-date {
    margin-left: 8px;
    opacity: 0.85;
}

.store-product-review-item-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--ink-900);
}

.store-product-review-item-body {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.65;
    color: var(--ink-700);
}

.store-product-reviews-empty {
    margin: 0;
    color: var(--ink-500);
    font-size: 0.925rem;
}

.store-product-reviews-form-wrap {
    position: sticky;
    top: 24px;
    padding: 22px;
    background: var(--surface-panel, #fff);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.store-product-reviews-form-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.store-product-reviews-form-hint {
    margin: 0 0 18px;
    font-size: 0.85rem;
    color: var(--ink-500);
}

.store-product-reviews-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.store-product-reviews-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.store-product-reviews-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-600);
}

.store-product-reviews-rating-field {
    border: none;
    margin: 0;
    padding: 0;
}

.store-product-reviews-rating-field .account-star-rating {
    margin-top: 4px;
}

.store-product-reviews-textarea {
    min-height: 120px;
    resize: vertical;
}

.store-product-reviews-submit {
    width: 100%;
    justify-content: center;
    gap: 10px;
}

.store-product-reviews-own-title {
    margin: 10px 0 6px;
}

.store-product-reviews-own-body {
    margin: 8px 0 0;
    font-size: 0.925rem;
    line-height: 1.6;
    color: var(--ink-700);
}

.store-product-reviews-own-status {
    margin: 0 0 10px;
    font-size: 0.875rem;
    color: var(--ink-500);
}

@media (max-width: 880px) {
    .store-product-reviews-layout {
        grid-template-columns: 1fr;
    }

    .store-product-reviews-form-wrap {
        position: static;
    }
}

/* --- Related products row --- */
.store-product-related {
    margin-top: clamp(36px, 5vw, 56px);
    padding-top: clamp(28px, 4vw, 40px);
    border-top: 1px solid var(--border-subtle);
}

.store-product-related-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.store-product-related .products-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .store-product-related .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 880px) {
    .store-product-related .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .store-product-related .products-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

@media (max-width: 880px) {
    .store-product-layout {
        grid-template-columns: 1fr;
    }

    .store-product-gallery {
        position: static;
    }
}

/* === Most-bought (top 5 best-sellers) =================================== */
.most-bought-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.most-bought-item {
    /* `<li>` carrier for a `.product-card` — no chrome of its own; the card
       already provides border, shadow, and the absolute click overlay. */
    display: flex;
    min-width: 0;
}

.most-bought-item > .product-card {
    width: 100%;
}

/* Most-bought primary CTA: full label on desktop, Adaugă on mobile */
.most-bought .btn-cart-label--compact {
    display: none;
}

@media (max-width: 768px) {
    .most-bought .btn-cart-label--full {
        display: none;
    }

    .most-bought .btn-cart-label--compact {
        display: inline;
    }
}

@media (max-width: 1100px) {
    .most-bought-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Drop the slowest-selling card so the row stays balanced (no orphan). */
    .most-bought-item:nth-child(5) { display: none; }
}

@media (max-width: 880px) {
    .most-bought-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .most-bought-item:nth-child(4),
    .most-bought-item:nth-child(5) { display: none; }
}

@media (max-width: 768px) {
    .most-bought-grid {
        display: grid;
        grid-template-columns: unset;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 2px;
        padding: 4px 2px 10px;
        scrollbar-width: thin;
        scrollbar-color: var(--border-medium) transparent;
        -webkit-overflow-scrolling: touch;
    }

    .most-bought-item {
        scroll-snap-align: start;
        display: flex;
    }

    .most-bought-item:nth-child(4),
    .most-bought-item:nth-child(5) {
        display: flex;
    }

    .most-bought-grid::-webkit-scrollbar {
        height: 8px;
    }

    .most-bought-grid::-webkit-scrollbar-thumb {
        background: var(--border-medium);
        border-radius: 999px;
    }

    .most-bought-grid::-webkit-scrollbar-track {
        background: transparent;
    }

    /* Match shelf/strip cards: fixed-ratio image cell, vertically centered bottle */
    .most-bought .product-card {
        align-items: center;
    }

    .most-bought .product-image {
        aspect-ratio: 1 / 1;
        height: auto;
        min-height: 0;
        align-self: center;
    }

    .most-bought .product-image-frame {
        padding: 2px;
    }

    .most-bought .product-image-frame img {
        object-position: center;
        object-fit: contain;
        transform: scale(1.12);
        transform-origin: center center;
    }

    .most-bought .product-card:hover .product-image-frame img {
        transform: scale(1.16);
    }

    .most-bought .product-card .btn-cart,
    .most-bought .product-card-cta-row .btn-cart {
        padding: 5px 8px;
        font-size: 0.75rem;
        min-height: 0;
        line-height: 1.2;
        gap: 4px;
    }

    .most-bought .product-card-cta-row .btn-cart--syrup-box,
    .most-bought .product-card-cta-row .btn-cart--pack-six {
        min-width: 2.25rem;
        padding-inline: 6px;
    }

    .most-bought .product-card-favorite-form,
    .most-bought .product-image > .product-card-favorite {
        top: 2px;
        right: 4px;
    }
}

/* === Romania distributor map (judete) =================================== */
/*
 * Two-column premium card: SVG map of Romania's 42 counties on the left,
 * searchable chip list + partner CTA on the right. Hovering a county (or
 * its chip) anchors a floating popup over the map listing every wholesaler
 * in that judet with their phone, e-mail and address. Counties without
 * registered distributors fall back to a "devino partener" CTA inside the
 * same popup so the user always gets a useful answer.
 */
.store-judete .container {
    position: relative;
}

.store-judete-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: clamp(20px, 2.4vw, 36px);
    align-items: stretch;
}

.store-judete-map-wrap {
    position: relative;
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(16px, 2vw, 28px);
    /* Popup may be slightly wider than the map at small breakpoints; clip to
     * keep the rounded corners crisp. */
    overflow: hidden;
    isolation: isolate;
}

.store-judete-map-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 35%, var(--accent-soft) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(10, 10, 10, 0.04) 0%, transparent 70%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.store-judete-stats {
    position: absolute;
    top: clamp(14px, 1.6vw, 22px);
    left: clamp(14px, 1.6vw, 22px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
    pointer-events: none;
}

.store-judete-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    line-height: 1.1;
}

.store-judete-stat-num {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-weight: 800;
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    color: var(--ink-900);
    letter-spacing: -0.02em;
}

.store-judete-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-500);
}

.store-judete-map {
    position: relative;
    z-index: 1;
    aspect-ratio: 1000 / 704;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-judete-svg {
    width: 100%;
    height: 100%;
    overflow: visible; /* allow active-state shadow filter to bleed past path */
    display: block;
}

/*
 * Resting state. Counties with at least one registered distributor pick up
 * a warm cream tint so the "we operate here" map reads at a glance; empty
 * counties stay neutral grey so they obviously stand apart.
 */
.judet-path {
    fill: var(--ink-100);
    stroke: var(--surface-panel);
    stroke-width: 0.8;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 180ms ease, stroke 180ms ease, filter 180ms ease;
    outline: none;
}

.judet-path[data-has-wholesalers="1"] {
    fill: #06402B;
}

.judet-path:hover,
.judet-path:focus-visible {
    fill: var(--accent);
    stroke: var(--surface-panel);
    stroke-width: 1.2;
    filter: drop-shadow(0 4px 10px rgba(176, 130, 71, 0.35));
}

.judet-path.is-active {
    fill: var(--ink-900);
    stroke: var(--accent);
    stroke-width: 1.4;
    filter: drop-shadow(0 6px 14px rgba(10, 10, 10, 0.22));
}

.judet-path:focus-visible {
    outline: none;
}

/* Dim sibling counties when one is active so the eye lands cleanly on the
 * focused polygon (and the popup that points at it). */
.store-judete-map:has(.judet-path.is-active) .judet-path:not(.is-active):not(:hover) {
    opacity: 0.55;
}

/* Popup open: no hover or clicks on other counties/chips until dismissed. */
#judete-map.judete-popup-active .judet-path:not(.is-active) {
    pointer-events: none;
    cursor: default;
}

#judete-map.judete-popup-active .store-judete-chip:not(.is-active) {
    pointer-events: none;
    cursor: default;
}

/* Keep the selected county/chip visually frozen (no hover accent). */
#judete-map.judete-popup-active .judet-path.is-active:hover {
    fill: var(--ink-900);
    stroke: var(--accent);
    stroke-width: 1.4;
    filter: drop-shadow(0 6px 14px rgba(10, 10, 10, 0.22));
}

#judete-map.judete-popup-active .store-judete-chip.is-active:hover {
    background: var(--ink-900);
    color: var(--white);
    box-shadow: var(--shadow-sm);
}

/* ── Floating distributors popup ─────────────────────────────────────── */
/*
 * Anchored absolutely inside `.store-judete-map-wrap` and positioned by JS
 * over the active county's bounding box. A small triangular arrow (whose
 * x offset is set inline through `--judete-arrow-x`) connects the card to
 * the county; the `data-arrow` attribute decides whether the arrow points
 * down (popup is above) or up (popup is below the county).
 */
.store-judete-popup {
    position: absolute;
    z-index: 5;
    width: clamp(260px, 28vw, 340px);
    background: var(--surface-panel);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 14px 14px 12px;
    /* Let hover reach counties underneath while the panel overlays the SVG;
       interactive descendants opt back into pointer-events below. */
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 160ms ease, transform 160ms ease;
    --judete-arrow-x: 50%;
}

.store-judete-popup.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.store-judete-popup[hidden] {
    display: none;
}

.store-judete-popup a {
    pointer-events: auto;
}

/* Arrow — drawn as two stacked pseudo-elements (border + fill) so we get a
 * 1px hairline matching the popup's frame. */
.store-judete-popup::before,
.store-judete-popup::after {
    content: '';
    position: absolute;
    left: var(--judete-arrow-x);
    width: 0;
    height: 0;
    transform: translateX(-50%);
}
.store-judete-popup[data-arrow="bottom"]::before {
    bottom: -9px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid var(--border-medium);
}
.store-judete-popup[data-arrow="bottom"]::after {
    bottom: -7px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--surface-panel);
}
.store-judete-popup[data-arrow="top"]::before {
    top: -9px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid var(--border-medium);
}
.store-judete-popup[data-arrow="top"]::after {
    top: -7px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--surface-panel);
}

.store-judete-popup-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.store-judete-popup-headings {
    min-width: 0;
    line-height: 1.15;
}

.store-judete-popup-eyebrow {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-500);
    font-weight: 600;
}

.store-judete-popup-title {
    margin: 2px 0 0;
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink-900);
    letter-spacing: -0.01em;
}

.store-judete-popup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 700;
}

.store-judete-popup-close {
    pointer-events: auto;
    background: transparent;
    border: 0;
    color: var(--ink-500);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    transition: background 140ms ease, color 140ms ease;
}
.store-judete-popup-close:hover,
.store-judete-popup-close:focus-visible {
    background: var(--surface-hover);
    color: var(--ink-900);
    outline: none;
}

.store-judete-popup-list {
    pointer-events: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-300) transparent;
    /* Bleed beyond the padding so divider lines reach edge-to-edge. */
    margin: 0 -4px;
    padding: 0 4px;
}

.store-judete-popup-list::-webkit-scrollbar { width: 6px; }
.store-judete-popup-list::-webkit-scrollbar-thumb {
    background: var(--ink-200);
    border-radius: 999px;
}

.store-judete-distributor {
    padding: 10px 12px;
    background: var(--surface-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

.store-judete-distributor-name {
    font-weight: 700;
    color: var(--ink-900);
    font-size: 0.9rem;
    line-height: 1.25;
}

.store-judete-distributor-contact {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--ink-500);
}

.store-judete-distributor-meta {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.store-judete-distributor-meta li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--ink-700);
    line-height: 1.4;
}

.store-judete-distributor-meta a {
    color: var(--ink-700);
    text-decoration: none;
    transition: color 120ms ease;
}

.store-judete-distributor-meta a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.store-judete-popup-icon {
    color: var(--ink-400);
    width: 14px;
    flex: 0 0 auto;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Empty-state CTA — shown when a county has no registered distributors. */
.store-judete-popup-empty {
    padding: 6px 4px 2px;
    color: var(--ink-700);
    font-size: 0.88rem;
    line-height: 1.5;
}

.store-judete-popup-empty p {
    margin: 0 0 10px;
}

.store-judete-popup-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--accent);
    color: var(--white);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 140ms ease, transform 140ms ease;
}
.store-judete-popup-cta:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* ── Info aside (search + chip list + partner CTA) ───────────────────── */
.store-judete-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.store-judete-search {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface-panel);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0 12px 0 38px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.store-judete-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(176, 130, 71, 0.18);
}

.store-judete-search-icon {
    position: absolute;
    left: 14px;
    color: var(--ink-400);
    font-size: 1.1rem;
    line-height: 1;
    pointer-events: none;
}

.store-judete-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 11px 0;
    font-size: 0.95rem;
    color: var(--ink-900);
    font-family: inherit;
}

.store-judete-search input::placeholder {
    color: var(--ink-400);
}

.store-judete-list {
    list-style: none;
    margin: 0;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    scrollbar-width: thin;
    scrollbar-color: var(--ink-300) transparent;
}

.store-judete-list::-webkit-scrollbar { width: 6px; }
.store-judete-list::-webkit-scrollbar-track { background: transparent; }
.store-judete-list::-webkit-scrollbar-thumb {
    background: var(--ink-200);
    border-radius: 999px;
}

.store-judete-chip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-700);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
    line-height: 1.3;
}

.store-judete-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-judete-chip-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.store-judete-chip:hover,
.store-judete-chip:focus-visible {
    background: var(--surface-panel);
    color: var(--ink-900);
    outline: none;
    box-shadow: var(--shadow-xs);
}

.store-judete-chip.is-active {
    background: var(--ink-900);
    color: var(--white);
    box-shadow: var(--shadow-sm);
}
.store-judete-chip.is-active .store-judete-chip-count {
    background: var(--accent);
    color: var(--white);
}

.store-judete-cta {
    margin: 4px 0 0;
    padding: 14px 16px;
    background: var(--surface-inverse);
    color: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.88rem;
    line-height: 1.4;
}

.store-judete-cta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
}

.store-judete-cta-link {
    flex: 0 0 auto;
    color: var(--accent-hover);
    font-weight: 700;
    text-decoration: none;
    transition: color 140ms ease;
}
.store-judete-cta-link:hover {
    color: var(--white);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .store-judete-layout { grid-template-columns: 1fr; }
    .store-judete-list { max-height: 280px; }
    .store-judete-popup { width: clamp(240px, 60vw, 320px); }
}

@media (max-width: 640px) {
    .store-judete-stats { flex-direction: row; gap: 8px; }
    .store-judete-stat { padding: 8px 10px; }
    .store-judete-stat-num { font-size: 1.05rem; }
    .store-judete-stat-label { font-size: 0.65rem; }
    .store-judete-list { grid-template-columns: 1fr; }
    .store-judete-popup { width: min(86vw, 320px); }
    .store-judete-cta { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .judet-path,
    .store-judete-popup,
    .store-judete-popup-cta { transition: none; }
}

/* ===== PRODUCT TYPES (homepage — 3-col, image cards, left-anchored title) ===== */

.store-product-types {
    /*background: var(--surface-elevated);*/
    /*border-block: 1px solid var(--border-subtle);*/
}

.store-product-types .section-header {
    margin-bottom: clamp(28px, 4vw, 40px);
}

.store-product-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.2vw, 24px);
}

@media (max-width: 992px) {
    .store-product-types-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .store-product-types-grid {
        gap: 12px;
    }
}

.store-product-type-card {
    position: relative;
    display: block;
    aspect-ratio: 7 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-medium);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.32s ease;
}

@media (max-width: 540px) {
    .store-product-type-card {
        aspect-ratio: 16 / 10;
    }
}

.store-product-type-card-media {
    position: absolute;
    inset: 0;
    background-color: var(--dark-900);
    background-repeat: no-repeat;
    transform: scale(1);
    transform-origin: center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.store-product-type-card-media--fallback {
    background-image: linear-gradient(
        152deg,
        var(--dark-800) 0%,
        var(--dark-950) 52%,
        #050505 100%
    );
}

.store-product-type-card-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        195deg,
        rgba(5, 5, 5, 0.15) 0%,
        rgba(8, 8, 8, 0.35) 38%,
        rgba(5, 5, 5, 0.88) 100%
    );
    transition: opacity 0.38s ease, background 0.38s ease;
    pointer-events: none;
}

.store-product-type-card-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    padding: clamp(18px, 5vw, 32px);
    gap: 10px;
    pointer-events: none;
}

.store-product-type-card-name {
    font-family: var(--font-banner-chips);
    font-size: clamp(1.2rem, 2.8vw, 1.65rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    line-height: 1.15;
    color: var(--white);
    text-shadow:
        0 2px 28px rgba(0, 0, 0, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.75);
    max-width: 92%;
}

.store-product-type-card-count {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.store-product-type-card:hover {
    box-shadow: var(--shadow-lg), var(--shadow-accent);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-medium));
}

.store-product-type-card:hover .store-product-type-card-media {
    transform: scale(1.07);
}

.store-product-type-card:hover .store-product-type-card-scrim {
    opacity: 0.94;
    background: linear-gradient(
        195deg,
        rgba(5, 5, 5, 0.2) 0%,
        rgba(8, 8, 8, 0.45) 42%,
        rgba(5, 5, 5, 0.9) 100%
    );
}

.store-product-type-card:focus-visible {
    outline: none;
    box-shadow: var(--shadow-md), var(--ring-focus);
}

@media (prefers-reduced-motion: reduce) {
    .store-product-type-card,
    .store-product-type-card-media,
    .store-product-type-card-scrim {
        transition: none !important;
    }
    .store-product-type-card:hover,
    .store-product-type-card:hover .store-product-type-card-media {
        transform: none;
    }
}

/* ===== Instagram + catalog split (homepage) ===== */
.store-instagram-catalog {
    --store-catalog-cover-max-w: clamp(160px, 20vw, 260px);
    background-color: var(--coffee-darkest);
    /* background-image: url('/themes/supremedrops/assets/images/backgrounds/dark.png'); */
    background-size: cover;
    background-position: center;
    color: rgba(255, 255, 255, 0.92);
}

.store-instagram-catalog .section-label-strip--on-dark .section-label {
    color: rgba(255, 255, 255, 0.92);
}

.store-instagram-catalog .section-title,
.store-instagram-catalog .store-ig-catalog-title {
    color: #fff;
}

.store-instagram-catalog .store-ig-catalog-intro {
    color: rgba(255, 255, 255, 0.72);
}

.store-instagram-catalog .btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow: none;
}

.store-instagram-catalog .btn-outline:hover,
.store-instagram-catalog .btn-outline:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.62);
}

.store-instagram-catalog .section-title.store-ig-catalog-title {
    margin-bottom: 6px;
}

.store-ig-catalog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
    gap: clamp(28px, 5vw, 48px);
    align-items: stretch;
}

/* Shared header / body / footer rows — body height comes from the square IG grid */
.store-ig-catalog-grid:not(.store-ig-catalog-grid--solo) {
    grid-template-rows: auto auto auto;
    row-gap: clamp(14px, 2.5vw, 20px);
    column-gap: clamp(28px, 5vw, 48px);
}

.store-ig-catalog-grid:not(.store-ig-catalog-grid--solo) .store-ig-catalog-col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
    min-height: 0;
    gap: 0;
}

.store-ig-catalog-grid:not(.store-ig-catalog-grid--solo) .store-ig-catalog-foot {
    margin-top: 0;
}

.store-ig-catalog-grid--solo {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
}

.store-ig-catalog-col {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.5vw, 20px);
    min-width: 0;
}

.store-ig-catalog-col-head {
    text-align: center;
}

.store-ig-catalog-intro {
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 36rem;
}

.store-ig-catalog-grid-mini {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-content: start;
}

.store-ig-catalog-col--catalog .store-ig-catalog-intro {
    max-width: 22rem;
    font-size: 0.9rem;
}

/* Square tiles define the shared body row height; catalog adapts to match */
.store-ig-catalog-grid:not(.store-ig-catalog-grid--solo) .store-ig-catalog-grid-mini {
    align-self: start;
}

/* Middle column — intrinsic height from square tiles */
.store-ig-catalog-col--instagram .store-ig-catalog-grid-mini {
    flex: 0 1 auto;
}

/* Instagram-style empty profile (camera circle + "No Posts Yet") */
.store-ig-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    min-height: clamp(220px, 36vw, 320px);
    padding: clamp(28px, 5vw, 48px) 20px;
    border-radius: var(--radius-md, 12px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.store-ig-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.88);
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 4px;
}

.store-ig-empty-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    line-height: 1.2;
}

.store-ig-empty-text {
    margin: 0;
    max-width: 18rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.62);
}

.store-ig-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: var(--coffee-50, #ebe4dc);
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.06));
}

.store-ig-tile img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    object-position: center;
    transition: transform 0.35s ease;
}

.store-ig-tile:hover img,
.store-ig-tile:focus-visible img {
    transform: scale(1.06);
}

.store-ig-tile:focus-visible {
    outline: none;
    box-shadow: var(--shadow-md), var(--ring-focus, 0 0 0 3px rgba(162, 105, 36, 0.35));
}

.store-ig-tile-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 8, 7, 0) 55%, rgba(10, 8, 7, 0.45) 100%);
    opacity: 0.75;
}

.store-ig-tile-logo {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: #e1306c;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.store-ig-catalog-foot {
    margin-top: auto;
    padding-top: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    text-align: center;
}

.store-catalog-cover-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
}

/* Catalog cover height follows the IG grid row; width from portrait ratio */
.store-ig-catalog-grid:not(.store-ig-catalog-grid--solo) .store-catalog-cover-shell {
    align-self: stretch;
}

.store-ig-catalog-grid:not(.store-ig-catalog-grid--solo) .store-catalog-cover-link {
    height: 100%;
    width: auto;
    max-width: min(100%, var(--store-catalog-cover-max-w));
    aspect-ratio: 2 / 3;
    flex: 0 0 auto;
    align-self: stretch;
}

/* Portrait cover when shown alone */
.store-catalog-cover-link {
    display: flex;
    width: min(100%, var(--store-catalog-cover-max-w));
    flex: 0 1 auto;
    align-self: stretch;
    max-height: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 14px 44px rgba(15, 11, 9, 0.18),
        0 2px 10px rgba(15, 11, 9, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    background: var(--surface-panel, #fff);
}

.store-catalog-cover-link:hover,
.store-catalog-cover-link:focus-visible {
    transform: translateY(-3px);
    box-shadow:
        0 20px 54px rgba(15, 11, 9, 0.22),
        0 4px 14px rgba(15, 11, 9, 0.1);
}

.store-catalog-cover-link:focus-visible {
    outline: none;
    box-shadow:
        0 20px 54px rgba(15, 11, 9, 0.22),
        var(--ring-focus, 0 0 0 3px rgba(162, 105, 36, 0.35));
}

.store-catalog-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

/* Solo column: intrinsic cover height when no sibling column to align with */
.store-ig-catalog-grid--solo .store-catalog-cover-shell {
    flex: 0 1 auto;
    align-items: center;
}

.store-ig-catalog-grid--solo .store-catalog-cover-link {
    display: block;
    width: 100%;
    max-width: var(--store-catalog-cover-max-w);
    margin-inline: auto;
    flex: none;
    align-self: auto;
}

.store-ig-catalog-grid--solo .store-catalog-cover-img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
}

.store-ig-tile-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    line-height: 1;
    background: linear-gradient(145deg, var(--coffee-100), var(--coffee-50));
    color: rgba(44, 34, 29, 0.55);
}

.store-ig-tile--noimg .store-ig-tile-shade {
    opacity: 0.5;
}

@media (max-width: 900px) {
    .store-ig-catalog-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: clamp(32px, 6vw, 48px);
    }

    /* Override desktop subgrid layout (more specific selectors exist above). */
    .store-ig-catalog-grid:not(.store-ig-catalog-grid--solo) .store-ig-catalog-col,
    .store-ig-catalog-grid .store-ig-catalog-col {
        display: flex;
        flex-direction: column;
        grid-row: auto;
        grid-template-rows: none;
        gap: clamp(14px, 2.5vw, 20px);
    }

    .store-ig-catalog-grid .store-ig-catalog-grid-mini {
        height: auto;
        grid-template-rows: none;
        align-content: start;
    }

    .store-ig-catalog-grid .store-ig-tile {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .store-ig-catalog-grid .store-ig-catalog-foot {
        margin-top: auto;
    }

    .store-ig-catalog-grid--solo {
        max-width: none;
    }

    .store-catalog-cover-shell {
        flex: 0 1 auto;
        flex-direction: column;
        align-items: center;
    }

    .store-catalog-cover-link {
        display: block;
        flex: none;
        align-self: auto;
        width: min(100%, var(--store-catalog-cover-max-w));
        max-width: var(--store-catalog-cover-max-w);
        margin-inline: auto;
    }

    .store-catalog-cover-img {
        height: auto;
        aspect-ratio: 2 / 3;
    }

    /* Ensure the two blocks are stacked in the intended order on mobile. */
    .store-ig-catalog-col--instagram { order: 1; }
    .store-ig-catalog-col--catalog { order: 2; }
}

/* Mobile: force Instagram + Catalog to stack (column layout). */
@media (max-width: 768px) {
    .store-ig-catalog-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
    }

    .store-ig-catalog-col {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .store-ig-catalog-col--instagram .store-ig-catalog-grid-mini {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .store-ig-tile img,
    .store-catalog-cover-link {
        transition: none;
    }

    .store-ig-tile:hover img,
    .store-ig-tile:focus-visible img {
        transform: none;
    }

    .store-catalog-cover-link:hover,
    .store-catalog-cover-link:focus-visible {
        transform: none;
    }
}

/* ===== Store About page (/about — AboutService / `about_page`) ===== */
.store-about-page-header,
.store-recipes-page-header,
.store-policy-page-header,
.store-contact-page-header,
.store-auth-page-header,
.store-faq-page-header {
    padding-top: clamp(28px, 5vw, 48px);
    padding-bottom: 0;
}

.store-about-page-header .section-label-strip,
.store-recipes-page-header .section-label-strip,
.store-policy-page-header .section-label-strip,
.store-contact-page-header .section-label-strip,
.store-auth-page-header .section-label-strip,
.store-faq-page-header .section-label-strip {
    margin-bottom: clamp(12px, 2.5vw, 24px);
}

.store-about-hero-section {
    padding-block: clamp(14px, 3vw, 26px);
}

.store-about-hero-inner {
    margin-inline: auto;
}

.store-about-hero-img {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: cover;
}

@media (min-width: 769px) {
    .store-about-hero-img {
        width: 50%;
    }
}

.store-about-block {
    padding: clamp(10px, 1vw, 40px) !important;
    margin-inline: auto;
}

.store-about-block-title {
    font-size: clamp(1.35rem, 2.8vw, 1.65rem);
    margin: 0 0 clamp(14px, 2vw, 20px);
    color: var(--text-primary, #2c221d);
}

.store-about-mission-vision {
    margin-top: clamp(2rem, 4vw, 2.75rem);
}

.store-about-values {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(14px, 2vw, 18px);
}

.store-about-value {
    padding: clamp(14px, 2.3vw, 18px);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-panel, #fff);
    border: 1px solid rgba(44, 34, 29, 0.08);
}

.store-about-value-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: var(--text-primary, #2c221d);
}

.store-about-value-desc {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.58;
    color: var(--text-secondary, #5c4338);
}

.store-about-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(18px, 3vw, 26px);
}

.store-about-member {
    padding: clamp(16px, 2.5vw, 20px);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-panel, #fff);
    border: 1px solid rgba(44, 34, 29, 0.08);
    text-align: center;
}

.store-about-member-photo {
    width: 88px;
    height: 88px;
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(44, 34, 29, 0.1);
    background: var(--coffee-50, #ebe4dc);
}

.store-about-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.store-about-member-name {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: var(--text-primary, #2c221d);
}

.store-about-member-role {
    margin: 0 0 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #6b584d);
}

.store-about-member-bio {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary, #5c4338);
    text-align: left;
}

/* ===== Policy pages (privacy, terms, shipping-refunds, misc pages) ===== */
.store-policy-prose {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text-secondary, #5c4338);
}

.store-policy-intro {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--text-secondary, #5c4338);
}

.store-policy-prose h2 {
    margin: 2rem 0 0.75rem;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    color: var(--coffee-900, #1a0f0a);
}

.store-policy-prose h2:first-of-type {
    margin-top: 1.5rem;
}

.store-policy-prose h3 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.05rem;
    color: var(--coffee-800, #3d2518);
}

.store-policy-prose p {
    margin: 0 0 1.1em;
    line-height: 1.75;
    color: var(--text-secondary, #5c4338);
}

.store-policy-prose li {
    margin: 0 0 0.45em;
    line-height: 1.7;
    color: var(--text-secondary, #5c4338);
}

.store-policy-prose ul,
.store-policy-prose ol {
    list-style-position: outside;
    margin: 0.5rem 0 1.25rem;
    padding-left: 1.35rem;
}

.store-policy-prose a {
    color: var(--caramel-dark, #9a6808);
    font-weight: 600;
    text-decoration: none;
}

.store-policy-prose a:hover {
    text-decoration: underline;
}

.store-policy-prose hr {
    margin: 2rem 0;
    border: none;
    border-top: 1px solid rgba(92, 67, 56, 0.15);
}

.store-policy-prose h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 3vw, 1.85rem);
    color: var(--coffee-900, #1a0f0a);
}

.store-policy-prose blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--caramel, #c4922a);
    background: rgba(196, 146, 42, 0.08);
    border-radius: 0 8px 8px 0;
}

.store-policy-prose pre {
    margin: 1rem 0;
    padding: 1rem;
    overflow-x: auto;
    border-radius: 8px;
    background: rgba(26, 15, 10, 0.06);
    font-size: 0.875rem;
    white-space: pre;
}

.store-policy-prose code {
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: rgba(26, 15, 10, 0.06);
}

.store-policy-prose pre code {
    padding: 0;
    background: transparent;
}

.store-policy-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1rem 0;
}

.store-policy-prose strong {
    font-weight: 700;
    color: var(--coffee-900, #1a0f0a);
}

.store-policy-prose em {
    font-style: italic;
}

.store-about-prose {
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text-secondary, #5c4338);
    text-align: center;
}

.store-about-prose h1 { font-size: 2rem; margin: 36px 0 18px; font-weight: 800; color: var(--text-dark); }
.store-about-prose h2 { font-size: 1.6rem; margin: 32px 0 16px; font-weight: 700; color: var(--text-dark); border-bottom: 2px solid var(--cream); padding-bottom: 10px; }
.store-about-prose h3 { font-size: 1.25rem; margin: 24px 0 12px; font-weight: 700; color: var(--text-dark); }
.store-about-prose p { margin-bottom: 20px; }
.store-about-prose ul, .store-about-prose ol { margin-bottom: 20px; padding-left: 26px; }
.store-about-prose li { margin-bottom: 8px; }
.store-about-prose blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    border-left: 4px solid var(--caramel);
    background: rgba(196, 146, 42, 0.08);
    border-radius: 0 12px 12px 0;
}
.store-about-prose a { color: var(--caramel); font-weight: 600; }
.store-about-prose a:hover { text-decoration: underline; color: var(--coffee-700); }
.store-about-prose code { font-family: ui-monospace, monospace; font-size: 0.9em; background: rgba(26, 15, 10, 0.06); padding: 2px 6px; border-radius: 4px; }
.store-about-prose pre { background: rgba(26, 15, 10, 0.06); padding: 16px; border-radius: 12px; overflow-x: auto; margin-bottom: 20px; }
.store-about-prose pre code { background: transparent; padding: 0; }
.store-about-prose img { max-width: 100%; border-radius: 12px; margin: 28px auto; display: block; }
.store-about-prose hr { border: none; border-top: 2px solid var(--cream); margin: 36px 0; }
.store-about-prose strong { color: var(--text-dark); font-weight: 700; }
.store-about-prose em { font-style: italic; }

/* ===== Store FAQ page (/faq) ===== */
.store-faq-page {
    background: transparent;
}

.store-faq-layout {
    display: flex;
    align-items: flex-start;
    gap: clamp(24px, 4vw, 48px);
}

.store-faq-sidebar {
    flex: 0 0 260px;
    width: 260px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--header-height, 72px) + 16px);
}

.store-faq-sidebar-title {
    margin: 0;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--coffee-900, #1a0f0a);
}

.store-faq-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 32px);
}

.store-faq-content-intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.store-faq-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.store-faq-block + .store-faq-block {
    padding-top: clamp(12px, 2vw, 20px);
    border-top: 1px solid rgba(92, 67, 56, 0.12);
}

.store-faq-block-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.store-faq-block-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--coffee-900, #1a0f0a);
}

.store-faq-block-desc {
    margin: 0;
    max-width: 62ch;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary, #5c4338);
}

.store-faq-block-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(92, 67, 56, 0.1);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted, #6b584d);
}

.store-faq-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.store-faq-category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(92, 67, 56, 0.12);
    background: #fff;
    color: var(--coffee-800, #3d2518);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.store-faq-category-link:hover,
.store-faq-category-link:focus-visible {
    border-color: var(--caramel, #c8860a);
    color: var(--coffee-900, #1a0f0a);
}

.store-faq-category-link--active {
    border-color: var(--caramel, #c8860a);
    background: rgba(200, 134, 10, 0.08);
    color: var(--coffee-900, #1a0f0a);
}

.store-faq-category-count {
    flex-shrink: 0;
    min-width: 1.6rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(92, 67, 56, 0.08);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-muted, #6b584d);
}

.store-faq-sidebar-help {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary, #5c4338);
}

.store-faq-sidebar-help a {
    color: var(--caramel-dark, #9a6808);
    font-weight: 600;
    text-decoration: none;
}

.store-faq-sidebar-help a:hover {
    text-decoration: underline;
}

.store-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.store-faq-item {
    border: 1px solid rgba(92, 67, 56, 0.14);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.store-faq-item[open] {
    border-color: rgba(200, 134, 10, 0.35);
    box-shadow: 0 8px 24px rgba(26, 15, 10, 0.06);
}

.store-faq-question {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--coffee-900, #1a0f0a);
}

.store-faq-question::-webkit-details-marker {
    display: none;
}

.store-faq-question-text {
    flex: 1;
    min-width: 0;
}

.store-faq-badge {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(200, 134, 10, 0.12);
    color: var(--caramel-dark, #9a6808);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.store-faq-chevron {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--text-muted, #6b584d);
    border-bottom: 2px solid var(--text-muted, #6b584d);
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.store-faq-item[open] .store-faq-chevron {
    transform: rotate(-135deg);
    margin-top: 4px;
    border-color: var(--caramel, #c8860a);
}

.store-faq-answer {
    padding: 0 18px 18px;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-secondary, #5c4338);
}

.store-faq-empty {
    max-width: 520px;
}

@media (max-width: 900px) {
    .store-faq-layout {
        flex-direction: column;
    }

    .store-faq-sidebar {
        position: static;
        flex: none;
        width: 100%;
        max-width: none;
    }

    .store-faq-category-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .store-faq-category-list li {
        flex: 1 1 auto;
    }

    .store-faq-category-link {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }
}

/*
 * Touch / coarse pointers: skip hover transforms.
 * Sticky :hover on tap shifts the control under the finger, so the first
 * press only "activates" the hover state and a second tap is needed.
 * Matches animations.css: hover polish only for (hover: hover) and (pointer: fine).
 */
@media not ((hover: hover) and (pointer: fine)) {
    .icon-btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-dark:hover,
    .btn-outline:hover,
    .line-card:hover,
    .product-card:hover .product-image-frame img,
    .store-syrup-overlay-minimize:hover,
    .value-card:hover,
    .social-link:hover,
    .footer-anpc__link:hover,
    .hero-btn-primary:hover,
    .hero-btn-secondary:hover,
    .hero-btn-outline:hover,
    .hero-types-strip-item:hover,
    .hero-types-strip-item:hover .hero-types-strip-name,
    .hero-carousel-dot:hover,
    .carousel-indicator:hover,
    .store-hero-section:hover .store-hero-bg,
    .category-card:hover,
    .category-card--has-image:hover .category-card__image,
    a.store-pillar:hover,
    .store-partners-card--link:hover,
    .post-card:hover,
    .post-card:hover .post-card-img img,
    .post-card--recipe:hover .post-card-img img,
    .store-recipe-stat:hover,
    .store-recipe-servings-btn:hover,
    .store-recipe-step:hover,
    .store-recipe-step-check:hover,
    .store-recipe-product-pillar__image-link:hover,
    .store-recipe-product-pillar__cta:hover,
    .recipe-nav-card:hover,
    .account-star-rating__star:hover,
    .products-row-arrow:hover,
    .store-member-cta-btn--ghost:hover,
    .store-product-thumb:hover,
    .store-product-cart-btn:hover:not(:disabled),
    .store-product-full-box-btn:hover:not(:disabled),
    .store-product-spec-download-link:hover,
    .store-product-allergen-chip:hover,
    .store-judete-popup-cta:hover,
    .store-product-type-card:hover .store-product-type-card-media {
        transform: none !important;
    }

    .carousel-control:hover,
    .hero-carousel-prev:hover,
    .hero-carousel-next:hover {
        transform: translateY(-50%) !important;
    }

    .most-bought .product-card:hover .product-image-frame img {
        transform: scale(1.12) !important;
    }
}