/* ==========================================
   Modern Store Theme — Premium E-commerce
   Complete CSS with design tokens
   ========================================== */


/* ==========================================
   1. Design Tokens
   ========================================== */

:root {
    /* ---- Color: Core ---- */
    --color-primary: #111111;
    --color-bg: #ffffff;
    --color-bg-alt: #f7f7f7;
    --color-accent: #111111;
    --color-text: #111111;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-borders: #e5e5e5;
    --color-success: #16a34a;
    --color-error: #dc2626;
    --color-sale: #dc2626;

    /* ---- Color: Extended ---- */
    --color-primary-hover: #333333;
    --color-disabled: #cccccc;
    --color-white: #ffffff;
    --color-footer-bg: #0a0a0a;
    --color-footer-text: #e0e0e0;
    --color-footer-link: #999999;
    --color-footer-link-hover: #ffffff;
    --color-footer-border: rgba(255, 255, 255, 0.08);
    --color-hero-bg: #111111;
    --color-hero-text: #ffffff;
    --color-success-bg: #f0fdf4;
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-overlay-light: rgba(0, 0, 0, 0.15);
    --color-announcement-bg: var(--color-primary);
    --color-announcement-text: #ffffff;
    --color-badge-sale: var(--color-sale);
    --color-badge-text: #ffffff;

    /* ---- Color: New tokens ---- */
    --color-card-bg: #ffffff;
    --color-card-hover-shadow: rgba(0, 0, 0, 0.12);
    --color-hero-gradient-start: #0f0f0f;
    --color-hero-gradient-end: #1a1a2e;
    --color-trust-bg: #fafafa;
    --color-trust-border: #f0f0f0;

    /* ---- Typography ---- */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 15px;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.9375rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-hero: clamp(2.5rem, 6vw, 5rem);

    --line-height-tight: 1.1;
    --line-height-snug: 1.3;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    --letter-spacing-tight: -0.03em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;

    /* ---- Layout ---- */
    --container-max: 1400px;
    --container-narrow: 800px;
    --header-height: 108px;

    /* ---- Spacing ---- */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;
    --spacing-section: clamp(3rem, 8vw, 6rem);

    /* ---- Radii ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* ---- Transitions ---- */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}


/* ==========================================
   2. Reset & Base
   ========================================== */

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

html {
    scroll-behavior: smooth;
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
    font-size: inherit;
}

ul, ol {
    list-style: none;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}


/* ==========================================
   3. Utilities
   ========================================== */

.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;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

@media (max-width: 767px) {
    .container {
        padding: 0 var(--spacing-md);
    }
}

.container--narrow {
    max-width: var(--container-narrow);
}

.text-center {
    text-align: center;
}

.section {
    padding: var(--spacing-section) 0;
}

.section--sm {
    padding: var(--spacing-2xl) 0;
}
.section--bg-light {
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
}
.section--bg-dark {
    background: linear-gradient(to right, var(--color-hero-gradient-start) 0%, var(--color-hero-gradient-end) 100%);
}

/* Seamless flow from bg sections into hero bars */
.section--bg-light + .hero-bar,
.section--bg-dark + .hero-bar {
    margin-top: 0;
}

.is-hidden {
    display: none !important;
}


/* ==========================================
   4. Announcement Bar
   ========================================== */

@keyframes announcement-shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.announcement {
    background-color: var(--color-announcement-bg);
    color: var(--color-announcement-text);
    text-align: center;
    padding: 12px var(--spacing-xl);
    font-size: var(--font-size-sm);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-wide);
    position: relative;
    overflow: hidden;
}

.announcement::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: announcement-shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

.announcement__close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-announcement-text);
    transition: background var(--transition-fast);
    z-index: 1;
}

.announcement__close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.announcement a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ==========================================
   5. Header
   ========================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-header-bg);
    height: auto;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base);
    color: var(--color-header-text);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header--scrolled {
    box-shadow:
        0 1px 0 var(--color-borders),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

.header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-lg);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    height: 64px;
}

@media (max-width: 767px) {
    .header__inner {
        display: flex;
        justify-content: space-between;
    }
}

/* ---- Logo ---- */

.header__logo {
    flex-shrink: 0;
    justify-self: start;
}

.header__logo img {
    height: 36px;
    width: auto;
    transition: transform var(--transition-fast);
}

.header__logo:hover img {
    transform: scale(1.02);
}

.header__logo-text {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: var(--letter-spacing-tight);
    transition: opacity var(--transition-fast);
    white-space: nowrap;
}

.header__logo-text:hover {
    opacity: 0.7;
}

/* ---- Search Bar (always visible center) ---- */

.header__search {
    width: 100%;
    display: none;
}

@media (min-width: 768px) {
    .header__search {
        display: block;
    }
}

.header__search-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-bg-alt);
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    padding: 0 var(--spacing-md);
    height: 42px;
    transition: all var(--transition-base);
    position: relative;
}

.header__search-form:focus-within {
    border-color: var(--color-accent);
    background: var(--color-bg);
    box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.06);
}

.header__search-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.header__search-form:focus-within .header__search-icon {
    color: var(--color-text);
}

.header__search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
    color: var(--color-text);
    outline: none;
    padding: 0;
    min-width: 0;
}

.header__search-input::placeholder {
    color: var(--color-text-muted);
}

.header__search-kbd {
    display: none;
    padding: 2px 8px;
    font-size: 11px;
    font-family: var(--font-body);
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-borders);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .header__search-kbd {
        display: inline-block;
    }
}

/* ---- Right zone: nav + actions ---- */

.header__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-shrink: 0;
    justify-self: end;
}

/* ---- Live Search Results Dropdown ---- */

.header__search {
    position: relative;
}
.header__search-results {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-borders);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 300;
    overflow: hidden;
}
.header__search-results--open {
    display: block;
}
.header__suggest-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px var(--spacing-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.header__suggest-item:hover,
.header__suggest-item--active {
    background: var(--color-bg-alt);
}
.header__suggest-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.header__suggest-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.header__suggest-item--active .header__suggest-text {
    font-weight: 600;
}
.header__suggest-arrow {
    flex-shrink: 0;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.header__suggest-item:hover .header__suggest-arrow,
.header__suggest-item--active .header__suggest-arrow {
    opacity: 1;
}
/* Legacy — keep for fallback */
.header__search-result {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: background var(--transition-fast);
}
.header__search-result:hover {
    background: var(--color-bg-alt);
}
.header__search-result-image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-alt);
    flex-shrink: 0;
}
.header__search-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.header__search-result-info {
    flex: 1;
    min-width: 0;
}
.header__search-result-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header__search-result-price {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.header__search-view-all {
    display: block;
    text-align: center;
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    border-top: 1px solid var(--color-borders);
    transition: background var(--transition-fast);
}
.header__search-view-all:hover {
    background: var(--color-bg-alt);
}
.header__search-empty {
    padding: var(--spacing-xl);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ---- Header Actions ---- */

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Mobile-only search button (hidden on desktop where search bar is visible) */
.header__search-btn--mobile {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--transition-fast);
    color: var(--color-text);
}

.header__search-btn--mobile:hover {
    background: var(--color-bg-alt);
}

@media (min-width: 768px) {
    .header__search-btn--mobile {
        display: none;
    }
}

/* ---- Cart Icon ---- */

.header__cart {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
    color: var(--color-text);
}

.header__cart:hover {
    background: var(--color-bg-alt);
}

.header__cart:hover {
    background: var(--color-bg-alt);
}

.header__cart svg {
    width: 20px;
    height: 20px;
}

.header__cart-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header__cart-count:not([data-count="0"]) {
    transform: scale(1);
}

.header__cart-count[data-count="0"] {
    display: none;
}

/* Checkout button in header */
.header__checkout-btn {
    padding: 8px 18px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-full);
    text-decoration: none;
    white-space: nowrap;
    animation: checkoutPulse 2s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.header__checkout-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
@keyframes checkoutPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(232,180,168,0.3); }
}
@media (max-width: 767px) {
    .header__checkout-btn { padding: 6px 12px; font-size: 11px; }
}

/* ---- Mobile Menu Button ---- */

.header__menu-btn {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 50%;
    transition: background var(--transition-fast);
}

.header__menu-btn:hover {
    background: var(--color-bg-alt);
}

@media (min-width: 1024px) {
    .header__menu-btn {
        display: none;
    }
}

.header__menu-btn span {
    width: 20px;
    height: 1.5px;
    background: var(--color-text);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 1px;
}


/* ---- Category Bar (below header) ---- */
.header__catbar {
    display: none;
    border-top: 1px solid var(--color-borders);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .header__catbar { display: block; }
}
.header__catbar-inner {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.header__catbar-inner::-webkit-scrollbar { display: none; }
.header__catbar-item {
    flex-shrink: 0;
    cursor: pointer;
}
.header__catbar-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 10px var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: all var(--transition-fast);
    border-bottom: 2px solid transparent;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-body);
    cursor: pointer;
}
.header__catbar-link:hover,
.header__catbar-item--active .header__catbar-link {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

/* ---- Mega Menu ---- */
.mega-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    pointer-events: none;
    visibility: hidden;
}
.mega-menu--open {
    pointer-events: auto;
    visibility: visible;
    cursor: pointer;
}
.mega-menu__backdrop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 0.4s cubic-bezier(.22,1,.36,1), backdrop-filter 0.4s cubic-bezier(.22,1,.36,1), -webkit-backdrop-filter 0.4s cubic-bezier(.22,1,.36,1);
    z-index: -1;
    cursor: default;
}
.mega-menu--open .mega-menu__backdrop {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Sliding container — clips and reveals panels */
.mega-menu__container {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-borders);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s cubic-bezier(.22,1,.36,1), transform 0.3s cubic-bezier(.22,1,.36,1);
}
.mega-menu--open .mega-menu__container {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Slider — holds all panels side by side, translateX to active */
.mega-menu__slider {
    display: flex;
    transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}

/* Panels — each takes full container width */
.mega-menu__panel {
    flex: 0 0 100%;
    width: 100%;
    background: var(--color-bg);
}
.mega-menu__panel-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 420px;
}
.mega-menu__collections {
    padding: var(--spacing-xl);
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--color-borders) transparent;
}

.mega-menu__collections::-webkit-scrollbar {
    width: 4px;
}

.mega-menu__collections::-webkit-scrollbar-track {
    background: transparent;
}

.mega-menu__collections::-webkit-scrollbar-thumb {
    background: var(--color-borders);
    border-radius: 2px;
}

.mega-menu__collections::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Scroll fade indicator — shows arrow when content overflows */
.mega-menu__scroll-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%; /* left column only */
    height: 70px;
    background: linear-gradient(to top, var(--color-bg) 25%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 14px;
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.3s ease;
}
.mega-menu__scroll-fade--hidden {
    opacity: 0;
    pointer-events: none;
}
.mega-menu__scroll-fade svg {
    animation: scrollArrowBounce 1.5s ease-in-out infinite;
    color: var(--color-text-muted);
}
@keyframes scrollArrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

.mega-menu__collections-header {
    margin-bottom: var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.mega-menu__header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}
.mega-menu__cart-icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text);
    transition: all var(--transition-fast);
}
.mega-menu__cart-icon:hover {
    background: var(--color-bg-alt);
}
.mega-menu__checkout-btn {
    display: none;
    padding: 6px 14px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-full);
    text-decoration: none;
    white-space: nowrap;
    animation: checkoutPulse 2s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mega-menu__checkout-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.mega-menu__heading {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    margin: 0 0 4px;
}

.mega-menu__collection-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.mega-menu__links {
    column-count: 2;
    column-gap: var(--spacing-xl);
}

.mega-menu__link {
    display: block;
    padding: 10px 0;
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: var(--spacing-md);
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    break-inside: avoid;
}

.mega-menu__link:not(:last-child) {
    border-bottom: 1px solid var(--color-borders);
}

.mega-menu__link:hover {
    color: var(--color-text);
    border-left-color: var(--color-accent);
    padding-left: var(--spacing-lg);
    background: transparent;
}

.mega-menu__link::after {
    content: '\2192';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    opacity: 0;
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-menu__link:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Visual strip in mega menu */
/* Visual marquee — fills right half, full height */
.mega-menu__visual {
    position: relative;
    overflow: hidden;
    background: var(--color-hero-gradient-start);
}

.mega-menu__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(
        90deg,
        var(--color-hero-gradient-start) 0%,
        var(--color-hero-gradient-end) 25%,
        var(--color-hero-gradient-start) 50%,
        var(--color-hero-gradient-end) 75%,
        var(--color-hero-gradient-start) 100%
    );
    background-size: 200% 100%;
    animation: shimmerLoad 1.5s ease infinite;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.mega-menu__visual--loaded::before {
    opacity: 0;
}

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

.mega-menu__visual,
.mega-menu__marquee {
    cursor: grab;
}

.mega-menu__marquee {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mega-menu__marquee--dragging {
    cursor: grabbing;
}

.mega-menu__marquee--dragging a {
    pointer-events: none;
}

.mega-menu__marquee-track {
    display: flex;
    gap: 0;
    height: 100%;
    width: max-content;
}

.mega-menu__marquee-item {
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    display: block;
}

.mega-menu__marquee-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-menu__marquee-item:hover img {
    transform: scale(1.08);
}

.mega-menu__marquee-item {
    position: relative;
}

.mega-menu__marquee-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mega-menu__marquee-item:hover::after {
    opacity: 1;
}

.mega-menu__marquee-item-btn {
    position: absolute;
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    padding: 8px 0;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    text-align: center;
    border-radius: 2px;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

.mega-menu__marquee-item:hover .mega-menu__marquee-item-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Gradient fade from left — links the collections to the visual */
.mega-menu__visual-fade {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(to right, var(--color-bg) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}
/* megaMenuScroll removed — JS-driven scroll handles auto-play + drag */


@media (max-width: 1023px) {
    .mega-menu { display: none; }
    .mega-menu__panel-inner { grid-template-columns: 1fr; height: auto; }
    .mega-menu__visual { display: none; }
    .mega-menu__collections { padding: var(--spacing-lg) var(--spacing-md); }
}


/* ==========================================
   6. Search Overlay
   ========================================== */

.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.98);
    z-index: 300;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.search-overlay--open {
    opacity: 1;
    visibility: visible;
}

.search-overlay__inner {
    width: 100%;
    max-width: 640px;
    padding: 0 var(--spacing-xl);
    transform: translateY(20px);
    transition: transform var(--transition-base);
}

.search-overlay--open .search-overlay__inner {
    transform: translateY(0);
}

.search-overlay__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
    color: var(--color-text);
}

.search-overlay__close:hover {
    background: var(--color-bg-alt);
    transform: rotate(90deg);
}

.search-overlay__form {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    border-bottom: 2px solid var(--color-text);
}
.search-overlay__results.header__search-results {
    position: static;
    margin-top: var(--spacing-md);
    max-height: 50vh;
    overflow-y: auto;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.search-overlay__results .header__suggest-item {
    color: var(--color-text);
    padding: 12px 0;
    border-bottom: 1px solid var(--color-borders);
}
.search-overlay__results .header__suggest-item:last-child {
    border-bottom: none;
}
.search-overlay__results .header__suggest-icon,
.search-overlay__results .header__suggest-arrow {
    color: var(--color-text-muted);
}
/* Overlay suggestion items */
.overlay-suggest-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px var(--spacing-xs);
}

@media (max-width: 767px) {
    .search-overlay__submit { display: none; }
    .search-overlay {
        padding-top: var(--spacing-xl);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .search-overlay--open ~ body,
    body:has(.search-overlay--open) {
        position: fixed;
        width: 100%;
    }
}

.search-overlay__input {
    flex: 1;
    border: none;
    padding: var(--spacing-lg) 0;
    font-size: var(--font-size-2xl);
    font-family: var(--font-heading);
    font-weight: 500;
    background: transparent;
    outline: none;
    color: var(--color-text);
}

.search-overlay__input::placeholder {
    color: var(--color-text-muted);
}

.search-overlay__submit {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast);
}
@media (max-width: 767px) {
    .search-overlay__submit { display: none !important; }
}

.search-overlay__submit:hover {
    opacity: 0.6;
}


/* ==========================================
   7. Mobile Drawer
   ========================================== */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.drawer-overlay--open {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 85vw;
    height: 100%;
    background: var(--color-bg);
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
}

.drawer--open {
    transform: translateX(0);
}

.drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-borders);
}

.drawer__title {
    font-size: var(--font-size-md);
    font-weight: 600;
}

.drawer__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
    color: var(--color-text);
}

.drawer__close:hover {
    background: var(--color-bg-alt);
    transform: rotate(90deg);
}

.drawer__nav {
    padding: var(--spacing-md) 0;
    flex: 1;
    overflow-y: auto;
}

.drawer__nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px var(--spacing-xl);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}
.drawer__nav-link svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.drawer__nav-link:hover {
    background: var(--color-bg-alt);
    border-left-color: var(--color-accent);
}
.drawer__nav-link--active {
    font-weight: 700;
    color: var(--color-accent);
    border-left-color: var(--color-accent);
}
.drawer__nav-link--active svg {
    color: var(--color-accent);
}
.drawer__nav-link--sub {
    padding-left: calc(var(--spacing-xl) + var(--spacing-lg));
    font-weight: 400;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    border-left: none;
}
.drawer__nav-link--sub:hover {
    color: var(--color-text);
}

.drawer__divider {
    height: 1px;
    background: var(--color-borders);
    margin: var(--spacing-sm) var(--spacing-xl);
}

/* Accordion categories */
.drawer__accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px var(--spacing-xl);
    background: none;
    border: none;
    border-left: 3px solid transparent;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
}
.drawer__accordion-trigger:hover {
    background: var(--color-bg-alt);
    border-left-color: var(--color-accent);
}
.drawer__accordion-icon {
    transition: transform 0.3s ease;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.drawer__accordion--open .drawer__accordion-icon {
    transform: rotate(180deg);
}
.drawer__accordion-content {
    display: none;
    background: var(--color-bg-alt);
}
.drawer__accordion--open .drawer__accordion-content {
    display: block;
}

.drawer__social {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-xl);
}
.drawer__social a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}
.drawer__social a:hover {
    color: var(--color-accent);
}
/* ==========================================
   Modern Store Theme — Part 2
   Hero, Cards, Grid, Trust, Collections,
   Product Detail, Cart, Checkout, Footer,
   Animations, Buttons, Pagination,
   Breadcrumbs & Responsive
   ========================================== */


/* ==========================================
   8. Marquee Hero
   ========================================== */

/* Hero viewport — marquee + newsletter fill one screen */
.hero-viewport {
    display: flex;
    flex-direction: column;
    height: calc(100svh - var(--header-height));
    min-height: 480px;
}

.marquee-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-hero-gradient-start);
    flex: 1 1 60%;
    min-height: 0;
}

/* Bottom gradient fade into newsletter section */
.marquee-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--color-hero-gradient-start) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.marquee-hero__track {
    display: flex;
    gap: 0;
    width: max-content;
    height: 100%;
    will-change: transform;
}

.marquee-hero__item {
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    aspect-ratio: 3/4;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    display: block;
}

.marquee-hero__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.marquee-hero__item:hover img {
    transform: scale(1.08);
}

.marquee-hero__item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--spacing-lg);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.marquee-hero__item:hover .marquee-hero__item-overlay {
    opacity: 1;
}

.marquee-hero__item-title {
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.marquee-hero__item-price {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.marquee-hero__item-btn {
    display: block;
    margin-top: var(--spacing-sm);
    padding: 8px 0;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    text-align: center;
    border-radius: 2px;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.marquee-hero__item:hover .marquee-hero__item-btn {
    opacity: 1;
    transform: translateY(0);
}

.marquee-hero__label {
    position: absolute;
    bottom: var(--spacing-2xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.marquee-hero__label a {
    display: inline-block;
    padding: 10px 32px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all var(--transition-base);
    text-decoration: none;
}

.marquee-hero__label a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* marqueeHeroScroll removed — JS-driven */

@media (max-width: 767px) {
    .marquee-hero__item {
        aspect-ratio: 2/3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-hero__track { /* JS-driven, no CSS animation to disable */ }
}

/* ==========================================
   8b. Newsletter Hero (email capture)
   ========================================== */

.newsletter-hero {
    background: linear-gradient(135deg, var(--color-hero-gradient-start) 0%, var(--color-hero-gradient-end) 100%);
    color: var(--color-hero-text);
    flex: 0 0 auto;
    min-height: 200px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: var(--spacing-2xl) 0;
}

.newsletter-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.05) 0%, transparent 60%);
    pointer-events: none;
}

.newsletter-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}

.newsletter-hero__text {
    flex: 1;
    min-width: 280px;
}

.newsletter-hero__title {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-sm);
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 0.1s;
}

.newsletter-hero__subtitle {
    font-size: var(--font-size-md);
    opacity: 0;
    line-height: var(--line-height-normal);
    animation: heroFadeUp 0.8s ease forwards 0.3s;
    color: rgba(255, 255, 255, 0.8);
}

.newsletter-hero__form {
    flex: 0 0 auto;
    width: 100%;
    max-width: 440px;
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 0.5s;
}

.newsletter-hero__input-wrap {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.newsletter-hero__input-wrap:focus-within {
    border-color: rgba(255, 255, 255, 0.5);
}

.newsletter-hero__input {
    flex: 1;
    padding: 16px 20px;
    border: none;
    background: transparent;
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
    outline: none;
    min-width: 0;
}

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

.newsletter-hero__btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 14px 24px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
    margin: 4px;
}

.newsletter-hero__btn:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
}

.newsletter-hero__btn-text {
    white-space: nowrap;
}

.newsletter-hero__btn-icon {
    transition: transform var(--transition-fast);
}

.newsletter-hero__btn:hover .newsletter-hero__btn-icon {
    transform: translateX(3px);
}

.newsletter-hero__disclaimer {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.4);
    margin-top: var(--spacing-sm);
    text-align: center;
}

/* Newsletter success state */
.newsletter-success {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    color: inherit;
}
.newsletter-success__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
}
.newsletter-success__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.newsletter-success__title {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
}
.newsletter-success__code {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}
.newsletter-success__code code {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--font-size-md);
    letter-spacing: 2px;
    margin-left: 4px;
}

/* Animated entry */
.newsletter-success--animate .newsletter-success__icon {
    animation: successPop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.newsletter-success--animate .newsletter-success__title {
    animation: successSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.newsletter-success--animate .newsletter-success__code {
    animation: successSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
@keyframes successPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes successSlideIn {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Footer newsletter success */
.footer-newsletter__form .newsletter-success {
    padding: var(--spacing-sm) 0;
}
.footer-newsletter__form .newsletter-success__icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
}
.footer-newsletter__form .newsletter-success__icon svg {
    width: 28px;
    height: 28px;
}
.footer-newsletter__form .newsletter-success__title {
    font-size: var(--font-size-md);
}

@media (max-width: 767px) {
    .newsletter-success { flex-direction: column; text-align: center; }
    .newsletter-success__text { align-items: center; }
}

@media (max-width: 767px) {
    .newsletter-hero__inner {
        flex-direction: column;
        text-align: center;
    }
    .newsletter-hero__form {
        max-width: 100%;
    }
    .newsletter-hero__input-wrap {
        flex-direction: column;
        border-radius: var(--radius-md);
    }
    .newsletter-hero__btn {
        justify-content: center;
        margin: 4px;
        border-radius: var(--radius-md);
    }
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================
   9. Section Headings
   ========================================== */

.section-heading {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.section-heading__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-tight);
}

/* Section Hero — gradient banner (no marquee) */
.section-hero__marquee { display: none; }

.section-hero__content {
    color: var(--color-hero-text);
    display: flex;
    align-items: center;
    padding: var(--spacing-md) 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-hero-gradient-start) 0%, var(--color-hero-gradient-end) 100%);
}

/* Radial overlay removed — not needed on slim strip */

.section-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.section-hero__text { flex: 1; }

.section-hero__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.section-hero__subtitle {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.section-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.section-hero__cta:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Color variants */
.section-hero--warm .section-hero__content { background: linear-gradient(160deg, #2d1b2e 0%, #4a1942 50%, #6b2fa0 100%); }
.section-hero--ocean .section-hero__content { background: linear-gradient(160deg, #0d2137 0%, #0a3d5c 50%, #0e5f8a 100%); }
.section-hero--forest .section-hero__content { background: linear-gradient(160deg, #1a2e1a 0%, #1e3a2a 50%, #2a5e3a 100%); }
.section-hero--slate .section-hero__content { background: linear-gradient(160deg, #1e2a3a 0%, #2c3e50 50%, #3d566e 100%); }
.section-hero--ember .section-hero__content { background: linear-gradient(160deg, #2a1a0e 0%, #3d2814 50%, #5a4020 100%); }

@media (max-width: 767px) {
    .section-hero__inner { flex-direction: column; text-align: center; }
}

.section-heading__subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    margin-top: var(--spacing-sm);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.section-heading__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
}

.section-heading__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    background: var(--color-text);
    width: 100%;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-heading__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* ==========================================
   10. Trust Bar
   ========================================== */

.trust-bar {
    background: var(--color-trust-bg);
    border-top: 1px solid var(--color-trust-border);
    border-bottom: 1px solid var(--color-trust-border);
    padding: var(--spacing-xl) 0;
}

.trust-bar__inner {
    display: flex;
    justify-content: center;
    gap: clamp(2rem, 6vw, 5rem);
    flex-wrap: wrap;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.trust-bar__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}

.trust-bar__icon {
    width: 44px;
    height: 44px;
    background: var(--color-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

.trust-bar__icon:hover {
    transform: scale(1.1);
}

.trust-bar__icon svg {
    width: 20px;
    height: 20px;
}


/* ==========================================
   11. Collection Row (Horizontal Scroll)
   ========================================== */

.collection-row {
    display: flex;
    gap: var(--spacing-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--spacing-sm);
    scrollbar-width: none;
}

.collection-row::-webkit-scrollbar {
    display: none;
}

.collection-card {
    flex: 0 0 180px;
    scroll-snap-align: start;
    text-align: center;
    text-decoration: none;
    transition: transform var(--transition-base);
}

.collection-card:hover {
    transform: translateY(-4px);
}

.collection-card__image {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-alt);
    margin: 0 auto var(--spacing-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.collection-card:hover .collection-card__image {
    box-shadow: var(--shadow-md);
}

.collection-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.collection-card:hover .collection-card__image img {
    transform: scale(1.08);
}

.collection-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-bg-alt);
}

.collection-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

@media (min-width: 768px) {
    .collection-card {
        flex: 0 0 calc(25% - 12px);
    }
}


/* ==========================================
   12. Product Grid
   ========================================== */

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

@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ==========================================
   13. Product Card
   ========================================== */

/* Product Card — marquee-inspired design: full-bleed image, info on hover overlay */
.product-card {
    position: relative;
    overflow: hidden;
    background: var(--color-hero-gradient-start);
    aspect-ratio: 3/4;
}

/* Image fills entire card */
.product-card__image {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-card__image img {
    transform: scale(1.06);
}

/* Gradient overlay — always visible at bottom, stronger on hover */
.product-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 100%);
    transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
    pointer-events: none;
}

.product-card:hover .product-card__overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}

/* View Product button — inside info panel, slides up on hover */
.product-card__quick-add {
    display: block;
    margin-top: var(--spacing-md);
    transform: translateY(8px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    background: var(--color-accent);
    color: var(--color-accent-text);
    text-decoration: none;
    padding: 10px 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    border-radius: 2px;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.product-card:hover .product-card__quick-add {
    transform: translateY(0);
    opacity: 1;
}

.product-card__quick-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}


/* Badge */
.product-card__badge {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 3;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: 2px;
}

.product-card__badge--sale {
    background: var(--color-badge-sale);
    color: var(--color-badge-text);
}

.product-card__badge--best {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

/* Product type label */
.product-card__type {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
}

/* Info — overlaid at bottom of card, always visible */
.product-card__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
    color: var(--color-white);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Info is always visible — no slide transform needed */

.product-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: var(--line-height-snug);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card__title a {
    color: var(--color-white);
    text-decoration: none;
}

/* Price — white text on dark overlay */
.product-card__price {
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    color: var(--color-white);
}

.product-card__price--regular {
    font-weight: 700;
}

.product-card__price--sale {
    font-weight: 700;
    color: #ff6b6b;
}

.product-card__price--compare {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--font-size-xs);
}

.product-card__price--compare s {
    text-decoration: line-through;
}

/* Delivery */
.product-card__delivery {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}


/* ==========================================
   14. Breadcrumbs
   ========================================== */

.breadcrumb {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-borders);
    margin-bottom: 0;
}

.breadcrumb a,
.breadcrumb__link {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb a:hover,
.breadcrumb__link:hover {
    color: var(--color-text);
}

.breadcrumb__sep {
    opacity: 0.4;
}

.breadcrumb__current {
    color: var(--color-text);
}


/* ==========================================
   15. Collection Page
   ========================================== */

.collection-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
}

.collection-header__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
}

.collection-header__description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    max-width: 600px;
    margin: var(--spacing-md) auto 0;
    line-height: var(--line-height-normal);
}

.collection-header__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Toolbar */
.collection-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-borders);
}

.collection-toolbar__left {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-md);
}

.collection-toolbar__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    margin: 0;
}

.collection-toolbar__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.collection-toolbar__sort select {
    padding: 8px 36px 8px 14px;
    border: 1px solid var(--color-borders);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-family: var(--font-body);
    background: var(--color-bg);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    color: var(--color-text);
}

.collection-toolbar__sort select:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* Empty state */
.collection-empty {
    text-align: center;
    padding: var(--spacing-4xl) 0;
}

.collection-empty__text {
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-lg);
}


/* ==========================================
   16. Product Detail Page
   ========================================== */

/* Product page */
.product-page {
    padding: var(--spacing-sm) 0;
}

.product-page__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .product-page__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
}

/* Gallery */
.product-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Cart alert banner */
.cart-alert {
    background: var(--color-accent);
    color: var(--color-accent-text);
    padding: var(--spacing-sm) 0;
    position: fixed;
    top: var(--header-height, 108px);
    left: 0;
    right: 0;
    z-index: 99;
}
.cart-alert__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}
.cart-alert__message {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
}
.cart-alert__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.cart-alert__btn {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.cart-alert__btn--secondary {
    background: transparent;
    color: var(--color-accent-text);
    border: 1px solid currentColor;
}
.cart-alert__btn--secondary:hover {
    background: rgba(0,0,0,0.08);
}
.cart-alert__btn--primary {
    background: var(--color-primary);
    color: #fff;
}
.cart-alert__btn--primary:hover {
    opacity: 0.9;
}
.cart-alert__close {
    background: none;
    border: none;
    color: var(--color-accent-text);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}
.cart-alert__close:hover {
    opacity: 1;
}

/* Main image — sized to fit viewport with room for thumbs, info stays above fold */
.product-gallery__main {
    border-radius: var(--radius-md);
    overflow: hidden;
    height: calc(100svh - var(--header-height) - var(--breadcrumb-height, 0px) - 100px);
    background: var(--color-bg-alt);
    position: relative;
}

.product-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.product-gallery__slide {
    display: none;
    height: 100%;
}

.product-gallery__slide--active {
    display: block;
}

/* Gallery Navigation Arrows */
.product-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    color: var(--color-text);
}

.product-gallery__nav:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-50%) scale(1.05);
}

.product-gallery__main:hover .product-gallery__nav {
    opacity: 1;
}

.product-gallery__nav--prev {
    left: var(--spacing-md);
}

.product-gallery__nav--next {
    right: var(--spacing-md);
}

/* Gallery Thumbnails */
.product-gallery__thumbs {
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
}

.product-gallery__thumb {
    flex: 0 0 72px;
    height: 72px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    opacity: 0.6;
}

.product-gallery__thumb:hover {
    opacity: 1;
}

.product-gallery__thumb--active {
    border-color: var(--color-primary);
    opacity: 1;
}

.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Info */
@media (min-width: 768px) {
    .product-info {
        /* content flows naturally */
    }
}

.product-info__title {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-sm);
}

.product-info__price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.product-info__price-current {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.product-info__price-current--sale {
    color: var(--color-sale);
}

.product-info__price-compare {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.product-info__price-compare s {
    text-decoration: line-through;
}

.product-info__delivery {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-success);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--spacing-lg);
    padding: 8px 16px;
    background: var(--color-success-bg);
    border-radius: var(--radius-full);
}

.product-info__delivery svg {
    width: 16px;
    height: 16px;
}

.product-info__divider {
    border: none;
    border-top: 1px solid var(--color-borders);
    margin: var(--spacing-md) 0;
}

.product-info__description,
.rte {
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
}

.rte img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
}

.rte p {
    margin-bottom: 1em;
}

/* Variant Group */
.variant-group {
    margin-bottom: var(--spacing-md);
}

.variant-group__label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-secondary);
}

.variant-row {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.variant-row .variant-group {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .variant-row {
        flex-direction: column;
    }
}

.variant-select {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 14px;
    border: 1.5px solid var(--color-borders);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    outline: none;
}

.variant-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
}

.variant-group__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.variant-pill {
    padding: 10px 20px;
    border: 1.5px solid var(--color-borders);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    background: var(--color-bg);
    color: var(--color-text);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    font-family: var(--font-body);
}

.variant-pill:hover {
    border-color: var(--color-text);
    transform: translateY(-1px);
}

.variant-pill--selected {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Quantity Stepper */
.qty-stepper {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--color-borders);
    border-radius: var(--radius-md);
    overflow: hidden;
    width: 100%;
    height: 44px;
}

.qty-stepper__btn {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--color-text);
    background: var(--color-bg);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
    font-family: var(--font-body);
}

.qty-stepper__btn:hover {
    background: var(--color-bg-alt);
}

.qty-stepper__input {
    flex: 1;
    min-width: 0;
    text-align: center;
    border: none;
    border-left: 1.5px solid var(--color-borders);
    border-right: 1.5px solid var(--color-borders);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: var(--font-body);
    height: 100%;
    outline: none;
    background: var(--color-bg);
    color: var(--color-text);
    -moz-appearance: textfield;
}

.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-stepper__val {
    min-width: 32px;
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 44px;
    border-left: 1.5px solid var(--color-borders);
    border-right: 1.5px solid var(--color-borders);
}

/* Add to Cart Button */
.btn-add-to-cart {
    width: 100%;
    padding: 18px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    margin-top: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    font-family: var(--font-body);
}

.btn-add-to-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-add-to-cart:active {
    transform: translateY(0);
}

.btn-add-to-cart:disabled {
    background: var(--color-disabled);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* ==========================================
   17. Toast Notification
   ========================================== */

.toast {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    background: var(--color-accent);
    color: var(--color-accent-text);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transform: translateY(120%);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast--visible {
    transform: translateY(0);
}

.toast a {
    color: var(--color-white);
    text-decoration: underline;
    font-weight: 700;
}


/* ==========================================
   18. Cart Page
   ========================================== */

.cart-page {
    padding: var(--spacing-xl) 0 var(--spacing-4xl);
}

.cart-page__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-2xl);
    letter-spacing: var(--letter-spacing-tight);
}

.cart-page__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
}

@media (min-width: 768px) {
    .cart-page__grid {
        grid-template-columns: 1fr 380px;
    }
}

/* Cart Item */
.cart-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-borders);
    transition: background var(--transition-fast);
}

.cart-item__image {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-bg-alt);
}

.cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item__details {
    flex: 1;
}

.cart-item__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: 2px;
}

.cart-item__variant {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.cart-item__price {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--spacing-sm);
}

.cart-item__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.cart-item__remove {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--transition-fast);
    font-family: var(--font-body);
    padding: 0;
}

.cart-item__remove:hover {
    color: var(--color-error);
}

/* Cart Empty */
.cart-empty {
    text-align: center;
    padding: var(--spacing-4xl) var(--spacing-xl);
}

.cart-empty__icon {
    color: var(--color-borders);
    margin-bottom: var(--spacing-lg);
}

.cart-empty__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.cart-empty__text {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xl);
}


/* ==========================================
   19. Order Summary
   ========================================== */

.order-summary {
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--spacing-xl);
    border: 1px solid var(--color-borders);
    border-bottom: none;
}

@media (min-width: 768px) {
    .order-summary {
        position: static;
    }
}

.order-summary__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
}

.order-summary__row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
}

.order-summary__row--total {
    font-size: var(--font-size-lg);
    font-weight: 700;
    border-top: 1px solid var(--color-borders);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.order-summary__cta {
    display: block;
    width: 100%;
    padding: 18px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin-top: var(--spacing-lg);
    transition: all var(--transition-base);
    font-family: var(--font-body);
}

.order-summary__cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.order-summary__continue {
    display: block;
    text-align: center;
    margin-top: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-decoration: underline;
}


/* ==========================================
   20. Checkout
   ========================================== */

.checkout-page {
    padding: var(--spacing-xl) 0 var(--spacing-4xl);
}

.checkout-page__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}
.checkout-page__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2xl);
}

/* Checkout header */
.header--checkout {
    border-bottom: 1px solid var(--color-borders);
}
.header--checkout .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header__checkout-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}
.header__checkout-cart {
    color: var(--color-text);
    transition: color var(--transition-fast);
}
.header__checkout-cart:hover {
    color: var(--color-accent);
}
.header__checkout-trust {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.header__checkout-trust img {
    height: 18px;
    width: auto;
}

.checkout-page__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
}

@media (min-width: 768px) {
    .checkout-page__grid {
        grid-template-columns: 1fr 400px;
    }
}

.checkout-section {
    border: 1px solid var(--color-borders);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}
.checkout-section--payment {
    margin-top: 0;
    border-top: 1px solid var(--color-borders);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.checkout-section__title {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Form Elements */
.form-row {
    margin-bottom: var(--spacing-md);
}

.form-row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--color-borders);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-bg);
    outline: none;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
}

select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Stripe Card Element */
.stripe-fields__wrap {
    position: relative;
}
.stripe-fields {
    margin-bottom: 0;
}
.stripe-loading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: var(--radius-md);
    transition: opacity 0.3s ease;
}
.stripe-loading--hidden {
    opacity: 0;
    pointer-events: none;
}
.stripe-loading__inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.stripe-loading__spinner {
    animation: stripeSpinner 0.8s linear infinite;
}
@keyframes stripeSpinner {
    to { transform: rotate(360deg); }
}
.stripe-fields__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}
.stripe-field {
    margin-bottom: var(--spacing-sm);
}
.stripe-field--full {
    margin-bottom: var(--spacing-sm);
}
.stripe-input {
    padding: 14px 16px;
    border: 1.5px solid var(--color-borders);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: border-color var(--transition-fast);
}
.stripe-input:focus-within {
    border-color: var(--color-primary);
}
#card-element {
    padding: 14px 16px;
    border: 1.5px solid var(--color-borders);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: border-color var(--transition-fast);
}

#card-element:focus-within {
    border-color: var(--color-primary);
}

#card-errors {
    color: var(--color-error);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-sm);
}

/* Checkout States */
.checkout-unavailable,
.checkout-success {
    text-align: center;
    padding: var(--spacing-4xl) var(--spacing-xl);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.checkout-unavailable__title,
.checkout-success__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.checkout-unavailable__text,
.checkout-success__text {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: var(--line-height-normal);
}

.checkout-unavailable__icon,
.checkout-success__icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-lg);
    color: var(--color-success);
}

.checkout-unavailable__icon {
    color: var(--color-text-muted);
    width: 48px;
    height: 48px;
}

.checkout-success__ref {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xl);
}

/* Checkout Items */
.checkout-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) 0;
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--color-borders);
}
.checkout-item:last-of-type {
    border-bottom: none;
}
.checkout-item__img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-bg-alt);
}
.checkout-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.checkout-item__details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.checkout-item__name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.checkout-item__variant {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.checkout-item__qty {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.checkout-item__price {
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}


/* ==========================================
   21. Buttons
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 14px 32px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--outline {
    background: transparent;
    color: var(--color-text);
    border: 1.5px solid var(--color-borders);
}

.btn--outline:hover {
    border-color: var(--color-text);
}


/* ==========================================
   22. Pagination
   ========================================== */

.pagination {
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
    display: flex;
    justify-content: center;
    gap: 4px;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.pagination a:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.pagination__link--current {
    background: var(--color-accent);
    color: var(--color-accent-text);
}


/* ==========================================
   23. Footer
   ========================================== */

.footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    margin-top: var(--spacing-4xl);
}

.footer__main {
    padding: var(--spacing-4xl) 0;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
}

@media (min-width: 768px) {
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.footer__heading {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-footer-link-hover);
    margin-bottom: var(--spacing-lg);
}

.footer__text {
    font-size: var(--font-size-sm);
    color: var(--color-footer-link);
    line-height: var(--line-height-normal);
}

.footer__links a {
    display: block;
    padding: 6px 0;
    font-size: var(--font-size-sm);
    color: var(--color-footer-link);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.footer__links a:hover {
    color: var(--color-footer-link-hover);
    padding-left: 4px;
}

/* Social */
.footer__social {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.footer__social a,
.footer__social-link {
    color: var(--color-footer-link);
    text-decoration: none;
    transition: all var(--transition-fast);
    display: inline-flex;
}

.footer__social a:hover,
.footer__social-link:hover {
    color: var(--color-footer-link-hover);
    transform: translateY(-2px);
}

.footer__social svg {
    width: 20px;
    height: 20px;
}

/* Footer Bar */
.footer__bar {
    border-top: 1px solid var(--color-footer-border);
    padding: var(--spacing-xl) 0;
}

.footer__bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-footer-link);
}

.footer__bar-inner a {
    color: var(--color-footer-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer__bar-inner a:hover {
    color: var(--color-footer-text);
}

@media (max-width: 767px) {
    .footer__grid { text-align: center; }
    .footer__social { justify-content: center; }
    .footer__links a:hover { padding-left: 0; }
    .footer__bar-inner { justify-content: center; text-align: center; }
    .footer-newsletter__inner { flex-direction: column; text-align: center; align-items: center; }
    .footer-newsletter__form { flex-direction: column; align-items: center; width: 100%; }
    .footer-newsletter__input { width: 100%; box-sizing: border-box; }
}

/* WhatsApp link in footer */
.footer__links a.footer__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #25D366 !important;
    border: 2px solid #25D366;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    margin-top: var(--spacing-sm);
}
.footer__links a.footer__whatsapp:hover {
    background: #25D366;
    color: #fff !important;
    padding-left: 16px !important;
}
.footer__whatsapp svg { flex-shrink: 0; }

/* Footer logo (replaces brand name when logo exists) */
.footer__logo-link { display: inline-block; margin-bottom: var(--spacing-sm); }
.footer__logo-img { max-height: 48px; width: auto; }

/* Stripe badge (in footer bar) */
.footer__bar-stripe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-footer-link);
    font-size: 12px;
}
.footer__stripe-logo {
    height: 16px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

/* Code Agents credit */
.footer__codeagents {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-footer-link);
    text-decoration: none;
    font-size: 12px;
    transition: color var(--transition-fast);
}
.footer__codeagents:hover { color: var(--color-footer-text); }
.footer__codeagents-logo {
    height: 18px;
    width: auto;
    vertical-align: middle;
}


/* ==========================================
   24. Scroll Animations
   ========================================== */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .newsletter-hero__title,
    .newsletter-hero__subtitle,
    .newsletter-hero__form {
        opacity: 1;
        animation: none;
    }

    .marquee-hero__track {
        animation: none;
        overflow-x: auto;
    }
}


/* ==========================================
   25. Promo Banner (split 2-column)
   ========================================== */

.promo-banner {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 400px;
    overflow: hidden;
    border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
    .promo-banner { grid-template-columns: 1fr 1fr; }
}
.promo-banner__image {
    background: var(--color-bg-alt);
    min-height: 300px;
    background-size: cover;
    background-position: center;
}
.promo-banner__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-3xl);
    background: linear-gradient(135deg, var(--color-hero-gradient-start) 0%, var(--color-hero-gradient-end) 100%);
    color: var(--color-hero-text);
}
.promo-banner__label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    opacity: 0.6;
    margin-bottom: var(--spacing-sm);
    display: block;
}
.promo-banner__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-tight);
}
.promo-banner__text {
    font-size: var(--font-size-md);
    opacity: 0.8;
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-xl);
}
.promo-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 14px 32px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-full);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    align-self: flex-start;
}
.promo-banner__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}


/* ==========================================
   26. Two-Column Promo Grid
   ========================================== */

.promo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}
@media (min-width: 768px) {
    .promo-grid { grid-template-columns: 1fr 1fr; }
}
.promo-grid__card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-2xl);
    color: var(--color-white);
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.promo-grid__card:first-child {
    background: linear-gradient(135deg, var(--color-hero-gradient-start) 0%, var(--color-hero-gradient-end) 100%);
}
.promo-grid__card:last-child {
    background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%);
}
.promo-grid__card:hover {
    transform: translateY(-4px);
}
.promo-grid__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 60%);
}
.promo-grid__card-content { position: relative; z-index: 1; }
.promo-grid__card-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    opacity: 0.6;
    margin-bottom: var(--spacing-xs);
    display: block;
}
.promo-grid__card-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}
.promo-grid__card-text {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-normal);
}
.promo-grid__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-white);
    border-bottom: 2px solid rgba(255,255,255,0.5);
    padding-bottom: 2px;
    transition: border-color var(--transition-fast);
}
.promo-grid__card:hover .promo-grid__card-cta {
    border-color: var(--color-white);
}


/* ==========================================
   27. Features Grid (Why Choose Us)
   ========================================== */

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}
@media (min-width: 768px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .features-grid { grid-template-columns: repeat(4, 1fr); }
}
.features-grid__item {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-borders);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.features-grid__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.features-grid__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-md);
    background: var(--color-bg-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}
.features-grid__item:hover .features-grid__icon {
    background: var(--color-accent);
    color: var(--color-accent-text);
}
.features-grid__icon svg { width: 24px; height: 24px; }
.features-grid__title {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}
.features-grid__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}


/* ==========================================
   Featured Collection Strip
   ========================================== */

/* ============================================================
   Hero Bar — compact text strip above marquees
   ============================================================ */
.hero-bar {
    padding: var(--spacing-lg) 0;
    position: relative;
    overflow: hidden;
}
.hero-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.hero-bar__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    text-align: center;
    flex-wrap: wrap;
}
.hero-bar__icons {
    display: flex;
    gap: 6px;
    align-items: center;
    opacity: 0.7;
}
.hero-bar__text {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
}
.hero-bar__title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}
.hero-bar__subtitle {
    font-size: 13px;
    margin: 0;
    opacity: 0.7;
}
.hero-bar__cta {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    white-space: nowrap;
    padding: 12px 28px;
    border-radius: var(--radius-full);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-bar__cta:hover { transform: translateY(-1px); }

/* Dark variant */
.hero-bar--dark {
    background: linear-gradient(to right, var(--color-hero-gradient-start) 0%, var(--color-hero-gradient-end) 100%);
    color: #fff;
}
.hero-bar--dark .hero-bar__cta { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.hero-bar--dark .hero-bar__cta:hover { background: rgba(255,255,255,0.2); }

/* Light variant — soft accent tint */
.hero-bar--light {
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
    color: var(--color-text);
}
.hero-bar--light .hero-bar__cta { background: var(--color-accent); color: var(--color-accent-text); }

/* Accent variant */
.hero-bar--accent {
    background: var(--color-accent);
    color: var(--color-accent-text);
}
.hero-bar--accent .hero-bar__icons { opacity: 0.5; }
.hero-bar--accent .hero-bar__cta { color: var(--color-accent-text); text-decoration: underline; }

.featured-strip {
    position: relative;
    overflow: hidden;
    height: 280px;
}
.featured-strip::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(to right, transparent 0%, var(--color-accent) 30%, var(--color-accent) 70%, transparent 100%);
    z-index: 3;
}

.featured-strip__scroll {
    position: absolute;
    inset: 0;
}

.featured-strip__track {
    display: flex;
    gap: 0;
    height: 100%;
    width: max-content;
    will-change: transform;
}

.featured-strip__item {
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 2px;
    display: block;
}

.featured-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-strip__item:hover img {
    transform: scale(1.06);
}

.featured-strip__item-btn {
    position: absolute;
    bottom: var(--spacing-md);
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    padding: 8px 0;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    text-align: center;
    border-radius: 2px;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

.featured-strip__item:hover .featured-strip__item-btn {
    opacity: 1;
    transform: translateY(0);
}

.featured-strip__item {
    position: relative;
}

.featured-strip__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.featured-strip__item:hover::after {
    opacity: 1;
}

/* Content overlay panel */
.featured-strip__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(to left, rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.7) 40%, transparent 70%);
    z-index: 2;
    pointer-events: none;
}

.featured-strip__inner {
    margin-left: auto;
    margin-right: var(--spacing-xl);
    text-align: right;
    color: var(--color-hero-text);
    pointer-events: auto;
    max-width: 400px;
}

/* Override container centering inside strips */
.featured-strip__inner.container {
    margin-left: auto;
    margin-right: var(--spacing-xl);
}

.featured-strip__label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    opacity: 0.6;
    margin-bottom: var(--spacing-sm);
}

.featured-strip__title {
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-sm);
}

.featured-strip__text {
    font-size: var(--font-size-sm);
    opacity: 0.7;
    margin-bottom: var(--spacing-lg);
}

.featured-strip__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px 28px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    border-radius: var(--radius-full);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-strip__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* ---- Featured Product Spotlight ---- */
.spotlight {
    background: var(--color-bg);
    min-height: calc(100svh - var(--header-height));
    margin-bottom: var(--spacing-3xl);
}

.spotlight > .container {
    height: 100%;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

.spotlight__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    height: 100%;
}

@media (min-width: 768px) {
    .spotlight__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
}

@media (min-width: 768px) {
    .spotlight__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-3xl);
    }
}

.spotlight__image {
    display: block;
    overflow: hidden;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    height: 100%;
}

.spotlight__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.spotlight__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.spotlight__image:hover img {
    transform: scale(1.04);
}

.spotlight__collection {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.spotlight__collection:hover {
    color: var(--color-text);
}

.spotlight__title {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-md);
}

.spotlight__title a {
    color: var(--color-text);
    text-decoration: none;
}

.spotlight__title a:hover {
    opacity: 0.7;
}

.spotlight__price {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.spotlight__price-current--sale {
    color: var(--color-sale);
}

.spotlight__price-compare {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
}

.spotlight__delivery {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-success);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--spacing-lg);
    padding: 6px 14px;
    background: var(--color-success-bg);
    border-radius: var(--radius-full);
}

.spotlight__variants {
    margin-bottom: var(--spacing-lg);
}

.spotlight__variant-group {
    margin-bottom: var(--spacing-md);
}

.spotlight__variant-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.spotlight__variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.spotlight__variant-pill {
    padding: 6px 14px;
    border: 1.5px solid var(--color-borders);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text);
}

.spotlight__variant-more {
    padding: 6px 14px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 500;
}

.spotlight__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.spotlight__cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.spotlight__details-link {
    display: inline-block;
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.spotlight__details-link:hover {
    color: var(--color-text);
}

/* Dark variant (default) */
.featured-strip--dark {
    background: var(--color-hero-gradient-start);
}

/* Light variant - inverted colors */
.featured-strip--light {
    background: var(--color-bg-alt);
}

.featured-strip--light .featured-strip__content {
    background: linear-gradient(to left, rgba(247,247,247,0.95) 0%, rgba(247,247,247,0.75) 40%, transparent 70%);
}

.featured-strip--light .featured-strip__inner {
    color: var(--color-text);
}

.featured-strip--light .featured-strip__cta {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

/* Reverse variant - content on left, gradient from left */
/* --reverse removed: all strips use right-aligned text for consistent contrast */

/* Accent variant - brand color gradient */
.featured-strip--accent {
    background: linear-gradient(135deg, var(--color-hero-gradient-start) 0%, var(--color-hero-gradient-end) 100%);
}

/* Scroll animation keyframes - 3 different speeds for variety */
/* featuredStripScroll keyframes removed — JS-driven */

/* Mobile responsive */
@media (max-width: 767px) {
    .featured-strip {
        height: 220px;
    }
    .featured-strip__content {
        background: linear-gradient(to top, rgba(17,17,17,0.95) 0%, rgba(17,17,17,0.6) 60%, transparent 100%);
    }
    .featured-strip--light .featured-strip__content {
        background: linear-gradient(to top, rgba(247,247,247,0.95) 0%, rgba(247,247,247,0.6) 60%, transparent 100%);
    }
    .featured-strip__inner {
        margin: 0;
        text-align: center;
        max-width: 100%;
        align-self: flex-end;
        padding-bottom: var(--spacing-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .featured-strip__track { /* JS-driven, no CSS animation to disable */ }
}


/* ==========================================
   Stats Bar
   ========================================== */

.stats-bar {
    background: var(--color-hero-gradient-start);
    color: var(--color-hero-text);
    padding: var(--spacing-3xl) 0;
}

.stats-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3xl);
    flex-wrap: wrap;
}

.stats-bar__stat {
    text-align: center;
    min-width: 140px;
}

.stats-bar__number {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
    display: inline;
}

.stats-bar__suffix {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
    opacity: 0.6;
}

.stats-bar__label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    opacity: 0.5;
    margin-top: var(--spacing-sm);
}

.stats-bar__divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 767px) {
    .stats-bar__inner {
        gap: var(--spacing-xl);
    }
    .stats-bar__divider {
        display: none;
    }
    .stats-bar__stat {
        min-width: 100px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .marquee__track, .marquee-hero__track { animation: none; overflow-x: auto; }
}
@media (max-width: 767px) {
    .marquee__item { flex: 0 0 150px; height: 150px; }
}


/* ==========================================
   30. Accordion
   ========================================== */

.accordion {
    border-top: 1px solid var(--color-borders);
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}
.accordion__item {
    border-bottom: 1px solid var(--color-borders);
}
.accordion__trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) 0;
    background: none;
    border: none;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: color var(--transition-fast);
}
.accordion__trigger:hover { color: var(--color-text-secondary); }
.accordion__icon {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}
.accordion__item--open .accordion__icon {
    transform: rotate(180deg);
}
.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s ease;
    padding: 0;
}
.accordion__item--open .accordion__content {
    padding: var(--spacing-md) 0 var(--spacing-lg) 0;
}
.accordion__content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}
.accordion__content p:last-child,
.accordion__content .rte > *:last-child {
    margin-bottom: 0;
}
.accordion__content h4 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}
.accordion__content h4:first-child {
    margin-top: 0;
}
.accordion__content ul,
.accordion__content ol {
    padding-left: var(--spacing-lg);
    margin-bottom: 1em;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}
.accordion__content ul li { list-style: disc; margin-bottom: var(--spacing-xs); }
.accordion__content ol li { list-style: decimal; margin-bottom: var(--spacing-xs); }


/* ==========================================
   31. Sticky Add to Cart (mobile)
   ========================================== */

.sticky-atc {
    position: fixed;
    top: var(--header-height, 108px);
    left: 0;
    right: 0;
    z-index: 98;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-borders);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-200%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sticky-atc--visible { transform: translateY(0); }
body.cart-alert-visible .sticky-atc {
    top: calc(var(--header-height, 108px) + var(--cart-alert-height, 44px));
}
.sticky-atc__inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}
.sticky-atc__img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.sticky-atc__info { flex: 1; min-width: 0; }
.sticky-atc__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.sticky-atc__price {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.sticky-atc__variants {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.sticky-atc__variant-select {
    padding: 10px 12px;
    border: 1px solid var(--color-borders);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    max-width: 140px;
    box-sizing: border-box;
}
.sticky-atc__btn {
    padding: 10px 24px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--transition-base);
}
.sticky-atc__btn:hover { opacity: 0.9; }
.sticky-atc__btn.sticky-atc__btn--pers {
    background: none;
    color: var(--color-text-muted);
    border: none;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.sticky-atc__btn.sticky-atc__btn--pers:hover {
    color: var(--color-text);
    opacity: 1;
}
.sticky-atc__btn--pers svg {
    vertical-align: -2px;
    margin-right: 3px;
}

@media (max-width: 767px) {
    .sticky-atc__inner {
        flex-wrap: wrap;
        padding: var(--spacing-sm) var(--spacing-md);
        gap: 6px;
    }
    .sticky-atc__info {
        flex: 1;
        min-width: 0;
    }
    .sticky-atc__variants {
        order: 10;
        width: 100%;
        flex-shrink: 1;
    }
    .sticky-atc__variant-select {
        flex: 1;
        min-width: 0;
        max-width: none;
        padding: 8px 8px;
        font-size: 11px;
    }
    .sticky-atc__btn {
        padding: 10px 16px;
        font-size: 11px;
    }
    .sticky-atc__btn.sticky-atc__btn--pers {
        padding: 6px 8px;
        font-size: 0;
    }
    .sticky-atc__btn.sticky-atc__btn--pers svg {
        margin-right: 0;
        width: 16px;
        height: 16px;
    }
}


/* ==========================================
   32. Collection Hero
   ========================================== */

.collection-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-hero-gradient-start);
    color: var(--color-white);
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
}
.collection-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}
.collection-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
    max-width: 600px;
}
.collection-hero__title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--spacing-md);
}
.collection-hero__description {
    font-size: var(--font-size-md);
    opacity: 0.85;
    line-height: var(--line-height-normal);
}


/* ==========================================
   33. Back to Top Button
   ========================================== */

.back-to-top {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    width: 48px;
    height: 48px;
    background: var(--color-bg);
    border: 1px solid var(--color-borders);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    color: var(--color-text);
}
.back-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}


/* ==========================================
   34. Footer Newsletter Row
   ========================================== */

.footer-newsletter {
    background: var(--color-footer-bg);
    border-bottom: 1px solid var(--color-footer-border);
    padding: var(--spacing-3xl) 0;
}
.footer-newsletter__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}
.footer-newsletter__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-footer-link-hover);
    margin-bottom: var(--spacing-xs);
}
.footer-newsletter__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-footer-link);
    line-height: var(--line-height-normal);
}
.footer-newsletter__form {
    display: flex;
    gap: var(--spacing-sm);
}
.footer-newsletter__input {
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.08);
    color: var(--color-footer-text);
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
    outline: none;
    width: 280px;
    transition: border-color var(--transition-fast);
}
.footer-newsletter__input::placeholder { color: var(--color-footer-link); }
.footer-newsletter__input:focus { border-color: rgba(255,255,255,0.4); }
.footer-newsletter__btn {
    padding: 14px 24px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}
.footer-newsletter__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}
@media (max-width: 767px) {
    .footer-newsletter__inner { flex-direction: column; text-align: center; }
    .footer-newsletter__form { width: 100%; }
    .footer-newsletter__input { flex: 1; width: auto; }
}


/* ==========================================
   35. Category Grid — marketplace discovery tiles
   ========================================== */

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}
@media (min-width: 768px) {
    .category-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}
@media (min-width: 1024px) {
    .category-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
}

/* Category tiles — same visual language as product cards and marquee */
.category-grid__tile {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    color: var(--color-white);
}

.category-grid__tile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--color-primary);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-grid__tile:hover .category-grid__tile-bg {
    transform: scale(1.06);
}

/* Gradient overlay — always visible, darkens on hover */
.category-grid__tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 40%, transparent 100%);
    z-index: 1;
    transition: background 0.4s ease;
}

.category-grid__tile:hover::after {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}

/* Info pinned at bottom — slides up on hover to reveal shop button */
.category-grid__tile-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Content is always visible — no slide transform needed */

.category-grid__tile-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    margin-bottom: 4px;
}

.category-grid__tile-count {
    font-size: var(--font-size-xs);
    opacity: 0.6;
    display: block;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

/* Shop button — hidden by default, slides up on hover */
.category-grid__tile-cta {
    display: block;
    width: 100%;
    padding: 10px 0;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    text-align: center;
    border-radius: 2px;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-grid__tile:hover .category-grid__tile-cta {
    opacity: 1;
    transform: translateY(0);
}

.category-grid__tile-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}


/* ==========================================
   36. Trending Row — horizontal scroll product showcase
   ========================================== */

.trending-row {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--spacing-xl) var(--spacing-sm);
    scrollbar-width: none;
}
.trending-row::-webkit-scrollbar { display: none; }

.trending-row__item {
    flex: 0 0 220px;
    scroll-snap-align: start;
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--transition-base);
}
.trending-row__item:hover {
    transform: translateY(-4px);
}
.trending-row__image {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-alt);
    margin-bottom: var(--spacing-sm);
}
.trending-row__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.trending-row__item:hover .trending-row__image img {
    transform: scale(1.05);
}
.trending-row__badge {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    padding: 4px 10px;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-full);
}
.trending-row__info {
    padding: 0 var(--spacing-xs);
}
.trending-row__title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: var(--line-height-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.trending-row__price {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}
@media (min-width: 768px) {
    .trending-row__item { flex: 0 0 260px; }
}
@media (max-width: 480px) {
    .trending-row__item { flex: 0 0 180px; }
    .trending-row { padding: 0 var(--spacing-md) var(--spacing-sm); gap: var(--spacing-sm); }
}


/* ==========================================
   37. Category Directory — full collection listing
   ========================================== */

.category-directory {
    column-count: 2;
    column-gap: var(--spacing-xl);
}
@media (min-width: 768px) {
    .category-directory { column-count: 3; }
}
@media (min-width: 1024px) {
    .category-directory { column-count: 4; }
}
.category-directory__group {
    break-inside: avoid;
    margin-bottom: var(--spacing-xl);
}
.category-directory__heading {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-accent);
}
.category-directory__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.category-directory__link {
    display: block;
    padding: 8px 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-borders);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.category-directory__link:hover {
    color: var(--color-accent);
    padding-left: var(--spacing-sm);
}


/* ==========================================
   38. Trust Footer — combined trust signals
   ========================================== */

.trust-footer {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-borders);
    border-bottom: 1px solid var(--color-borders);
    padding: var(--spacing-2xl) 0;
}
.trust-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}
@media (min-width: 768px) {
    .trust-footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .trust-footer__inner { grid-template-columns: repeat(4, 1fr); }
}
.trust-footer__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
}
.trust-footer__item svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--color-text);
}
.trust-footer__text {
    display: flex;
    flex-direction: column;
}
.trust-footer__text strong {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
}
.trust-footer__text span {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}


/* ==========================================
   39. Product Grid Dense — 5-column large screens
   ========================================== */

@media (min-width: 1280px) {
    .product-grid--dense { grid-template-columns: repeat(5, 1fr); }
}


/* ==========================================
   40. Responsive Overrides
   ========================================== */

/* --- Mobile (max 767px) --- */
@media (max-width: 767px) {
    .section {
        padding: clamp(2rem, 6vw, 3rem) 0;
    }

    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .trust-bar__inner {
        gap: var(--spacing-lg);
    }

    .footer__bar-inner {
        flex-direction: column;
        text-align: center;
    }

    .form-row--half {
        grid-template-columns: 1fr;
    }

    .product-gallery__thumb {
        flex: 0 0 56px;
        height: 56px;
    }

    .product-gallery__nav {
        opacity: 1;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .product-gallery__nav:hover {
        transform: translateY(-50%) scale(1);
    }
}

/* --- Tablet (max 1023px) --- */
@media (max-width: 1023px) {
    .collection-card {
        flex: 0 0 160px;
    }

    .collection-card__image {
        width: 160px;
        height: 160px;
    }
}


/* ==========================================
   41. Load More Button
   ========================================== */

.load-more {
    text-align: center;
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
}
.load-more__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 16px 48px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1.5px solid var(--color-borders);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.load-more__btn:hover {
    border-color: var(--color-text);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.load-more__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.load-more__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-md);
}

/* ==========================================
   Personalisation Form (matches Shopify design)
   ========================================== */
.pers-form {
    margin-top: var(--spacing-lg);
    border: 1px solid var(--color-borders);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
}

/* Header bar — light bg, text left, circular toggle button right */
.pers-form__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-bg-alt);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}
.pers-form__header:hover { background: var(--color-borders); }
.pers-form__header-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}
.pers-form__arrow {
    margin-left: 5px;
    transition: transform 0.3s ease;
}
.pers-form--open .pers-form__arrow { transform: rotate(180deg); }

/* Circular toggle button */
.pers-form__toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.3s ease;
    flex-shrink: 0;
}
.pers-form__toggle-btn:hover { opacity: 0.85; }
.pers-form--open .pers-form__toggle-btn { transform: rotate(180deg); }
.pers-form__toggle-icon { width: 20px; height: 20px; color: var(--color-accent-text); }

/* Content area */
.pers-form__content {
    display: none;
    padding: 16px;
    border-top: 1px solid var(--color-borders);
}

/* Textarea — no label, just placeholder */
.pers-form__field { margin-bottom: 16px; }
.pers-form__textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-borders);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font-body);
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    color: var(--color-text);
    background: var(--color-bg);
}
.pers-form__textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
.pers-form__textarea::placeholder { color: var(--color-text-muted); }

/* Upload area — large dashed border */
.pers-form__upload {
    border: 2px dashed var(--color-borders);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    position: relative;
    background: var(--color-bg-alt);
}
.pers-form__upload:hover,
.pers-form__upload--dragover {
    border-color: var(--color-accent);
    background: var(--color-bg);
}
.pers-form__upload-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
.pers-form__upload-icon { margin-bottom: 8px; color: var(--color-text-secondary); }
.pers-form__upload-title { font-size: 15px; color: var(--color-text); }
.pers-form__upload-subtitle { font-size: 13px; color: var(--color-text-muted); }
.pers-form__file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pers-form__upload-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 8px;
    margin-bottom: 16px;
}

/* File previews */
.pers-form__previews { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.pers-form__previews:empty { display: none; margin: 0; }
.pers-form__preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-borders);
}
.pers-form__preview-item img { width: 100%; height: 100%; object-fit: cover; }
.pers-form__preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.6);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pers-form__preview-remove:hover { background: rgba(0,0,0,0.8); }

/* Progress */
.pers-form__progress { display: none; margin-bottom: 16px; }
.pers-form__progress-bar { height: 6px; background: var(--color-borders); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.pers-form__progress-fill { height: 100%; background: var(--color-accent); width: 0; transition: width 0.3s ease; }
.pers-form__progress-text { font-size: 12px; color: var(--color-text-muted); }

/* Add to Cart button — full width, accent bg, rounded */
.pers-form__submit {
    width: 100%;
    padding: 14px 20px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
    font-family: var(--font-body);
}
.pers-form__submit:not(:disabled):hover { opacity: 0.85; }
.pers-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Hint text */
.pers-form__hint {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 8px;
    margin-bottom: 0;
}
/* ============================================================
   Page Content (policy/info pages)
   ============================================================ */
.page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-xl) 0;
}
.page-content__title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-accent);
}
.page-content .rte {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.page-content .rte h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}
.page-content .rte p {
    margin-bottom: var(--spacing-md);
}
.page-content .rte ol,
.page-content .rte ul {
    margin-bottom: var(--spacing-md);
    padding-left: 24px;
}
.page-content .rte li {
    margin-bottom: var(--spacing-xs);
}
.page-content .rte a {
    color: var(--color-accent);
    text-decoration: underline;
    transition: opacity var(--transition-fast);
}
.page-content .rte a:hover {
    opacity: 0.75;
}

/* ============================================================
   Reviews Marquee
   ============================================================ */

/* Reviews hero — mirrors newsletter-hero design language */
.reviews-hero {
    background: var(--color-bg-alt);
    height: calc((100svh - var(--header-height)) * 0.3);
    min-height: 180px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.reviews-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.02) 0%, transparent 60%);
    pointer-events: none;
}
.reviews-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}
.reviews-hero__text {
    flex: 1;
    min-width: 280px;
}
.reviews-hero__stars {
    display: flex;
    gap: 3px;
    margin-bottom: var(--spacing-sm);
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 0.1s;
}
.reviews-hero__title {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text);
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 0.2s;
}
.reviews-hero__subtitle {
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    margin: 0;
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 0.4s;
}
.reviews-hero__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 14px 24px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-base);
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 0.5s;
}
.reviews-hero__cta:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
@media (max-width: 767px) {
    .reviews-hero__inner { flex-direction: column; text-align: center; }
    .reviews-hero__stars { justify-content: center; }
    .reviews-hero__cta { width: 100%; justify-content: center; }
}

.reviews-marquee {
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
    background: var(--color-bg-alt);
    overflow: hidden;
}
/* No footer gap when reviews marquee is the last section on the page */
body:has(.reviews-marquee) footer.footer,
body:has(.section--bg-light) footer.footer {
    margin-top: 0;
}
.reviews-marquee__header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}
.reviews-marquee__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}
.reviews-marquee__title {
    font-family: var(--font-heading);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm);
}
.reviews-marquee__stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.reviews-marquee__count {
    margin-left: var(--spacing-sm);
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Scroll container */
.reviews-marquee__scroll {
    position: relative;
    overflow: hidden;
    cursor: grab;
    /* Fade edges */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.reviews-marquee__track {
    display: flex;
    gap: 16px;
    width: max-content;
}

/* Review cards */
.review-card {
    flex-shrink: 0;
    width: 360px;
    background: var(--color-bg);
    border: 1px solid var(--color-borders);
    border-radius: 12px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.review-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}
.review-card__top {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.review-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-heading);
}
.review-card__meta {
    flex: 1;
    min-width: 0;
}
.review-card__name {
    display: block;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 2px;
}
.review-card__stars {
    display: flex;
    gap: 1px;
}
.review-card__quote {
    flex-shrink: 0;
    margin-left: auto;
}
.review-card__text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: italic;
}
.review-card__verified {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-borders);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

@media (max-width: 767px) {
    .review-card { width: 300px; padding: 22px; }
}

/* Cart personalisation display */
.cart-pers { margin-top: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background: var(--color-bg-alt); border-radius: var(--radius-sm); border: 1px solid var(--color-borders); }
.cart-pers__label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); margin-bottom: 2px; }
.cart-pers__text { font-size: var(--font-size-xs); color: var(--color-text); line-height: var(--line-height-normal); margin-bottom: var(--spacing-sm); }
.cart-pers__images { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; }
.cart-pers__img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-borders); transition: border-color var(--transition-fast); }
.cart-pers__img:hover { border-color: var(--color-accent); }