/* =========================================
   ABARANAM — Design System & Global Styles
   Sister brand to Premam Silks. Same type
   pairing, jewellery-led maroon/gold palette.
   ========================================= */

/* ===== CSS Custom Properties ===== */
:root {
    /* Brand Colors */
    --color-primary: #6b2136;
    --color-primary-dark: #4e1727;
    --color-primary-light: #8a3049;
    --color-accent: #c9a227;
    --color-accent-light: #f0e2b8;
    --color-accent-dark: #9d7b1a;

    /* Neutral Colors */
    --color-bg: #fbf8f3;
    --color-bg-alt: #f4ece0;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text: #2a2320;
    --color-text-light: #6b625c;
    --color-text-muted: #9c938c;
    --color-border: #e9e0d3;

    /* Espresso / gold hero palette (Premam Abaranam lockup) */
    --color-espresso: #2b201a;
    --color-espresso-dark: #1a110d;
    --color-gold: #c9a227;
    --color-gold-light: #d9bd7e;
    --color-gold-dark: #9d7b1a;
    --color-blush: #f3e3e1;

    /* Feedback */
    --color-success: #2f6f4f;
    --color-error: #a32c2c;

    /* Typography */
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Layout */
    --container-max: 1400px;
    --container-padding: 1.5rem;
    --header-h: 104px;

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

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
}

/* ===== Reset & Base ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden;
}

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

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-primary-dark);
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ===== Layout Helpers ===== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container-narrow {
    max-width: 860px;
}

.section {
    padding-block: var(--space-24);
}

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

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-16);
}

.eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: var(--space-4);
}

.section-title {
    font-size: clamp(2rem, 4vw, var(--text-4xl));
    margin-bottom: var(--space-4);
}

.section-subtitle {
    color: var(--color-text-light);
    font-size: var(--text-base);
}

/* Thin gold rule used under headings */
.rule {
    width: 72px;
    height: 1px;
    margin: var(--space-5) auto;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base),
        border-color var(--transition-base), transform var(--transition-fast);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-gold {
    background: var(--color-accent);
    color: var(--color-primary-dark);
}

.btn-gold:hover {
    background: var(--color-accent-dark);
    color: var(--color-white);
}

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

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-light {
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--color-white);
}

.btn-light:hover {
    background: var(--color-white);
    color: var(--color-primary-dark);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: var(--space-2) var(--space-5);
    font-size: 0.6875rem;
}

.text-link {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-accent);
    padding-bottom: 2px;
    transition: color var(--transition-base);
}

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

/* ===== Top Announcement Bar ===== */
.top-bar {
    background: var(--color-blush);
    color: var(--color-espresso);
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    padding: var(--space-3) var(--space-4);
}

.top-bar a {
    color: var(--color-espresso);
    border-bottom: 1px solid var(--color-gold);
}

.top-bar-mark {
    margin-left: 0.5rem;
    color: var(--color-gold-dark);
}

/* ===== Header =====
   Two modes. Inner pages get the solid cream bar; the homepage adds
   .header--overlay so the hero photograph runs up behind it, and the bar
   turns solid again as soon as you scroll. */
.header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(251, 248, 243, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-base), border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.header.is-scrolled {
    box-shadow: var(--shadow-md);
}

.header--overlay {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* Once you scroll off the hero the bar has to become solid again — otherwise
   white nav type sits on top of the white headline. */
.header--overlay.is-scrolled {
    background: rgba(251, 248, 243, 0.96);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

.header--overlay.is-scrolled .logo,
.header--overlay.is-scrolled .nav-link,
.header--overlay.is-scrolled .nav-icon,
.header--overlay.is-scrolled .mobile-menu-toggle {
    color: var(--color-text);
}

.header--overlay.is-scrolled .logo-name {
    color: var(--color-gold-dark);
}

.header--overlay.is-scrolled .nav-link:hover,
.header--overlay.is-scrolled .nav-link.active,
.header--overlay.is-scrolled .nav-icon:hover {
    color: var(--color-gold-dark);
}

.nav-container {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: var(--header-h);
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-3) var(--container-padding);
}

/* ===== Logo lockup ===== */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
    color: var(--color-espresso);
}

/* The roundel is a transparent PNG, so it reads on the cream bar and over the
   hero photograph without a plate behind it. Sized by height: the header bar is
   --header-h tall and the mark should breathe inside it.

   `top` is an optical correction, not a layout fix. Centring the flex items
   lines up their boxes, but the wordmark's box carries uneven leading above
   PREMAM and below ABARANAM, so its ink sits ~2.5px lower than its box centre.
   Nudging the roundel down by the same amount lines the two up to the eye. */
.logo-mark {
    display: block;
    width: auto;
    height: 60px;
    flex-shrink: 0;
    position: relative;
    top: 2px;
}

.logo-words {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.logo-name {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    color: var(--color-gold-dark);
}

.logo-sub {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-size: 0.5625rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    color: currentColor;
}

.logo-sub::before,
.logo-sub::after {
    content: '';
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.logo-sub::after {
    margin-left: -0.42em;
}

/* The third line of the lockup, as it sits on the printed artwork. Kept
   lighter and smaller than ABARANAM so the wordmark still leads, and it adds
   no height to the bar: the roundel is 60px and the three stacked lines come
   to about 55px, so --header-h is untouched. */
.logo-tagline {
    font-family: var(--font-body);
    font-size: 0.4375rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: currentColor;
    opacity: 0.72;
}

.header--overlay .logo {
    color: rgba(255, 255, 255, 0.9);
}

.header--overlay .logo-name {
    color: var(--color-gold-light);
}

/* ===== Nav ===== */
.nav-menu {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-4), 1.9vw, var(--space-8));
    margin-inline: auto;
}

.nav-item {
    position: relative;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text);
    padding-block: var(--space-3);
    white-space: nowrap;
    transition: color var(--transition-base);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: var(--space-1);
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-gold-dark);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-caret {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.nav-item:hover .nav-caret {
    transform: rotate(180deg);
}

.header--overlay .nav-link {
    color: rgba(255, 255, 255, 0.9);
}

.header--overlay .nav-link:hover,
.header--overlay .nav-link.active {
    color: var(--color-white);
}

/* ===== Jewellery dropdown ===== */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 10;
    min-width: 232px;
    padding: var(--space-3) 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity var(--transition-base), transform var(--transition-base),
        visibility var(--transition-base);
}

/* .is-open is the touch/keyboard path — there is no hover on a tablet, and the
   dropdown would otherwise be unreachable above the 900px drawer breakpoint. */
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.nav-dropdown a {
    display: block;
    padding: var(--space-2) var(--space-6);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-light);
    white-space: nowrap;
    transition: background var(--transition-base), color var(--transition-base);
}

.nav-dropdown a:hover {
    background: var(--color-bg-alt);
    color: var(--color-gold-dark);
}

.nav-dropdown .is-divided {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

/* ===== Icons ===== */
.nav-icons {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.nav-icon {
    position: relative;
    display: inline-flex;
    padding: var(--space-2);
    color: var(--color-text);
    transition: color var(--transition-base);
}

.nav-icon:hover {
    color: var(--color-gold-dark);
}

.nav-icon svg {
    width: 20px;
    height: 20px;
}

.header--overlay .nav-icon {
    color: rgba(255, 255, 255, 0.92);
}

.header--overlay .nav-icon:hover {
    color: var(--color-gold-light);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
}

.mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.header--overlay .mobile-menu-toggle {
    color: var(--color-white);
}

.mobile-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ===== Search overlay ===== */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    background: rgba(24, 16, 12, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

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

.search-box {
    width: min(660px, 88vw);
}

.search-box label {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-gold-light);
    margin-bottom: var(--space-5);
}

.search-box input {
    width: 100%;
    padding: var(--space-3) 0;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: var(--color-white);
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    outline: none;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.search-box p {
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
}

.search-close {
    position: absolute;
    top: var(--space-8);
    right: var(--space-8);
    color: rgba(255, 255, 255, 0.7);
}

/* The drawer's close button. Desktop has no drawer, so it has no button. */
.nav-close-row {
    display: none;
}

.search-close svg {
    width: 22px;
    height: 22px;
}

/* ===== Hero ===== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(94vh, 940px);
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-espresso-dark);
}

/* pull the photograph up behind the transparent header */
body[data-page='home'] .hero {
    margin-top: calc(-1 * var(--header-h));
    padding-top: var(--header-h);
}

.hero-slides {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.hero-slide.is-active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
}

/* Dark on the left so the type stays readable, clear on the right so the
   jewellery is never dimmed. */
.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(26, 17, 13, 0.97) 0%,
            rgba(26, 17, 13, 0.94) 20%,
            rgba(26, 17, 13, 0.78) 36%,
            rgba(26, 17, 13, 0.36) 52%,
            rgba(26, 17, 13, 0.08) 68%,
            rgba(26, 17, 13, 0) 80%),
        linear-gradient(180deg,
            rgba(26, 17, 13, 0.5) 0%,
            rgba(26, 17, 13, 0) 24%,
            rgba(26, 17, 13, 0) 66%,
            rgba(26, 17, 13, 0.32) 100%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(var(--container-padding), 3.6vw, 5rem);
    padding-block: clamp(var(--space-16), 9vh, var(--space-24));
}

.hero-content {
    max-width: 560px;
}

.hero-eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--color-gold-light);
    margin-bottom: var(--space-6);
}

.hero-title {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--color-white);
    margin: 0;
}

.hero-line {
    display: block;
    font-size: clamp(1.95rem, 3.8vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: 0.005em;
}

/* line + gold rosette + line, between the two halves of the statement */
.hero-divider {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: min(100%, 400px);
    margin-block: var(--space-6);
}

.hero-divider::before,
.hero-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 189, 126, 0.75));
}

.hero-divider::after {
    background: linear-gradient(90deg, rgba(217, 189, 126, 0.75), transparent);
}

.hero-ornament {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--color-gold-light);
}

/* short rule under the second half */
.hero-rule {
    width: min(100%, 400px);
    height: 1px;
    margin-block: var(--space-6) var(--space-8);
    background: linear-gradient(90deg, rgba(217, 189, 126, 0.7) 0%, rgba(217, 189, 126, 0.7) 22%, rgba(255, 255, 255, 0.16) 22%, rgba(255, 255, 255, 0.16) 100%);
}

.hero-text {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.45vw, 1.15rem);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-10);
}

.hero-collection {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    text-transform: uppercase;
    color: var(--color-gold-light);
    margin-bottom: var(--space-3);
}

.hero-collection-sub {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(0.95rem, 1.35vw, 1.08rem);
    color: var(--color-gold);
    margin-bottom: var(--space-10);
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    min-width: 340px;
    padding: var(--space-5) var(--space-8);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold-light);
    border: 1px solid rgba(217, 189, 126, 0.6);
    transition: background var(--transition-base), color var(--transition-base),
        border-color var(--transition-base);
}

.btn-hero:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-espresso);
}

.btn-hero span {
    font-size: var(--text-lg);
    line-height: 1;
}

/* ===== Bottom wave ===== */
.hero-wave {
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    z-index: 4;
    line-height: 0;
    pointer-events: none;
}

.hero-wave svg {
    display: block;
    width: 100%;
    height: clamp(52px, 7vw, 104px);
}

.hero-wave .wave-fill {
    fill: var(--color-bg);
}

.hero-wave .wave-line {
    fill: none;
    stroke: var(--color-gold);
    stroke-width: 1.6;
    opacity: 0.75;
    vector-effect: non-scaling-stroke;
}

/* sits centred on the crest of the wave (y=44 of the 110 viewBox) */
.hero-lotus {
    position: absolute;
    left: 50%;
    bottom: 60%;
    transform: translate(-50%, 50%);
    width: clamp(24px, 2.6vw, 36px);
    line-height: 0;
    color: var(--color-gold);
}

/* legacy helper kept for the CTA bands and empty states */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

/* ===== Page Banner (inner pages) ===== */
.page-banner {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    padding-block: var(--space-20);
    color: var(--color-white);
    background: var(--color-primary-dark);
    overflow: hidden;
}

.page-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.page-banner .page-banner-inner {
    position: relative;
    z-index: 2;
    padding-inline: var(--container-padding);
}

.page-banner h1 {
    font-size: clamp(2rem, 5vw, var(--text-5xl));
    color: var(--color-white);
}

.page-banner p {
    max-width: 620px;
    margin: var(--space-4) auto 0;
    color: rgba(255, 255, 255, 0.85);
}

.breadcrumb {
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent-light);
    margin-bottom: var(--space-4);
}

.breadcrumb a:hover {
    color: var(--color-white);
}

/* ===== Category Grid ===== */
/* Three collections, centred. Flex rather than a fixed grid: with an odd count
   a trailing row (two tiles on tablet, one on mobile) centres itself instead of
   hugging the left, which a grid column count cannot do on its own. */
.category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
}

.category-grid > * {
    flex: 0 1 calc((100% - 2 * var(--space-6)) / 3);
}

@media (max-width: 1100px) {
    .category-grid > * {
        flex-basis: calc((100% - var(--space-6)) / 2);
    }
}

@media (max-width: 560px) {
    .category-grid > * {
        flex-basis: 100%;
    }
}

.category-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
}

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

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

.category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(30, 10, 16, 0.78));
}

.category-card-body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--space-6);
    color: var(--color-white);
}

.category-card-body h3 {
    font-size: var(--text-2xl);
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.category-card-body p {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: var(--space-3);
}

.category-card-body span {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-light);
}

/* ===== Product Card (shared by home + collections) ===== */
/* 280px min lands on 4 columns at the 1400px container — 8 featured pieces fill
   two clean rows, 12 on the collections page fill three. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-8) var(--space-6);
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

.product-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-bg-alt);
}

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

.product-card:hover .product-card-media img {
    transform: scale(1.05);
}

.product-tag {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 2;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-primary-dark);
}

.product-tag.is-sold {
    background: var(--color-text-light);
    color: var(--color-white);
}

.product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-2);
    padding: var(--space-5);
}

.product-card-cat {
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.product-card-title {
    font-size: var(--text-xl);
    line-height: 1.3;
}

.product-card-title a:hover {
    color: var(--color-primary);
}

.product-card-price {
    margin-top: auto;
    padding-top: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-style: italic;
    color: var(--color-text-light);
}

/* Sits under the price line, which carries the `margin-top:auto` that pins this
   pair to the bottom of the card body. `align-self` keeps the rule under the
   words — as a flex item it would otherwise stretch the full width of the card
   and read as a divider rather than a link. */
.product-card-preorder {
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    border-bottom: 1px solid var(--color-accent);
    padding-bottom: 2px;
    transition: color var(--transition-base);
}

.product-card-preorder:hover {
    color: var(--color-primary);
}

.product-card .btn {
    margin-top: var(--space-3);
}

/* ===== Promise / Feature Strip ===== */
.promise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-8);
}

.promise-item {
    text-align: center;
    padding-inline: var(--space-2);
}

.promise-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto var(--space-5);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-full);
    color: var(--color-accent-dark);
}

.promise-icon svg {
    width: 26px;
    height: 26px;
}

.promise-item h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
}

.promise-item p {
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

/* ===== Split Feature (image + text) ===== */
.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: center;
    gap: var(--space-16);
}

.split-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.split-body h2 {
    font-size: clamp(1.75rem, 3.5vw, var(--text-4xl));
    margin-bottom: var(--space-5);
}

.split-body p {
    color: var(--color-text-light);
    margin-bottom: var(--space-4);
}

.split-body .btn {
    margin-top: var(--space-4);
}

.split.is-reversed .split-media {
    order: 2;
}

/* Our Story runs as alternating photo/text bands rather than one centred
   column, so the copy sits beside its picture. Same frame as the founder
   portrait, and the sides swap on every other band. */
.split-media.is-portrait img {
    aspect-ratio: 4 / 5;
}

.story-split + .story-split {
    margin-top: var(--space-20);
}

/* .story is defined further down the file, so these need the extra class to
   win on specificity rather than order */
.story.story--inline {
    max-width: none;
    margin-inline: 0;
    text-align: left;
}

.story.story--inline .story-accent {
    margin-block: var(--space-8);
}

.story.story--inline .story-accent b {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.story.story--inline .story-ornament {
    margin-inline: 0;
}

.story.story--inline > p:last-child,
.story.story--inline > div:last-child {
    margin-bottom: 0;
}

/* ===== Instagram rail ===== */
.instagram .section-title a {
    color: var(--color-gold-dark);
}

.instagram .section-title a:hover {
    text-decoration: underline;
}

/* A linear moving loop, the same pattern as the Premam Silks reels strip: the
   rail is a fixed viewport that clips, and the track inside it slides sideways
   for ever. `home.js` renders the cards twice; the keyframe travels exactly one
   copy, so the restart lands on an identical frame and the seam never shows. */
.reel-rail {
    overflow: hidden;
    padding-bottom: var(--space-4);
    /* fade both edges so cards glide in and out instead of popping */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.reel-marquee {
    display: flex;
    gap: var(--space-5);
    width: max-content;
    animation: reelScroll var(--reel-duration, 42s) linear infinite;
    will-change: transform;
}

/* Hold still while a visitor is looking at — or reaching for — one reel. */
.reel-rail:hover .reel-marquee,
.reel-rail:focus-within .reel-marquee {
    animation-play-state: paused;
}

@keyframes reelScroll {
    from {
        transform: translateX(0);
    }

    to {
        /* one copy is half the track minus half a gap: the track carries 12
           cards and 11 gaps, one copy is 6 cards and 6 gaps */
        transform: translateX(calc(-50% - (var(--space-5) / 2)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .reel-marquee {
        animation: none;
    }

    /* nothing moves on its own, so give the rail back its swipe */
    .reel-rail {
        overflow-x: auto;
    }
}

.reel-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(190px, 22vw, 260px);
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
}

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

.reel-card:hover img {
    transform: scale(1.05);
}

.reel-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 10, 16, 0.25) 0%, transparent 38%,
        transparent 55%, rgba(30, 10, 16, 0.82) 100%);
}

.reel-badge,
.reel-play,
.reel-caption {
    position: absolute;
    z-index: 2;
    color: var(--color-white);
}

.reel-badge {
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-full);
    background: rgba(30, 10, 16, 0.35);
}

.reel-badge svg {
    width: 15px;
    height: 15px;
}

.reel-play {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-full);
    background: rgba(30, 10, 16, 0.42);
    backdrop-filter: blur(2px);
    transition: background var(--transition-base);
}

.reel-card:hover .reel-play {
    background: var(--color-accent);
    color: var(--color-primary-dark);
}

.reel-play svg {
    width: 14px;
    height: 14px;
    margin-left: 3px;
}

.reel-caption {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    line-height: 1.4;
}

.instagram-foot {
    margin-top: var(--space-8);
    text-align: center;
}

/* ===== Testimonials ===== */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

.testimonial {
    padding: var(--space-8);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.stars {
    color: var(--color-accent);
    letter-spacing: 0.2em;
    margin-bottom: var(--space-4);
}

.testimonial blockquote {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-style: italic;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: var(--space-5);
}

.testimonial cite {
    display: block;
    font-size: var(--text-xs);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.testimonial cite span {
    display: block;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--color-text-muted);
}

/* ===== CTA Band ===== */
.cta-band {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    padding-block: var(--space-24);
    color: var(--color-white);
    overflow: hidden;
}

.cta-band img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(35, 12, 22, 0.66);
}

.cta-band-inner {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding-inline: var(--container-padding);
}

.cta-band h2 {
    font-size: clamp(1.85rem, 4vw, var(--text-4xl));
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.cta-band p {
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: var(--space-8);
}

/* ===== Newsletter ===== */
.newsletter {
    text-align: center;
}

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    max-width: 520px;
    margin: var(--space-8) auto 0;
}

.newsletter-form input {
    flex: 1 1 260px;
    padding: var(--space-3) var(--space-5);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.form-note {
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    min-height: 1.2em;
}

.form-note.is-success {
    color: var(--color-success);
}

.form-note.is-error {
    color: var(--color-error);
}

/* ===== Forms (shared) ===== */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.field label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.field input,
.field select,
.field textarea {
    padding: var(--space-3) var(--space-4);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--color-accent);
    outline: none;
}

.field textarea {
    resize: vertical;
    min-height: 130px;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: var(--color-error);
}

.field-error {
    font-size: var(--text-xs);
    color: var(--color-error);
    min-height: 1em;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

/* ===== Rich text (policy / care pages) ===== */
.prose h2 {
    font-size: var(--text-3xl);
    margin: var(--space-12) 0 var(--space-4);
}

.prose h3 {
    font-size: var(--text-xl);
    margin: var(--space-8) 0 var(--space-3);
}

.prose p,
.prose li {
    color: var(--color-text-light);
    margin-bottom: var(--space-4);
}

.prose ul,
.prose ol {
    margin: 0 0 var(--space-6) var(--space-6);
}

.prose ul li {
    list-style: none;
    position: relative;
    padding-left: var(--space-5);
}

.prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
}

.prose ol {
    list-style: decimal;
}

.prose ol li::marker {
    color: var(--color-accent-dark);
    font-weight: 600;
}

.prose strong {
    color: var(--color-text);
}

.prose a {
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-accent);
}

.prose > p:first-of-type {
    font-size: var(--text-lg);
    color: var(--color-text);
}

/* ===== Story (Our Story / Our Founder) =====
   The brand copy is written as short, lyrical lines rather than paragraphs, so
   it is set centred with generous leading, with the few lines that carry the
   brand promoted to display size. */
.story {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

.story p {
    font-size: clamp(1.075rem, 1.6vw, 1.1875rem);
    line-height: 1.95;
    color: var(--color-text-light);
    margin-bottom: var(--space-6);
}

.story p:last-child {
    margin-bottom: 0;
}

.story .is-lead {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    line-height: 1.5;
    color: var(--color-text);
    margin-bottom: var(--space-10);
}

.story .is-quiet {
    color: var(--color-text-muted);
}

/* "Premam Silks." / "Devadhai — The Goddess In You." */
.story-accent {
    margin-block: var(--space-16);
}

.story-accent b {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-primary-dark);
}

.story-accent span {
    display: block;
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.story-ornament {
    display: block;
    width: 34px;
    height: 34px;
    margin: var(--space-12) auto;
    color: var(--color-accent);
}

/* ===== Founder ===== */
.founder {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.founder-portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
}

.founder-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.founder-body .eyebrow {
    text-align: left;
}

.founder-name {
    font-size: clamp(1.75rem, 3.4vw, var(--text-4xl));
    margin-bottom: var(--space-2);
}

.founder-role {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: var(--space-8);
}

.founder-body p {
    color: var(--color-text-light);
    margin-bottom: var(--space-5);
}

.founder-creed {
    margin-block: var(--space-8);
    padding-left: var(--space-6);
    border-left: 1px solid var(--color-accent);
}

.founder-creed li {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    line-height: 1.6;
    color: var(--color-primary-dark);
}

@media (max-width: 900px) {
    .founder {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
}

/* ===== Care page cards ===== */
/* Six care cards — 3x2, matching .category-grid, rather than an auto-fit 4+2. */
.care-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1024px) {
    .care-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .care-grid {
        grid-template-columns: 1fr;
    }
}

.care-card {
    padding: var(--space-8);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
}

.care-card h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

.care-card ul {
    display: grid;
    gap: var(--space-3);
}

.care-card li {
    position: relative;
    padding-left: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

.care-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    border: 1px solid var(--color-accent);
    transform: rotate(45deg);
}

.do-dont {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.do-dont-col {
    padding: var(--space-8);
    border-radius: var(--radius-md);
}

.do-dont-col.is-do {
    background: rgba(47, 111, 79, 0.07);
    border: 1px solid rgba(47, 111, 79, 0.25);
}

.do-dont-col.is-dont {
    background: rgba(163, 44, 44, 0.06);
    border: 1px solid rgba(163, 44, 44, 0.22);
}

.do-dont-col h3 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xl);
    margin-bottom: var(--space-5);
}

.do-dont-col li {
    padding-left: var(--space-6);
    position: relative;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

.do-dont-col.is-do li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: 700;
}

.do-dont-col.is-dont li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: var(--color-error);
    font-weight: 700;
}

/* ===== Accordion (FAQ) ===== */
.accordion {
    border-top: 1px solid var(--color-border);
}

.accordion-item {
    border-bottom: 1px solid var(--color-border);
}

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-5) 0;
    text-align: left;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--color-primary-dark);
}

.accordion-trigger::after {
    content: '+';
    flex-shrink: 0;
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--color-accent-dark);
    transition: transform var(--transition-base);
}

.accordion-item.is-open .accordion-trigger::after {
    content: '−';
}

.accordion-panel {
    display: none;
    padding-bottom: var(--space-5);
    color: var(--color-text-light);
    font-size: var(--text-sm);
}

.accordion-item.is-open .accordion-panel {
    display: block;
}

/* ===== Timeline (about page) ===== */
.timeline {
    position: relative;
    margin-left: var(--space-4);
    padding-left: var(--space-10);
    border-left: 1px solid var(--color-border);
}

.timeline-item {
    position: relative;
    padding-bottom: var(--space-10);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-10) - 6px);
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-bg);
}

.timeline-year {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--color-accent-dark);
}

.timeline-item h3 {
    font-size: var(--text-2xl);
    margin: var(--space-1) 0 var(--space-2);
}

.timeline-item p {
    color: var(--color-text-light);
    font-size: var(--text-sm);
}

/* ===== Stat row ===== */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-8);
    text-align: center;
}

.stat-value {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    color: var(--color-primary);
}

.stat-label {
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ===== Toast ===== */
.toast-stack {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 240px;
    max-width: 360px;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.toast.is-visible {
    opacity: 1;
    transform: none;
}

.toast.is-error {
    background: var(--color-error);
}

/* ===== Footer ===== */
.footer {
    background: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.75);
    padding-top: var(--space-20);
    font-size: var(--text-sm);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--space-12);
    padding-bottom: var(--space-16);
}

/* the shared .logo lockup is centred and dark; in the footer it sits left on
   a dark ground, so both need overriding */
.footer-logo {
    align-items: center;
    margin-bottom: var(--space-5);
    color: rgba(255, 255, 255, 0.78);
}

.footer-logo .logo-words {
    align-items: flex-start;
}

.footer-logo .logo-name {
    color: var(--color-gold-light);
}

.footer-brand p {
    max-width: 380px;
    margin-bottom: var(--space-6);
}

/* ===== "Stay close to Premam" ===== */
.footer-stay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-bottom: var(--space-10);
    margin-bottom: var(--space-12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-stay-copy {
    flex: 1 1 320px;
    min-width: 0;
}

.footer-stay-copy .eyebrow {
    color: var(--color-gold-light);
    margin-bottom: var(--space-2);
}

.footer-stay-copy p {
    max-width: 46ch;
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
}

.footer-channels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    min-width: 0;
}

.footer-channel {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-full);
    transition: background var(--transition-base), color var(--transition-base),
        border-color var(--transition-base);
}

.footer-channel:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-dark);
}

.footer-channel svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}


.footer-column h4 {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-5);
}

.footer-links {
    display: grid;
    gap: var(--space-3);
}

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

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--text-xs);
}

.footer-bottom a:hover {
    color: var(--color-accent-light);
}

/* ===== Utilities ===== */
.text-center {
    text-align: center;
}

.mt-8 {
    margin-top: var(--space-8);
}

.mt-12 {
    margin-top: var(--space-12);
}

.mb-0 {
    margin-bottom: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.empty-state {
    text-align: center;
    padding-block: var(--space-20);
}

.empty-state h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}

.empty-state p {
    color: var(--color-text-light);
    margin-bottom: var(--space-8);
}

/* ===== Reveal on scroll ===== */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ===== Responsive ===== */

/* Four nav items, the roundel and the wide PREMAM wordmark start to crowd
   below ~1400px — tighten the tracking before anything collides. */
@media (max-width: 1400px) {
    .nav-link {
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
    }

    .logo-name {
        letter-spacing: 0.18em;
        text-indent: 0.18em;
    }

    .logo-sub {
        letter-spacing: 0.3em;
        text-indent: 0.3em;
    }

    .nav-icons {
        gap: var(--space-3);
    }
}

@media (max-width: 1080px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
    }
}

@media (max-width: 900px) {
    :root {
        --container-padding: 1.25rem;
    }

    .section {
        padding-block: var(--space-16);
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 300;
        width: min(320px, 82vw);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-6);
        margin: 0;
        padding: calc(var(--space-16) + var(--space-6)) var(--space-8);
        background: var(--color-bg);
        border-left: 1px solid var(--color-border);
        box-shadow: var(--shadow-xl);
        transform: translateX(100%);
        transition: transform var(--transition-base);
    }

    .nav-menu.is-open {
        transform: none;
    }

    /* The panel is the only thing that animates. Everything inside it carries a
       transition of its own -- the flattened dropdown still has opacity,
       transform and visibility from its desktop rule, the links have colour --
       and those run on their own clocks while the panel slides, so the contents
       appear to travel at different speeds. Nothing inside needs to animate
       while the drawer is moving: there is no hover on a touch screen. */
    .nav-menu *,
    .nav-menu *::before,
    .nav-menu *::after,
    .nav-menu .nav-dropdown a {
        transition: none;
    }

    .nav-close-row {
        display: block;
        position: absolute;
        top: var(--space-5);
        right: var(--space-6);
        width: auto;
    }

    .nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        border: 0;
        color: var(--color-text);
        cursor: pointer;
    }

    .nav-close svg {
        width: 22px;
        height: 22px;
    }

    /* No blur on the header at this width, unconditionally.

       The drawer is `position: fixed` and needs the VIEWPORT as its containing
       block. `backdrop-filter` creates one (exactly as `filter` does), which
       sizes the drawer to the header's own box -- it renders as a short clipped
       strip instead of a full-height panel. The homepage escaped it only because
       .header--overlay sets backdrop-filter:none at the top of the page.

       This was first tied to `body.no-scroll`, which was wrong: closeMenu()
       drops that class synchronously, so the blur -- and the containing block --
       came back on the first frame of the 300ms slide and the panel visibly
       collapsed into a box on its way out. Keying it to a class that changes
       mid-animation cannot work; the blur simply has to be absent whenever the
       drawer exists. It costs nothing here: the bar is already 94% opaque. */
    .header,
    .header--overlay,
    .header--overlay.is-scrolled {
        backdrop-filter: none;
    }

    .nav-menu {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        font-size: var(--text-sm);
        color: var(--color-text);
    }

    .header--overlay .nav-link {
        color: var(--color-text);
    }

    .nav-caret {
        display: none;
    }

    /* the dropdown flattens into the drawer rather than floating */
    .nav-dropdown {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 0 0 var(--space-3);
        background: none;
        border: none;
        box-shadow: none;
    }

    /* ...and it must STAY flat when the item is hovered, focused or open.

       The desktop rules open the floating panel with `translate(-50%, 0)` to
       centre it under its nav item. Those selectors are (0,2,0) and out-specify
       the flattened `.nav-dropdown { transform: none }` above at (0,1,0), so
       they applied here too. A tap lands :hover and :focus-within on a touch
       screen, which yanked the whole group 50% of its own width to the left --
       127px on a 255px group. That is why the rows appeared clipped at the left
       edge, and why tapping a collection did nothing: the link's box had moved
       out from under the finger before the click resolved. */
    .nav-item:hover .nav-dropdown,
    .nav-item:focus-within .nav-dropdown,
    .nav-item.is-open .nav-dropdown {
        transform: none;
    }

    /* No indent rule and no hanging border in the drawer: the collection names
       are long and carry wide letter-spacing, and the desktop rule sets
       `white-space: nowrap`, so indented they ran past the 320px panel. Since
       `overflow-y: auto` makes overflow-x compute to `auto` as well, that turned
       into a sideways scroll -- tap a link and the row slid off to the left. They
       wrap now, and sit flush with the rest of the menu. */
    .nav-dropdown a {
        padding: var(--space-2) 0;
        border-left: 0;
        white-space: normal;
    }

    .nav-icons {
        margin-left: auto;
    }

    /* BELOW the header, not above it. `.header` is sticky with z-index 200, so it
       opens a stacking context and `.nav-menu`'s z-index 300 only counts INSIDE
       that context. As a sibling of the header at 250 the backdrop painted over
       the bar and the whole drawer, and -- pointer-events:auto while open -- ate
       every tap, which read as a dead menu. */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 150;
        background: rgba(20, 10, 14, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-base);
    }

    .nav-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .split {
        gap: var(--space-10);
    }

    .split.is-reversed .split-media {
        order: 0;
    }

    .section-header {
        margin-bottom: var(--space-12);
    }
}

@media (max-width: 640px) {
    .logo-mark {
        height: 44px;
        top: 1px;
    }

    .logo-sub {
        font-size: 0.5rem;
        letter-spacing: 0.3em;
        text-indent: 0.3em;
    }

    .logo-sub::before,
    .logo-sub::after {
        width: 12px;
    }

    .logo-tagline {
        font-size: 0.375rem;
        letter-spacing: 0.14em;
        text-indent: 0.14em;
    }

    .hero {
        min-height: 88vh;
    }

    .hero-slide img {
        object-position: 68% center;
    }

    /* the scrim goes vertical on a phone — there is no room for a side panel */
    .hero-scrim {
        background:
            linear-gradient(180deg,
                rgba(26, 17, 13, 0.72) 0%,
                rgba(26, 17, 13, 0.55) 34%,
                rgba(26, 17, 13, 0.62) 62%,
                rgba(26, 17, 13, 0.86) 100%);
    }

    .btn-hero {
        min-width: 0;
        width: 100%;
        gap: var(--space-5);
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--space-5) var(--space-4);
    }

    .product-card-body {
        padding: var(--space-4);
    }

    .product-card-title {
        font-size: var(--text-lg);
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }

    .toast-stack {
        left: var(--space-4);
        right: var(--space-4);
    }

    .toast {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}