/* The storefront. Everything here reads the variables the layout writes from
 * Appearance — colours, fonts, corner radius, picture crop, page width — so a
 * change on that screen restyles the whole shop without touching this file. */

*, *::before, *::after { box-sizing: border-box; }
body.store {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: var(--font-body); font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.store h1, body.store h2, body.store h3, body.store h4, body.store .wordmark { font-family: var(--font-heading); line-height: 1.15; letter-spacing: -.02em; margin: 0; }
body.store a { color: inherit; text-decoration: none; }
body.store img { max-width: 100%; display: block; }
.s-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

/* ------------------------------------------------------------------ header -- */
/* An author rule that sets display beats the browser's own [hidden], so a
   .s-bag-n (grid) or an .s-find-list (flex) marked hidden would still draw —
   a basket badge reading 0 and an empty suggestion box under the search. The
   admin stylesheet carries the same line for the same reason. */
[hidden] { display: none !important; }

.s-head { background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); z-index: 20; }
body.sticky .s-head { position: sticky; top: 0; }
.s-topbar { background: var(--surface); font-size: .82rem; color: var(--muted); }
.s-topbar .s-wrap { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; }
.s-bar .s-wrap { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding-block: 16px; }
.s-brand img { height: 38px; width: auto; object-fit: contain; }
.s-brand .wordmark { font-size: 1.35rem; font-weight: 800; }
.s-menu { display: flex; gap: clamp(14px, 2vw, 28px); margin-right: auto; font-size: .95rem; }
.s-menu a:hover { color: var(--primary); }
.s-toggle { display: none; background: none; border: 0; color: inherit; font-size: 1.5rem; padding: 4px; cursor: pointer; }

/* Buttons take their shape from the theme: solid, outline or soft. */
.s-btn, .s-slide-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius);
    font-weight: 600; font-size: .92rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
body.btn-solid   .s-btn { background: var(--primary); color: #fff; }
body.btn-outline .s-btn { background: transparent; color: var(--primary); border-color: var(--primary); }
body.btn-soft    .s-btn { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.s-btn:hover { filter: brightness(.94); }

/* Centred and minimal headers rearrange the same bar. */
body.head-centered .s-bar .s-wrap { flex-direction: column; gap: 12px; text-align: center; }
body.head-centered .s-menu { margin: 0; justify-content: center; flex-wrap: wrap; }
body.head-minimal .s-menu { display: none; }
body.head-minimal .s-toggle { display: block; margin-left: auto; }
body.head-overlay .s-head { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; color: #fff; }
body.head-overlay .s-main { padding-top: 0; }
body.head-overlay.scrolled .s-head { background: var(--bg); color: var(--text); border-bottom-color: color-mix(in srgb, var(--text) 10%, transparent); }

/* On a phone the bar keeps only the brand and the two icons; the menu itself
   moves into a panel that comes in from the left. */
@media (max-width: 860px) {
    .s-menu { display: none; }
    .s-toggle { display: block; margin-left: auto; }
}

/* ------------------------------------------------------------------ slider -- */
.s-slider { position: relative; overflow: hidden; }
.s-slider.h-short  { height: 40vh; } .s-slider.h-medium { height: 60vh; }
.s-slider.h-tall   { height: 80vh; } .s-slider.h-full   { height: 100vh; }
.s-slide { position: absolute; inset: 0; display: flex; background-size: cover; background-position: center; background-color: var(--surface); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.s-slide.on { opacity: 1; pointer-events: auto; }
.s-slide::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,var(--o, .35)); }
.s-slide .s-wrap { position: relative; display: flex; width: 100%; }
.s-slide-text { max-width: 34rem; }
.s-slide h2 { color: var(--h); font-size: clamp(1.9rem, 5vw, 3.4rem); }
.s-slide p { color: var(--t); margin: 14px 0 0; font-size: clamp(.95rem, 2vw, 1.1rem); }
.s-slide-btn { background: var(--bb); color: var(--bc); margin-top: 22px; }
.s-slide.pos-top-left .s-wrap, .s-slide.pos-top-center .s-wrap, .s-slide.pos-top-right .s-wrap { align-items: flex-start; padding-top: 8vh; }
.s-slide.pos-center-left .s-wrap, .s-slide.pos-center .s-wrap, .s-slide.pos-center-right .s-wrap { align-items: center; }
.s-slide.pos-bottom-left .s-wrap, .s-slide.pos-bottom-center .s-wrap, .s-slide.pos-bottom-right .s-wrap { align-items: flex-end; padding-bottom: 8vh; }
.s-slide.pos-top-center .s-wrap, .s-slide.pos-center .s-wrap, .s-slide.pos-bottom-center .s-wrap { justify-content: center; text-align: center; }
.s-slide.pos-top-right .s-wrap, .s-slide.pos-center-right .s-wrap, .s-slide.pos-bottom-right .s-wrap { justify-content: flex-end; text-align: right; }
.s-dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; gap: 8px; justify-content: center; z-index: 2; }
.s-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.s-dots button.on { background: #fff; width: 26px; border-radius: 999px; }

/* ------------------------------------------------------------------- bands -- */
.s-main { min-height: 40vh; }
.s-band { padding-block: clamp(40px, 7vw, 76px); }
.s-band:nth-of-type(even) { background: var(--surface); }
.s-sec-head { margin-bottom: clamp(20px, 3vw, 36px); }
.s-sec-head h1, .s-sec-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.s-sec-head p { color: var(--muted); margin: 10px 0 0; max-width: 48rem; }
.s-note { color: var(--muted); }
.s-empty { text-align: center; }
.s-empty h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
.s-empty p { color: var(--muted); max-width: 34rem; margin: 16px auto 0; }
.s-prose p { color: var(--muted); max-width: 48rem; }

/* Tiles: a picture cropped to the theme's ratio, the name under it. */
.s-grid { display: grid; gap: clamp(12px, 2vw, 24px); }
.s-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.s-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.s-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.s-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: clamp(12px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.s-rail > * { scroll-snap-align: start; }
.s-tile { display: block; border-radius: var(--radius); overflow: hidden; background: var(--bg); transition: transform .2s; }
body.cards-shadow   .s-tile { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
body.cards-bordered .s-tile { border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.s-tile:hover { transform: translateY(-3px); }
.s-tile img, .s-tile-blank { width: 100%; aspect-ratio: var(--ratio); object-fit: cover; }
.s-tile-blank { display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.s-tile-blank span { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4rem); color: color-mix(in srgb, var(--primary) 45%, transparent); line-height: 1; }
.s-tile b { display: block; padding: 14px 16px; font-family: var(--font-heading); }
@media (max-width: 860px) { .s-grid.cols-3, .s-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .s-grid { grid-template-columns: 1fr !important; } }

.s-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(16px, 3vw, 32px); }
.s-features i { font-size: 1.8rem; color: var(--primary); display: block; margin-bottom: 10px; }
.s-features b { display: block; font-family: var(--font-heading); margin-bottom: 4px; }
.s-features span { color: var(--muted); font-size: .92rem; }

.s-cta { padding-block: clamp(40px, 6vw, 68px); text-align: center; }
.s-cta h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.s-cta p { margin: 12px 0 0; opacity: .85; }
.s-cta .s-btn { margin-top: 24px; }
.s-cta.style-primary { background: var(--primary); color: #fff; }
.s-cta.style-accent  { background: var(--accent); color: #111; }
.s-cta.style-dark    { background: #111; color: #fff; }
.s-cta.style-light   { background: var(--surface); }
.s-cta.style-primary .s-btn, .s-cta.style-dark .s-btn { background: #fff; color: #111; border-color: #fff; }
.s-cta.style-accent .s-btn { background: #111; color: #fff; border-color: #111; }

.s-crumbs { display: flex; gap: 8px; font-size: .85rem; color: var(--muted); margin-bottom: 20px; flex-wrap: wrap; }
.s-crumbs a::after { content: "›"; margin-left: 8px; }
.s-crumbs a:hover { color: var(--primary); }

/* ------------------------------------------------------------------ footer -- */
.s-foot { background: var(--surface); padding-block: clamp(40px, 6vw, 64px) 24px; }
.s-foot-cols { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); }
.s-foot-cols > * { flex: 1 1 150px; min-width: 0; }
.s-foot-cols > :first-child { flex: 1.6 1 220px; }
.s-foot h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
.s-foot p { color: var(--muted); margin: 12px 0 0; font-size: .92rem; }
.s-foot a { display: block; color: var(--muted); font-size: .92rem; padding: 3px 0; }
.s-foot a:hover { color: var(--primary); }
.s-foot .s-brand img { height: 34px; }
.s-foot-end { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
              margin-top: 32px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
              color: var(--muted); font-size: .85rem; }
body.foot-dark .s-foot { background: #111; color: #fff; }
body.foot-dark .s-foot p, body.foot-dark .s-foot a, body.foot-dark .s-foot-end { color: rgba(255,255,255,.7); }
body.foot-simple .s-foot-cols { display: grid; grid-template-columns: 1fr; text-align: center; }
body.foot-simple .s-foot-cols > :nth-child(2) { display: flex; gap: 20px; justify-content: center; }
body.foot-simple .s-foot h4 { display: none; }
body.foot-minimal .s-foot-cols { display: none; }
body.foot-minimal .s-foot-end { margin-top: 0; border-top: 0; justify-content: center; }
@media (max-width: 720px) { .s-foot-cols > * { flex-basis: 100%; } }

/* ---------------------------------------------------------------- products -- */
.s-tile-sub { display: block; padding: 0 16px; color: var(--muted); font-size: .86rem; }
.s-price { display: block; padding: 8px 16px 16px; font-weight: 700; }
.s-price s { color: var(--muted); font-weight: 400; margin-left: 8px; }
.s-tile b + .s-tile-sub { padding-top: 0; margin-top: -8px; }

.s-product { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.s-shot-main { width: 100%; aspect-ratio: var(--ratio); object-fit: cover; border-radius: var(--radius); background: var(--surface); }
.s-shot-strip { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.s-shot-strip button { flex: 0 0 76px; padding: 0; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden; background: none; cursor: pointer; }
.s-shot-strip button.on { border-color: var(--primary); }
.s-shot-strip img { aspect-ratio: 1; object-fit: cover; }
.s-buy h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.s-lede { color: var(--muted); margin: 12px 0 0; }
.s-price-lg { padding: 0; margin: 18px 0 0; font-size: 1.5rem; }
.s-opts { margin-top: 24px; }
body.store .s-opts h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 12px; }
.s-opts ul { list-style: none; margin: 0; padding: 0; }
.s-opts li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.s-opts li span { margin-right: auto; }
.s-opts li em { font-style: normal; font-size: .8rem; color: var(--muted); }
.s-buy-btn { margin-top: 24px; }
.s-buy .s-note { margin: 12px 0 0; font-size: .9rem; }
.s-buy .s-note a { text-decoration: underline; }
.s-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(36px, 6vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.s-block h3 { font-size: 1.1rem; margin-bottom: 10px; }
.s-block p { color: var(--muted); margin: 0 0 10px; }
@media (max-width: 860px) { .s-product { grid-template-columns: 1fr; } }

/* Stock, as a shopper sees it. A sold-out piece stays on the shelf, dimmed:
   somebody who came looking for one colour should see it exists. */
.s-flag { margin: 10px 0 0; font-weight: 600; color: var(--primary); }
.s-flag-out { color: var(--muted); }
.s-opts li.out span, .s-opts li.out b { opacity: .5; }
.s-opts li.out b { text-decoration: line-through; }
.s-tile { position: relative; }
.s-tile.out img, .s-tile.out .s-tile-blank { opacity: .55; }
.s-tile-flag { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: var(--radius);
               background: var(--bg); color: var(--muted); font-size: .72rem; font-weight: 700;
               text-transform: uppercase; letter-spacing: .06em; }

/* --------------------------------------------------------------- basket -- */
.s-bag { position: relative; display: inline-flex; align-items: center; padding: 6px; font-size: 1.35rem; }
.s-bag-n { position: absolute; top: -2px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
           display: grid; place-items: center; border-radius: 999px;
           background: var(--primary); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; }
.s-buy-form { margin-top: 24px; }
/* The stepper and the button are one row of controls, so they share a height
   and the number stops reading as an empty card beside a wide button. */
.s-buy-row { display: flex; align-items: stretch; gap: 10px; margin-top: 20px; }
.s-buy-row .s-btn { flex: 1; justify-content: center; background: var(--primary); color: #fff; border-color: var(--primary); }
.s-stepper-lg { flex: none; }
.s-stepper-lg button { width: 40px; height: 100%; font-size: 1.15rem; }
.s-stepper-lg input { width: 46px; padding: 0; text-align: center; border: 0; background: none; color: var(--text);
                      font: inherit; -moz-appearance: textfield; }
.s-stepper-lg input::-webkit-outer-spin-button, .s-stepper-lg input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0; }
.s-ask { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: .92rem; }
.s-ask:hover { color: var(--primary); }
/* Options are chips, not rows: four colours of one saree is a palette to glance
   at, and repeating the same price four times says nothing. */
.s-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.s-pick { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer;
          border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); border-radius: var(--radius);
          font-size: .92rem; transition: border-color .12s, box-shadow .12s; }
.s-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.s-pick:hover { border-color: color-mix(in srgb, var(--text) 40%, transparent); }
.s-pick:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.s-pick b { font-weight: 700; }
.s-pick .s-dot { width: 15px; height: 15px; border-radius: 50%; flex: none;
                 box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.s-pick.out { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.s-few { margin: 12px 0 0; font-size: .86rem; color: var(--primary); }

.s-checkout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.s-row { display: grid; grid-template-columns: 84px 1fr auto auto; gap: 16px; align-items: center;
         padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.s-row:first-child { padding-top: 0; }
.s-row.short { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.s-row-pic { display: block; border-radius: var(--radius); overflow: hidden; }
.s-row-pic img, .s-row-pic .s-tile-blank { width: 84px; height: 84px; object-fit: cover; }
.s-row-what b { display: block; }
.s-row-opt, .s-row-each { display: block; color: var(--muted); font-size: .86rem; }
.s-row-warn { display: block; color: var(--primary); font-size: .84rem; margin-top: 4px; }
.s-row-qty input { width: 68px; padding: 8px 10px; text-align: center; border-radius: var(--radius);
                   border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); background: var(--bg); color: var(--text); font: inherit; }
.s-row-money { text-align: right; }
.s-row-money form { margin-top: 4px; }
.s-link { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: .84rem;
          text-decoration: underline; cursor: pointer; }
.s-link:hover { color: var(--primary); }

.s-sum { background: var(--surface); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); position: sticky; top: 90px; }
.s-sum h3 { font-size: 1.05rem; margin-bottom: 14px; }
.s-totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; }
.s-totals dt { color: var(--muted); }
.s-totals dd { margin: 0; text-align: right; }
.s-totals .off { color: var(--primary); }
.s-totals .tot { padding-top: 12px; margin-top: 4px; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
                 font-weight: 700; font-size: 1.15rem; color: var(--text); }
.s-mini { list-style: none; margin: 0 0 16px; padding: 0; font-size: .9rem; }
.s-mini li { display: flex; gap: 12px; padding: 6px 0; }
.s-mini li span { flex: 1; color: var(--muted); }
.s-mini em { font-style: normal; }
.s-code { margin: 20px 0; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.s-code label { display: block; font-size: .86rem; color: var(--muted); margin-bottom: 8px; }
.s-code-row { display: flex; gap: 8px; }
.s-code-row input { flex: 1; min-width: 0; padding: 10px 12px; text-transform: uppercase;
                    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: var(--radius);
                    background: var(--bg); color: var(--text); font: inherit; }
.s-code-on { display: flex; align-items: center; gap: 10px; margin: 0; }

.s-fields h3 { font-size: 1.05rem; margin: 28px 0 14px; }
.s-fields h3:first-child { margin-top: 0; }
.s-fields label { display: block; margin-bottom: 14px; font-size: .88rem; color: var(--muted); }
.s-fields input, .s-fields textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: var(--radius);
    background: var(--bg); color: var(--text); font: inherit; }
.s-fields textarea { resize: vertical; }
.s-opt { opacity: .7; }
.s-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.s-choices { display: grid; gap: 8px; }
.s-choice { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; margin: 0; cursor: pointer;
            border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); border-radius: var(--radius); }
.s-choice input { width: auto; margin: 2px 0 0; }
.s-choice b { display: block; color: var(--text); }
.s-choice em { font-style: normal; font-size: .85rem; color: var(--muted); }
.s-choice:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.s-choice.off { opacity: .5; cursor: not-allowed; }
.s-alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px;
           background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--text); }
.s-done { text-align: center; padding-block: clamp(20px, 4vw, 40px); }
.s-done h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.s-done p { margin: 12px 0 0; }
.s-addr { color: var(--muted); line-height: 1.7; margin: 0; }
@media (max-width: 860px) {
    .s-checkout { grid-template-columns: 1fr; }
    .s-sum { position: static; }
    .s-bar .s-bag { order: 2; }
}
@media (max-width: 520px) {
    .s-row { grid-template-columns: 64px 1fr auto; gap: 12px; }
    .s-row-pic img, .s-row-pic .s-tile-blank { width: 64px; height: 64px; }
    .s-row-qty { grid-column: 2; }
    .s-row-money { grid-column: 3; }
    .s-two { grid-template-columns: 1fr; }
}
.s-main > .s-wrap > .s-alert { margin-top: 20px; }
.s-alert.ok { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }

/* --------------------------------------------------------------- drawer -- */
.s-drawer { position: fixed; inset: 0; z-index: 60; }
.s-drawer-veil { position: absolute; inset: 0; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .22s; }
.s-drawer.on .s-drawer-veil { opacity: 1; }
.s-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw);
                  display: flex; flex-direction: column; background: var(--bg); color: var(--text);
                  box-shadow: -12px 0 40px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .22s ease; }
.s-drawer.on .s-drawer-panel { transform: none; }
.s-drawer.busy .s-drawer-body { opacity: .5; pointer-events: none; }
.s-drawer-head { display: flex; align-items: center; gap: 10px; flex: none; padding: 16px 18px;
                 border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.s-drawer-head b { font-family: var(--font-heading); font-size: 1.05rem; margin-right: auto; }
.s-drawer-x, .s-drawer-back { background: none; border: 0; padding: 4px; font-size: 1.3rem; line-height: 1;
                              color: var(--muted); cursor: pointer; }
.s-drawer-x:hover, .s-drawer-back:hover { color: var(--text); }
.s-drawer-back { margin-right: -4px; }
.s-drawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; transition: opacity .15s; }
body.drawer-open { overflow: hidden; }

/* Inside a panel: the scrolling middle, then a foot that stays put. */
.s-panel { flex: 1; padding: 18px; }
.s-panel-foot { flex: none; position: sticky; bottom: 0; padding: 16px 18px;
                background: var(--surface); border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.s-panel-foot .s-totals { margin-bottom: 14px; }
.s-panel-foot .s-note { margin: 12px 0 0; text-align: center; font-size: .85rem; }
.s-panel-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
                 gap: 14px; padding: 40px 24px; text-align: center; color: var(--muted); }
.s-panel-empty i { font-size: 2.6rem; opacity: .5; }
.s-btn-go { width: 100%; justify-content: center; padding-block: 14px; font-size: 1rem; }
.s-btn-quiet { background: transparent; border-color: color-mix(in srgb, var(--text) 22%, transparent); color: var(--text); }

.s-step + .s-step { margin-top: 24px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.s-step h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; }
.s-panel label { display: block; margin-bottom: 12px; font-size: .86rem; color: var(--muted); }
.s-panel input:not([type=radio]):not([type=checkbox]), .s-panel textarea, .s-panel select {
    display: block; width: 100%; margin-top: 5px; padding: 11px 12px; font: inherit;
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: var(--radius);
    background: var(--bg); color: var(--text); }
.s-panel textarea { resize: vertical; }
.s-check { display: flex !important; align-items: center; gap: 8px; }
.s-check input { width: auto !important; margin: 0 !important; }

/* Basket lines, narrower than the page version. */
.s-lines { display: grid; gap: 4px; }
.s-line { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; padding: 14px 0;
          border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.s-line:first-child { padding-top: 0; }
.s-line.short { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.s-line-pic img, .s-line-pic .s-tile-blank { width: 62px; height: 62px; object-fit: cover; border-radius: var(--radius); }
.s-line-what b { display: block; font-size: .92rem; }
.s-line-opt, .s-line-each { display: block; color: var(--muted); font-size: .8rem; }
.s-line-money { text-align: right; }
.s-line-money b { display: block; white-space: nowrap; }
.s-stepper { display: inline-flex; align-items: center; margin-top: 8px; border-radius: var(--radius);
             border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); overflow: hidden; }
.s-stepper button { width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--text);
                    font: inherit; font-size: 1rem; cursor: pointer; }
.s-stepper button:hover { background: var(--surface); }
.s-stepper span { min-width: 30px; text-align: center; font-size: .88rem; }
.s-code { margin-top: 18px; }
.s-code-row { display: flex; gap: 8px; }
.s-code-row input { flex: 1; min-width: 0; margin-top: 0 !important; text-transform: uppercase; }
.s-code-on { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9rem; }

.s-book { display: grid; gap: 10px; }
.s-book-card { padding: 13px 15px; border-radius: var(--radius); font-size: .86rem; color: var(--muted);
               border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.s-book-card.on { border-color: var(--primary); }
.s-book-card b { display: block; color: var(--text); margin-bottom: 4px; }
.s-book-card span { display: block; }
.s-book-acts { display: flex; gap: 14px; margin-top: 8px; }
.s-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .66rem; font-weight: 700;
         text-transform: uppercase; letter-spacing: .05em; background: var(--primary); color: #fff; vertical-align: 1px; }
.s-more { margin-top: 16px; }
.s-more > summary { cursor: pointer; color: var(--primary); font-size: .9rem; }
.s-more[open] > summary { margin-bottom: 4px; }

@media (max-width: 560px) {
    .s-drawer-panel { width: 100vw; top: auto; height: 92vh; border-radius: 18px 18px 0 0;
                      transform: translateY(100%); box-shadow: 0 -12px 40px rgba(0,0,0,.22); }
    .s-drawer.on .s-drawer-panel { transform: none; }
}
.s-gone { color: var(--muted); }

/* -------------------------------------------------- one control height -- */
/* Every field, button, stepper and picker on the shop is this tall. Without a
   single number they each took their own from padding and line-height, and a
   form of six controls came out at five different heights. */
body.store { --ctl: 44px; }

.s-panel input:not([type=radio]):not([type=checkbox]),
.s-panel select,
.s-fields input, .s-fields select,
.s-code-row input, .s-qty {
    height: var(--ctl); padding-block: 0;
}
.s-panel textarea, .s-fields textarea { min-height: calc(var(--ctl) * 1.8); padding-block: 11px; }
.s-btn, .s-slide-btn { min-height: var(--ctl); }
.s-btn-go { min-height: calc(var(--ctl) + 6px); }

/* Tom Select brings its own box; this makes it the same control as the rest. */
.s-panel .ts-wrapper, .s-fields .ts-wrapper { margin-top: 5px; }
.s-panel .ts-control, .s-fields .ts-control {
    min-height: var(--ctl); padding: 0 var(--ctl) 0 12px; align-items: center;
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: var(--radius);
    background: var(--bg); color: var(--text); font: inherit; box-shadow: none;
}
.s-panel .ts-wrapper.single .ts-control::after, .s-fields .ts-wrapper.single .ts-control::after {
    border-color: var(--muted) transparent transparent; right: 16px;
}
.s-panel .ts-wrapper.focus .ts-control, .s-fields .ts-wrapper.focus .ts-control { border-color: var(--primary); }
.s-panel .ts-dropdown, .s-fields .ts-dropdown {
    border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: var(--radius);
    background: var(--bg); color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.14); margin-top: 4px; }
.s-panel .ts-dropdown .active, .s-fields .ts-dropdown .active { background: var(--surface); color: var(--text); }

/* The buy row: stepper and button, one height between them. */
.s-buy-row { align-items: center; }
.s-stepper-lg { height: var(--ctl); }
.s-stepper-lg button { width: 40px; height: 100%; }
.s-stepper-lg input { height: 100%; }
.s-buy-row .s-btn { height: var(--ctl); min-height: 0; }

/* `.s-panel label` sets display:block for the ordinary fields, and it out-ranks
   `.s-choice` — which is also a label — so every choice was stacking its radio
   above its text. These win it back and tidy the row while they are here. */
.s-panel .s-choice, .s-fields .s-choice {
    display: flex; align-items: center; gap: 12px; margin: 0;
    padding: 13px 15px; color: var(--text); cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: var(--radius);
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.s-panel .s-choice:hover, .s-fields .s-choice:hover { border-color: color-mix(in srgb, var(--text) 34%, transparent); }
.s-panel .s-choice input, .s-fields .s-choice input {
    width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--primary); cursor: pointer;
}
.s-panel .s-choice > span, .s-fields .s-choice > span { min-width: 0; }
.s-panel .s-choice b, .s-fields .s-choice b { display: block; font-size: .95rem; font-weight: 600; }
.s-panel .s-choice em, .s-fields .s-choice em { font-style: normal; font-size: .84rem; color: var(--muted); }
.s-choice:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent);
                               box-shadow: inset 0 0 0 1px var(--primary); }
.s-choice.off { opacity: .55; cursor: not-allowed; background: none; }
.s-choice.off:hover { border-color: color-mix(in srgb, var(--text) 16%, transparent); }
.s-choices { gap: 10px; }

/* Tom Select's control carries its own border box; without this it lands 2px
   taller than the plain fields beside it. */
.s-panel .ts-control, .s-fields .ts-control { box-sizing: border-box; height: var(--ctl); }

/* Section headings, a touch more air between the steps. */
.s-step h4 { font-size: .72rem; letter-spacing: .1em; }
.s-panel > .s-step:first-child { margin-top: 4px; }
/* The basket's stepper sits under the line's text and needs that margin; the
   buy row's sits beside the button and must not. */
.s-stepper-lg { margin-top: 0; }
/* .s-buy-btn spaces itself when it stands alone; in the buy row it must not. */
.s-buy-row .s-buy-btn { margin-top: 0; }

/* ------------------------------------------------------ menu dropdowns -- */
.s-drop { position: relative; display: inline-flex; align-items: center; }
.s-drop > a { display: inline-flex; align-items: center; gap: 2px; }
.s-drop > a i { font-size: 1.05em; width: .8em; line-height: 1; opacity: .55; display: inline-flex;
                justify-content: center; margin-left: 1px; }
.s-drop-list { position: absolute; top: 100%; left: -14px; min-width: 200px; padding: 8px 0;
               display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-4px);
               background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
               border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0,0,0,.12);
               transition: opacity .14s, transform .14s, visibility .14s; z-index: 30; }
.s-drop:hover .s-drop-list, .s-drop:focus-within .s-drop-list { opacity: 1; visibility: visible; transform: none; }
.s-drop-list a { padding: 8px 16px; font-size: .92rem; white-space: nowrap; }
.s-drop-list a:hover { background: var(--surface); color: var(--primary); }
.s-drop-deep { padding-left: 30px !important; color: var(--muted); font-size: .86rem !important; }

/* On a phone the menu is a stack, so a dropdown is just what sits under it. */
@media (max-width: 860px) {
    .s-drop { display: block; }
    .s-drop-list { position: static; opacity: 1; visibility: visible; transform: none;
                   border: 0; box-shadow: none; padding: 0 0 6px 14px; background: none; min-width: 0; }
    .s-drop-list a { padding: 8px 0; border: 0 !important; }
}

/* A written page: long-form text the shop typed, not a layout. */
.s-doc { max-width: 46rem; }
.s-doc h2 { font-size: 1.2rem; margin: 28px 0 8px; }
.s-doc h2:first-child { margin-top: 0; }
.s-doc h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.s-doc p, .s-doc li { color: var(--muted); margin: 0 0 12px; }
.s-doc ul, .s-doc ol { padding-left: 20px; margin: 0 0 14px; }
.s-doc a { color: var(--primary); text-decoration: underline; }
.s-doc em { color: var(--text); }

/* ---------------------------------------------------- the menu, on a phone -- */
/* A panel from the left, not a list that shoves the page down. It is in the
   markup on every width and simply never opened above the breakpoint. */
.s-nav { position: fixed; inset: 0; z-index: 70; }
.s-nav-veil { position: absolute; inset: 0; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .22s; }
.s-nav.on .s-nav-veil { opacity: 1; }
.s-nav-panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(340px, 88vw);
               display: flex; flex-direction: column; background: var(--bg); color: var(--text);
               box-shadow: 12px 0 40px rgba(0,0,0,.18); transform: translateX(-100%); transition: transform .22s ease; }
.s-nav.on .s-nav-panel { transform: none; }
.s-nav-head { display: flex; align-items: center; gap: 10px; flex: none; padding: 16px 18px;
              border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.s-nav-head .s-brand { margin-right: auto; }
.s-nav-head .s-brand img { height: 30px; }
.s-nav-head .wordmark { font-size: 1.1rem; }
.s-nav-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0; }
.s-nav-body a { display: block; padding: 12px 18px; font-size: 1rem; }
.s-nav-body a:hover { background: var(--surface); color: var(--primary); }
.s-nav-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                         padding: 12px 18px; font-size: 1rem; cursor: pointer; list-style: none; }
.s-nav-group > summary::-webkit-details-marker { display: none; }
.s-nav-group > summary i { color: var(--muted); transition: transform .15s; }
.s-nav-group[open] > summary i { transform: rotate(180deg); }
.s-nav-group a { padding-left: 34px; font-size: .94rem; color: var(--muted); }
.s-nav-group .s-nav-deep { padding-left: 50px; font-size: .88rem; }
.s-nav-all { font-style: italic; }
.s-nav-foot { flex: none; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.s-nav-foot a { display: flex; align-items: center; gap: 8px; padding: 9px 18px; color: var(--muted); font-size: .88rem; }
body.nav-open { overflow: hidden; }

/* The chips need room before the buy row, or the two read as one control. */
.s-opts { margin-bottom: 26px; }
.s-few { margin-bottom: 0; }

/* What else to look at, under the piece itself. */
.s-more-of { margin-top: clamp(36px, 6vw, 64px); padding-top: clamp(28px, 4vw, 44px);
             border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.s-more-of section + section { margin-top: clamp(32px, 5vw, 52px); }
.s-more-of .s-sec-head { margin-bottom: clamp(16px, 2vw, 24px); }
.s-more-of .s-sec-head h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }

/* ---------------------------------------------------------------- search -- */
.s-find { position: relative; display: flex; align-items: center; gap: 8px; }
.s-find > i { position: absolute; left: 11px; color: var(--muted); font-size: 1.05rem; pointer-events: none; }
.s-find input { width: 100%; min-width: 0; height: 38px; padding: 0 12px 0 34px; font: inherit; font-size: .9rem;
                border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: var(--radius);
                background: var(--bg); color: var(--text); }
.s-find input:focus { outline: none; border-color: var(--primary); }
.s-find input::-webkit-search-cancel-button { -webkit-appearance: none; }
.s-bar .s-find { width: clamp(140px, 20vw, 240px); margin-left: auto; }
.s-find-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
               display: flex; flex-direction: column; padding: 6px; background: var(--bg);
               border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: var(--radius);
               box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.s-find-list a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius); font-size: .88rem; }
.s-find-list a:hover, .s-find-list a.on { background: var(--surface); }
.s-find-list img, .s-find-list .s-tile-blank { width: 38px; height: 38px; object-fit: cover; border-radius: var(--radius); flex: none; }
.s-find-list b { display: block; font-weight: 500; }
.s-find-list span { color: var(--muted); font-size: .8rem; }
.s-find-panel { margin: 12px 14px 4px; }
.s-find-panel input { height: 42px; }
.s-find-big { max-width: 34rem; }
.s-find-big input { height: 46px; font-size: 1rem; }
.s-find-big .s-btn { flex: none; }
.s-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: clamp(24px, 4vw, 40px); }
.s-pager a { min-width: 36px; padding: 8px 10px; text-align: center; border-radius: var(--radius);
             border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); font-size: .9rem; }
.s-pager a[aria-current] { border-color: var(--primary); color: var(--primary); font-weight: 700; }
@media (max-width: 860px) { .s-bar .s-find { display: none; } }

/* ------------------------------------------------------ saved for later --- */
/* The heart is a sibling of the card's link, not a child of it: a button inside
   an anchor is invalid and the click would belong to whichever the browser felt
   like. So the box positions the two, and the card keeps the whole tap target. */
.s-tile-box { position: relative; }
.s-wish { position: absolute; top: 10px; right: 10px; margin: 0; z-index: 2; }
.s-heart { display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
           border: 0; border-radius: 50%; cursor: pointer; font-size: 1.05rem; line-height: 1;
           background: color-mix(in srgb, var(--bg) 86%, transparent);
           color: color-mix(in srgb, var(--text) 60%, transparent);
           backdrop-filter: blur(4px); transition: color .15s, transform .15s; }
.s-heart:hover { transform: scale(1.08); color: #e0245e; }
.s-heart.on { color: #e0245e; }

.s-wish-line { margin: 14px 0 0; }
.s-save { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer;
          border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: var(--radius);
          background: transparent; color: inherit; font: inherit; }
.s-save:hover { border-color: #e0245e; color: #e0245e; }
.s-save.on { border-color: #e0245e; color: #e0245e; }

/* ------------------------------------------------------------- reviews --- */
.s-reviews { margin-top: clamp(32px, 5vw, 56px); }
.s-stars { display: inline-flex; gap: 2px; color: #f5a623; line-height: 1; }
.s-stars.sm { font-size: .85rem; }
.s-tile-stars { display: flex; align-items: center; gap: 2px; padding: 0 16px 2px; color: #f5a623; font-size: .8rem; }
.s-tile-stars .s-note { margin-left: 4px; }

.s-rev-top { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); align-items: center;
             padding: clamp(16px, 3vw, 24px); border-radius: var(--radius);
             background: var(--surface); margin-bottom: clamp(20px, 3vw, 28px); }
.s-rev-score { display: grid; gap: 4px; justify-items: center; min-width: 120px; }
.s-rev-score b { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; }
.s-rev-score .s-stars { font-size: 1.05rem; }
.s-rev-spread { flex: 1; min-width: 200px; display: grid; gap: 6px; }
.s-rev-spread > div { display: grid; grid-template-columns: 34px 1fr 32px; gap: 10px; align-items: center; font-size: .85rem; }
/* Not .s-bar: that is the header, and an 8px overflow-hidden one flattens it. */
.s-rev-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.s-rev-bar > span { display: block; height: 100%; background: #f5a623; }

.s-rev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 3vw, 26px); }
.s-rev-list > li { padding-bottom: clamp(18px, 3vw, 26px); border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.s-rev-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.s-rev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.s-verified { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: #16a34a; }
body.store .s-rev-list h3 { margin: 8px 0 4px; font-size: 1rem; }
.s-rev-list p { margin: 0; }
.s-rev-reply { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius);
               background: var(--surface); font-size: .92rem; }
.s-rev-reply b { display: block; margin-bottom: 4px; }

.s-rev-form { margin-top: clamp(24px, 4vw, 36px); }
.s-rev-form > summary { cursor: pointer; display: inline-block; padding: 10px 18px; border-radius: var(--radius);
                        border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); }
.s-rev-form > summary::-webkit-details-marker { display: none; }
.s-rev-form form { display: grid; gap: 14px; max-width: 620px; margin-top: 18px; }
.s-rev-form label { display: grid; gap: 6px; font-size: .9rem; }
.s-rev-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.s-rev-form input[type="text"], .s-rev-form input[type="tel"], .s-rev-form textarea {
    width: 100%; padding: 11px 13px; font: inherit; color: inherit; background: var(--bg);
    border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: var(--radius); }

/* Five radios drawn as stars. Reversed in the source so the CSS sibling
   combinator can light up everything to the left of the one hovered. */
.s-rate { display: flex; flex-direction: row-reverse; justify-content: flex-end;
          gap: 4px; border: 0; padding: 0; margin: 0; }
.s-rate legend { float: left; width: 100%; font-size: .9rem; margin-bottom: 6px; }
.s-rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.s-rate label { font-size: 1.6rem; cursor: pointer; line-height: 1;
                color: color-mix(in srgb, var(--text) 22%, transparent); transition: color .12s; }
.s-rate input:checked ~ label, .s-rate label:hover, .s-rate label:hover ~ label { color: #f5a623; }
.s-rate input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }
.s-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.s-alert-ok { border-color: #16a34a; color: #16a34a; }