/* ==========================================================================
   Storefront (server-rendered pages in /views/storefront)
   Editorial look: serif display type, spaced uppercase labels, portrait product imagery.
   Brand colours arrive as --brand* variables set per store in the page <head>.
   ========================================================================== */
/* Anything marked hidden stays hidden, whatever display a class gives it */
[hidden] { display: none !important; }
:root {
  --sf-bg: #ffffff;
  --sf-surface: #f7f6f3;
  --sf-line: #e7e4de;
  --sf-text: #16181d;
  --sf-muted: #6b6f78;
  --sf-sale: #b42318;
  --sf-gold: #c9b37e;
  --sf-gold-ink: #2a2414;
  --sf-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sf-sans: 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;
  --sf-max: 1320px;
  --sf-radius: 2px;
}
html[data-theme="dark"] {
  --sf-bg: #111318;
  --sf-surface: #1a1d24;
  --sf-line: #2b2f38;
  --sf-text: #f2f1ee;
  --sf-muted: #a4a8b1;
  --sf-sale: #ff8a7a;
  --brand-text: var(--brand-text-dark);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.sf {
  margin: 0; background: var(--sf-bg); color: var(--sf-text);
  font-family: var(--sf-sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:where(.sf) a { color: inherit; text-decoration: none; }
:where(.sf) img { max-width: 100%; display: block; }
:where(.sf) :is(button, input, select, textarea) { font: inherit; color: inherit; }
.sf :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--sf-max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

/* ---------- Announcement bar (marquee) ---------- */
.announce { background: var(--sf-gold); color: var(--sf-gold-ink); font-family: var(--sf-serif); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.announce__track { display: inline-flex; gap: 0; padding: 7px 0; animation: sf-marquee 40s linear infinite; }
.announce__track span { padding: 0 22px; position: relative; }
.announce__track span::after { content: '·'; position: absolute; right: -3px; }
.announce:hover .announce__track { animation-play-state: paused; }
@keyframes sf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .announce__track { animation: none; } }

/* ---------- Header ---------- */
.masthead { background: var(--brand-deep); color: #fff; }
.masthead__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; }
.masthead__left, .masthead__right { display: flex; align-items: center; gap: 4px; }
.masthead__right { justify-content: flex-end; }
.wordmark span { min-width: 0; }
.wordmark { font-family: var(--sf-sans); font-weight: 300; font-size: 30px; letter-spacing: 0.24em; text-transform: uppercase; text-align: center; line-height: 1; white-space: nowrap; display: flex; align-items: center; gap: 12px; }
.wordmark img { height: 40px; width: auto; }
.monogram { font-family: var(--sf-serif); font-style: italic; font-size: 26px; opacity: 0.9; padding: 6px; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 999px; font-size: 18px; }
.icon-btn:hover { background: rgb(255 255 255 / 0.1); }
.icon-btn .badge { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--sf-gold); color: var(--sf-gold-ink); font-size: 10px; font-weight: 600; line-height: 17px; text-align: center; }
.icon-btn .badge:empty, .icon-btn .badge[data-n="0"] { display: none; }
.currency select { appearance: none; background: transparent; border: 0; color: #fff; font-size: 13px; letter-spacing: 0.08em; cursor: pointer; padding: 6px 8px; }
.currency select option { color: #111; }
.masthead .theme-toggle { background: transparent; border: 0; color: #fff; height: 40px; min-width: 40px; border-radius: 999px; font-size: 16px; }
.masthead .theme-toggle:hover { background: rgb(255 255 255 / 0.1); }
.only-mobile { display: none !important; }
@media (max-width: 900px) {
  .masthead__row { height: 60px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  .masthead__left, .masthead__right { flex-wrap: nowrap; gap: 0; }
  .icon-btn { min-width: 38px; padding: 0 6px; }
  .wordmark { font-size: clamp(14px, 4.4vw, 20px); letter-spacing: 0.14em; min-width: 0; justify-content: center; }
  .wordmark span { overflow: hidden; text-overflow: ellipsis; }
  .wordmark img { height: 30px; }
  .monogram, .hide-mobile { display: none !important; }
  .only-mobile { display: inline-flex !important; }
}

/* Category bar */
.catbar { background: var(--sf-bg); border-bottom: 1px solid var(--sf-line); position: sticky; top: 0; z-index: 30; }
.catbar__list { display: flex; justify-content: center; gap: 34px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.catbar__list::-webkit-scrollbar { display: none; }
.catbar a { display: block; padding: 13px 0; font-family: var(--sf-serif); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; }
.catbar a:hover, .catbar a[aria-current="page"] { border-bottom-color: var(--brand); }
@media (max-width: 900px) { .catbar__list { justify-content: flex-start; gap: 22px; } }

/* Search panel */
.searchbar { display: none; background: var(--sf-bg); border-bottom: 1px solid var(--sf-line); }
.searchbar.open { display: block; }
.searchbar form { display: flex; gap: 10px; padding: 14px 0; position: relative; }
.searchbar input { flex: 1; border: 0; border-bottom: 1px solid var(--sf-text); background: transparent; padding: 10px 2px; font-size: 18px; font-family: var(--sf-serif); outline: none; }
.suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--sf-bg); border: 1px solid var(--sf-line); box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.35); }
.suggest a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.suggest a:hover, .suggest a.active { background: var(--sf-surface); }
.suggest img { width: 38px; height: 48px; object-fit: cover; }
.suggest small { color: var(--sf-muted); display: block; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer.open { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); }
.drawer__panel { position: absolute; inset: 0 auto 0 0; width: min(340px, 86vw); background: var(--sf-bg); padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; animation: sf-slide 0.2s ease-out; }
@keyframes sf-slide { from { transform: translateX(-100%); } }
.drawer__panel a, .drawer__panel button.link { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--sf-line); font-family: var(--sf-serif); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; cursor: pointer; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 30px; border: 1px solid var(--brand-deep); background: var(--brand-deep); color: #fff; font-family: var(--sf-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, color 0.15s; border-radius: var(--sf-radius); }
.btn:hover { background: transparent; color: var(--sf-text); border-color: var(--sf-text); }
.btn--ghost { background: transparent; color: var(--sf-text); border-color: var(--sf-text); }
.btn--ghost:hover { background: var(--sf-text); color: var(--sf-bg); }
.btn--light { background: #fff; color: #111; border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; border-color: #fff; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
html[data-theme="dark"] .btn { background: var(--sf-text); color: var(--sf-bg); border-color: var(--sf-text); }
html[data-theme="dark"] .btn:hover { background: transparent; color: var(--sf-text); }
html[data-theme="dark"] .btn--ghost { background: transparent; color: var(--sf-text); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; justify-content: center; text-align: center; color: #fff; overflow: hidden; background: var(--brand-deep); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.05) 55%); }
.hero__body { position: relative; z-index: 1; padding: 0 20px 72px; max-width: 900px; }
.hero h1 { font-family: var(--sf-serif); font-weight: 500; font-size: clamp(44px, 8vw, 96px); line-height: 0.95; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 14px; }
.hero p { font-size: 17px; margin: 0 0 26px; opacity: 0.92; }
.hero--plain { min-height: 420px; background: radial-gradient(120% 120% at 50% 0%, var(--brand) 0%, var(--brand-deep) 70%); }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }
.section-head { text-align: center; margin-bottom: 32px; }
.section-head h2 { font-family: var(--sf-sans); font-weight: 500; font-size: 24px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; color: var(--brand-text); }
.section-head p { margin: 8px 0 0; color: var(--sf-muted); font-size: 16px; }
.section-cta { text-align: center; margin-top: 34px; }

/* Carousel row */
.rail { position: relative; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
.rail__btn { position: absolute; top: 38%; z-index: 2; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-text); cursor: pointer; box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.3); }
.rail__btn--prev { left: -14px; }
.rail__btn--next { right: -14px; }
.rail__btn[hidden] { display: none; }
@media (max-width: 1000px) { .rail__track { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; } }
@media (max-width: 700px) { .rail__track { grid-auto-columns: 62%; gap: 12px; } .rail__btn { display: none; } }

/* Product grid */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; } }

/* Product card */
.card { position: relative; display: flex; flex-direction: column; }
.card__media { position: relative; aspect-ratio: 3 / 4; background: var(--sf-surface); overflow: hidden; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s ease, transform 0.6s ease; }
.card__media img + img { opacity: 0; }
.card:hover .card__media img + img { opacity: 1; }
.card:hover .card__media img:only-child { transform: scale(1.03); }
.card__badge { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--sf-bg); color: var(--sf-text); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; }
.card__badge--sale { background: var(--sf-sale); color: #fff; }
.card__wish { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgb(255 255 255 / 0.9); color: #111; cursor: pointer; font-size: 15px; }
.card__wish[aria-pressed="true"] { color: var(--sf-sale); }
.card__body { padding-top: 12px; }
.card__brand { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.card__name { font-size: 14px; color: var(--sf-muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__price { margin-top: 6px; font-size: 15px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.card__price s { color: var(--sf-muted); font-size: 13px; }
.card__price .sale { color: var(--sf-sale); }
.card__rating { font-size: 12px; color: var(--sf-muted); margin-top: 2px; }
.card__rating i { color: #b8860b; }
.card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* Category tiles */
.tiles { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--brand-deep); color: #fff; display: flex; align-items: flex-end; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.tile:hover img { transform: scale(1.04); }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent 60%); }
.tile span { position: relative; z-index: 1; padding: 20px; font-family: var(--sf-serif); font-size: 26px; letter-spacing: 0.06em; text-transform: uppercase; }
.tile--plain { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%); }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tile span { font-size: 20px; padding: 14px; } }

/* Editorial banners */
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.editorial a { position: relative; aspect-ratio: 16 / 10; overflow: hidden; color: #fff; background: var(--brand-deep); display: flex; align-items: center; }
.editorial img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.editorial a:hover img { transform: scale(1.03); }
.editorial a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.55), transparent 70%); }
.editorial__body { position: relative; z-index: 1; padding: 28px; max-width: 70%; }
.editorial h3 { font-family: var(--sf-serif); font-weight: 500; font-size: clamp(26px, 3.2vw, 40px); line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 10px; }
.editorial p { margin: 0 0 16px; font-size: 14px; opacity: 0.9; }
.editorial .tag { display: inline-block; border: 1px solid rgb(255 255 255 / 0.85); padding: 6px 12px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 800px) { .editorial { grid-template-columns: 1fr; gap: 16px; } }

/* Perks strip */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); }
.perks div { padding: 26px 16px; text-align: center; font-size: 13px; letter-spacing: 0.06em; color: var(--sf-muted); }
.perks i { display: block; font-size: 20px; color: var(--brand-text); margin-bottom: 8px; }
.perks strong { display: block; color: var(--sf-text); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; margin-bottom: 2px; }
@media (max-width: 800px) { .perks { grid-template-columns: repeat(2, 1fr); } }

/* Newsletter */
.newsletter { background: var(--sf-surface); text-align: center; }
.newsletter form { display: flex; max-width: 480px; margin: 22px auto 0; border-bottom: 1px solid var(--sf-text); }
.newsletter input { flex: 1; border: 0; background: transparent; padding: 12px 4px; outline: none; }
.newsletter button { border: 0; background: transparent; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }

/* ---------- Footer ---------- */
.footer { background: var(--brand-deep); color: rgb(255 255 255 / 0.82); padding: 56px 0 28px; font-size: 14px; }
.footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer h4 { color: #fff; font-family: var(--sf-sans); font-weight: 500; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__brand { font-size: 22px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 300; color: #fff; margin-bottom: 12px; }
.footer__bottom { border-top: 1px solid rgb(255 255 255 / 0.15); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.06em; }
@media (max-width: 800px) { .footer__cols { grid-template-columns: 1fr 1fr; } .footer__cols > :first-child { grid-column: 1 / -1; } }

/* ---------- Listing ---------- */
.crumbs { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a:hover { color: var(--sf-text); }
.crumbs span[aria-hidden] { opacity: 0.5; }
.page-title { text-align: center; padding: 26px 0 6px; }
.page-title h1 { font-family: var(--sf-serif); font-weight: 500; font-size: clamp(32px, 5vw, 52px); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; line-height: 1.05; }
.page-title p { color: var(--sf-muted); margin: 8px 0 0; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--sf-line); margin-bottom: 28px; font-size: 13px; letter-spacing: 0.06em; }
.toolbar select { border: 1px solid var(--sf-line); background: var(--sf-bg); padding: 8px 10px; }
.listing { display: grid; grid-template-columns: 240px 1fr; gap: 40px; }
.filters { font-size: 14px; }
.filters details { border-bottom: 1px solid var(--sf-line); padding: 14px 0; }
.filters details[open] summary { margin-bottom: 10px; }
.filters summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; display: flex; justify-content: space-between; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary::after { content: '+'; font-weight: 400; }
.filters details[open] summary::after { content: '–'; }
.filters label { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.filters label small { margin-left: auto; color: var(--sf-muted); }
.filters input[type="checkbox"], .filters input[type="radio"] { accent-color: var(--brand-deep); width: 16px; height: 16px; }
.filters .price { display: flex; gap: 8px; align-items: center; }
.filters .price input { width: 100%; border: 1px solid var(--sf-line); background: var(--sf-bg); padding: 8px; }
.filters a.cat { display: flex; justify-content: space-between; padding: 4px 0; }
.filters a.cat[aria-current="page"] { font-weight: 600; color: var(--brand-text); }
.filters .clear { display: inline-block; margin-top: 14px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; }
.filters-toggle { display: none; }
@media (max-width: 900px) {
  .listing { grid-template-columns: 1fr; gap: 0; }
  .filters { display: none; padding-bottom: 20px; }
  .filters.open { display: block; }
  .filters-toggle { display: inline-flex; }
}
.empty { text-align: center; padding: 60px 0; color: var(--sf-muted); }
.empty h2 { font-family: var(--sf-serif); font-weight: 500; font-size: 30px; color: var(--sf-text); margin: 0 0 8px; }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 48px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sf-line); font-size: 14px; padding: 0 10px; }
.pager [aria-current="page"] { background: var(--sf-text); color: var(--sf-bg); border-color: var(--sf-text); }
.pager a:hover { border-color: var(--sf-text); }

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; padding: 26px 0 40px; }
.gallery { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-self: start; position: sticky; top: 64px; }
.gallery__thumbs { display: flex; flex-direction: column; gap: 10px; }
.gallery__thumbs button { padding: 0; border: 1px solid transparent; background: var(--sf-surface); cursor: pointer; aspect-ratio: 3 / 4; overflow: hidden; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--sf-text); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery__main { position: relative; aspect-ratio: 3 / 4; background: var(--sf-surface); overflow: hidden; cursor: zoom-in; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; border: 0; background: rgb(255 255 255 / 0.9); color: #111; cursor: pointer; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__count { position: absolute; bottom: 12px; right: 12px; background: rgb(255 255 255 / 0.9); color: #111; font-size: 12px; padding: 3px 9px; }
.pdp__brand { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-text); }
.pdp h1 { font-family: var(--sf-serif); font-weight: 500; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; margin: 8px 0 10px; }
.pdp__rating { font-size: 13px; color: var(--sf-muted); display: flex; gap: 8px; align-items: center; }
.pdp__rating i { color: #b8860b; }
.pdp__price { font-size: 24px; margin: 18px 0 4px; display: flex; gap: 12px; align-items: baseline; }
.pdp__price s { color: var(--sf-muted); font-size: 17px; }
.pdp__price .sale { color: var(--sf-sale); }
.pdp__tax { font-size: 12px; color: var(--sf-muted); }
.opt { margin-top: 24px; border: 0; padding: 0; }
.opt legend { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; padding: 0; }
.opt legend span { font-weight: 400; color: var(--sf-muted); letter-spacing: 0.04em; text-transform: none; margin-left: 6px; }
.opt__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.opt__choices input { position: absolute; opacity: 0; pointer-events: none; }
.opt__choices label { min-width: 48px; padding: 10px 16px; border: 1px solid var(--sf-line); cursor: pointer; font-size: 14px; text-align: center; }
.opt__choices input:checked + label { border-color: var(--sf-text); box-shadow: inset 0 0 0 1px var(--sf-text); }
.opt__choices input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
.opt__choices label.na { color: var(--sf-muted); text-decoration: line-through; }
.stock { margin-top: 18px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.stock i { font-size: 8px; }
.stock--ok i { color: #2e7d32; }
.stock--low i { color: #b26a00; }
.stock--out i { color: var(--sf-sale); }
.buy { display: grid; grid-template-columns: 110px 1fr; gap: 10px; margin-top: 18px; }
.qty { display: flex; border: 1px solid var(--sf-line); }
.qty button { width: 34px; border: 0; background: transparent; cursor: pointer; font-size: 16px; }
.qty input { width: 100%; border: 0; text-align: center; background: transparent; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy-row2 { display: grid; grid-template-columns: 1fr 52px; gap: 10px; margin-top: 10px; }
.wish-btn { border: 1px solid var(--sf-line); background: transparent; cursor: pointer; font-size: 17px; }
.wish-btn[aria-pressed="true"] { color: var(--sf-sale); border-color: var(--sf-sale); }
.pdp__meta { margin-top: 26px; border-top: 1px solid var(--sf-line); }
.pdp__meta details { border-bottom: 1px solid var(--sf-line); padding: 16px 0; }
.pdp__meta summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; display: flex; justify-content: space-between; }
.pdp__meta summary::-webkit-details-marker { display: none; }
.pdp__meta summary::after { content: '+'; font-weight: 400; }
.pdp__meta details[open] summary::after { content: '–'; }
.pdp__meta .body { padding-top: 12px; color: var(--sf-muted); font-size: 14px; white-space: pre-line; }
.pdp__sku { font-size: 12px; color: var(--sf-muted); margin-top: 14px; letter-spacing: 0.04em; }
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: 24px; padding-top: 12px; }
  .gallery { position: static; grid-template-columns: 1fr; }
  .gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .gallery__thumbs button { width: 64px; flex: none; }
}

/* Reviews */
.reviews { display: grid; grid-template-columns: 300px 1fr; gap: 48px; }
.reviews__score { font-family: var(--sf-serif); font-size: 56px; line-height: 1; }
.review { border-bottom: 1px solid var(--sf-line); padding: 18px 0; }
.review__head { display: flex; justify-content: space-between; font-size: 13px; color: var(--sf-muted); }
.review__head strong { color: var(--sf-text); font-weight: 500; }
.review i { color: #b8860b; font-size: 12px; }
.review p { margin: 8px 0 0; }
.review-form { margin-top: 18px; display: grid; gap: 10px; }
.review-form textarea { border: 1px solid var(--sf-line); background: var(--sf-bg); padding: 10px; min-height: 90px; }
.review-form input:not([type]) , .review-form input[name=title] { border: 1px solid var(--sf-line); background: var(--sf-bg); padding: 10px; color: inherit; }
.rbars { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 4px; font-size: 13px; color: var(--sf-muted); }
.rbars li { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 8px; }
.rbars__bar { height: 6px; background: var(--sf-line); border-radius: 3px; overflow: hidden; }
.rbars__bar span { display: block; height: 100%; background: #b8860b; border-radius: 3px; }
.rphotos { display: flex; gap: 8px; flex-wrap: wrap; }
.rphotos:empty { display: none; }
.rphotos figure { position: relative; margin: 0; }
.rphotos img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.rphotos button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--sf-text); color: var(--sf-bg); font-size: 11px; cursor: pointer; }
.rphotos__add { font-size: 13px; color: var(--sf-muted); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.rphotos__add:hover { color: var(--sf-text); }
.rgallery { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; border-bottom: 1px solid var(--sf-line); }
.rgallery img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; display: block; }
.review__ok { font-size: 12px; color: #2f7d4a; font-weight: 500; margin-left: 6px; }
.review .review__ok i { color: #2f7d4a; }
.review__title { font-size: 15px; font-weight: 600; margin: 8px 0 0; }
.review__photos { display: flex; gap: 6px; margin-top: 10px; }
.review__photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; display: block; }
.review__reply { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--sf-line); background: color-mix(in srgb, var(--sf-line) 30%, transparent); font-size: 14px; }
.review__reply p { margin: 4px 0 0; }
.review__help { margin-top: 10px; background: none; border: 1px solid var(--sf-line); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--sf-muted); cursor: pointer; }
.review__help[aria-pressed=true] { color: var(--sf-text); border-color: var(--sf-text); }
.review .review__help i { color: inherit; }
.qa { max-width: 760px; }
.qa__ask { display: flex; gap: 8px; }
.qa__ask input { flex: 1; min-width: 0; border: 1px solid var(--sf-line); background: var(--sf-bg); padding: 10px; color: inherit; }
.qa__list { margin: 16px 0 0; }
.qa__item { border-bottom: 1px solid var(--sf-line); padding: 14px 0; }
.qa__item dt { font-weight: 600; }
.qa__item dd { margin: 6px 0 0; color: var(--sf-muted); }
.qa__item span { display: inline-block; width: 20px; font-weight: 700; color: var(--sf-text); }
.stars-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars-input input { position: absolute; opacity: 0; }
.stars-input label { cursor: pointer; font-size: 22px; color: var(--sf-line); }
.stars-input input:checked ~ label, .stars-input label:hover, .stars-input label:hover ~ label { color: #b8860b; }
@media (max-width: 800px) { .reviews { grid-template-columns: 1fr; gap: 20px; } }

/* Zoom */
.zoom { position: fixed; inset: 0; z-index: 70; background: rgb(10 10 10 / 0.94); display: flex; align-items: center; justify-content: center; }
.zoom img { max-width: 94vw; max-height: 92vh; object-fit: contain; cursor: zoom-in; transition: transform 0.15s; }
.zoom button { position: absolute; width: 46px; height: 46px; border-radius: 999px; border: 0; background: rgb(255 255 255 / 0.12); color: #fff; cursor: pointer; font-size: 18px; }
.zoom [data-z="close"] { top: 16px; right: 16px; }
.zoom [data-z="-1"] { left: 16px; }
.zoom [data-z="1"] { right: 16px; }

/* Notices */
.notice { background: var(--sf-surface); border-bottom: 1px solid var(--sf-line); text-align: center; padding: 10px 16px; font-size: 14px; }
.notice--warn { background: #fff4e5; color: #6b3d00; }
html[data-theme="dark"] .notice--warn { background: #3a2a10; color: #ffd9a3; }

/* Toasts from ui.js, restyled for the light storefront */
.sf .ui-toast { background: var(--sf-text); color: var(--sf-bg); border: 0; border-radius: 0; }
.sf .ui-toast button { color: inherit; }

/* ---------- Sign in / create account (/login) ---------- */
.auth { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 72px; align-items: start; padding: 56px 0 80px; max-width: 1040px; margin: 0 auto; }
.auth__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-text); margin: 0; }
.auth h1 { font-family: var(--sf-serif); font-weight: 500; font-size: clamp(38px, 5vw, 56px); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; margin: 10px 0 14px; }
.auth__lead { color: var(--sf-muted); font-size: 16px; margin: 0 0 28px; max-width: 420px; }
.auth__perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; border-top: 1px solid var(--sf-line); padding-top: 24px; }
.auth__perks li { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.auth__perks i { width: 18px; text-align: center; color: var(--brand-text); }
.auth__card { border: 1px solid var(--sf-line); background: var(--sf-bg); padding: 32px; }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--sf-line); margin: -8px 0 26px; }
.auth__tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 4px; margin-bottom: -1px; cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-muted); }
.auth__tabs button[aria-selected="true"] { color: var(--sf-text); border-bottom-color: var(--sf-text); }
.auth__form { display: grid; gap: 18px; }
.auth__form[hidden] { display: none; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; }
.field label .link-btn, .field label .optional { font-size: 12px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
.field label .optional { color: var(--sf-muted); }
.field input { width: 100%; border: 1px solid var(--sf-line); background: var(--sf-bg); padding: 13px 14px; font-size: 15px; border-radius: var(--sf-radius); }
.field input:focus { outline: none; border-color: var(--sf-text); box-shadow: 0 0 0 1px var(--sf-text); }
.field input[aria-invalid="true"] { border-color: var(--sf-sale); }
.field small { color: var(--sf-muted); font-size: 12px; }
.field__pw { position: relative; }
.field__pw input { padding-right: 46px; }
.field__eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: none; cursor: pointer; color: var(--sf-muted); }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: inherit; font: inherit; }
.auth__switch, .auth__note, .auth__demo { margin: 0; font-size: 14px; color: var(--sf-muted); text-align: center; }
.auth__note { text-align: left; }
.auth__demo { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--sf-line); font-size: 13px; }
.auth__error { margin: 0; padding: 10px 12px; background: rgb(180 35 24 / 0.08); color: var(--sf-sale); font-size: 14px; border-left: 2px solid var(--sf-sale); }
.auth__error[hidden] { display: none; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; gap: 28px; padding: 28px 0 56px; }
  .auth__intro { text-align: center; }
  .auth__lead { margin-left: auto; margin-right: auto; }
  .auth__perks { display: none; }
  .auth__card { padding: 24px 18px; }
}

/* ---------- Square product imagery (groceries, packaged goods) ---------- */
.sf--square .card__media, .sf--square .gallery__main, .sf--square .gallery__thumbs button { aspect-ratio: 1 / 1; }
.sf--square .card__media, .sf--square .gallery__main { background: #fff; border: 1px solid var(--sf-line); }
.sf--square .tile { aspect-ratio: 4 / 3; }
html[data-theme="dark"] .sf--square .card__media, html[data-theme="dark"] .sf--square .gallery__main { background: var(--sf-surface); }

/* Price per kg + details table */
.pdp__unit { font-size: 13px; color: var(--sf-muted); margin-bottom: 4px; }
.specs { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.specs th, .specs td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--sf-line); vertical-align: top; }
.specs th { width: 42%; font-weight: 500; color: var(--sf-muted); }
/* Bulk price tiers on the product page */
.tiers { margin: 4px 0 16px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-surface); }
.tiers__head { padding: 10px 14px; font-size: 13px; font-weight: 600; letter-spacing: .02em; border-bottom: 1px solid var(--sf-line); }
.tiers__head i { color: var(--brand, currentColor); margin-right: 6px; }
.tiers table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tiers th, .tiers td { padding: 8px 14px; text-align: left; }
.tiers th { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--sf-muted); }
.tiers td:last-child, .tiers th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tiers tr + tr td { border-top: 1px solid var(--sf-line); }
.tiers tr.on td { font-weight: 600; background: color-mix(in srgb, var(--brand, #000) 8%, transparent); }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }

/* ---------- Content pages, contact & bulk-order forms ---------- */
.cpage { display: grid; gap: 56px; padding: 28px 0 80px; }
.cpage--contact { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; }
@media (max-width: 900px) { .cpage--contact { grid-template-columns: 1fr; gap: 36px; } }
.cpage__body { max-width: 720px; }
.cpage__body h1 { font-family: var(--sf-serif); font-weight: 500; font-size: clamp(34px, 5vw, 52px); line-height: 1.05; margin: 8px 0 24px; }
.cpage .eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sf-muted); margin: 0; }
.cpage__updated { margin-top: 40px; font-size: 13px; color: var(--sf-muted); }
.prose { font-size: 16px; line-height: 1.75; color: var(--sf-text); }
.prose h2 { font-family: var(--sf-serif); font-weight: 500; font-size: 28px; margin: 36px 0 10px; line-height: 1.2; }
.prose h3 { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; margin: 26px 0 6px; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 4px 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-left: 2px solid var(--brand); padding: 6px 0 6px 16px; color: var(--sf-muted); font-size: 14px; }
.prose .faq { border-bottom: 1px solid var(--sf-line); }
.prose .faq:first-child { border-top: 1px solid var(--sf-line); }
.prose .faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-weight: 500; font-size: 17px; }
.prose .faq summary::-webkit-details-marker { display: none; }
.prose .faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font-size: 22px; font-weight: 300; transition: transform 0.2s; }
.prose .faq[open] summary::after { transform: rotate(45deg); }
.prose .faq__a { padding: 0 0 18px; color: var(--sf-muted); }
.prose .faq__a p:last-child { margin-bottom: 0; }

.contact-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; }
.contact-list i { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--sf-line); border-radius: 50%; flex: none; }
.contact-list span { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-muted); margin-bottom: 2px; }
.contact-list a:hover { text-decoration: underline; }

.enq-form { display: grid; gap: 16px; padding: 28px; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); }
.enq-form h2 { font-family: var(--sf-serif); font-weight: 500; font-size: 28px; margin: 0 0 4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } .enq-form { padding: 20px; } }
.field textarea, .field select { width: 100%; border: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-text); padding: 12px 14px; font: inherit; font-size: 15px; border-radius: var(--sf-radius); }
.field textarea { resize: vertical; min-height: 96px; }
.field textarea:focus, .field select:focus { outline: none; border-color: var(--sf-text); box-shadow: 0 0 0 1px var(--sf-text); }
.field input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin: 0; font-size: 14px; min-height: 0; }
.form-msg:empty { display: none; }
.form-msg.ok { color: #1f7a3d; }
.form-msg.err { color: var(--sf-sale); }
html[data-theme="dark"] .form-msg.ok { color: #7ad69a; }
.enq-items { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.enq-items legend { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; padding: 0; }
.enq-line { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; gap: 8px; align-items: start; }
.enq-line .enq-line__variant { grid-column: 1 / 2; }
.enq-line input[type="number"] { text-align: center; }
.enq-line .rm { height: 46px; border: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-muted); cursor: pointer; border-radius: var(--sf-radius); }
.enq-line .rm:hover { color: var(--sf-sale); }
.enq-line .hint { grid-column: 1 / -1; font-size: 12px; color: var(--sf-muted); margin-top: -4px; }
.enq-done { text-align: center; padding: 24px 8px; }
.enq-done i { font-size: 34px; color: var(--brand); }
.enq-done h2 { margin: 12px 0 6px; }

.pdp__bulk { margin: 14px 0 0; font-size: 14px; color: var(--sf-muted); }
.pdp__bulk a { color: var(--sf-text); text-decoration: underline; text-underline-offset: 3px; }

/* WhatsApp chat button */
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #1f9d55; color: #fff; font-size: 28px; box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .15s; }
.wa-fab:hover { transform: scale(1.06); }
.wa-fab:focus-visible { outline: 3px solid var(--sf-text); outline-offset: 3px; }
@media (max-width: 720px) { .wa-fab { bottom: 84px; right: 14px; width: 50px; height: 50px; font-size: 26px; } }

/* Delivery check on the product page */
.pin { margin: 18px 0 0; padding: 14px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); }
.pin label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.pin label i { margin-right: 6px; color: var(--sf-muted); }
.pin__row { display: flex; gap: 8px; }
.pin__row input { flex: 1; min-width: 0; border: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-text); padding: 0 12px; height: 44px; font-size: 15px; letter-spacing: 0.08em; border-radius: var(--sf-radius); }
.pin__row input:focus { outline: none; border-color: var(--sf-text); }
.pin__row .btn { min-height: 44px; padding: 0 18px; letter-spacing: 0.1em; }
html[data-theme="dark"] .pin__row .btn--ghost { background: transparent; color: var(--sf-text); }
html[data-theme="dark"] .pin__out.ok > div > i { color: #7ad69a; }
.pin__out { font-size: 14px; }
.pin__out:not(:empty) { margin-top: 10px; }
.pin__out ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.pin__out li { display: flex; justify-content: space-between; gap: 12px; color: var(--sf-muted); font-size: 13px; }
.pin__out li span:last-child { color: var(--sf-text); font-variant-numeric: tabular-nums; }
.pin__out.ok > div > i { color: #1f7a3d; }
.pin__out.err { color: var(--sf-sale); }
.pin__cod { margin-top: 6px; font-size: 13px; color: var(--sf-muted); }

/* =====================================================================
   Shopper app pages: bag, checkout, account, tracking
   ===================================================================== */
.app { padding: 28px 24px 88px; }
.app--narrow { max-width: 820px; }
.app__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.app__head h1, .acct-head h1, .co-done h1 { font-family: var(--sf-serif); font-weight: 500; font-size: clamp(32px, 4.5vw, 46px); line-height: 1.05; margin: 0; }
.app__count { font-family: var(--sf-sans); font-size: 18px; color: var(--sf-muted); font-weight: 400; }
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
@media (max-width: 980px) { .app-grid { grid-template-columns: 1fr; gap: 32px; } }
.muted { color: var(--sf-muted); }
.err { color: var(--sf-sale); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sf-muted); margin: 0 0 6px; }
.app-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--sf-sale) 35%, transparent); background: color-mix(in srgb, var(--sf-sale) 7%, transparent); color: var(--sf-text); font-size: 14px; border-radius: var(--sf-radius); }
.app-alert i { color: var(--sf-sale); margin-top: 3px; }
.app-alert a { text-decoration: underline; }
.recover { padding: 12px 16px; margin-bottom: 20px; background: var(--brand-tint, var(--sf-surface)); border: 1px solid var(--sf-line); font-size: 14px; }
.recover i { margin-right: 6px; }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 12px; letter-spacing: 0.12em; }
.btn.is-disabled, .btn[disabled] { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
.btn[disabled] { pointer-events: auto; }
.link-btn--danger { color: var(--sf-sale); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand-deep); }
.check[hidden] { display: none; }
.bar { display: block; height: 4px; background: var(--sf-line); margin-top: 8px; border-radius: 4px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand-deep); border-radius: 4px; }
html[data-theme="dark"] .bar > span { background: var(--sf-text); }
.note { padding: 10px 12px; background: var(--sf-surface); font-size: 14px; margin: 12px 0 0; }
.note i { margin-right: 6px; color: var(--sf-muted); }

/* Bag lines */
.lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sf-line); }
.lines__skel { height: 112px; margin: 12px 0; background: linear-gradient(90deg, var(--sf-surface), var(--sf-line), var(--sf-surface)); background-size: 200% 100%; animation: sfShimmer 1.2s infinite; border-radius: var(--sf-radius); list-style: none; }
@keyframes sfShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lines__skel { animation: none; } }
.lines .empty { border-bottom: 1px solid var(--sf-line); }
.lines .empty i { font-size: 30px; margin-bottom: 14px; display: block; }
.lines .empty .btn { margin-top: 18px; }
.line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 100px 36px; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--sf-line); }
.line__img { display: block; aspect-ratio: 3 / 4; background: var(--sf-surface); overflow: hidden; }
.sf--square .line__img { aspect-ratio: 1; }
.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line--out .line__img img { filter: grayscale(1); opacity: 0.6; }
.line__info { display: grid; gap: 3px; min-width: 0; }
.line__name { font-weight: 500; font-size: 16px; }
.line__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.line__var, .line__unit { font-size: 13px; color: var(--sf-muted); }
.line__warn { font-size: 13px; color: var(--sf-sale); font-weight: 500; }
.line__low { font-size: 13px; color: #9a5b00; }
html[data-theme="dark"] .line__low { color: #f0b45b; }
.line__tier { font-size: 12px; color: var(--sf-muted); padding: 2px 8px; border: 1px dashed var(--sf-line); justify-self: start; margin-top: 2px; }
.line__tier--on { border-style: solid; color: var(--sf-text); }
.line__qty { display: grid; gap: 4px; justify-items: center; }
.line__moq { font-size: 11px; color: var(--sf-muted); }
.qty--sm { height: 40px; width: 116px; }
.qty--sm button { width: 36px; }
.qty--sm button[disabled] { opacity: 0.3; cursor: not-allowed; }
.line__total { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.line__rm { width: 36px; height: 36px; border: 0; background: transparent; color: var(--sf-muted); cursor: pointer; font-size: 16px; }
.line__rm:hover { color: var(--sf-sale); }
.lines__foot { padding: 14px 0; text-align: right; font-size: 13px; }
@media (max-width: 640px) {
  .line { grid-template-columns: 80px minmax(0, 1fr) 32px; grid-template-areas: 'img info rm' 'img qty total'; gap: 10px 14px; align-items: start; }
  .line__img { grid-area: img; } .line__info { grid-area: info; } .line__rm { grid-area: rm; } .line__qty { grid-area: qty; justify-items: start; } .line__total { grid-area: total; align-self: center; }
}

/* Summary panel */
.summary { position: sticky; top: 24px; padding: 28px; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); display: grid; gap: 18px; }
.summary h2 { font-family: var(--sf-serif); font-weight: 500; font-size: 28px; margin: 0; }
@media (max-width: 980px) { .summary { position: static; } }
@media (max-width: 520px) { .summary { padding: 20px; } }
.promo label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.promo__row { display: flex; gap: 8px; }
.promo__row input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-text); font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; border-radius: var(--sf-radius); }
.promo__row input:focus { outline: none; border-color: var(--sf-text); }
.promo__row .btn { min-height: 44px; padding: 0 16px; letter-spacing: 0.1em; }
.promo__msg { font-size: 13px; margin: 8px 0 0; }
.promo__msg:empty { display: none; }
.promo__msg.ok { color: var(--sf-text); }
.promo__msg.ok i { color: #1f7a3d; margin-right: 4px; }
.promo__msg.err { color: var(--sf-sale); }
.sum { margin: 0; display: grid; gap: 10px; font-size: 15px; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; }
.sum dt { color: var(--sf-muted); }
.sum dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.sum[hidden], .sum > div[hidden] { display: none; }
.sum__save { color: #1f7a3d; }
html[data-theme="dark"] .sum__save, html[data-theme="dark"] .promo__msg.ok i { color: #7ad69a; }
.sum__detail { justify-content: flex-end !important; font-size: 12px; color: var(--sf-muted); margin-top: -6px; }
.sum__total { padding-top: 14px; border-top: 1px solid var(--sf-line); font-size: 18px; font-weight: 600; }
.sum__total dt { color: var(--sf-text); }
.sum__due { font-weight: 600; }
.sum__due dt { color: var(--sf-text); }
.sum__note { font-size: 13px; color: var(--sf-muted); margin: 0; }
.sum__note:empty { display: none; }
.sum__note a { text-decoration: underline; }
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: var(--sf-muted); }
.trust i { width: 18px; color: var(--sf-text); }
.trust a { text-decoration: underline; }

/* Checkout */
.co-steps { display: grid; gap: 36px; }
.co-step h2 { display: flex; align-items: center; gap: 12px; font-family: var(--sf-serif); font-weight: 500; font-size: 28px; margin: 0 0 18px; }
.co-step__n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sf-text); display: grid; place-items: center; font-family: var(--sf-sans); font-size: 14px; font-weight: 500; flex: none; }
.co-form { display: grid; gap: 14px; }
.field-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) { .field-row--3 { grid-template-columns: 1fr 1fr; } .field-row--3 > :first-child { grid-column: 1 / -1; } }
.field input:disabled { background: var(--sf-surface); color: var(--sf-muted); }
.addr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.addr-chips__label { width: 100%; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.addr-chip { text-align: left; padding: 12px 14px; min-width: 200px; max-width: 280px; border: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-text); cursor: pointer; display: grid; gap: 2px; font: inherit; font-size: 14px; border-radius: var(--sf-radius); position: relative; }
.addr-chip span { color: var(--sf-muted); font-size: 13px; }
.addr-chip em { position: absolute; top: 8px; right: 10px; font-style: normal; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-muted); }
.addr-chip[aria-pressed="true"] { border-color: var(--sf-text); box-shadow: 0 0 0 1px var(--sf-text); }
.addr-chip--new { place-content: center; min-width: 160px; border-style: dashed; }
.ship-opts, .pay-opts { display: grid; gap: 10px; }
.opt-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--sf-line); cursor: pointer; border-radius: var(--sf-radius); background: var(--sf-bg); }
.opt-card:has(input:checked) { border-color: var(--sf-text); box-shadow: 0 0 0 1px var(--sf-text); }
.opt-card input { width: 18px; height: 18px; accent-color: var(--brand-deep); flex: none; }
.opt-card__main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.opt-card__main span { font-size: 13px; color: var(--sf-muted); }
.opt-card__price { font-weight: 500; font-variant-numeric: tabular-nums; }
.opt-card__icon { width: 24px; text-align: center; font-size: 18px; color: var(--sf-muted); }
.biz { margin-top: 16px; display: grid; gap: 12px; }
.mini-lines, .ocard__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mini-lines li, .ocard__items li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.mini__img { position: relative; width: 56px; flex: none; aspect-ratio: 3 / 4; background: var(--sf-bg); border: 1px solid var(--sf-line); }
.sf--square .mini__img { aspect-ratio: 1; }
.mini__img img { width: 100%; height: 100%; object-fit: cover; }
.mini__q { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--sf-text); color: var(--sf-bg); font-size: 11px; display: grid; place-items: center; }
.mini__name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mini__name span { font-size: 12px; color: var(--sf-muted); }
.mini__p { font-variant-numeric: tabular-nums; white-space: nowrap; }
.extras { display: grid; border-top: 1px solid var(--sf-line); }
.extra { border-bottom: 1px solid var(--sf-line); padding: 12px 0; font-size: 14px; }
.extra summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; }
.extra summary::-webkit-details-marker { display: none; }
.extra summary::after { content: '+'; margin-left: auto; font-size: 18px; font-weight: 300; }
.extra[open] summary::after { content: '−'; }
.extra summary i { width: 16px; color: var(--sf-muted); }
.extra > :not(summary) { margin-top: 12px; }
.extra__on { display: flex; justify-content: space-between; gap: 10px; }
.extra__row { display: flex; justify-content: space-between; font-size: 13px; }
.range { width: 100%; accent-color: var(--brand-deep); }
.co-done { max-width: 640px; margin: 24px auto 0; text-align: center; padding: 48px 24px; display: grid; gap: 10px; justify-items: center; }
.co-done > i { font-size: 46px; color: #1f7a3d; }
html[data-theme="dark"] .co-done > i { color: #7ad69a; }
.co-done:focus { outline: none; }
.done-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--sf-line); border: 1px solid var(--sf-line); width: 100%; margin: 16px 0; text-align: left; }
.done-facts div { background: var(--sf-bg); padding: 12px 14px; }
.done-facts dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-muted); }
.done-facts dd { margin: 4px 0 0; font-weight: 500; }
.done-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.paybox, .sheet { position: fixed; inset: 0; z-index: 80; background: rgba(10, 12, 16, 0.55); display: grid; place-items: center; padding: 16px; }
.paybox[hidden], .sheet[hidden] { display: none; }
.paybox__card { width: min(460px, 100%); background: var(--sf-bg); padding: 28px; border-radius: var(--sf-radius); display: grid; gap: 14px; }
.paybox__card h2, .sheet__head h2 { font-family: var(--sf-serif); font-weight: 500; font-size: 26px; margin: 0; }
.card-el { padding: 14px; border: 1px solid var(--sf-line); margin-top: 10px; background: #fff; }

/* Account */
.acct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--sf-line); margin-bottom: 32px; }
.acct-head p.muted { margin: 6px 0 0; }
.acct { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .acct { grid-template-columns: 1fr; gap: 20px; } }
.acct__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: sticky; top: 24px; }
.acct__nav button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: transparent; color: var(--sf-muted); font: inherit; font-size: 15px; cursor: pointer; text-align: left; border-left: 2px solid transparent; }
.acct__nav button i { width: 18px; }
.acct__nav button:hover { color: var(--sf-text); }
.acct__nav button[aria-selected="true"] { color: var(--sf-text); border-left-color: var(--sf-text); background: var(--sf-surface); font-weight: 500; }
.acct__badge { margin-left: auto; font-size: 12px; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .acct__nav ul { position: static; display: flex; overflow-x: auto; gap: 0; border-bottom: 1px solid var(--sf-line); scrollbar-width: none; }
  .acct__nav li { flex: none; }
  .acct__nav button { border-left: 0; border-bottom: 2px solid transparent; padding: 12px 14px; white-space: nowrap; }
  .acct__nav button[aria-selected="true"] { border-bottom-color: var(--sf-text); background: transparent; }
  .acct__badge { margin-left: 4px; }
}
.acct__h { font-family: var(--sf-serif); font-weight: 500; font-size: 30px; margin: 0 0 18px; }
.acct__sub { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin: 32px 0 12px; }
.acct__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.acct__body .empty { padding: 48px 0; }
.acct__body .empty i { font-size: 28px; display: block; margin-bottom: 12px; }
.acct__body .empty .btn { margin-top: 16px; }
.ocard { border: 1px solid var(--sf-line); padding: 22px; margin-bottom: 18px; display: grid; gap: 16px; border-radius: var(--sf-radius); }
.ocard__head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ocard__head h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ocard__head p { margin: 0; font-size: 13px; }
.ocard__acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ocard__ship { margin: 0; font-size: 14px; }
.ocard__ship i { margin-right: 6px; color: var(--sf-muted); }
.ocard__ship a { text-decoration: underline; text-underline-offset: 3px; }
.ocard__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; padding-top: 14px; border-top: 1px solid var(--sf-line); }
.ocard__links { display: flex; gap: 18px; flex-wrap: wrap; }
.st { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--sf-line); color: var(--sf-muted); border-radius: 20px; }
.st--shipped, .st--approved, .st--received { color: var(--sf-text); border-color: var(--sf-text); }
.st--delivered, .st--refunded { background: var(--sf-text); color: var(--sf-bg); border-color: var(--sf-text); }
.st--cancelled, .st--rejected { color: var(--sf-sale); border-color: color-mix(in srgb, var(--sf-sale) 50%, transparent); }
.progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.progress--4 { grid-template-columns: repeat(4, 1fr); }
.progress li { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); }
.progress li::before { content: ''; display: block; height: 3px; background: var(--sf-line); margin-bottom: 8px; }
.progress li.on { color: var(--sf-text); }
.progress li.on::before { background: var(--sf-text); }
.progress li.now { font-weight: 600; }
@media (max-width: 520px) { .progress li span { display: none; } .progress li.now span { display: inline; white-space: nowrap; } }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px; }
.wcard { display: grid; gap: 6px; font-size: 14px; justify-items: start; }
.wcard__img { width: 100%; aspect-ratio: 3 / 4; background: var(--sf-surface); overflow: hidden; display: block; }
.sf--square .wcard__img { aspect-ratio: 1; }
.wcard__img img { width: 100%; height: 100%; object-fit: cover; }
.wcard__name { font-weight: 500; }
.wcard__price { color: var(--sf-muted); }
.points { padding: 24px; background: var(--sf-surface); border: 1px solid var(--sf-line); display: grid; gap: 8px; max-width: 560px; }
.points__n { font-size: 15px; color: var(--sf-muted); }
.points__n span { font-family: var(--sf-serif); font-size: 52px; color: var(--sf-text); line-height: 1; margin-right: 6px; }
.points p { margin: 0; font-size: 14px; }
.points__how { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.hist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sf-line); max-width: 680px; }
.hist li { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sf-line); font-size: 14px; align-items: center; }
.hist li > span:first-child { display: grid; }
.hist li .muted { font-size: 12px; }
.hist .plus { color: #1f7a3d; font-weight: 600; } .hist .minus { color: var(--sf-sale); font-weight: 600; }
html[data-theme="dark"] .hist .plus { color: #7ad69a; }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.acard { position: relative; border: 1px solid var(--sf-line); padding: 18px; display: grid; gap: 12px; font-size: 14px; line-height: 1.6; border-radius: var(--sf-radius); }
.acard p { margin: 0; }
.acard__def { position: absolute; top: 12px; right: 12px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-muted); }
.acard__acts { display: flex; gap: 16px; font-size: 13px; }
.notes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sf-line); }
.notes a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 14px 0 14px 16px; border-bottom: 1px solid var(--sf-line); font-size: 14px; position: relative; }
.notes a span { grid-column: 1; color: var(--sf-muted); }
.notes a time { grid-row: 1; grid-column: 2; font-size: 12px; color: var(--sf-muted); }
.notes a.unread::before { content: ''; position: absolute; left: 0; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-deep); }
.notes a:hover strong { text-decoration: underline; }
.sheet { place-items: end center; }
@media (min-width: 640px) { .sheet { place-items: center; } }
.sheet__card { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: var(--sf-bg); padding: 24px; border-radius: var(--sf-radius); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sheet-form { display: grid; gap: 14px; }
.sheet-form.narrow { max-width: 440px; }
.sheet-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.sheet-form legend { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; padding: 0; }
.ret-item { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--sf-line); cursor: pointer; font-size: 14px; }
.ret-item input { width: 18px; height: 18px; accent-color: var(--brand-deep); }
.ret-item select { border: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-text); padding: 6px; }
.ret-item.is-off { opacity: 0.5; cursor: default; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--sf-line); }
.seg label { position: relative; text-align: center; cursor: pointer; font-size: 14px; }
.seg label + label { border-left: 1px solid var(--sf-line); }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: block; padding: 11px 6px; }
.seg input:checked + span { background: var(--sf-text); color: var(--sf-bg); }
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -4px; }

/* Tracking */
.track-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; padding: 24px; background: var(--sf-surface); border: 1px solid var(--sf-line); margin-bottom: 32px; }
.track-form .form-msg { grid-column: 1 / -1; }
@media (max-width: 640px) { .track-form { grid-template-columns: 1fr; } }
.track { display: grid; gap: 22px; }
.track:focus { outline: none; }
.track__head h2 { font-family: var(--sf-serif); font-weight: 500; font-size: 36px; margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.track__head p { margin: 6px 0 0; }
.track__eta { font-size: 16px; }
.track__eta i { margin-right: 6px; }
.track__courier { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--sf-text); }
.track__courier div { display: grid; gap: 2px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--sf-line); display: grid; gap: 22px; }
.timeline li { position: relative; display: grid; gap: 2px; font-size: 14px; color: var(--sf-muted); }
.timeline li::before { content: ''; position: absolute; left: -28px; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--sf-line); background: var(--sf-bg); }
.timeline li.done { color: var(--sf-text); }
.timeline li.done::before { background: var(--sf-text); border-color: var(--sf-text); }
.timeline li.now::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sf-text) 15%, transparent); }
.timeline li strong { font-weight: 500; color: inherit; }
.timeline time { font-size: 12px; color: var(--sf-muted); }
.track__foot { font-size: 14px; border-top: 1px solid var(--sf-line); padding-top: 14px; }

/* Quick view, sticky bag bar, recently viewed */
.card__quick { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; min-height: 40px; border: 0; background: color-mix(in srgb, var(--sf-bg) 92%, transparent); color: var(--sf-text); font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s; }
.card:hover .card__quick, .card__quick:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .card__quick { display: none; } }
.qv { position: fixed; inset: 0; z-index: 90; background: rgba(10, 12, 16, .55); display: grid; place-items: center; padding: 16px; }
.qv__card { position: relative; width: min(920px, 100%); max-height: 92vh; overflow-y: auto; background: var(--sf-bg); padding: 28px; border-radius: var(--sf-radius); }
.qv__x { position: absolute; top: 10px; right: 10px; }
.qv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 700px) { .qv__grid { grid-template-columns: 1fr; } }
.qv__img { aspect-ratio: 3 / 4; background: var(--sf-surface); overflow: hidden; }
.sf--square .qv__img { aspect-ratio: 1; }
.qv__img img { width: 100%; height: 100%; object-fit: cover; }
.qv__info { display: grid; gap: 14px; align-content: start; }
.qv__info h2 { font-family: var(--sf-serif); font-weight: 500; font-size: 32px; margin: 0; line-height: 1.1; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--sf-bg); border-top: 1px solid var(--sf-line); box-shadow: 0 -6px 18px rgba(0,0,0,.06); }
.buybar__info { flex: 1; min-width: 0; display: grid; }
.buybar__name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__price { font-weight: 600; }
.buybar .btn { min-height: 44px; padding: 0 20px; }
body.has-buybar .wa-fab { bottom: 84px; }
.recent-wrap .section-head { display: flex; justify-content: center; align-items: baseline; gap: 16px; }
.recent { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 180px); gap: 18px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
.recent a { display: grid; gap: 6px; font-size: 14px; }
.recent__img { aspect-ratio: 3 / 4; background: var(--sf-surface); overflow: hidden; display: block; }
.sf--square .recent__img { aspect-ratio: 1; }
.recent__img img { width: 100%; height: 100%; object-fit: cover; }
.recent__price { color: var(--sf-muted); }
.card__unit { font-size: 12px; color: var(--sf-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.notify { margin-top: 14px; padding: 14px; border: 1px dashed var(--sf-line); display: grid; gap: 8px; }
.notify p { margin: 0; font-size: 14px; }
.notify i { margin-right: 6px; }
.auth__optin { font-size: 13px; color: var(--sf-muted); align-items: flex-start; }
.auth__optin input { margin-top: 2px; }
.optins { border: 0; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.optins legend { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; padding: 0; }

/* Subscribe & save */
.plan { border: 0; padding: 0; margin: 14px 0 4px; display: grid; gap: 8px; }
.plan__opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--sf-line); padding: 12px 14px; cursor: pointer; border-radius: 4px; }
.plan__opt.on { border-color: var(--sf-text); }
.plan__opt input { margin-top: 3px; accent-color: var(--sf-text); }
.plan__opt span { display: grid; gap: 2px; }
.plan__opt small { color: var(--sf-muted); font-size: 12px; }
.plan__every { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 2px 2px 0; }
.plan__every select { border: 1px solid var(--sf-line); background: var(--sf-bg); color: inherit; padding: 8px 10px; }
.subs { display: grid; gap: 14px; }
.sub-card { border: 1px solid var(--sf-line); border-radius: 6px; padding: 14px; display: grid; grid-template-columns: 64px 1fr; gap: 14px; }
.sub-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; background: var(--sf-line); }
.sub-card h3 { margin: 0; font-size: 15px; }
.sub-card__meta { color: var(--sf-muted); font-size: 13px; margin-top: 4px; }
.sub-card__next { margin-top: 6px; font-size: 14px; }
.sub-card__err { margin-top: 6px; font-size: 13px; color: #b42318; }
.sub-card__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sub-card__acts .btn { padding: 6px 12px; font-size: 12px; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--sf-line); margin-left: 6px; vertical-align: middle; }
.pill--ok { background: #e3f1e7; color: #1f6b3a; }
.pill--wait { background: #fdf1dc; color: #8a5a00; }
.sub-form { display: grid; gap: 10px; }
.sub-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sub-form label { font-size: 12px; font-weight: 600; display: grid; gap: 4px; }
.sub-form input, .sub-form select { border: 1px solid var(--sf-line); background: var(--sf-bg); color: inherit; padding: 9px 10px; font-weight: 400; font-size: 14px; }
.sub-sum { border-top: 1px solid var(--sf-line); padding-top: 10px; font-size: 14px; display: grid; gap: 4px; }
.sub-sum div { display: flex; justify-content: space-between; }
.sub-sum .tot { font-weight: 600; }

/* Hindi / Marathi: Devanagari letters join up, so no letter spacing or capitals tricks */
html:is([lang="hi"], [lang="mr"]) body * { letter-spacing: normal !important; }
.ocard__otp strong { font-size: 18px; letter-spacing: .15em; }

/* ---------- Help & support (bubble, panel, conversation) ---------- */
.help-fab { position: fixed; right: 20px; bottom: 20px; z-index: 41; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--brand-deep); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .15s; }
.help-fab:hover { transform: translateY(-1px); }
.help-fab:focus-visible { outline: 3px solid var(--sf-text); outline-offset: 3px; }
.help-fab i { font-size: 18px; }
.help-fab--stacked { bottom: 86px; }
.help-panel { position: fixed; right: 20px; bottom: 80px; z-index: 60; width: min(380px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--sf-bg); color: var(--sf-text); border: 1px solid var(--sf-line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.22); overflow: hidden; }
.help-panel--high { bottom: 146px; }
.help-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--brand-deep); color: #fff; }
.help-panel__head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.help-panel__x { width: 36px; height: 36px; border: 0; background: transparent; color: #fff; font-size: 18px; cursor: pointer; border-radius: 8px; }
.help-panel__x:focus-visible { outline: 2px solid #fff; }
.help-panel__body { padding: 16px; overflow-y: auto; }
.help-panel__lead { margin: 0 0 12px; font-size: 14px; }
.help-form { display: grid; gap: 12px; }
.help-form .field-row { gap: 10px; }
.help-recent { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.help-recent a { display: block; padding: 10px 12px; border: 1px solid var(--sf-line); border-radius: 10px; font-size: 14px; }
.help-recent a:hover { border-color: var(--sf-text); }
.help-done { text-align: center; display: grid; gap: 8px; }
.help-done > i { font-size: 34px; color: #15803d; }
.help-done p { margin: 0; }
.ticket-list { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--sf-line); }
.ticket-list a { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--sf-line); }
.ticket-list a:hover .ticket-list__sub { text-decoration: underline; }
.ticket-list__ref { font-weight: 600; font-variant-numeric: tabular-nums; }
.ticket-list__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-list__at { grid-column: 2 / 4; font-size: 13px; }
.ticket-st { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--sf-surface); white-space: nowrap; }
.ticket-st--pending { background: color-mix(in srgb, #2563eb 14%, transparent); color: #1d4ed8; }
.ticket-st--solved { background: color-mix(in srgb, #15803d 14%, transparent); color: #166534; }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.ticket-head h2 { margin: 0; font-family: var(--sf-serif); font-weight: 500; font-size: 24px; }
.link-back { font-size: 14px; color: var(--sf-muted); }
.thread { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 12px; }
.msg { max-width: 86%; padding: 12px 14px; border-radius: 14px; background: var(--sf-surface); }
.msg--customer { justify-self: end; background: color-mix(in srgb, var(--brand-deep) 10%, var(--sf-bg)); border-bottom-right-radius: 4px; }
.msg--staff { border-bottom-left-radius: 4px; }
.msg--system { justify-self: center; background: transparent; font-size: 13px; color: var(--sf-muted); }
.msg__who { font-size: 12px; font-weight: 600; margin-bottom: 4px; display: flex; gap: 8px; }
.msg__body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; }
.rate { margin-top: 24px; padding: 16px; border: 1px solid var(--sf-line); border-radius: 12px; }
.rate p { margin: 0 0 8px; }
.rate__stars { display: flex; gap: 6px; }
.rate__stars button { width: 44px; height: 44px; border: 1px solid var(--sf-line); background: var(--sf-bg); border-radius: 10px; color: #d97706; font-size: 18px; cursor: pointer; }
.rate__stars button:hover, .rate__stars button:focus-visible { background: #fef3c7; }
@media (max-width: 640px) {
  .help-fab span { display: none; }
  .help-fab { width: 54px; height: 54px; padding: 0; justify-content: center; }
  .help-panel { right: 16px; left: 16px; width: auto; bottom: 84px; }
  .help-panel--high { bottom: 150px; }
  .msg { max-width: 94%; }
}