/* ===========================================================================
   Laxmi Diyawala — storefront design system
   ---------------------------------------------------------------------------
   The brand is fixed: the four palette values and the DM Serif Display / DM Sans
   pairing are inherited from the previous site and must stay recognisable.
   Everything structural is new.

   Product imagery is square throughout — one aspect ratio and one radius for
   every frame, so rows line up whatever shape the source photograph is.

   The weight is carried instead by the maroon bands (hero, material, wholesale)
   against the cream page: fired clay against dark reads like something in a
   case rather than something on a shelf.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,400&family=DM+Serif+Display:ital@0;1&family=Mukta:wght@400;600&family=Tiro+Devanagari+Hindi&display=swap");

/* --- Tokens -------------------------------------------------------------- */

:root {
    /* Brand — inherited, unchanged */
    --red: #ba0707;
    --maroon: #3d0c11;
    --cream: #ffe4cf;
    --brown: #835c3b;

    /* Derived only from the four above: no new hues enter the brand */
    --ink: #2a080c;            /* deepest band — maroon, driven down */
    --maroon-70: #6b3a3e;
    --page: #fdf6f0;           /* cream, lightened, so full-strength cream can
                                  still register as an accent surface */
    --surface: #fffbf7;
    --line: rgba(131, 92, 59, .22);
    --line-strong: rgba(131, 92, 59, .4);
    --line-onDark: rgba(255, 228, 207, .18);
    --text: #2f1418;
    --text-soft: #6d5049;
    --text-onDark: #f6e3d5;
    --text-onDark-soft: rgba(246, 227, 213, .68);

    /* Type */
    --display: "DM Serif Display", "Tiro Devanagari Hindi", Georgia, serif;
    --sans: "DM Sans", "Mukta", system-ui, -apple-system, sans-serif;

    /* A step down the scale throughout: the old sizes read as posters —
       a 40px section title and a 72px hero — on a shop that sells diyas by
       the dozen and needs its pages to fit a laptop. */
    --fs-hero: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
    --fs-h2: clamp(1.35rem, 1.1rem + .9vw, 1.8rem);
    --fs-h3: clamp(1.05rem, .95rem + .35vw, 1.2rem);
    --fs-body: 1rem;
    --fs-sm: .875rem;
    --fs-xs: .75rem;
    --track-util: .16em;

    /* Space — 4pt scale */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

    --r-sm: 4px;
    --r-md: 8px;
    --r-pill: 999px;

    /* Product imagery is square. One shared radius keeps every frame — card,
       tile, feature, product page, cart line — identical. */
    --frame-radius: 6px;

    --shadow-sm: 0 1px 2px rgba(42, 8, 12, .06);
    --shadow-md: 0 8px 28px rgba(42, 8, 12, .10);
    --shadow-lg: 0 22px 60px rgba(42, 8, 12, .18);

    --wrap: 1280px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset --------------------------------------------------------------- */

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

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--maroon);
}

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--s5);
}

/* Utility role: the third typographic voice, without a third typeface. */
.eyebrow {
    font-family: var(--sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--track-util);
    text-transform: uppercase;
    color: var(--brown);
    margin: 0 0 var(--s3);
}

.eyebrow--onDark { color: var(--text-onDark-soft); }

.section { padding-block: var(--s8); }
.section--tight { padding-block: var(--s7); }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4);
    margin-bottom: var(--s6);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--line);
}

.section-head h2 { font-size: var(--fs-h2); }
.section-head .link {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--red);
    white-space: nowrap;
    border-bottom: 1px solid transparent;
}
.section-head .link:hover { border-bottom-color: var(--red); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), transform .18s var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: #9c0606; color: #fff; }

.btn--ghost { background: transparent; color: var(--maroon); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--cream); border-color: var(--brown); }

.btn--onDark { background: var(--cream); color: var(--maroon); }
.btn--onDark:hover { background: #fff; }

.btn--ghostDark { background: transparent; color: var(--text-onDark); border-color: var(--line-onDark); }
.btn--ghostDark:hover { background: rgba(255, 228, 207, .1); color: var(--text-onDark); }

.btn--wa { background: #1f9d54; color: #fff; }
.btn--wa:hover { background: #17803f; color: #fff; }

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

/* --- Announcement + header ------------------------------------------------ */

.announce {
    background: var(--ink);
    color: var(--text-onDark-soft);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.announce .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-height: 38px;
}

.announce a { color: var(--cream); }
.announce a:hover { text-decoration: underline; }
.announce__aside { display: flex; gap: var(--s5); }

.header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.header__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s5);
    min-height: 78px;
}

.header__logo img { height: 46px; width: auto; }

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

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--maroon);
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: background .18s var(--ease), border-color .18s var(--ease);
}

.icon-btn:hover { background: var(--cream); border-color: var(--brown); }

.burger {
    display: none;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--maroon);
    font-size: 18px;
}

/* --- Search --------------------------------------------------------------- */

.search { position: relative; }

.search__field {
    display: flex;
    align-items: center;
    background: var(--page);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding-inline: var(--s5);
    transition: border-color .18s var(--ease), background .18s var(--ease);
}

.search__field:focus-within { border-color: var(--brown); background: var(--surface); }

.search__field input {
    flex: 1;
    min-width: 0;
    padding: 13px 0;
    border: 0;
    background: transparent;
    font-size: var(--fs-sm);
    color: var(--text);
}

.search__field input::placeholder { color: var(--text-soft); }
.search__field input:focus { outline: 0; }

.search__field button {
    border: 0;
    background: transparent;
    color: var(--brown);
    padding: 0 0 0 var(--s3);
    cursor: pointer;
}

.search__field button:hover { color: var(--red); }

.suggestions {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 8px);
    z-index: 1200;
    margin: 0;
    padding: var(--s2) 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    max-height: 60vh;
    overflow-y: auto;
}

.suggestions a {
    display: flex;
    justify-content: space-between;
    gap: var(--s4);
    padding: 10px var(--s5);
    font-size: var(--fs-sm);
}

.suggestions a:hover { background: var(--cream); }
.suggestions .price { color: var(--red); font-weight: 600; white-space: nowrap; }
.suggestions .none { color: var(--text-soft); padding: 10px var(--s5); font-size: var(--fs-sm); }

/* --- Primary navigation ---------------------------------------------------- */

/*
   Positioned and stacked deliberately.

   Without position, two things broke at once: .mega's z-index had no stacking
   context to apply within, and its `top: 100%` was measured from the page
   rather than from the nav. And .hero-banner *is* positioned and comes later
   in the document, so it painted straight over the open menu.

   Sits below the sticky header (1030) and above everything in the page body.
*/
.nav {
    position: relative;
    z-index: 1020;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.nav__list {
    display: flex;
    align-items: center;
    gap: var(--s7);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__link {
    display: block;
    padding: 15px 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--maroon);
    border-bottom: 2px solid transparent;
    transition: color .18s var(--ease), border-color .18s var(--ease);
}

.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--red); border-bottom-color: var(--red); }
.nav__item { position: relative; }
.nav__item--has-mega { position: static; }
.nav__link .fa-chevron-down { font-size: 9px; margin-left: 6px; opacity: .6; }

/* Mega panel ---------------------------------------------------------------- */
/*
   "Shop all" is the only way into the catalogue now, so the panel carries real
   weight: a cream field rather than plain white, a hairline under each
   collection name, and a foot that says where the goods come from and offers
   the wholesale route. Adding a collection widens the grid instead of adding
   another item to the bar.
*/

.mega {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 1100;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 26px 50px rgba(42, 8, 12, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; }

/*
   Hover fallback, so the catalogue is reachable without JavaScript.
   The panel is opened by script (which also handles touch, keyboard and
   Escape), but "Shop all" is the only way into the shop from the top bar — one
   failed asset should not take the whole catalogue with it.

   Scoped to pointer devices: on touch there is no hover, and the script's
   click-to-open is the right interaction there.
*/
@media (hover: hover) {
    .nav__item--has-mega:hover .mega,
    .nav__item--has-mega:focus-within .mega {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

.mega__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--s6) var(--s7);
    padding-block: var(--s7) var(--s6);
}

.mega__group { display: grid; align-content: start; gap: 2px; }

.mega__group h3 {
    font-family: var(--sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--track-util);
    text-transform: uppercase;
    color: var(--maroon);
    padding-bottom: var(--s2);
    margin-bottom: var(--s3);
    border-bottom: 1px solid var(--line-strong);
}

.mega__group h3 a { color: inherit; }
.mega__group h3 a:hover { color: var(--red); }

.mega__group > a {
    display: block;
    padding: 5px 0;
    font-size: var(--fs-sm);
    color: var(--text-soft);
    transition: color .15s var(--ease), padding-left .15s var(--ease);
}

.mega__group > a:hover { color: var(--red); padding-left: 4px; }

/* Sits apart from the sub-categories: it is a different kind of destination. */
.mega__all {
    margin-top: var(--s2);
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brown) !important;
}

.mega__all:hover { color: var(--red) !important; }

.mega__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
    flex-wrap: wrap;
    padding-block: var(--s4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-xs);
    color: var(--text-soft);
}

.mega__foot a { color: var(--red); font-weight: 600; }
.mega__foot a:hover { text-decoration: underline; }

.mega__empty {
    padding-block: var(--s7);
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-soft);
}

.mega__empty a { color: var(--red); font-weight: 600; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .mega { transition: opacity .01ms, visibility .01ms; }
    .mega__group > a:hover { padding-left: 0; }
}

/* --- Hero ------------------------------------------------------------------ */
/*
   One opening, not two.
   The shop's own banner artwork carries its own lettering, so it is the hero;
   putting a second headline underneath made the page open twice and read as
   unfinished. What follows the banner is a positioning rail — one line and two
   actions, deliberately subordinate.

   With no banner uploaded the same rail becomes a full hero, so a fresh install
   never opens on a thin strip.
*/

.hero-banner {
    position: relative;
    /* Explicitly below the nav: it is positioned and later in the document, so
       without this it wins the paint order and swallows the open mega menu. */
    z-index: 0;
    width: 100%;
    background: var(--ink);
    overflow: hidden;
}

.hero-banner__track {
    position: relative;
    width: 100%;
    /* The banners' own ratio, so none of the artwork is cropped away. */
    aspect-ratio: 2560 / 1077;
}

/* The slides are stacked, and a transparent one still takes the click: the
   last in the markup sat on top, so every banner opened the last one's link.
   Hidden slides are taken out of reach (pointer and Tab alike) once their
   fade has finished; the one coming in is reachable at once. */
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s linear .9s; }
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s var(--ease), visibility 0s; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Swipes across the banner are the carousel's; vertical drags still scroll. */
.hero-banner__track { touch-action: pan-y; }

/* Previous / next, over the artwork. On a pointer that hovers they keep out of
   the way until the banner is hovered or tabbed into; on touch there is no
   hover to reveal them, so they stay, smaller, at the edges. */
.hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 228, 207, .28);
    border-radius: 50%;
    background: rgba(42, 8, 12, .42);
    color: var(--cream);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%) scale(.92);
    transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s var(--ease);
}
.hero__arrow--prev { left: clamp(10px, 2vw, 28px); }
.hero__arrow--next { right: clamp(10px, 2vw, 28px); }
.hero-banner:hover .hero__arrow,
.hero-banner:focus-within .hero__arrow { opacity: 1; transform: translateY(-50%); }
.hero__arrow:hover { background: rgba(186, 7, 7, .78); }
.hero__arrow:focus-visible { opacity: 1; outline: 2px solid var(--cream); outline-offset: 3px; }

@media (hover: none) {
    .hero__arrow { opacity: 1; transform: translateY(-50%); width: 34px; height: 34px; }
    .hero__arrow svg { width: 18px; height: 18px; }
}

/* The indicator, on a band of its own under the artwork. */
.hero-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    padding: 12px var(--s4);
    background: var(--ink);
    color: rgba(255, 228, 207, .6);
}

.hero-pager__count {
    margin: 0;
    font-family: var(--sans);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
}
.hero-pager__count #heroCount { color: var(--cream); font-weight: 600; }
.hero-pager__sep { margin: 0 6px; opacity: .5; }

.hero-pager__dots { display: flex; align-items: center; gap: 6px; }

/* Each button is a 24px target around a thin segment; the active one widens
   and fills over the slide's dwell time. */
.hero-pager__dots button {
    display: grid;
    align-items: center;
    width: 24px; height: 24px;
    padding: 0; border: 0;
    background: none;
    cursor: pointer;
    transition: width .35s var(--ease);
}
.hero-pager__dots button span {
    position: relative;
    display: block;
    height: 3px;
    border-radius: var(--r-pill);
    background: rgba(255, 228, 207, .28);
    overflow: hidden;
    transition: background .2s var(--ease);
}
.hero-pager__dots button:hover span { background: rgba(255, 228, 207, .55); }
.hero-pager__dots button span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cream);
    transform: scaleX(0);
    transform-origin: left;
}
.hero-pager__dots button.is-active { width: 48px; }
.hero-pager__dots button.is-active span::after { transform: scaleX(1); }
.hero-banner.is-playing .hero-pager__dots button.is-active span::after {
    animation: hero-fill var(--hero-dwell, 6s) linear both;
}
.hero-banner.is-paused .hero-pager__dots button.is-active span::after { animation-play-state: paused; }
.hero-pager__dots button:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; border-radius: 2px; }

@keyframes hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    .hero__arrow, .hero-pager__dots button { transition: none; }
}

/* --- The rail beneath the banner ------------------------------------------- */

.hero {
    background: var(--maroon);
    color: var(--text-onDark);
    border-bottom: 1px solid var(--ink);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s7);
    padding-block: var(--s6);
}

.hero h1 {
    /* Subordinate to the banner: present for structure and search, sized so it
       reads as a statement of what the shop is, not a second hero. */
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.65rem);
    line-height: 1.15;
    color: var(--cream);
    margin: 0;
    max-width: 30ch;
}

.hero h1 em { font-style: italic; color: #fff; }

.hero__lead {
    color: var(--text-onDark-soft);
    font-size: var(--fs-sm);
    margin: var(--s2) 0 0;
    max-width: 60ch;
}

.hero__cta { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* No banner: the rail becomes the opening, and earns the room. */
.hero--solo { border-bottom: 0; }
.hero--solo .hero__grid { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s9); }
.hero--solo h1 { font-size: var(--fs-hero); max-width: 16ch; margin-bottom: var(--s4); }
.hero--solo .hero__lead { font-size: 1.05rem; max-width: 48ch; margin-bottom: var(--s6); }

/* --- Section heads: the measured rule --------------------------------------- */
/*
   A hairline carrying the section name and a real count — how a kiln log or a
   spec sheet is annotated. The count is information, not ornament: it tells you
   how much is in the collection before you scroll it.
*/

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s5);
    flex-wrap: wrap;
    margin-bottom: var(--s6);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--line-strong);
}

.section-head h2 {
    font-size: var(--fs-h2);
    line-height: .98;
    letter-spacing: -.02em;
}

.section-head h2 em { font-style: italic; }

.section-head__meta {
    display: flex;
    align-items: baseline;
    gap: var(--s5);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-util);
    text-transform: uppercase;
    color: var(--brown);
}

.section-head .link {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--track-util);
    text-transform: uppercase;
    color: var(--red);
    white-space: nowrap;
    border-bottom: 1px solid transparent;
}

.section-head .link:hover { border-bottom-color: var(--red); }

/* --- Category rail ---------------------------------------------------------- */

/* auto-fit with a capped track: two tiles and ten tiles both look deliberate,
   instead of two stretching across six columns of empty space. */
.rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
    justify-content: center;
    gap: var(--s5);
}

.tile { display: block; text-align: center; }

.tile__frame {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--frame-radius);
    overflow: hidden;
    background: var(--cream);
    border: 1px solid var(--line);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.tile:hover .tile__frame { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tile__frame img { width: 100%; height: 100%; object-fit: cover; }

.tile__initial {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: 2.4rem;
    color: var(--brown);
    opacity: .5;
}

.tile__name {
    margin: var(--s3) 0 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--maroon);
}

.tile__count {
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* --- Product card ------------------------------------------------------------ */
/*
   The grid has to stay calm. A red "Add to cart" repeated across twenty tiles
   turns the page into a wall of buttons and makes the products compete with
   their own controls, so the action is revealed on the image on hover and the
   resting state is just photograph, name and price.

   Where there is no hover — every phone — the button is simply always there.
   Nothing is hidden behind an interaction the device cannot perform.
*/

.grid-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s7) var(--s5);
}

.grid-products--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* The product card.
   A single soft tile: the photograph fills its top edge to edge, the words
   sit below it against the surface, and the whole tile lifts on hover. The
   photographs this shop uses are busy — printed with badges and text — so the
   card around them keeps to two colours and one weight, and lets them be the
   loud thing. Text is set left so it reads as a listing, not a poster. */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}

.card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: 0 16px 36px rgba(42, 8, 12, .12);
}

.card__media { position: relative; background: var(--cream); }

.card__frame { display: block; position: relative; aspect-ratio: 1 / 1; }

.card__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

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

/* The product's video, shown in the frame while its tile is hovered. */
.card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.card__video[hidden] { display: none; }

/* A hairline under the photograph, so a light picture does not melt into the body. */
.card__media::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(131, 92, 59, .14);
    z-index: 2;
}

.card__flag {
    position: absolute;
    top: var(--s3);
    left: var(--s3);
    z-index: 3;
    padding: 4px 9px;
    border-radius: var(--r-pill);
    background: rgba(61, 12, 17, .9);
    color: var(--cream);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
}

.card__flag--save { background: var(--red); color: #fff; }

.card__wish {
    position: absolute;
    top: var(--s3);
    right: var(--s3);
    z-index: 3;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 251, 247, .92);
    color: var(--brown);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(42, 8, 12, .12);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s var(--ease), transform .25s var(--ease),
                color .18s var(--ease), background .18s var(--ease);
}

.card:hover .card__wish, .card__wish:focus-visible { opacity: 1; transform: none; }
.card__wish:hover { color: var(--red); background: #fff; }
.card__wish.is-saved { opacity: 1; transform: none; color: var(--red); }

.card__oos {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    background: rgba(253, 246, 240, .84);
    color: var(--maroon);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--track-util);
    text-transform: uppercase;
}

.card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--s3) var(--s4) var(--s4);
    text-align: left;
}

.card__cat {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-soft);
    /* One line, however long the category's name: a second line would push
       everything under it out of step with the card beside it. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card__name {
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--maroon);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    transition: color .18s var(--ease);
}

.card:hover .card__name { color: var(--red); }

/* What the shopper needs before the click: how many ways it comes, and the
   least it is sold in. Both are things the cart would otherwise say later. */
.card__meta { margin: 0; font-size: var(--fs-xs); color: var(--text-soft); min-height: 1.3em; }

.card__foot {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding-top: var(--s2);
}

.card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); min-width: 0; margin-right: auto; }

/* The basket. One round button at the foot's right, where a thumb lands
   and the eye expects it; maroon at rest, red in hand. */
.card__buy { display: contents; }
.card__add {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--maroon);
    color: var(--cream);
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(42, 8, 12, .18);
    transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card__add:hover, .card__add:focus-visible { background: var(--red); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(186, 7, 7, .28); }
.card__add:active { transform: none; }
.card__add i { padding-left: 1px; }

.card__from { font-size: var(--fs-xs); color: var(--text-soft); }
.card__now { font-family: var(--display); font-size: 1.15rem; color: var(--maroon); line-height: 1; }
.card__was { font-size: var(--fs-xs); color: var(--text-soft); text-decoration: line-through; }

/* Touch devices get no hover, so nothing may depend on it. */
@media (hover: none) {
    .card__wish { opacity: 1; transform: none; }
}

/* --- Editorial feature ------------------------------------------------------- */
/* One product given room, rather than another identical row. */

.feature {
    display: grid;
    grid-template-columns: .9fr 1fr;
    align-items: center;
    gap: var(--s8);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--s8);
}

.feature__frame {
    aspect-ratio: 1 / 1;
    border-radius: var(--frame-radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.feature__frame img { width: 100%; height: 100%; object-fit: cover; }
.feature h2 { font-size: var(--fs-h2); margin-bottom: var(--s3); }
.feature__lead { color: var(--text-soft); max-width: 44ch; margin: 0 0 var(--s5); }

.feature__price {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    margin-bottom: var(--s6);
}

.feature__now { font-family: var(--display); font-size: 1.6rem; color: var(--red); }
.feature__was { color: var(--text-soft); text-decoration: line-through; }

/* --- Material band ------------------------------------------------------------ */
/* Why unglazed clay, in physical terms. No health claims. */

.material { background: var(--ink); color: var(--text-onDark); }

.material__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s7);
    padding-block: var(--s8);
}

.material__item { border-top: 1px solid var(--line-onDark); padding-top: var(--s4); }

.material__item h3 {
    font-size: var(--fs-h3);
    color: var(--cream);
    margin-bottom: var(--s2);
}

.material__item p { margin: 0; color: var(--text-onDark-soft); font-size: var(--fs-sm); }

/* --- The Season's Collection ----------------------------------------------- */
/* The festive band: deep maroon with a faint diya-dot pattern, cream type, and
   tall photo tiles that are links end to end. The Hindi lines fall through to
   the Devanagari faces in --display / --sans. */

.season {
    position: relative;
    overflow: hidden;
    margin-top: var(--s7);
    padding-block: var(--s8);
    color: var(--text-onDark);
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 228, 207, .09) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
        radial-gradient(120% 80% at 50% 0%, #5a1219 0%, var(--maroon) 55%, var(--ink) 100%);
}

/* A warm glow behind the heading, like a lamp lit in the middle of the room. */
.season::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -180px;
    width: 640px;
    height: 360px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(255, 170, 80, .22), transparent);
    pointer-events: none;
}

.season .wrap { position: relative; }

.season__head { text-align: center; max-width: 720px; margin: 0 auto var(--s7); }

.season__title {
    font-size: var(--fs-hero);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--cream);
}

.season__title em { font-style: italic; color: #ffb878; }

.season__lede {
    margin: var(--s3) 0 0;
    font-family: var(--display);
    font-size: var(--fs-h3);
    color: var(--text-onDark-soft);
}

.season__now {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s2) var(--s3);
    margin: var(--s5) 0 0;
    padding: var(--s2) var(--s5);
    border: 1px solid rgba(255, 184, 120, .45);
    border-radius: var(--r-pill);
    background: rgba(255, 228, 207, .07);
    box-shadow: 0 0 0 4px rgba(255, 184, 120, .06), 0 10px 30px rgba(0, 0, 0, .25);
}

.season__emoji { font-size: 1.35em; line-height: 1; }

.season__now strong {
    font-family: var(--display);
    font-size: var(--fs-h3);
    font-weight: 400;
    color: var(--cream);
}

.season__tagline { color: var(--text-onDark); font-size: var(--fs-sm); }

.season__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(240px, 22vw, 320px);
    gap: var(--s4);
}

.season-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--frame-radius);
    background: var(--ink);
    color: var(--cream);
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(255, 228, 207, .12), 0 12px 30px rgba(0, 0, 0, .3);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.season-tile--hero { grid-column: span 2; grid-row: span 2; }
.season-tile--span-2 { grid-column: span 2; }
.season-tile--span-4 { grid-column: span 4; }

.season-tile__media {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.season-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.season-tile__flag {
    position: absolute;
    top: var(--s3);
    left: var(--s3);
    z-index: 2;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--cream);
    color: var(--maroon);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
}

.season-tile__flag--save { background: var(--red); color: #fff; }

.season-tile__body {
    position: relative;
    display: grid;
    gap: 2px;
    padding: var(--s3) var(--s4) var(--s4);
    border-top: 1px solid rgba(255, 184, 120, .25);
    background: linear-gradient(180deg, #4a1016, var(--ink));
}

.season-tile__cat {
    font-size: var(--fs-xs);
    letter-spacing: var(--track-util);
    text-transform: uppercase;
    color: #ffb878;
}

.season-tile__name {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.season-tile--hero .season-tile__name { font-size: var(--fs-h2); }
.season-tile--hero .season-tile__body { padding: var(--s4) var(--s5) var(--s5); }

.season-tile__price { font-weight: 600; font-size: var(--fs-sm); }
.season-tile__price s { margin-left: 6px; font-weight: 400; opacity: .65; }

/* "Shop now" rises in on hover; touch screens, which never hover, always
   show it (see the hover: none block below). */
.season-tile__cta {
    position: absolute;
    right: var(--s3);
    bottom: var(--s3);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: var(--cream);
    color: var(--maroon);
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s;
}

.season-tile:hover,
.season-tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(255, 184, 120, .6), 0 20px 44px rgba(0, 0, 0, .4);
}

.season-tile:hover .season-tile__img,
.season-tile:focus-visible .season-tile__img { transform: scale(1.06); }

.season-tile:hover .season-tile__cta,
.season-tile:focus-visible .season-tile__cta { opacity: 1; transform: none; }

.season-tile:focus-visible { outline: 2px solid #ffb878; outline-offset: 3px; }

@media (hover: none) {
    .season-tile__cta { opacity: 1; transform: none; }
}

.season__more { margin: var(--s6) 0 0; text-align: center; }

.season__more-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 228, 207, .5);
    border-radius: var(--r-pill);
    color: var(--cream);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.season__more-link:hover { background: var(--cream); color: var(--maroon); }

/* Tablet and phone: one swipeable row, the next tile peeking in at the edge
   so it reads as "there is more this way". */
@media (max-width: 900px) {
    .season { padding-block: var(--s7); }
    .season__head { margin-bottom: var(--s6); }

    .season__grid {
        display: flex;
        gap: var(--s3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(var(--s4) * -1);
        padding: var(--s2) var(--s4) var(--s4);
        scroll-padding-inline: var(--s4);
    }

    .season__grid::-webkit-scrollbar { display: none; }

    /* The photographs are square, so a square frame shows them whole. */
    .season-tile {
        flex: 0 0 clamp(220px, 42vw, 300px);
        scroll-snap-align: start;
    }

    .season-tile__media { flex: none; aspect-ratio: 1; }

    .season-tile--hero { flex-basis: clamp(260px, 62vw, 380px); }
}

@media (max-width: 640px) {
    .season-tile { flex-basis: 72vw; }
    .season-tile--hero { flex-basis: 78vw; }
    .season__now { border-radius: var(--r-md); }
}

@media (prefers-reduced-motion: reduce) {
    .season-tile,
    .season-tile__img,
    .season-tile__cta { transition: none; }
    .season-tile:hover,
    .season-tile:focus-visible { transform: none; }
    .season-tile:hover .season-tile__img,
    .season-tile:focus-visible .season-tile__img { transform: none; }
}

/* --- Bulk CTA -------------------------------------------------------------------- */

.bulk {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: var(--s8);
    background: var(--maroon);
    color: var(--text-onDark);
    border-radius: var(--r-md);
    padding: var(--s8);
}

.bulk h2 { color: var(--cream); font-size: var(--fs-h2); margin-bottom: var(--s3); }
.bulk p { color: var(--text-onDark-soft); margin: 0 0 var(--s5); max-width: 48ch; }
.bulk__cta { display: flex; flex-wrap: wrap; gap: var(--s3); }

.bulk__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }

.bulk__list li {
    display: flex;
    gap: var(--s3);
    align-items: baseline;
    font-size: var(--fs-sm);
    color: var(--text-onDark-soft);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--line-onDark);
}

.bulk__list b { color: var(--cream); font-weight: 600; }

/* --- Trust strip ------------------------------------------------------------------ */

.trust { background: var(--cream); border-block: 1px solid var(--line); }

.trust__grid {
    display: grid;
    /* One row, whatever the homepage section holds. Three fixed columns put a
       fourth badge on a line of its own, and the count is editable in the
       admin, so the track count follows the content rather than a guess. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--s5);
    padding-block: var(--s7);
}

/* Top-aligned: once a line of text wraps at a middling width, centring each
   badge in the row leaves the headings at four different heights. */
.trust__item { display: flex; align-items: start; gap: var(--s4); justify-content: center; }
.trust__item img { width: 42px; height: 42px; object-fit: contain; }
.trust__item strong { display: block; color: var(--maroon); font-size: var(--fs-sm); }
.trust__item span { font-size: var(--fs-xs); color: var(--text-soft); }

/* --- Footer -------------------------------------------------------------------------- */

.footer { background: var(--ink); color: var(--text-onDark-soft); }

.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: var(--s7);
    padding-block: var(--s8);
}

.footer h4 {
    font-family: var(--sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--track-util);
    text-transform: uppercase;
    color: var(--cream);
    margin-bottom: var(--s4);
}

.footer__logo img { height: 54px; width: auto; margin-bottom: var(--s4); }
.footer p { margin: 0 0 var(--s2); font-size: var(--fs-sm); }
.footer a:hover { color: var(--cream); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-sm); }

/* A button, because it opens something rather than going somewhere — dressed as the links beside it. */
.footer__linkbtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.footer__linkbtn:hover { color: var(--cream); }

.newsletter { display: flex; gap: var(--s2); margin-top: var(--s3); }

.newsletter input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 11px var(--s4);
    background: rgba(255, 228, 207, .07);
    border: 1px solid var(--line-onDark);
    border-radius: var(--r-sm);
    color: var(--text-onDark);
    font-size: var(--fs-sm);
}

.newsletter input::placeholder { color: rgba(246, 227, 213, .45); }
.newsletter input:focus { outline: 0; border-color: var(--cream); }

.footer__bottom {
    border-top: 1px solid var(--line-onDark);
    padding-block: var(--s5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    font-size: var(--fs-xs);
}

.footer__pay { display: flex; gap: var(--s3); align-items: center; }
.footer__pay img { height: 20px; width: auto; opacity: .75; }

/* --- Breadcrumb, chips, sort ------------------------------------------------------------ */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    padding-block: var(--s5);
    font-size: var(--fs-xs);
    color: var(--text-soft);
}

.crumbs a { color: var(--brown); }
.crumbs a:hover { color: var(--red); }
.crumbs span[aria-current] { color: var(--maroon); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }

.chip {
    padding: 7px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    color: var(--maroon);
    background: transparent;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}

.chip:hover, .chip.is-active { background: var(--maroon); color: var(--cream); border-color: var(--maroon); }

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
    padding-bottom: var(--s5);
    margin-bottom: var(--s6);
    border-bottom: 1px solid var(--line);
}

.toolbar__count { font-size: var(--fs-sm); color: var(--text-soft); }

.select {
    padding: 10px var(--s4);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--fs-sm);
    color: var(--maroon);
}

/* --- Product detail ------------------------------------------------------------------------ */

/* The product page.
   The photograph is the loud thing, and it stays in view while the column
   beside it scrolls. The column is quiet and reads in the order a shopper
   decides: what it is, what it costs, whether it is here, which one, how
   many, buy. Copy, assurances and specifications come after the button. */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: start; padding-bottom: var(--s6); }
.pdp > div:first-child { position: sticky; top: 108px; }
.pdp__buy { min-width: 0; }

/* The description, one clear gap under the buy column — not the grid's
   padding, then a section's, then the heading's own margin, stacked. */
.pdp__about { padding-block: var(--s5) var(--s7); }
.pdp__about .prose h2:first-child { margin-top: 0; }
.category-about { border-top: 1px solid var(--line); padding-block: var(--s6) var(--s7); }
.category-about .prose h2:first-child { margin-top: 0; }

.pdp__frame {
    aspect-ratio: 1 / 1;
    border-radius: var(--frame-radius);
    overflow: hidden;
    background: var(--cream);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}

.pdp__frame img { width: 100%; height: 100%; object-fit: cover; }
/* Sideways swipes on the photo step through the rows; vertical ones scroll. */
.pdp__frame img { touch-action: pan-y; -webkit-user-drag: none; user-select: none; }
.pdp__frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pdp__frame video[hidden] { display: none; }
.pdp__frame img[hidden] { display: none; }

/* The video's tile in the strip: the product's photograph with a play mark
   and the length, so it reads as a clip and not as a ninth photograph. */
.pdp__thumb--video { position: relative; }
.pdp__thumb--video img { opacity: .8; }
.pdp__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-size: 14px; text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.pdp__play i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(61, 12, 17, .82); padding-left: 2px; }
.pdp__length {
    position: absolute; right: 3px; bottom: 3px; padding: 1px 4px; border-radius: 3px;
    background: rgba(0, 0, 0, .65); color: #fff; font-size: .625rem; font-weight: 600; letter-spacing: .02em;
}

.pdp__thumbs { display: flex; gap: var(--s3); margin-top: var(--s4); flex-wrap: wrap; }

.pdp__thumb {
    width: 62px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--frame-radius);
    overflow: hidden;
    background: var(--cream);
    cursor: pointer;
    transition: border-color .18s var(--ease);
}

.pdp__thumb.is-active { border-color: var(--red); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pdp .eyebrow { margin-bottom: var(--s1); }
.pdp h1 { font-size: var(--fs-h2); line-height: 1.1; margin-bottom: var(--s2); }

.pdp__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    margin: 0 0 var(--s4);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.pdp__price { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.pdp__now { font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--red); }
.pdp__was { font-size: 1rem; color: var(--text-soft); text-decoration: line-through; }

.pdp__save {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--maroon);
    color: var(--cream);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.pdp__for { font-size: var(--fs-sm); color: var(--text); margin: var(--s1) 0 0; }
.pdp__tax { font-size: var(--fs-xs); color: var(--text-soft); }

.pdp__stock { font-size: var(--fs-sm); font-weight: 600; margin: var(--s3) 0 var(--s4); }
.pdp__stock--in { color: #1f7a3d; }
.pdp__stock--out { color: var(--red); }

.pdp__actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin: 0; }
.pdp__row { display: flex; gap: var(--s3); width: 100%; }
.pdp__row .qty { flex: none; }
.pdp__row .qty button, .pdp__row .qty input { height: 44px; }
.pdp__add { flex: 1 1 auto; }
.pdp__least { width: 100%; margin: 0; font-size: var(--fs-xs); color: var(--text-soft); }
.pdp__least b { color: var(--text); }

.pdp__lead { margin: var(--s5) 0 0; padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--text-soft); font-size: var(--fs-sm); }

.spec { width: 100%; margin-top: var(--s5); border-collapse: collapse; font-size: var(--fs-sm); }
.spec th, .spec td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; }

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

.spec th {
    width: 38%;
    font-weight: 500;
    color: var(--brown);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.assurances { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.assurances div { display: flex; gap: var(--s2); align-items: baseline; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-soft); min-width: 0; overflow-wrap: anywhere; }
/* One per line where the column is narrow — a sidebar holding an email address. */
.assurances--stack { grid-template-columns: 1fr; }
.assurances i { flex: none; color: var(--red); width: 14px; font-size: 12px; }

.prose { max-width: 68ch; color: var(--text-soft); }
.prose h2, .prose h3 { color: var(--maroon); margin: var(--s6) 0 var(--s3); }
.prose h2 { font-size: var(--fs-h2); }
.prose p { margin: 0 0 var(--s4); }
/* The global reset strips link styling; in running text a link must still look like one. */
.prose a { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--maroon); }
.prose li + li { margin-top: var(--s1); }

/* --- Empty state / notices --------------------------------------------------------------------- */

.empty { text-align: center; padding: var(--s9) var(--s5); }
.empty i { font-size: 34px; color: var(--brown); opacity: .45; margin-bottom: var(--s4); display: block; }
.empty h2 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
.empty p { color: var(--text-soft); margin: 0 0 var(--s5); }

.notice {
    background: var(--cream);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--red);
    border-radius: var(--r-sm);
    padding: var(--s4) var(--s5);
    font-size: var(--fs-sm);
    color: var(--text);
    margin-bottom: var(--s5);
}

/* --- Pagination ------------------------------------------------------------------------------------ */

.pager { display: flex; justify-content: center; padding-block: var(--s8) var(--s5); }
.pager .pagination { display: flex; gap: var(--s2); list-style: none; margin: 0; padding: 0; }

.pager .page-link {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding-inline: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--maroon);
    font-size: var(--fs-sm);
}

.pager .page-link:hover { border-color: var(--brown); background: var(--cream); }
.pager .active .page-link { background: var(--maroon); border-color: var(--maroon); color: var(--cream); }
.pager .disabled .page-link { opacity: .4; }

/* --- Off-canvas (mobile) ------------------------------------------------------------------------------ */

.drawer {
    position: fixed;
    inset-block: 0;
    left: 0;
    width: min(88vw, 360px);
    z-index: 1400;
    background: var(--surface);
    transform: translateX(-100%);
    transition: transform .3s var(--ease);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.drawer.is-open { transform: none; }

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s5);
    border-bottom: 1px solid var(--line);
    background: var(--maroon);
    color: var(--cream);
}

.drawer__head img { height: 34px; }
.drawer__close { background: transparent; border: 0; color: var(--cream); font-size: 20px; cursor: pointer; }
.drawer__body { padding: var(--s4) var(--s5) var(--s8); }

.drawer__group + .drawer__group { border-top: 1px solid var(--line); }

.drawer__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    background: transparent;
    border: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--maroon);
    text-align: left;
    cursor: pointer;
}

.drawer__toggle i { font-size: 11px; transition: transform .2s var(--ease); }
.drawer__toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.drawer__sub { display: none; padding: 0 0 var(--s4) var(--s4); }
.drawer__sub.is-open { display: grid; gap: var(--s2); }
.drawer__sub a { font-size: var(--fs-sm); color: var(--text-soft); }
.drawer__sub a:hover { color: var(--red); }

.drawer__link { display: block; padding: 14px 0; font-size: var(--fs-sm); font-weight: 600; color: var(--maroon); }

.scrim {
    position: fixed;
    inset: 0;
    z-index: 1350;
    background: rgba(42, 8, 12, .55);
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.scrim.is-open { opacity: 1; }

/* --- WhatsApp ------------------------------------------------------------------------------------------- */

.wa-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #1f9d54;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-md);
    transition: transform .2s var(--ease);
}

.wa-fab:hover { transform: scale(1.07); color: #fff; }

/* --- Ad consent --------------------------------------------------------------------------------------------
   A card in the corner rather than a wall across the page: the shop stays
   usable while the question waits. Above the WhatsApp button, which it
   would otherwise sit under on a phone. */

.consent {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1300;
    width: min(420px, calc(100vw - 32px));
    padding: var(--s5);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    animation: consent-in .3s var(--ease);
}

.consent[hidden] { display: none; }

.consent__title {
    margin: 0 0 var(--s2);
    font-family: var(--display);
    font-size: var(--fs-h3);
    color: var(--maroon);
}

.consent__text { margin: 0 0 var(--s4); font-size: var(--fs-sm); color: var(--text-soft); }
.consent__text a { color: var(--maroon); text-decoration: underline; text-underline-offset: 2px; }

.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 640px) {
    .consent { left: 16px; right: 16px; bottom: 16px; width: auto; padding: var(--s4); }
}

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

/* --- Social icons (footer) ---------------------------------------------------------------------------------
   Each in its platform's own colour, so they are known at a glance. */

.footer .social, .social { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s4) 0 var(--s2); padding: 0; list-style: none; }

.social__link {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 228, 207, .12);
    color: #fff;
    font-size: 18px;
    transition: transform .2s var(--ease), filter .2s var(--ease);
}
.footer a.social__link:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.1); }
.social__link:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

.social__link--facebook { background: #1877f2; }
.social__link--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social__link--youtube { background: #ff0000; }
.social__link--whatsapp { background: #25d366; }
.social__link--x, .social__link--threads { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 228, 207, .3); }
.social__link--pinterest { background: #e60023; }
.social__link--linkedin { background: #0a66c2; }
.social__link--telegram { background: #26a5e4; }

/* The left-edge rail: square to the edge, rounded on the open side, and each
   icon slides out a little under the pointer. Below the header (so an open
   mega menu covers it), the drawer and modals; above the page. */
.social-rail {
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 1020;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform: translateY(-50%);
}
.social-rail .social__link {
    width: 44px; height: 44px;
    border-radius: 0 10px 10px 0;
    font-size: 19px;
    box-shadow: var(--shadow-md);
    transition: width .2s var(--ease), filter .2s var(--ease);
}
.social-rail .social__link:hover, .social-rail .social__link:focus-visible { width: 52px; color: #fff; filter: brightness(1.1); }
.social-rail .social__link:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

@media (max-width: 640px) {
    .social-rail .social__link { width: 34px; height: 34px; font-size: 15px; border-radius: 0 8px 8px 0; }
    .social-rail .social__link:hover { width: 34px; }
}

@media print { .social-rail { display: none; } }

/* --- Follow on Facebook ----------------------------------------------------------------------------------
   Facebook's own blue, so it is recognised before it is read. */

.fb-follow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--s2);
    padding: 10px 18px 10px 14px;
    border-radius: var(--r-pill);
    background: #1877f2;
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.fb-follow i {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    color: #1877f2;
    font-size: 13px;
}
.footer a.fb-follow:hover, .fb-follow:hover { background: #0f63d6; color: #fff; transform: translateY(-1px); }
.fb-follow:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.fb-follow--drawer { display: flex; justify-content: center; margin: var(--s4) 0 0; padding-block: 12px; }
.fb-follow--drawer:focus-visible { outline-color: var(--maroon); }

/* --- Install bar -------------------------------------------------------------------------------------------
   Pinned to the foot of the screen on phones, clear of the home indicator.
   While it shows, the WhatsApp button rides above it rather than under it. */

.install-bar {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1250;
    display: flex;
    align-items: center;
    gap: var(--s3);
    max-width: 520px;
    margin-inline: auto;
    padding: var(--s3) 40px var(--s3) var(--s3);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    animation: install-in .35s var(--ease);
}
.install-bar[hidden] { display: none; }

.install-bar__icon { flex: none; width: 48px; height: 48px; border-radius: 11px; box-shadow: var(--shadow-sm); }
.install-bar__text { flex: 1; min-width: 0; }
.install-bar__title { margin: 0; font-weight: 700; font-size: var(--fs-sm); color: var(--maroon); line-height: 1.3; }
.install-bar__sub { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.35; }
.install-bar__sub[hidden] { display: none; }
.install-bar__go { flex: none; padding: 10px 18px; font-size: var(--fs-sm); }
.install-bar__go[hidden] { display: none; }

.install-bar__close {
    position: absolute;
    top: 4px; right: 4px;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    padding: 0; border: 0; border-radius: 50%;
    background: none;
    color: var(--text-soft);
    font-size: 15px;
    cursor: pointer;
}
.install-bar__close:hover { background: var(--page); color: var(--maroon); }
.install-bar__close:focus-visible { outline: 2px solid var(--brown); outline-offset: 1px; }

body.has-install-bar .wa-fab { bottom: calc(var(--install-bar-h, 80px) + 24px + env(safe-area-inset-bottom)); transition: bottom .3s var(--ease), transform .2s var(--ease); }

@keyframes install-in { from { opacity: 0; transform: translateY(24px); } }

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

/* --- Modal ------------------------------------------------------------------------------------------------ */

.modal-content {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-family: var(--display); font-size: 1.25rem; color: var(--maroon); }

.field { margin-bottom: var(--s4); }

.field label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: var(--s2);
}

.field input {
    width: 100%;
    padding: 12px var(--s4);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--page);
    font-size: var(--fs-sm);
    color: var(--text);
}

.field input:focus { outline: 0; border-color: var(--brown); background: var(--surface); }

.form-msg { font-size: var(--fs-sm); font-weight: 600; margin: var(--s3) 0 0; }
.form-msg.is-ok { color: #1f7a3d; }
.form-msg.is-err { color: var(--red); }

/* --- Motion --------------------------------------------------------------------------------------------------- */

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* One orchestrated entrance on the hero, nothing scattered elsewhere. */
.hero__copy > * { animation: rise .7s var(--ease) both; }
.hero__copy > *:nth-child(2) { animation-delay: .07s; }
.hero__copy > *:nth-child(3) { animation-delay: .14s; }
.hero__copy > *:nth-child(4) { animation-delay: .21s; }
.hero__copy > *:nth-child(5) { animation-delay: .28s; }


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* --- Responsive ------------------------------------------------------------------------------------------------- */

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

    .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .nav { display: none; }
    .burger { display: inline-flex; }
    .header__bar { grid-template-columns: auto 1fr auto; gap: var(--s3); min-height: 66px; }
    .header__search { display: none; }
    .header__actions .icon-btn span:not(.cart-count) { display: none; }

    .hero__grid { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s7); }
    .hero__facts { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-onDark); padding-top: var(--s5); grid-template-columns: repeat(3, 1fr); }

    .feature, .bulk, .pdp { grid-template-columns: 1fr; gap: var(--s6); padding: var(--s6); }
    .pdp { padding: 0 0 var(--s5); gap: var(--s5); }
    .pdp > div:first-child { position: static; }
    .feature__frame { max-width: 340px; margin-inline: auto; }

    .material__grid { grid-template-columns: 1fr; gap: var(--s5); padding-block: var(--s7); }
    /* Below this the badges stack, so the row has to be released explicitly. */
    .trust__grid { grid-auto-flow: row; grid-template-columns: 1fr; gap: var(--s4); padding-block: var(--s6); }
    .trust__item { justify-content: flex-start; }
    .announce__aside { display: none; }
}

@media (max-width: 640px) {
    .wrap { padding-inline: var(--s4); }
    .grid-products, .grid-products--five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s3); }
    .rail { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s3); }
    .section { padding-block: var(--s7); }
    .footer__grid { grid-template-columns: 1fr; gap: var(--s6); }
    .footer__bottom { flex-direction: column; text-align: center; }
    .card__name { font-size: .875rem; }
    .card__body { padding: var(--s3); }
    .pdp__row { flex-wrap: wrap; }
    .pdp__row .qty { flex: none; }
    .pdp__add { flex: 1 1 auto; }
    .pdp__row .btn--wa { width: 100%; }
    .assurances { grid-template-columns: 1fr; }
    .hero__facts { grid-template-columns: 1fr; gap: var(--s3); }
}

/* Mobile search lives under the header instead of inside it. */
.search-mobile { display: none; padding-block: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface); }

@media (max-width: 900px) {
    .search-mobile { display: block; }
}

/* --- Commerce ---------------------------------------------------------------- */

/* Breathing room before whatever follows: the cart's last line, the
   checkout's summary, sat flush against the trust band beneath them. */
.layout-split { display: grid; grid-template-columns: 1fr 380px; gap: var(--s7); align-items: start; margin-bottom: var(--s8); }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--s6);
}

.panel + .panel { margin-top: var(--s5); }
.panel h2, .panel h3 { font-size: var(--fs-h3); margin-bottom: var(--s4); }

.summary { position: sticky; top: 110px; }

.summary__row {
    display: flex;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) 0;
    font-size: var(--fs-sm);
    color: var(--text-soft);
}

.summary__row--total {
    border-top: 1px solid var(--line);
    margin-top: var(--s2);
    padding-top: var(--s4);
    font-size: 1.05rem;
    color: var(--maroon);
    font-weight: 600;
}

.summary__row--total b { font-family: var(--display); font-size: 1.3rem; font-weight: 400; }
.summary__row--save { color: #1f7a3d; }

.line {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: var(--s4);
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--line);
}

.line:last-child { border-bottom: 0; }

.line__img {
    aspect-ratio: 1 / 1;
    border-radius: var(--frame-radius);
    overflow: hidden;
    background: var(--cream);
    border: 1px solid var(--line);
}

.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__name { font-weight: 600; color: var(--maroon); margin: 0 0 2px; font-size: .95rem; }
.line__meta { font-size: var(--fs-xs); color: var(--text-soft); margin: 0; }
.line__price { text-align: right; font-family: var(--display); font-size: 1.15rem; color: var(--maroon); white-space: nowrap; }
.line__warn { color: var(--red); font-size: var(--fs-xs); font-weight: 600; margin-top: var(--s2); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; margin-top: var(--s3); }
.qty button { width: 32px; height: 32px; border: 0; background: transparent; color: var(--maroon); cursor: pointer; }
.qty button:hover { background: var(--cream); }
.qty input { width: 42px; height: 32px; border: 0; text-align: center; font-size: var(--fs-sm); background: transparent; color: var(--text); }
.qty input:focus { outline: 0; }

.link-danger { background: none; border: 0; padding: 0; color: var(--text-soft); font-size: var(--fs-xs); cursor: pointer; text-decoration: underline; }
.link-danger:hover { color: var(--red); }

.coupon-row { display: flex; gap: var(--s2); margin-top: var(--s4); }
.coupon-row input { flex: 1; min-width: 0; padding: 11px var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--page); font-size: var(--fs-sm); }
.coupon-applied { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); background: var(--cream); border-radius: var(--r-sm); padding: var(--s3) var(--s4); margin-top: var(--s4); font-size: var(--fs-sm); }


.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.field textarea { width: 100%; padding: 12px var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--page); font-family: var(--sans); font-size: var(--fs-sm); }
.field .hint { font-size: var(--fs-xs); color: var(--text-soft); text-transform: none; letter-spacing: 0; font-weight: 400; margin-top: var(--s1); }
.field .error { color: var(--red); font-size: var(--fs-xs); margin-top: var(--s1); font-weight: 600; }

.choice { display: flex; gap: var(--s3); align-items: flex-start; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--s4); cursor: pointer; margin-bottom: var(--s3); }
.choice:has(input:checked) { border-color: var(--red); background: var(--cream); }
.choice input { margin-top: 3px; }
.choice strong { display: block; color: var(--maroon); font-size: var(--fs-sm); }
.choice span { font-size: var(--fs-xs); color: var(--text-soft); }

.alert { border-radius: var(--r-sm); padding: var(--s4) var(--s5); font-size: var(--fs-sm); margin-bottom: var(--s5); }
.alert--ok { background: #e8f5ec; color: #14532d; border: 1px solid #b7e0c4; }
.alert--err { background: #fdecec; color: #7f1d1d; border: 1px solid #f2c2c2; }

.status-badge { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.status-badge--new, .status-badge--confirmed { background: var(--cream); color: var(--maroon); }
.status-badge--processing, .status-badge--packed { background: #fff2d6; color: #7a5200; }
.status-badge--shipped { background: #e3f0ff; color: #14427a; }
.status-badge--delivered { background: #e8f5ec; color: #14532d; }
.status-badge--cancelled, .status-badge--returned { background: #fdecec; color: #7f1d1d; }

.account-nav { display: grid; gap: var(--s1); }
.account-nav a { padding: 11px var(--s4); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text); }
.account-nav a:hover { background: var(--cream); }
.account-nav a.is-active { background: var(--maroon); color: var(--cream); font-weight: 600; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.stat { background: var(--cream); border-radius: var(--r-sm); padding: var(--s5); text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--maroon); }
.stat span { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--brown); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--s5) var(--s6); border-left: 1px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--brown); }
.timeline li:first-child::before { background: var(--red); }
.timeline b { display: block; color: var(--maroon); font-size: var(--fs-sm); }
.timeline span { font-size: var(--fs-xs); color: var(--text-soft); }

.auth-card { max-width: 460px; margin-inline: auto; }
.auth-card .panel { padding: var(--s7); }
.auth-alt { text-align: center; font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--s5); }

.cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: var(--r-pill);
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .layout-split { grid-template-columns: 1fr; }
    .summary { position: static; }
    .field-row { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .line { grid-template-columns: 72px 1fr; }
    .line__price { grid-column: 2; text-align: left; }
}
 .announcement{padding:8px 16px;background:#3d0c11;color:#fff;text-align:center;font-size:.875rem;font-weight:600;letter-spacing:.02em}

/* --- Notice panel ------------------------------------------------------------ */
/* Used while the catalogue is still being filled. An empty shop should read as
   one that is about to open, and should give the visitor something to do —
   silence just looks broken. */

.notice-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s7);
    padding: var(--s7);
    background: var(--cream);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: var(--r-md);
}

.notice-panel h2 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
.notice-panel p { margin: 0; color: var(--text-soft); max-width: 58ch; font-size: var(--fs-sm); }
.notice-panel__cta { display: flex; gap: var(--s3); flex-wrap: wrap; }

@media (max-width: 900px) {
    .notice-panel { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s6); }
    .hero__grid { grid-template-columns: 1fr; gap: var(--s5); }
}

/* --- Reviews ------------------------------------------------------------------------------------------------- */

/* Visible to screen readers only: the star rows carry their meaning in text
   that sighted readers get from the glyphs themselves. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.stars { display: inline-flex; gap: 2px; font-size: 1rem; line-height: 1; letter-spacing: .04em; }
.stars__star { color: var(--line-strong); }
.stars__star.is-full { color: #e0a106; }
/* Half a star: one glyph, filled left of centre. */
.stars__star.is-half {
    background: linear-gradient(90deg, #e0a106 50%, var(--line-strong) 50%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stars--sm { font-size: .875rem; }
.stars--lg { font-size: 1.5rem; }

.reviews { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s7); align-items: start; }

.reviews__summary {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--s6);
    text-align: center;
    position: sticky;
    top: 110px;
}

.reviews__score { font-family: var(--display); font-size: 2.5rem; line-height: 1; color: var(--maroon); margin: 0 0 var(--s3); }
.reviews__score span { font-size: 1.25rem; color: var(--text-soft); }
.reviews__score--empty { color: var(--line-strong); }
.reviews__count { font-size: var(--fs-sm); color: var(--text-soft); margin: var(--s3) 0 0; }
.reviews__note { font-size: var(--fs-xs); color: var(--text-soft); margin: var(--s4) 0 0; }

.reviews__spread { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s2); }
.reviews__spread li { display: grid; grid-template-columns: 28px 1fr 24px; align-items: center; gap: var(--s3); font-size: var(--fs-xs); color: var(--text-soft); }
.reviews__spread-label { text-align: right; }
.reviews__spread-count { text-align: left; }
.reviews__bar { height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.reviews__bar span { display: block; height: 100%; background: #e0a106; border-radius: inherit; }

.reviews__main { display: grid; gap: var(--s5); }
.reviews__empty { color: var(--text-soft); margin: 0; }

/* Write-a-review form, and the panels shown in its place. */
.review-form, .review-gate {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--s6);
}

.review-form h3, .review-gate h3 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
.review-form__intro, .review-gate p { color: var(--text-soft); font-size: var(--fs-sm); margin: 0 0 var(--s5); }
.review-form__note { font-size: var(--fs-xs); color: var(--text-soft); margin: var(--s3) 0 0; }
.review-gate p:last-child { margin-bottom: 0; }
.review-gate .btn { margin-top: var(--s2); }
.review-gate .stars { margin-bottom: var(--s3); }
.review-gate__title { color: var(--maroon); font-weight: 600; margin-bottom: var(--s2); }

.review-form fieldset { border: 0; margin: 0 0 var(--s4); padding: 0; }

.review-form legend {
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--brown); margin-bottom: var(--s2); padding: 0;
}

/* Five radios drawn as stars. Reversed in the DOM so that a general sibling
   selector can light every star up to the one being chosen — the same trick
   makes hover preview the rating without any JavaScript. */
.stars-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--s1); }
.stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-input label { font-size: 2rem; line-height: 1; color: var(--line-strong); cursor: pointer; transition: color .15s var(--ease), transform .15s var(--ease); }
.stars-input label:hover, .stars-input label:hover ~ label,
.stars-input input:checked ~ label { color: #e0a106; }
.stars-input label:active { transform: scale(.9); }
.stars-input input:focus-visible + label { outline: 2px solid var(--brown); outline-offset: 3px; border-radius: 2px; }

.review { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.review:last-child { border-bottom: 0; }

.review__avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--cream); color: var(--maroon);
    font-family: var(--display); font-size: 1.25rem;
}

.review__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s2); }
.review__meta { font-size: var(--fs-sm); color: var(--text-soft); display: inline-flex; align-items: center; gap: var(--s2); }
.review__verified { color: #1f7a3d; font-weight: 600; font-size: var(--fs-xs); }
.review__title { font-size: 1.05rem; margin-bottom: var(--s2); }
.review__text { margin: 0; }
.review__date { display: block; font-size: var(--fs-xs); color: var(--text-soft); margin-top: var(--s2); }

@media (max-width: 900px) {
    .reviews { grid-template-columns: 1fr; gap: var(--s5); }
    .reviews__summary { position: static; display: grid; justify-items: center; }
    .reviews__spread { width: 100%; max-width: 320px; }
}

/* Product options: one row of choices per axis ---------------------------- */







/* Struck through rather than merely faded: "unavailable" has to survive a
   glance on a phone in daylight. */



/* A thumbnail that names choices is a way of choosing, so it reads as one. */
.pdp__thumb.is-tagged { position: relative; }
.pdp__thumb.is-tagged::after {
    content: "";
    position: absolute;
    inset: auto 4px 4px auto;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brown);
    opacity: .5;
}
.pdp__thumb.is-active { outline: 2px solid var(--red); outline-offset: 1px; }
.pdp__thumb.is-active.is-tagged::after { background: var(--red); opacity: 1; }

/* Every row's picture on the card, so the range is visible from the grid. */
/* The rows a product comes as, drawn as small squares — every one of them,
   in one strip that scrolls sideways when there are more than fit. Hovering
   one shows it in the frame; clicking opens the product on it. */
.card__swatches {
    display: flex;
    gap: 4px;
    /* Pushed down to sit just above the foot, and always the same height, so
       the strips and the prices line up across a row whatever the names did. */
    margin-top: auto;
    min-height: 30px;
    box-sizing: content-box;
    /* Room for the hover lift and the focus ring, which overflow would clip. */
    padding: var(--s2) 2px 4px;
    margin-inline: -2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}
.card__swatches::-webkit-scrollbar { height: 4px; }
.card__swatches::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
.card__swatch {
    flex: none;
    scroll-snap-align: start;
    width: 30px; height: 30px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface);
    transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.card__swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__swatch:hover, .card__swatch.is-active { border-color: var(--maroon); }
.card__swatch:hover { transform: translateY(-1px); }
.card__swatch--video { position: relative; }
.card__swatch--video img { opacity: .75; }
.card__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-size: 8px;
}
.card__play i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(61, 12, 17, .85); padding-left: 1px; }

/* The rows a product is sold as. Each one is the whole answer — its name, its
   price and its picture — so it is a line you can point at, not a puzzle to
   assemble from three dropdowns. */











@media (max-width: 560px) {
    
    
}

/* --- The specimen label ---------------------------------------------------
   Eight photographs of the same diya, differing by how many are in the box and
   whether the wax is filled. So the label leads with the count — the one thing
   that tells the boxes apart across the room — set in the display face against
   maroon, the way this shop already prints codes onto its own photographs.
   Everything else on the label stays in the utility voice. */

.specimen {
    display: flex;
    align-items: stretch;
    gap: var(--s4);
    width: 100%;
    margin-bottom: var(--s4);
    padding: var(--s3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.specimen__count {
    flex: none;
    display: grid;
    place-content: center;
    text-align: center;
    min-width: 76px;
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    background: var(--maroon);
    color: var(--cream);
}

.specimen__count b { display: block; font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.specimen__count span {
    display: block;
    margin-top: 2px;
    font-size: .625rem;
    letter-spacing: var(--track-util);
    text-transform: uppercase;
    color: var(--text-onDark-soft);
}

.specimen__body { display: grid; align-content: center; gap: 5px; min-width: 0; }
.specimen__eyebrow {
    margin: 0;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: var(--track-util);
    text-transform: uppercase;
    color: var(--brown);
}
.specimen__name { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--maroon); }

.specimen__tags { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; }
.specimen__tag { font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft); }
.specimen__tag b { color: var(--text); font-weight: 600; }

.specimen__meta { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; font-size: var(--fs-xs); color: var(--text-soft); }
.specimen__stock::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #1f9d54;
    vertical-align: middle;
}
.specimen__stock.is-out { color: var(--red); }
.specimen__stock.is-out::before { background: var(--red); }
.specimen__sku { letter-spacing: .06em; }

/* One orchestrated moment: the label settles when a new piece is picked up. */
@keyframes specimen-settle {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}
.specimen.is-changing .specimen__count,
.specimen.is-changing .specimen__body { animation: specimen-settle .26s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
    .specimen.is-changing .specimen__count,
    .specimen.is-changing .specimen__body { animation: none; }
}

@media (max-width: 480px) {
    .specimen { gap: var(--s3); }
    .specimen__count { min-width: 62px; }
    .specimen__count b { font-size: 1.6rem; }
}

/* --- Items in the cart ----------------------------------------------------
   The count was rendering as loose text beside the word "Cart", which reads as
   part of the label rather than as a number of things waiting. It sits on the
   basket now, where a count belongs, and stays there on phones where the word
   itself is dropped. */

.icon-btn { position: relative; }

.cart-count {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 2px solid var(--surface);
    border-radius: var(--r-pill);
    background: var(--red);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    /* The header is sticky and the badge overlaps its neighbour's edge. */
    z-index: 1;
}

/* In the phone drawer the cart is a line of text, so the count follows the
   words rather than floating over them. */
.drawer__link .cart-count {
    position: static;
    margin-left: var(--s2);
    border-width: 0;
}

@media (max-width: 900px) {
    /* The label is hidden here, so the button is a square and the badge tucks
       closer to the basket rather than drifting off its corner. */
    .cart-count { top: -5px; inset-inline-end: -5px; }
}

/* Changing a quantity in place. The line dims while the shop is answering, so
   a slow connection looks like waiting rather than like nothing happening. */
.qty.is-busy { opacity: .55; pointer-events: none; }
.line__least { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--text-soft); }
.line__least--lifted { color: var(--maroon); font-weight: 600; }
.line__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); }
.line__actions .qty { margin-top: 0; }
.line__actions .line__least { margin: 0; }

/* The cart, made to fit.
   A basket of two things ran past the fold: a page-sized heading, a panel
   padded like a poster, three stacked rows under every line. The same parts,
   closer together, so the whole basket and the checkout button share a screen. */
.cart-page .section-head { margin: var(--s4) 0; padding-bottom: var(--s3); align-items: center; }
.cart-page .section-head .crumbs { padding-block: 0 var(--s1); }
.cart-page .section-head__title { display: flex; align-items: baseline; gap: var(--s3); }
.cart-page .section-head__title h2 { margin: 0; }
.cart-page .section-head__sub { font-size: var(--fs-sm); color: var(--text-soft); }
.cart-page .layout-split { margin-bottom: var(--s6); }
.cart-page .panel { padding: var(--s4) var(--s5); }
.cart-page .panel h3 { margin-bottom: var(--s2); }
.cart-page .cart-page .line { grid-template-columns: 72px 1fr auto; gap: var(--s3) var(--s4); padding: var(--s3) 0; }
.cart-page .qty button, .cart-page .qty input { height: 30px; }
.cart-page .summary__row { padding: var(--s2) 0; }
.cart-page .summary__row--total { padding-top: var(--s3); }
.cart-page .coupon-row { margin-top: var(--s3); }
.cart-page .coupon-row input { padding-block: 9px; }
.cart-note {
    margin: 0 0 var(--s3);
    padding: 10px var(--s3);
    border-radius: var(--r-sm);
    background: var(--cream);
    color: var(--maroon);
    font-size: var(--fs-sm);
}
.cart-note.is-bad { background: #fdecec; color: var(--red); }

/* ==========================================================================
   Bulk orders
   ========================================================================== */
.pdp__bulk { width: 100%; margin: var(--s3) 0 0; font-size: var(--fs-sm); color: var(--text-soft); }
.link-button { background: none; border: 0; padding: 0; color: var(--maroon); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-more { font-size: var(--fs-sm); color: var(--maroon); font-weight: 600; }
.link-remove { background: none; border: 0; padding: 0; color: var(--text-soft); font-size: var(--fs-xs); text-decoration: underline; cursor: pointer; display: block; margin: var(--s2) 0 0 auto; }
.bulk-count { font-family: var(--body, inherit); font-size: var(--fs-sm); color: var(--text-soft); font-weight: 400; }
.bulk-empty, .bulk-disclaimer { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; }
.bulk-disclaimer { margin-top: var(--s4); }
.bulk-qty { width: 110px; }
.bulk-note { flex: 1; min-width: 160px; }
.bulk-line-form input { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); }
.bulk-indicative { font-size: 1rem; }
.line__custom { display: grid; place-items: center; width: 100%; height: 100%; background: var(--cream); color: var(--brown); font-size: 1.4rem; }
.line--compact { grid-template-columns: 1fr auto; }
.line--link { grid-template-columns: 1fr auto; color: inherit; text-decoration: none; }
.line--link:hover .line__name { text-decoration: underline; }
.block-link { display: block; font-size: var(--fs-xs); margin-top: var(--s1); }
.bulk-search input[type="search"] { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; }
.bulk-results { display: grid; gap: var(--s2); margin-top: var(--s3); }
.bulk-result { display: grid; grid-template-columns: 52px 1fr 110px auto; gap: var(--s3); align-items: center; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.bulk-result img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-sm); }
.bulk-result__body { display: grid; gap: 4px; min-width: 0; }
.bulk-result__body b { color: var(--maroon); font-size: var(--fs-sm); }
.bulk-result__body select { font: inherit; font-size: var(--fs-xs); padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); max-width: 100%; }
.bulk-result__price { font-size: var(--fs-xs); color: var(--text-soft); }
.bulk-result input[type="number"] { padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; width: 100%; }
.bulk-result__err { grid-column: 1 / -1; margin: 0; }
.bulk-fromcart { margin-top: var(--s4); }
.bulk-address { border: 0; padding: 0; margin: var(--s4) 0 0; }
.bulk-address legend { font-weight: 600; color: var(--maroon); margin-bottom: var(--s3); font-size: var(--fs-sm); }
.field-row--3 { grid-template-columns: 1.4fr 1.2fr .8fr; }
.check-row { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-sm); margin: var(--s3) 0; cursor: pointer; }
.check-row input[type="checkbox"], .check-row input[type="radio"] { margin-top: 3px; width: auto; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bulk-claim { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.bulk-claim p { margin: 0; font-size: var(--fs-sm); }
.bulk-progress { list-style: none; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 0; margin: 0 0 var(--s5); counter-reset: step; }
.bulk-progress li { position: relative; padding-top: var(--s5); font-size: var(--fs-xs); color: var(--text-soft); text-align: center; }
.bulk-progress li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--line); }
.bulk-progress li.is-done::before { background: var(--brown); }
.bulk-progress li.is-current::before { background: var(--red); }
.bulk-progress li.is-current { color: var(--maroon); font-weight: 600; }
.bulk-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.bulk-panel-head a { font-size: var(--fs-sm); }
.bulk-table-wrap { overflow-x: auto; margin: var(--s4) 0; }
.bulk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 460px; }
.bulk-table th, .bulk-table td { padding: var(--s2) var(--s2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bulk-table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 600; }
.bulk-table .n { text-align: right; white-space: nowrap; }
.bulk-table small { display: block; color: var(--text-soft); }
.bulk-note-box { background: var(--cream); border-radius: var(--r-sm); padding: var(--s4); font-size: var(--fs-sm); margin: var(--s4) 0; }
.bulk-terms { margin-top: var(--s3); font-size: var(--fs-sm); }
.bulk-terms summary, .bulk-drawer summary { cursor: pointer; color: var(--maroon); font-weight: 600; }
.bulk-drawer { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.bulk-drawer[open] summary { margin-bottom: var(--s3); }
.bulk-respond { margin-top: var(--s5); padding-top: var(--s5); border-top: 2px solid var(--cream); }
.bulk-accept h3 { font-size: 1.05rem; margin-bottom: var(--s3); }
.bulk-accepted { margin-top: var(--s4); color: #1f7a3d; font-weight: 600; font-size: var(--fs-sm); }
.bulk-due { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); background: #fff2d6; color: #7a5200; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.bulk-pay { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.bulk-pay h3 { font-size: 1.05rem; }
.bulk-amount { width: 120px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; }
.bulk-thread { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.bulk-msg { padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--cream); max-width: 85%; font-size: var(--fs-sm); }
.bulk-msg p { margin: var(--s1) 0 0; }
.bulk-msg small { color: var(--text-soft); font-size: var(--fs-xs); }
.bulk-msg--me { justify-self: end; background: #eef3ea; }
.bulk-msg-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.status-badge--bulk-submitted, .status-badge--bulk-under_review, .status-badge--bulk-revision_requested { background: #fff2d6; color: #7a5200; }
.status-badge--bulk-quoted, .status-badge--bulk-accepted { background: #e3f0ff; color: #14427a; }
.status-badge--bulk-confirmed, .status-badge--bulk-in_production, .status-badge--bulk-ready_to_dispatch { background: var(--cream); color: var(--maroon); }
.status-badge--bulk-partially_dispatched, .status-badge--bulk-dispatched { background: #e3f0ff; color: #14427a; }
.status-badge--bulk-delivered, .status-badge--bulk-completed { background: #e8f5ec; color: #14532d; }
.status-badge--bulk-cancelled, .status-badge--bulk-declined, .status-badge--bulk-expired { background: #fdecec; color: #7f1d1d; }
.status-badge--pay-pending_verification { background: #fff2d6; color: #7a5200; }
.status-badge--pay-rejected, .status-badge--pay-failed { background: #fdecec; color: #7f1d1d; }
@media (max-width: 760px) {
    .bulk-progress { grid-template-columns: repeat(4, 1fr); row-gap: var(--s3); }
    .bulk-result { grid-template-columns: 44px 1fr; }
    .bulk-result input[type="number"], .bulk-result button { grid-column: span 1; }
    .field-row--3 { grid-template-columns: 1fr; }
    .bulk-msg { max-width: 100%; }
}

/* Bulk order entry points ---------------------------------------------------- */
.icon-btn--bulk { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.icon-btn--bulk:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.nav__link--bulk { color: var(--red); font-weight: 600; }
.nav__link--bulk i { margin-right: 4px; }
.nav__tag { margin-left: 6px; padding: 2px 7px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: 10px; letter-spacing: .06em; vertical-align: 1px; }
.drawer__bulk { display: flex; gap: var(--s3); align-items: center; margin: var(--s2) 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--red); color: #fff; }
.drawer__bulk i { font-size: 1.2rem; }
.drawer__bulk span { display: grid; line-height: 1.3; }
.drawer__bulk small { opacity: .85; font-size: var(--fs-xs); }

/* Install the app — set apart at the foot of the menu, quieter than bulk. */
.drawer__install { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.drawer__install-btn, .drawer__install-ios {
    display: flex; gap: var(--s3); align-items: center; width: 100%;
    margin: 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: var(--maroon); text-align: left; font: inherit;
}
.drawer__install-btn { cursor: pointer; }
.drawer__install-btn:hover { border-color: var(--brown); }
.drawer__install-btn[hidden], .drawer__install-ios[hidden] { display: none; }
.drawer__install img { flex: none; border-radius: 9px; box-shadow: var(--shadow-sm); }
.drawer__install span { display: grid; line-height: 1.3; font-size: var(--fs-sm); }
.drawer__install small { color: var(--text-soft); font-size: var(--fs-xs); }
.bulk-strip { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); margin-bottom: var(--s5); border: 1px solid var(--red); border-left-width: 5px; border-radius: var(--r-sm); background: var(--cream); color: var(--text); font-size: var(--fs-sm); line-height: 1.45; }
.bulk-strip > i { font-size: 1.4rem; color: var(--red); flex: none; }
.bulk-strip b { color: var(--maroon); }
.bulk-strip__cta { margin-left: auto; flex: none; font-weight: 600; color: var(--red); white-space: nowrap; }
.bulk-strip:hover .bulk-strip__cta { text-decoration: underline; }
.pdp__bulk { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px dashed var(--line); font-size: var(--fs-sm); color: var(--text-soft); }
.btn--bulk { background: transparent; border: 1.5px solid var(--red); color: var(--red); font-weight: 600; }
.btn--bulk:hover { background: var(--red); color: #fff; }
@media (max-width: 900px) {
    /* The one header label phones keep: "Bulk" says what the button is for. */
    .header__actions .icon-btn--bulk span:not(.cart-count) { display: inline; }
    .icon-btn--bulk { padding: 8px 10px; }
}
@media (max-width: 600px) {
    .bulk-strip { flex-wrap: wrap; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); }
    .bulk-strip__cta { margin-left: 0; width: 100%; }
}
@media (max-width: 380px) {
    .header__actions .icon-btn--bulk span { display: none; }
}

/* Bulk order page: form first, the guide in the sidebar ---------------------- */
.section--tight { padding-top: var(--s5); }
.bulk-title { font-size: var(--fs-h2, 2rem); margin: 0; }
.bulk-lead { margin: var(--s2) 0 0; max-width: 60ch; font-size: var(--fs-sm); color: var(--text-soft); }
/* Too tall to pin: a sticky panel longer than the screen hides its own end. */
.summary--static { position: static; }
.bulk-steps { list-style: none; counter-reset: step; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s4); }
.bulk-steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; column-gap: var(--s3); font-size: var(--fs-sm); }
.bulk-steps li::before { content: counter(step); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: var(--fs-xs); }
.bulk-steps b { color: var(--maroon); }
.bulk-steps span { color: var(--text-soft); line-height: 1.5; }
.bulk-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line); }
.bulk-facts div { display: grid; gap: 2px; }
.bulk-facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 500; }
.bulk-facts dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--maroon); }

/* Homepage collections: swipeable rail with previous/next controls. */
.category-carousel__track.rail {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding: 6px 2px 14px;
}
.category-carousel__track .tile {
    flex: 0 0 clamp(150px, 20vw, 200px);
    scroll-snap-align: start;
}
.category-carousel__control {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--cream);
    color: var(--maroon);
    font-size: 22px;
    cursor: pointer;
}
.category-carousel__control:hover { border-color: var(--maroon); }
.category-carousel__control:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
.category-carousel__control:disabled { opacity: .4; cursor: default; }