/* ==========================================================================
   meebd storefront design system
   --------------------------------------------------------------------------
   One stylesheet for every storefront page. A theme is a PRESET: design
   tokens (colours, fonts, radius) written inline on <html> as --sf-* custom
   properties by Themes::cssVars(), plus layout flags written as data
   attributes (data-header, data-hero, data-card, data-sticky, data-footer,
   data-heading, data-announce). No markup is forked per theme.

   Public contract for other modules (see docs/STOREFRONT-CSS.md):
     tokens      --sf-accent --sf-accent-ink --sf-accent-soft --sf-radius --sf-font
                 --sf-display --sf-bg --sf-surface --sf-text --sf-muted --sf-border
                 --sf-max --sf-gutter --sf-gap
     primitives  .sf-container .sf-section .sf-heading .sf-btn .sf-btn--primary
                 .sf-btn--secondary .sf-btn--block .sf-input .sf-select .sf-textarea
                 .sf-field .sf-label .sf-error .sf-badge .sf-badge--sale
                 .sf-badge--soldout .sf-grid .sf-prose .sf-breadcrumb .sf-pagination
                 .sf-alert .sf-alert--ok .sf-alert--err .sf-table .sf-visually-hidden

   Contents: 1 tokens - 2 base - 3 primitives - 4 header - 5 drawers & overlays
             6 product card & grid - 7 home sections - 8 footer - 9 cart page
             10 misc (toast, whatsapp, preview bar, 404) - 11 legacy bridge
   ========================================================================== */

/* -- 1. tokens (fallbacks; the real values arrive inline on <html>) ------- */
:root{
  --sf-accent:#079B70;--sf-accent-ink:#FFFFFF;--sf-accent-soft:#E7F6EF;
  --sf-accent-text:#079B70;--sf-accent-hover:#067D5B;
  --sf-radius:8px;--sf-btn-radius:8px;
  --sf-font:'Inter','Hind Siliguri',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --sf-display:var(--sf-font);
  --sf-bg:#FFFFFF;--sf-surface:#FFFFFF;--sf-text:#101828;--sf-muted:#475467;--sf-border:#E4E7EC;
  --sf-dark:#0A101A;--sf-dark-ink:#FFFFFF;
  --sf-cols:4;--sf-cols-md:3;--sf-ratio:1/1;
  --sf-max:1200px;--sf-gutter:16px;--sf-gap:14px;
  --sf-header-h:64px;
  --sf-border-strong:color-mix(in srgb,var(--sf-text) 38%,var(--sf-surface));
  --sf-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.08);
  --sf-shadow-lg:0 24px 64px rgba(16,24,40,.22);
  --sf-ease:cubic-bezier(.2,.7,.2,1);
  --sf-float-offset:0px;
}
@media (min-width:750px){:root{--sf-gutter:32px;--sf-gap:20px}}
@media (min-width:1100px){:root{--sf-gutter:48px;--sf-gap:24px}}

/* -- 2. base --------------------------------------------------------------- */
html.sf-html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* The seller admin shares this origin and can leave app.js's dark-mode choice in localStorage; the storefront is always light. */
html.sf-html[data-sf-theme]{color-scheme:light}
.sf-body{
  margin:0;background:var(--sf-bg);color:var(--sf-text);
  font-family:var(--sf-font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
.sf-body *,.sf-body *::before,.sf-body *::after{box-sizing:border-box}
.sf-body.sf-lock{overflow:hidden}
.sf-body :where(img,svg,video){max-width:100%;height:auto}
.sf-body h1,.sf-body h2,.sf-body h3,.sf-body h4,.sf-body h5{
  font-family:var(--sf-display);color:var(--sf-text);line-height:1.2;letter-spacing:-.01em;font-weight:600;margin:0;
}
.sf-body h1{font-size:clamp(1.75rem,1.2rem + 2.4vw,2.75rem)}
.sf-body h2{font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem)}
.sf-body h3{font-size:1.15rem}
.sf-body p{margin:0 0 1em}
.sf-body p:last-child{margin-bottom:0}
.sf-body a{color:var(--sf-accent-text);text-decoration:none}
.sf-body a:hover{text-decoration:underline;text-underline-offset:3px}
.sf-body ul,.sf-body ol{margin:0;padding:0;list-style:none}
.sf-body :where(button,input,select,textarea){font:inherit;color:inherit}
.sf-body :focus-visible{outline:2px solid var(--sf-accent-text);outline-offset:2px;border-radius:4px}
.sf-body ::selection{background:var(--sf-accent);color:var(--sf-accent-ink)}
html[data-heading="upper"] .sf-body h1,
html[data-heading="upper"] .sf-body h2,
html[data-heading="upper"] .sf-heading{text-transform:uppercase;letter-spacing:.02em;font-weight:700}
[hidden]{display:none !important}

.sf-skip{
  position:absolute;inset-inline-start:12px;top:-60px;z-index:300;background:var(--sf-text);color:var(--sf-bg) !important;
  padding:12px 18px;border-radius:var(--sf-btn-radius);font-weight:600;transition:top .15s;
}
.sf-skip:focus{top:12px;text-decoration:none}
.sf-visually-hidden{
  position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
#sf-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.sf-main{flex:1 0 auto;width:100%;outline:none}

/* -- 3. primitives ---------------------------------------------------------- */
.sf-container{width:100%;max-width:calc(var(--sf-max) + var(--sf-gutter) * 2);margin-inline:auto;padding-inline:var(--sf-gutter)}
.sf-container--narrow{max-width:calc(760px + var(--sf-gutter) * 2)}
.sf-section{padding-block:clamp(32px,5vw,64px)}
.sf-section--tint{background:var(--sf-accent-soft)}
.sf-section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:clamp(18px,3vw,32px)}
.sf-section__head h2,.sf-heading{font-family:var(--sf-display)}
.sf-heading{font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);line-height:1.2;font-weight:600;margin:0}
.sf-eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sf-accent-text);margin-bottom:10px}
.sf-lede{color:var(--sf-muted);font-size:1.05rem;max-width:60ch}
.sf-link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;min-height:44px}
.sf-link-arrow svg{width:16px;height:16px;transition:transform .18s var(--sf-ease)}
.sf-link-arrow:hover svg{transform:translateX(3px)}

.sf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 26px;border-radius:var(--sf-btn-radius);
  border:1.5px solid transparent;background:transparent;color:var(--sf-text);
  font-family:var(--sf-font);font-weight:600;font-size:.95rem;line-height:1.2;letter-spacing:.01em;
  text-align:center;text-decoration:none;cursor:pointer;white-space:normal;
  transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .08s;
}
.sf-body a.sf-btn:hover,.sf-btn:hover{text-decoration:none}
.sf-btn:active{transform:translateY(1px)}
.sf-btn[disabled],.sf-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.sf-btn svg{width:18px;height:18px;flex:none}
.sf-btn--primary,.sf-body a.sf-btn--primary{background:var(--sf-accent);border-color:var(--sf-accent);color:var(--sf-accent-ink)}
.sf-btn--primary:hover,.sf-body a.sf-btn--primary:hover{background:var(--sf-accent-hover);border-color:var(--sf-accent-hover);color:var(--sf-accent-ink)}
.sf-btn--secondary,.sf-body a.sf-btn--secondary{background:transparent;border-color:var(--sf-text);color:var(--sf-text)}
.sf-btn--secondary:hover,.sf-body a.sf-btn--secondary:hover{background:var(--sf-text);color:var(--sf-bg)}
.sf-btn--light,.sf-body a.sf-btn--light{background:#fff;border-color:#fff;color:#111827}
.sf-btn--light:hover,.sf-body a.sf-btn--light:hover{background:#f2f4f7;border-color:#f2f4f7;color:#111827}
.sf-btn--ghost-light,.sf-body a.sf-btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.85);color:#fff}
.sf-btn--ghost-light:hover,.sf-body a.sf-btn--ghost-light:hover{background:#fff;color:#111827}
.sf-btn--block{width:100%}
.sf-btn--sm{min-height:44px;padding:0 18px;font-size:.88rem}
.sf-btn--link{border:0;background:none;padding:0;min-height:44px;color:var(--sf-accent-text);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.sf-btn.is-loading{pointer-events:none;opacity:.75}
.sf-btn.is-loading::before{
  content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:sf-spin .7s linear infinite;flex:none;
}
@keyframes sf-spin{to{transform:rotate(360deg)}}

.sf-field{margin:0 0 18px}
.sf-label,.sf-body label.sf-label{display:block;font-size:.88rem;font-weight:600;color:var(--sf-text);margin:0 0 6px}
.sf-input,.sf-select,.sf-textarea,
.sf-body input[type=text],.sf-body input[type=email],.sf-body input[type=password],.sf-body input[type=number],
.sf-body input[type=search],.sf-body input[type=tel],.sf-body input[type=url],.sf-body select,.sf-body textarea{
  display:block;width:100%;min-height:46px;padding:10px 14px;
  background:var(--sf-surface);color:var(--sf-text);
  border:1px solid var(--sf-border-strong);border-radius:var(--sf-radius);
  font-size:1rem;line-height:1.4;box-shadow:none;
  transition:border-color .15s,box-shadow .15s;
}
.sf-textarea,.sf-body textarea{min-height:120px;resize:vertical}
.sf-select,.sf-body select{
  appearance:none;padding-inline-end:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.sf-input::placeholder,.sf-textarea::placeholder,.sf-body input::placeholder,.sf-body textarea::placeholder{color:color-mix(in srgb,var(--sf-muted) 80%,var(--sf-surface))}
.sf-input:focus,.sf-select:focus,.sf-textarea:focus,
.sf-body input:focus,.sf-body select:focus,.sf-body textarea:focus{
  outline:2px solid var(--sf-accent-text);outline-offset:1px;border-color:var(--sf-accent-text);box-shadow:none;
}
.sf-input[aria-invalid="true"],.sf-select[aria-invalid="true"],.sf-textarea[aria-invalid="true"]{border-color:#B42318;outline-color:#B42318}
.sf-error{display:block;color:#B42318;font-size:.85rem;font-weight:500;margin-top:6px}
.sf-hint{display:block;color:var(--sf-muted);font-size:.85rem;margin-top:6px}
.sf-check{display:flex;gap:10px;align-items:flex-start;min-height:44px;font-size:.95rem;cursor:pointer}
.sf-check input{width:20px;height:20px;margin-top:2px;accent-color:var(--sf-accent);flex:none}

.sf-badge{
  display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.03em;line-height:1.4;
  background:var(--sf-accent-soft);color:var(--sf-accent-text);border:1px solid transparent;
}
.sf-badge--sale{background:var(--sf-accent);color:var(--sf-accent-ink)}
.sf-badge--soldout{background:var(--sf-surface);color:var(--sf-text);border-color:var(--sf-border-strong)}

.sf-alert{
  display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--sf-radius);
  border:1px solid var(--sf-border);background:var(--sf-surface);color:var(--sf-text);font-size:.95rem;margin:0 0 18px;
}
.sf-alert--ok{background:#ECFDF3;border-color:#ABEFC6;color:#05603A}
.sf-alert--err{background:#FEF3F2;border-color:#FDA29B;color:#B42318}
.sf-alert--info{background:var(--sf-accent-soft);border-color:color-mix(in srgb,var(--sf-accent) 30%,var(--sf-surface));color:var(--sf-text)}

.sf-grid{
  display:grid;gap:clamp(20px,3vw,36px) var(--sf-gap);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:640px){.sf-grid{grid-template-columns:repeat(var(--sf-cols-md),minmax(0,1fr))}}
@media (min-width:990px){.sf-grid{grid-template-columns:repeat(var(--sf-cols),minmax(0,1fr))}}

.sf-prose{max-width:72ch;font-size:1.02rem;line-height:1.75}
.sf-prose>*+*{margin-top:1.1em}
.sf-prose h1,.sf-prose h2,.sf-prose h3,.sf-prose h4{margin-top:1.6em}
.sf-prose h2{font-size:1.5rem}.sf-prose h3{font-size:1.2rem}
.sf-prose ul{list-style:disc;padding-inline-start:1.3em}.sf-prose ol{list-style:decimal;padding-inline-start:1.3em}
.sf-prose li+li{margin-top:.35em}
.sf-prose a{text-decoration:underline;text-underline-offset:3px}
.sf-prose blockquote{margin-inline-start:0;padding-block:2px 2px;padding-inline:18px 0;border-inline-start:3px solid var(--sf-accent);color:var(--sf-muted)}
.sf-prose img{border-radius:var(--sf-radius)}
.sf-prose hr{border:0;border-top:1px solid var(--sf-border);margin:2em 0}
.sf-prose table{width:100%;border-collapse:collapse}
.sf-prose th,.sf-prose td{padding:8px 10px;border-bottom:1px solid var(--sf-border);text-align:start}

.sf-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:.88rem;color:var(--sf-muted);padding:4px 0 0}
.sf-breadcrumb ol{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.sf-breadcrumb li{display:inline-flex;align-items:center;gap:8px}
.sf-breadcrumb li+li::before{content:"/";opacity:.5}
.sf-breadcrumb a{color:var(--sf-muted);display:inline-flex;align-items:center;min-height:44px}
.sf-breadcrumb a:hover{color:var(--sf-text)}
.sf-breadcrumb [aria-current]{color:var(--sf-text);font-weight:500}

.sf-pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:clamp(28px,4vw,48px) 0 0}
.sf-pagination a,.sf-pagination span,.sf-pagination button{
  min-width:44px;min-height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--sf-btn-radius);border:1px solid transparent;color:var(--sf-text);background:transparent;font-weight:500;
}
.sf-pagination a:hover{background:var(--sf-accent-soft);text-decoration:none}
.sf-pagination [aria-current="page"],.sf-pagination .is-current{background:var(--sf-text);color:var(--sf-bg);border-color:var(--sf-text)}
.sf-pagination .is-disabled{opacity:.4;pointer-events:none}

.sf-table{width:100%;border-collapse:collapse;font-size:.95rem}
.sf-table th{text-align:start;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sf-muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--sf-border)}
.sf-table td{padding:14px 12px;border-bottom:1px solid var(--sf-border);vertical-align:middle}
@media (max-width:639px){
  .sf-table.responsive,.sf-table.responsive tbody,.sf-table.responsive tr,.sf-table.responsive td{display:block;width:100%}
  .sf-table.responsive thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sf-table.responsive tr{padding:10px 0;border-bottom:1px solid var(--sf-border)}
  .sf-table.responsive td{border:0;padding:6px 0;display:flex;justify-content:space-between;gap:16px;text-align:end}
  .sf-table.responsive td::before{content:attr(data-label);font-weight:600;color:var(--sf-muted);text-align:start}
}

.sf-icon-btn{
  position:relative;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;flex:none;
  border:0;border-radius:999px;background:transparent;color:var(--sf-text);cursor:pointer;
  transition:background-color .15s;
}
.sf-body a.sf-icon-btn{color:var(--sf-text)}
.sf-icon-btn:hover{background:color-mix(in srgb,var(--sf-text) 8%,transparent);text-decoration:none}
.sf-icon-btn svg{width:22px;height:22px}

.sf-empty{
  text-align:center;max-width:520px;margin:clamp(24px,5vw,56px) auto;padding:clamp(28px,5vw,48px) 24px;
  border:1px dashed var(--sf-border-strong);border-radius:calc(var(--sf-radius) + 4px);background:var(--sf-surface);
}
.sf-empty__icon{width:56px;height:56px;border-radius:50%;background:var(--sf-accent-soft);color:var(--sf-accent-text);display:grid;place-items:center;margin:0 auto 16px}
.sf-empty__icon svg{width:26px;height:26px}
.sf-empty h2,.sf-empty h3{font-size:1.3rem;margin-bottom:8px}
.sf-empty p{color:var(--sf-muted)}
.sf-empty .sf-btn{margin-top:18px}

/* -- 4. announcement bar + header -------------------------------------- */
.sf-announce{background:var(--sf-accent);color:var(--sf-accent-ink);font-size:.82rem;font-weight:500;text-align:center;line-height:1.4}
html[data-announce="dark"] .sf-announce{background:var(--sf-dark);color:var(--sf-dark-ink)}
.sf-announce__inner{padding:10px var(--sf-gutter);min-height:40px;display:flex;align-items:center;justify-content:center;gap:8px}
.sf-body .sf-announce a{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:600}

.sf-header{background:var(--sf-surface);border-bottom:1px solid var(--sf-border);position:relative;z-index:60}
html[data-sticky="1"] .sf-header{position:sticky;top:0}
.sf-header__inner{
  display:grid;align-items:center;column-gap:8px;min-height:var(--sf-header-h);
  grid-template-columns:auto 1fr auto;grid-template-areas:"burger logo tools";
}
.sf-header__burger{grid-area:burger;margin-inline-start:-10px}
.sf-header__aside{display:none}
.sf-header__tools{grid-area:tools;display:flex;align-items:center;gap:0;margin-inline-end:-10px}
.sf-nav{display:none}
html[data-header="center"] .sf-header__inner,html[data-header="split"] .sf-header__inner{grid-template-columns:1fr auto 1fr}
html[data-header="center"] .sf-logo,html[data-header="split"] .sf-logo{justify-self:center}
html[data-header="center"] .sf-header__tools,html[data-header="split"] .sf-header__tools{justify-self:end}

.sf-logo{
  /* min-width:0: a long store name must truncate (see .sf-logo__text), not push the search and cart icons off the screen */
  grid-area:logo;display:inline-flex;align-items:center;min-height:44px;min-width:0;max-width:100%;
  font-family:var(--sf-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;line-height:1.1;
  color:var(--sf-text) !important;text-decoration:none !important;
}
.sf-logo__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-logo__img{display:block;max-height:44px;width:auto;max-width:180px;object-fit:contain}
html[data-heading="upper"] .sf-logo{text-transform:uppercase;letter-spacing:.04em}
html[data-sf-theme="kids"] .sf-logo{color:var(--sf-accent-text) !important}

.sf-cart-count{
  position:absolute;top:3px;inset-inline-end:1px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--sf-accent);color:var(--sf-accent-ink);font-size:.7rem;font-weight:700;line-height:19px;text-align:center;
  box-shadow:0 0 0 2px var(--sf-surface);
}

.sf-nav__list{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px}
.sf-nav__item{position:relative;display:flex;align-items:center}
.sf-body .sf-nav__link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  font-size:.95rem;font-weight:500;color:var(--sf-text);text-decoration:none;position:relative;
}
.sf-nav__link::after{
  content:"";position:absolute;inset-inline-start:12px;inset-inline-end:12px;bottom:8px;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--sf-ease);
}
.sf-body .sf-nav__link:hover,.sf-body .sf-nav__link[aria-current="page"]{color:var(--sf-accent-text);text-decoration:none}
.sf-nav__link:hover::after,.sf-nav__link[aria-current="page"]::after{transform:scaleX(1)}
html[data-heading="upper"] .sf-nav__link{text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;font-weight:600}
.sf-nav__toggle{
  display:inline-grid;place-items:center;width:44px;height:44px;margin-inline-start:-14px;border:0;background:none;
  color:var(--sf-text);cursor:pointer;border-radius:6px;
}
.sf-nav__toggle svg{width:14px;height:14px;transition:transform .2s}
.sf-nav__item.is-open>.sf-nav__toggle svg{transform:rotate(180deg)}
.sf-nav__sub{
  position:absolute;inset-inline-start:0;top:100%;z-index:70;min-width:230px;padding:8px;
  background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:var(--sf-radius);box-shadow:var(--sf-shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s var(--sf-ease),visibility 0s linear .16s; /* hide only after the fade-out */
}
.sf-nav__item:hover:not(.is-suppressed)>.sf-nav__sub,.sf-nav__item.is-open>.sf-nav__sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sf-body .sf-nav__sub a{
  display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:calc(var(--sf-radius) - 2px);
  color:var(--sf-text);font-size:.93rem;
}
.sf-body .sf-nav__sub a:hover{background:var(--sf-accent-soft);color:var(--sf-accent-text);text-decoration:none}
.sf-nav__item:last-child>.sf-nav__sub{inset-inline-start:auto;inset-inline-end:0}

.sf-header__aside a,.sf-header__aside span{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:.9rem;color:var(--sf-muted)}
.sf-header__aside svg{width:18px;height:18px}

/* No-JS: keep the menu reachable as a scrollable strip. */
html:not(.sf-js) .sf-header__burger{display:none}
html:not(.sf-js) .sf-nav{display:block;grid-column:1/-1;grid-row:2;overflow-x:auto;padding-bottom:4px}
html:not(.sf-js) .sf-nav__list{flex-wrap:nowrap}
html:not(.sf-js) .sf-nav__toggle,html:not(.sf-js) .sf-nav__sub{display:none}
html:not(.sf-js) .sf-header__inner{grid-template-areas:"logo logo tools"}

@media (min-width:990px){
  .sf-header__inner{column-gap:24px}
  .sf-header__burger{display:none}
  .sf-header__account{display:inline-grid}
  .sf-nav{display:block;grid-area:nav}
  html[data-header="left"] .sf-header__inner{grid-template-columns:auto 1fr auto;grid-template-areas:"logo nav tools"}
  html[data-header="left"] .sf-nav{margin-inline-start:8px}
  html[data-header="center"] .sf-header__inner{
    grid-template-columns:1fr auto 1fr;grid-template-areas:"aside logo tools" "nav nav nav";
    padding-top:6px;
  }
  html[data-header="center"] .sf-nav{justify-self:center;border-top:1px solid var(--sf-border);width:100%;display:flex;justify-content:center;margin-top:6px}
  html[data-header="center"] .sf-header__aside{display:block;grid-area:aside;justify-self:start}
  html[data-header="split"] .sf-header__inner{grid-template-columns:1fr auto 1fr;grid-template-areas:"nav logo tools"}
  html[data-header="split"] .sf-nav{justify-self:start}
  html[data-header="split"] .sf-logo{font-size:1.6rem}
  html[data-header="center"] .sf-logo{font-size:1.6rem}
  html:not(.sf-js) .sf-nav{grid-row:auto}
}
@media (max-width:989px){
  .sf-header__account{display:none}
}

/* -- 5. drawers and overlays ------------------------------------------ */
.sf-drawer,.sf-search{position:fixed;inset:0;z-index:200;display:flex}
.sf-drawer__scrim{position:absolute;inset:0;background:rgba(10,16,26,.5);opacity:0;transition:opacity .25s}
.sf-drawer__panel{
  position:relative;display:flex;flex-direction:column;width:min(420px,100vw);max-width:100%;height:100%;
  background:var(--sf-surface);color:var(--sf-text);box-shadow:var(--sf-shadow-lg);
  transition:transform .3s var(--sf-ease);
}
.sf-drawer--left .sf-drawer__panel{transform:translateX(-100%)}
.sf-drawer--right{justify-content:flex-end}
.sf-drawer--right .sf-drawer__panel{transform:translateX(100%)}
.sf-drawer.is-open .sf-drawer__scrim,.sf-search.is-open .sf-drawer__scrim{opacity:1}
.sf-drawer.is-open .sf-drawer__panel{transform:none}
.sf-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px 10px;padding-inline:20px 12px;border-bottom:1px solid var(--sf-border);min-height:64px}
.sf-drawer__title{font-size:1.15rem !important;margin:0}
.sf-drawer__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px}
.sf-drawer__foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--sf-border);background:var(--sf-surface)}

/* mobile menu accordion */
.sf-drawer__search{display:flex;gap:8px;margin-bottom:12px}
.sf-drawer__search .sf-input{flex:1}
.sf-acc>li{border-bottom:1px solid var(--sf-border)}
.sf-acc__row{display:flex;align-items:center;justify-content:space-between}
.sf-body .sf-acc__row>a,.sf-body .sf-acc__link{
  flex:1;display:flex;align-items:center;min-height:52px;font-size:1.05rem;font-weight:500;color:var(--sf-text);
}
.sf-acc__row>a:hover{text-decoration:none;color:var(--sf-accent-text)}
.sf-acc__toggle{width:52px;height:52px;border:0;background:none;display:grid;place-items:center;color:var(--sf-text);cursor:pointer}
.sf-acc__toggle svg{width:18px;height:18px;transition:transform .2s}
.sf-acc__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.sf-acc__sub{padding-block:0 10px;padding-inline:14px 0}
.sf-body .sf-acc__sub a{display:flex;align-items:center;min-height:44px;color:var(--sf-muted);font-size:.98rem}
.sf-body .sf-acc__sub a:hover{color:var(--sf-accent-text);text-decoration:none}
.sf-drawer__links a{display:flex;align-items:center;gap:10px;min-height:48px;color:var(--sf-text);font-weight:500}
.sf-drawer__links svg{width:20px;height:20px;color:var(--sf-muted)}

/* cart drawer */
.sf-cart-loading,.sf-cart-error{padding:24px 0;text-align:center;color:var(--sf-muted)}
.sf-cart-error{color:#B42318}
.sf-ship{margin:0 0 16px;padding:12px 14px;border-radius:var(--sf-radius);background:var(--sf-accent-soft);font-size:.9rem}
.sf-ship p{margin:0 0 8px}
.sf-ship__bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--sf-accent) 16%,var(--sf-surface));overflow:hidden}
.sf-ship__bar>span{display:block;height:100%;border-radius:99px;background:var(--sf-accent);transition:width .4s var(--sf-ease)}
.sf-cart-lines>li{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--sf-border)}
.sf-cart-lines>li:first-child{padding-top:4px}
.sf-line__media{display:block;width:76px;aspect-ratio:1;border-radius:calc(var(--sf-radius) - 2px);overflow:hidden;background:var(--sf-accent-soft);position:relative}
.sf-line__media img{width:100%;height:100%;object-fit:cover}
.sf-line__ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sf-display);font-weight:700;font-size:1.4rem;color:var(--sf-accent-text);opacity:.6}
.sf-line__info{min-width:0;display:flex;flex-direction:column;gap:3px}
.sf-body .sf-line__title{font-weight:600;font-size:.95rem;line-height:1.3;color:var(--sf-text)}
.sf-line__meta{font-size:.84rem;color:var(--sf-muted)}
.sf-line__notice{font-size:.82rem;color:#B54708;font-weight:500}
.sf-line__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.sf-line__price{font-weight:600;font-variant-numeric:tabular-nums}
.sf-qty{display:inline-flex;align-items:stretch;border:1px solid var(--sf-border-strong);border-radius:var(--sf-btn-radius);overflow:hidden;background:var(--sf-surface)}
.sf-qty button{width:44px;min-height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--sf-text)}
.sf-qty button:hover{background:var(--sf-accent-soft)}
.sf-qty button svg{width:14px;height:14px}
.sf-body .sf-qty input[type=number]{
  width:48px;min-height:44px;padding:0;border:0;border-radius:0;text-align:center;font-weight:600;background:transparent;
  appearance:textfield;-moz-appearance:textfield;
}
.sf-qty input::-webkit-outer-spin-button,.sf-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sf-qty:focus-within{outline:2px solid var(--sf-accent-text);outline-offset:1px}
.sf-body .sf-qty input:focus{outline:none}
.sf-line__remove{align-self:flex-start;border:0;background:none;padding:0;min-height:44px;color:var(--sf-muted);font-size:.85rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sf-line__remove:hover{color:#B42318}
.sf-cart-lines.is-busy{opacity:.55;pointer-events:none}
.sf-cart-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-weight:600;font-size:1.05rem;margin-bottom:4px}
.sf-cart-total strong{font-size:1.2rem;font-variant-numeric:tabular-nums}
.sf-cart-note{font-size:.84rem;color:var(--sf-muted);margin:0 0 14px}
.sf-cart-actions{display:grid;gap:10px}
.sf-cart-empty{text-align:center;padding:48px 8px}
.sf-cart-empty .sf-empty__icon{margin-bottom:14px}
.sf-cart-empty h3{margin-bottom:8px}
.sf-cart-empty p{color:var(--sf-muted);margin-bottom:18px}

/* search overlay */
.sf-search{align-items:flex-start;flex-direction:column}
.sf-search__panel{
  position:relative;width:100%;background:var(--sf-surface);box-shadow:var(--sf-shadow-lg);
  transform:translateY(-16px);opacity:0;transition:transform .25s var(--sf-ease),opacity .2s;
  max-height:100dvh;display:flex;flex-direction:column;
}
.sf-search.is-open .sf-search__panel{transform:none;opacity:1}
.sf-search__form{display:flex;align-items:center;gap:8px;padding:12px var(--sf-gutter);max-width:calc(var(--sf-max) + var(--sf-gutter) * 2);margin:0 auto;width:100%}
.sf-search__field{position:relative;flex:1;min-width:0}
.sf-search__field svg{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--sf-muted);pointer-events:none}
.sf-body .sf-search__field input.sf-search__input{padding-inline-start:46px;min-height:52px;font-size:1.05rem}
.sf-search__submit{display:none}
@media (min-width:640px){.sf-search__submit{display:inline-flex}}
.sf-search__results{overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--sf-border);padding:8px var(--sf-gutter) 20px;max-width:calc(var(--sf-max) + var(--sf-gutter) * 2);margin:0 auto;width:100%;min-height:96px}
.sf-search__label{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-muted);margin:14px 0 6px}
.sf-search__list>li>a{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;min-height:64px;padding:6px 8px;margin:0 -8px;border-radius:var(--sf-radius);color:var(--sf-text)}
.sf-search__list>li>a:hover,.sf-search__list>li>a:focus-visible{background:var(--sf-accent-soft);text-decoration:none}
.sf-search__thumb{width:56px;height:56px;border-radius:calc(var(--sf-radius) - 2px);background:var(--sf-accent-soft);overflow:hidden;display:grid;place-items:center;color:var(--sf-accent-text);font-weight:700}
.sf-search__thumb img{width:100%;height:100%;object-fit:cover}
.sf-search__name{font-weight:500;line-height:1.3}
.sf-search__sub{display:block;font-size:.82rem;color:var(--sf-muted)}
.sf-search__price{font-weight:600;font-size:.92rem;white-space:nowrap}
.sf-search__chips{display:flex;flex-wrap:wrap;gap:8px}
.sf-body .sf-search__chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--sf-border-strong);border-radius:999px;color:var(--sf-text);font-size:.92rem}
.sf-body .sf-search__chips a:hover{background:var(--sf-accent-soft);text-decoration:none}
.sf-search__all{display:flex;align-items:center;min-height:48px;font-weight:600;margin-top:8px}
.sf-search__status{color:var(--sf-muted);padding:18px 0;font-size:.95rem}

@media (prefers-reduced-motion:reduce){
  html.sf-html{scroll-behavior:auto}
  .sf-drawer__panel,.sf-drawer__scrim,.sf-search__panel,.sf-nav__sub,.sf-card__media img,.sf-ship__bar>span{transition:none !important}
  .sf-btn:active{transform:none}
}

/* -- 6. product card ---------------------------------------------------- */
.sf-card{position:relative;display:flex;flex-direction:column;min-width:0}
.sf-card__media{
  position:relative;display:block;aspect-ratio:var(--sf-ratio);overflow:hidden;
  background:var(--sf-accent-soft);border-radius:var(--sf-radius);
}
.sf-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--sf-ease)}
@media (hover:hover){.sf-card:hover .sf-card__media img{transform:scale(1.05)}}
.sf-card__img{position:absolute;inset:0;display:block}
.sf-card__ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sf-display);font-weight:700;font-size:clamp(2rem,6vw,3.5rem);color:var(--sf-accent-text);opacity:.45}
.sf-card__badges{position:absolute;inset-inline-start:10px;top:10px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.sf-card__media .sf-badge{box-shadow:0 1px 2px rgba(0,0,0,.12)}
.sf-card__body{display:flex;flex-direction:column;gap:3px;padding-top:12px;flex:1}
.sf-card__vendor{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sf-muted);margin:0}
.sf-card__title{font-family:var(--sf-font);font-size:.98rem;font-weight:500;line-height:1.35;letter-spacing:0;margin:0}
.sf-body .sf-card__title a{color:var(--sf-text);text-decoration:none}
.sf-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.sf-body .sf-card__title a:hover{text-decoration:underline;text-underline-offset:3px}
.sf-card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:2px;font-variant-numeric:tabular-nums}
.sf-card__price .sf-price{font-weight:600}
.sf-card__price .sf-price--sale{color:var(--sf-accent-text)}
.sf-card__price s{color:var(--sf-muted);font-size:.88rem}
.sf-card__quick{position:relative;z-index:2;margin-top:12px}
.sf-card__quick form{margin:0}
.sf-card[data-sold="1"] .sf-card__media img{opacity:.55}
.sf-card[data-sold="1"] .sf-card__media{filter:grayscale(.4)}

html[data-card="bordered"] .sf-card{background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:var(--sf-radius);overflow:hidden}
html[data-card="bordered"] .sf-card__media{border-radius:0}
html[data-card="bordered"] .sf-card__body{padding:12px 14px 14px}
html[data-card="bordered"] .sf-card__quick{margin:10px 14px 14px}
html[data-card="bordered"] .sf-card__body+.sf-card__quick{margin-top:0}
html[data-card="shadow"] .sf-card{background:var(--sf-surface);border-radius:var(--sf-radius);overflow:hidden;box-shadow:var(--sf-shadow);transition:box-shadow .2s,transform .2s var(--sf-ease)}
@media (hover:hover){html[data-card="shadow"] .sf-card:hover{transform:translateY(-3px);box-shadow:var(--sf-shadow-lg)}}
html[data-card="shadow"] .sf-card__media{border-radius:0}
html[data-card="shadow"] .sf-card__body{padding:12px 16px 14px}
html[data-card="shadow"] .sf-card__quick{margin:10px 16px 16px}
html[data-card="shadow"] .sf-card__body+.sf-card__quick{margin-top:0}
html[data-card="bubble"] .sf-card{background:var(--sf-surface);border:2px solid var(--sf-border);border-radius:var(--sf-radius);padding:10px;transition:border-color .2s,transform .2s var(--sf-ease)}
@media (hover:hover){html[data-card="bubble"] .sf-card:hover{border-color:var(--sf-accent);transform:translateY(-4px) rotate(-.4deg)}}
html[data-card="bubble"] .sf-card__media{border-radius:calc(var(--sf-radius) - 6px)}
html[data-card="bubble"] .sf-card__body{padding:12px 6px 4px}
html[data-card="bubble"] .sf-card__quick{margin:10px 4px 4px}
html[data-sf-theme="plain"] .sf-card__body{text-align:center}
html[data-sf-theme="plain"] .sf-card__price{justify-content:center}
html[data-sf-theme="market"] .sf-card__title{font-weight:600;text-transform:uppercase;font-size:.86rem;letter-spacing:.05em}

/* -- 7. home sections ----------------------------------------------------- */
/* hero: overlay banner */
.sf-hero{position:relative;overflow:hidden;color:#fff;isolation:isolate}
.sf-hero--overlay{display:grid;align-items:center;min-height:clamp(420px,58vw,640px);background:var(--sf-dark)}
.sf-hero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.sf-hero__bg{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(900px 480px at 85% 10%,color-mix(in srgb,var(--sf-accent) 84%,var(--sf-hero-shade,#000)) 0,transparent 60%),
    linear-gradient(135deg,var(--sf-accent),color-mix(in srgb,var(--sf-accent) 58%,var(--sf-hero-shade,#000)));
}
.sf-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--sf-accent-ink) 6%,transparent) 0 2px,transparent 2px 22px);
}
.sf-hero--overlay::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,12,20,.62) 0%,rgba(8,12,20,.32) 55%,rgba(8,12,20,.1) 100%)}
.sf-hero--overlay.has-bg-gradient::before{display:none}
/* banner without a photo: text follows the accent's ink colour (white or near-black), never a fixed white */
.sf-hero--overlay.has-bg-gradient{color:var(--sf-accent-ink)}
.sf-hero--overlay.has-bg-gradient .sf-hero__text,.sf-hero--overlay.has-bg-gradient .sf-hero__copy .sf-eyebrow{color:inherit;opacity:.92}
.sf-body .sf-hero--overlay.has-bg-gradient a.sf-btn--light{background:var(--sf-accent-ink);border-color:var(--sf-accent-ink);color:var(--sf-hero-shade,#000)}
.sf-body .sf-hero--overlay.has-bg-gradient a.sf-btn--ghost-light{border-color:currentColor;color:var(--sf-accent-ink)}
.sf-body .sf-hero--overlay.has-bg-gradient a.sf-btn--ghost-light:hover{background:var(--sf-accent-ink);color:var(--sf-hero-shade,#000)}
.sf-hero__inner{padding-block:clamp(48px,8vw,96px)}
.sf-hero__copy{max-width:640px}
.sf-hero__copy .sf-eyebrow{color:rgba(255,255,255,.88)}
.sf-body .sf-hero__title{font-size:clamp(2.1rem,1rem + 5vw,4.25rem);color:inherit;line-height:1.05;letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.sf-hero__text{font-size:clamp(1rem,.9rem + .5vw,1.2rem);color:rgba(255,255,255,.92);max-width:52ch;margin-bottom:28px}
.sf-hero__actions{display:flex;flex-wrap:wrap;gap:12px}
html[data-sf-theme="market"] .sf-hero__copy{max-width:760px}
html[data-sf-theme="market"] .sf-body .sf-hero__title{font-size:clamp(2.4rem,1rem + 6.4vw,5.5rem);line-height:.98}
html[data-sf-theme="bistro"] .sf-hero__inner{text-align:center}
html[data-sf-theme="bistro"] .sf-hero__copy{margin-inline:auto}
html[data-sf-theme="bistro"] .sf-hero__text{margin-inline:auto}
html[data-sf-theme="bistro"] .sf-hero__actions{justify-content:center}
html[data-sf-theme="bistro"] .sf-hero--overlay::before{background:radial-gradient(ellipse at center,rgba(20,8,8,.58),rgba(20,8,8,.34) 70%)}

/* hero: split */
.sf-hero--split{background:var(--sf-accent-soft);color:var(--sf-text)}
.sf-hero--split .sf-hero__grid{display:grid;gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(32px,6vw,72px)}
.sf-hero--split .sf-hero__copy{max-width:560px}
.sf-hero--split .sf-hero__copy .sf-eyebrow{color:var(--sf-accent-text)}
.sf-hero--split .sf-hero__text{color:var(--sf-muted)}
.sf-hero__art{position:relative;aspect-ratio:5/4;border-radius:calc(var(--sf-radius) * 1.5);overflow:hidden;background:var(--sf-accent)}
.sf-hero__art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-hero__art .sf-hero__bg{z-index:0}
.sf-hero__collage{position:absolute;inset:0;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;padding:10px;z-index:1}
.sf-hero__collage img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--sf-radius) * 1);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.sf-hero__collage img:first-child{grid-row:1/3}
.sf-hero__mark{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font-family:var(--sf-display);font-weight:700;font-size:clamp(5rem,16vw,10rem);color:var(--sf-accent-ink);opacity:.9}
@media (min-width:860px){
  .sf-hero--split .sf-hero__grid{grid-template-columns:1.05fr 1fr}
  html[data-sf-theme="kids"] .sf-hero__art{border-radius:48% 52% 46% 54%/55% 45% 55% 45%}
}
html[data-sf-theme="plain"] .sf-hero--split{background:var(--sf-bg);border-bottom:1px solid var(--sf-border)}
html[data-sf-theme="plain"] .sf-hero__art{aspect-ratio:4/5;max-height:620px;width:100%}
html[data-sf-theme="plain"] .sf-body .sf-hero__title{font-weight:500;font-style:italic}

/* collection list */
.sf-collections{display:grid;gap:var(--sf-gap);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:750px){.sf-collections{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sf-tile{position:relative;display:block;min-width:0}
.sf-tile__media{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--sf-radius);overflow:hidden;background:var(--sf-accent-soft)}
.sf-tile__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--sf-ease)}
@media (hover:hover){.sf-tile:hover .sf-tile__media img{transform:scale(1.06)}}
.sf-tile__ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sf-display);font-weight:700;font-size:4rem;color:var(--sf-accent-text);opacity:.4}
.sf-tile__label{
  position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;padding:40px 16px 16px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,12,20,.72));
}
.sf-tile__label h3{color:#fff !important;font-size:1.05rem;margin:0}
.sf-tile__label span{display:block;font-size:.82rem;opacity:.85;margin-top:2px}
.sf-body .sf-tile{color:#fff}
.sf-body .sf-tile:hover{text-decoration:none}
.sf-tile__link::after{content:"";position:absolute;inset:0;z-index:1}
.sf-body .sf-tile__link{color:inherit;text-decoration:none}
html[data-card="bordered"] .sf-tile__media{border:1px solid var(--sf-border)}

/* image with text */
.sf-iwt{display:grid;gap:clamp(24px,5vw,64px);align-items:center}
.sf-iwt__media{border-radius:var(--sf-radius);overflow:hidden;aspect-ratio:4/3;background:var(--sf-accent-soft)}
.sf-iwt__media img{width:100%;height:100%;object-fit:cover}
.sf-iwt__copy{max-width:56ch}
.sf-iwt__copy h2{margin-bottom:16px}
.sf-iwt__copy .sf-prose{margin-bottom:24px;color:var(--sf-muted);max-width:none}
.sf-iwt--text-only{max-width:760px;margin-inline:auto;text-align:center;grid-template-columns:1fr}
.sf-iwt--text-only .sf-iwt__copy{margin-inline:auto}
@media (min-width:860px){.sf-iwt:not(.sf-iwt--text-only){grid-template-columns:1fr 1fr}}

/* newsletter band (wraps the marketing module's shop/_newsletter.html.twig, which owns its inner .sf-newsletter markup) */
.sf-newsband{background:var(--sf-accent-soft);text-align:center}
.sf-newsband .sf-newsletter{margin-inline:auto;max-width:620px;justify-items:center}
.sf-newsband .sf-newsletter-form{justify-content:center;width:100%}
.sf-newsband .sf-newsletter-title{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem)}
.sf-newsband .sf-newsletter-text,.sf-newsband .sf-newsletter-fine{color:var(--sf-muted)}

/* integration: marketing's newsletter partial (public/newsletter.css) loads after this file */
.sf-body .sf-newsletter-btn{border-radius:var(--sf-btn-radius)}
@media (max-width:480px){.sf-body .sf-newsletter-field{flex:0 0 auto}}

/* -- 8. footer --------------------------------------------------------------- */
.sf-footer{background:var(--sf-surface);border-top:1px solid var(--sf-border);margin-top:clamp(16px,3vw,32px);font-size:.93rem}
.sf-footer__top{display:grid;gap:32px 40px;padding-block:clamp(36px,5vw,64px)}
.sf-footer__col h2{font-family:var(--sf-font);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-muted);margin:0 0 12px}
.sf-footer__brand .sf-logo{margin-bottom:10px}
/* a long store name wraps in the footer instead of widening the page */
.sf-footer__brand{min-width:0}
.sf-footer__brand .sf-logo__text{white-space:normal;overflow-wrap:anywhere}
.sf-footer__brand p{color:var(--sf-muted);max-width:38ch;margin-bottom:12px}
.sf-footer__contact li{display:flex;gap:10px;align-items:center;min-height:32px;color:var(--sf-muted)}
.sf-footer__contact svg{width:17px;height:17px;flex:none}
.sf-body .sf-footer a{color:var(--sf-text)}
.sf-body .sf-footer a:hover{color:var(--sf-accent-text)}
.sf-footer__col a{display:flex;align-items:center;min-height:44px}
.sf-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sf-body .sf-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--sf-border-strong);color:var(--sf-text)}
.sf-body .sf-social a:hover{background:var(--sf-accent);border-color:var(--sf-accent);color:var(--sf-accent-ink);text-decoration:none}
.sf-social svg{width:20px;height:20px}
.sf-footer__news .sf-newsletter-title{font-size:1.15rem}
.sf-footer__news .sf-newsletter-form{flex-direction:column}
.sf-footer__news .sf-newsletter-field{flex:0 0 auto}
.sf-footer__news .sf-newsletter-btn{width:100%}
.sf-footer__bottom{border-top:1px solid var(--sf-border);padding-block:20px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;color:var(--sf-muted);font-size:.85rem}
/* a link inside a line of text must not rely on colour alone (WCAG 1.4.1) */
.sf-footer__bottom span a{text-decoration:underline;text-underline-offset:2px}
.sf-pay{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sf-pay__badge{
  display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:6px;
  border:1px solid var(--sf-border-strong);background:var(--sf-surface);color:var(--sf-text);font-size:.74rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.sf-pay__badge svg{width:16px;height:16px}
.sf-pay__badge--bkash{color:#C0105A;border-color:#E2136E}
.sf-pay__badge--nagad{color:#B0560E;border-color:#F6921E}
@media (min-width:640px){.sf-footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:990px){
  html[data-footer="columns"] .sf-footer__top{grid-template-columns:1.5fr repeat(var(--sf-footer-cols,2),1fr) 1.3fr}
  html[data-footer="columns"] .sf-footer__top.no-news{grid-template-columns:1.6fr repeat(var(--sf-footer-cols,2),1fr)}
}
html[data-footer="centered"] .sf-footer__top{text-align:center;justify-items:center}
html[data-footer="centered"] .sf-footer__brand p{margin-inline:auto}
html[data-footer="centered"] .sf-footer__contact li,html[data-footer="centered"] .sf-social,html[data-footer="centered"] .sf-footer__col a{justify-content:center}
html[data-footer="centered"] .sf-footer__bottom{justify-content:center;text-align:center;flex-direction:column}
@media (min-width:990px){html[data-footer="centered"] .sf-footer__top{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));justify-items:center;max-width:960px;margin-inline:auto}}

/* -- 9. cart page --------------------------------------------------------------- */
.sf-cart-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:24px}
.sf-cart-layout{display:grid;gap:28px}
@media (min-width:990px){.sf-cart-layout{grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start}}
.sf-cart-table{width:100%;border-collapse:collapse}
.sf-cart-table thead th{background:transparent;border-radius:0;padding:0 0 12px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sf-muted);font-weight:600;border-bottom:1px solid var(--sf-border);text-align:start}
.sf-cart-table th:last-child,.sf-cart-table td.sf-cl__td-total{text-align:end}
.sf-cart-table td{padding-block:20px 20px;padding-inline:0 12px;vertical-align:top;border-bottom:1px solid var(--sf-border)}
.sf-cart-table tbody tr:hover{background:transparent}
.sf-cart-table tbody tr:last-child td{border-bottom:1px solid var(--sf-border)}
.sf-cart-table td:last-child{padding-inline-end:0}
.sf-cl__product{display:grid;grid-template-columns:96px 1fr;gap:16px;min-width:0}
.sf-cl__media{display:block;position:relative;width:96px;aspect-ratio:1;border-radius:calc(var(--sf-radius) - 2px);overflow:hidden;background:var(--sf-accent-soft)}
.sf-cl__media img{width:100%;height:100%;object-fit:cover}
.sf-cl__info{display:flex;flex-direction:column;gap:2px;min-width:0}
.sf-body .sf-cl__title{font-weight:600;color:var(--sf-text);line-height:1.35}
.sf-cl__meta{font-size:.85rem;color:var(--sf-muted)}
.sf-cl__unit-m{display:none;font-size:.9rem;font-weight:500;margin-top:2px}
.sf-cl__remove{margin-top:6px}
.sf-cl__qtyform{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sf-cl__update{min-height:44px}
html.sf-js .sf-cl__update{display:none}
.sf-cl__total{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sf-cl__price{font-variant-numeric:tabular-nums;white-space:nowrap}
.sf-qty button[data-sf-qty]{display:none}
html.sf-js .sf-qty button[data-sf-qty]{display:grid}
@media (max-width:759px){
  .sf-cart-table,.sf-cart-table tbody,.sf-cart-table tr{display:block;width:100%}
  .sf-cart-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sf-cart-table tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"product product" "qty total";gap:14px 12px;padding:18px 0;border-bottom:1px solid var(--sf-border)}
  .sf-cart-table td{display:block;padding:0;border:0}
  .sf-cart-table td.sf-cl__td-product{grid-area:product}
  .sf-cart-table td.sf-cl__td-qty{grid-area:qty;align-self:center}
  .sf-cart-table td.sf-cl__td-total{grid-area:total;align-self:center;font-size:1.05rem}
  .sf-cart-table td.sf-cl__td-price{display:none}
  .sf-cl__unit-m{display:block}
  .sf-cl__product{grid-template-columns:80px 1fr}
  .sf-cl__media{width:80px}
}
.sf-cart-aside{border:1px solid var(--sf-border);border-radius:calc(var(--sf-radius) + 2px);background:var(--sf-surface);padding:22px}
@media (min-width:990px){.sf-cart-aside{position:sticky;top:calc(var(--sf-header-h) + 24px)}}
.sf-cart-aside h2{font-size:1.15rem;margin-bottom:14px}
.sf-sum{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:.96rem;font-variant-numeric:tabular-nums}
.sf-sum span:first-child{color:var(--sf-muted)}
.sf-sum--total{border-top:1px solid var(--sf-border);margin-top:10px;padding-top:14px;font-size:1.12rem;font-weight:700}
.sf-sum--total span:first-child{color:var(--sf-text)}
.sf-code{display:flex;gap:8px;margin:0 0 6px}
.sf-code .sf-input{flex:1 1 0;min-width:0}
.sf-code .sf-input:not(:placeholder-shown){text-transform:uppercase}
.sf-code .sf-btn{flex:none}
.sf-code-ok{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:var(--sf-radius);background:var(--sf-accent-soft);font-size:.92rem;margin-bottom:6px}
.sf-code-ok form{margin:0}
.sf-cart-aside .sf-btn--primary{margin-top:16px}
.sf-cart-aside .sf-cart-note{margin:12px 0 0;text-align:center}
.sf-ship--page{margin-bottom:24px}

/* -- 10. misc ----------------------------------------------------------------- */
.sf-flashes{padding-top:16px}
.sf-toast{
  position:fixed;left:50%;bottom:calc(20px + var(--sf-float-offset) + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:400;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(440px,calc(100vw - 32px));
}
.sf-toast__item{
  pointer-events:auto;width:100%;padding:12px 16px;border-radius:var(--sf-radius);background:var(--sf-text);color:var(--sf-bg);
  font-size:.92rem;box-shadow:var(--sf-shadow-lg);opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s var(--sf-ease);
}
.sf-toast__item.is-in{opacity:1;transform:none}
.sf-toast__item--err{background:#B42318;color:#fff}
.sf-whatsapp{
  position:fixed;inset-inline-end:16px;bottom:calc(16px + var(--sf-float-offset) + env(safe-area-inset-bottom));z-index:90;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff !important;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .15s;
}
.sf-whatsapp:hover{transform:scale(1.06);text-decoration:none}
.sf-whatsapp svg{width:30px;height:30px}
.sf-preview-bar{
  position:relative;z-index:80;background:#111827;color:#fff;font-size:.88rem;padding:10px var(--sf-gutter);
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;text-align:center;
}
.sf-preview-bar form{margin:0;display:inline}
.sf-preview-bar button,.sf-body .sf-preview-bar a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-weight:600;font-size:.85rem;
  border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;cursor:pointer;text-decoration:none;
}
.sf-preview-bar button.is-primary{background:#fff;color:#111827;border-color:#fff}
.sf-404{max-width:620px;margin:clamp(24px,6vw,72px) auto;text-align:center}
.sf-404__code{display:block;font-family:var(--sf-display);font-weight:700;font-size:clamp(4rem,14vw,7rem);line-height:1;color:var(--sf-accent-text);opacity:.9;margin-bottom:8px}
.sf-404 form{display:flex;gap:8px;max-width:420px;margin:24px auto 0}
.sf-404 .sf-input{flex:1}
.sf-404__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* -- 11. legacy bridge ------------------------------------------------------------
   Storefront pages that predate the sf-* primitives (checkout, account, order
   tracking) still use the shared app.css components (.card .btn .flash ...).
   Re-point those components' tokens at the theme so they inherit the palette,
   radius, fonts and focus colours instead of the platform's indigo. */
.sf-body{
  --bg:var(--sf-bg);--surface:var(--sf-surface);
  --surface-2:color-mix(in srgb,var(--sf-surface) 94%,var(--sf-text));
  --surface-3:color-mix(in srgb,var(--sf-surface) 90%,var(--sf-text));
  --text:var(--sf-text);--text-2:var(--sf-text);--muted:var(--sf-muted);--faint:var(--sf-muted);
  --line:var(--sf-border);--line-2:var(--sf-border-strong);
  --brand:var(--sf-accent-text);--brand-btn:var(--sf-accent);--brand-btn-hover:var(--sf-accent-hover);--brand-active:var(--sf-accent-hover);
  --brand-soft:var(--sf-accent-soft);--brand-softer:var(--sf-accent-soft);--brand-line:color-mix(in srgb,var(--sf-accent) 35%,var(--sf-surface));
  --brand-ink:var(--sf-accent-text);
  --r-xs:calc(var(--sf-radius) * .6);--r-sm:var(--sf-radius);--r-md:var(--sf-radius);--r-lg:calc(var(--sf-radius) + 2px);--r-xl:calc(var(--sf-radius) + 4px);
  --font:var(--sf-font);--display:var(--sf-display);
  --ring:0 0 0 3px color-mix(in srgb,var(--sf-accent) 28%,transparent);
  --ok:#0F7B4F;--ok-soft:#E9F7F0;--ok-line:#B7E4CD;--ok-ink:#0B5C3B;
  --warn:#9A5B06;--warn-soft:#FFF6E8;--warn-line:#F7D9A4;--warn-ink:#7A4705;
  --err:#C53030;--err-soft:#FDEEEE;--err-line:#F5C2C2;--err-ink:#9B2222;
  --ok-solid:#0F7B4F;--warn-solid:#9A5B06;--err-solid:#C53030;--err-solid-hover:#9B2222;
  --sh-xs:0 1px 2px rgba(17,24,39,.05);--sh-sm:0 1px 2px rgba(17,24,39,.06);--sh-md:0 4px 14px rgba(17,24,39,.07);--sh-lg:0 18px 44px rgba(17,24,39,.12);
  color-scheme:light;
}
.sf-body .btn-primary{color:var(--sf-accent-ink)}
.sf-body .btn-primary:hover{color:var(--sf-accent-ink)}
.sf-body .btn{border-radius:var(--sf-btn-radius);min-height:44px}
.sf-body .btn-sm{min-height:44px}
.sf-body .card{box-shadow:none}
.sf-body .flash-cart{background:#ECFDF3;border-color:#ABEFC6;color:#05603A}

/* ==== i18n-shop-core: English | বাংলা switch and Bangla typography ======================
   The switch is server-rendered links (/lang/{en|bn}?next=...), so it works without JavaScript and does not
   shift the layout: both languages are always shown, the current one in bold. Header copy shows from 990px
   (below that the menu drawer and the footer carry it; without JavaScript the header shows it at any width). */
.sf-lang{display:inline-flex;align-items:center;white-space:nowrap;font-size:13.6px;line-height:1}   /* px, not rem: the root grows 5% in Bangla and the switch must not move */
.sf-body .sf-lang__opt{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px;color:var(--sf-muted);font-weight:600;text-decoration:none}
.sf-body a.sf-lang__opt:hover{color:var(--sf-accent-text);text-decoration:underline;text-underline-offset:5px}
/* same weight on both words so switching never changes the width; the current language is marked by colour and an underline */
.sf-body .sf-lang__opt.is-current{color:var(--sf-text);text-decoration:underline;text-decoration-color:var(--sf-accent);text-decoration-thickness:2px;text-underline-offset:5px}
.sf-lang__sep{color:var(--sf-border-strong);user-select:none}
.sf-lang--header{display:none;margin-inline-end:4px}
@media (min-width:990px){.sf-lang--header{display:inline-flex}}
html:not(.sf-js) .sf-lang--header{display:inline-flex}
.sf-lang--drawer{margin-inline-start:auto}
.sf-lang--footer{margin-inline:-8px}
@media (max-width:420px){.sf-body .sf-lang--drawer .sf-lang__opt{padding:0 6px}}
/* Bangla: slightly larger (its glyphs read smaller than Latin at the same size), taller lines (matras and conjuncts),
   no letter-spacing or capitals (they break the script). Hind Siliguri is always requested by the theme fonts link. */
html[lang="bn"]{font-size:105%}
html[lang="bn"] .sf-body{line-height:1.7}
html[lang="bn"] .sf-body *{letter-spacing:normal;text-transform:none}
html[lang="bn"] .sf-body :is(h1,h2,h3,h4,h5,h6){line-height:1.4}
html[lang="bn"] .sf-body :is(.sf-btn,.sf-badge,.sf-logo,.sf-logo__text,.sf-nav__link,.sf-card__title,.sf-cl__title,.sf-line__title){line-height:1.5}
.sf-lang--gate{margin-bottom:-6px}

/* ── product-modifiers: chosen options on cart, checkout and order lines (module product-modifiers) ── */
.sf-line-mods{list-style:none;margin:4px 0 2px;padding-block:0 0;padding-inline:12px 0;border-inline-start:2px solid var(--sf-border);font-size:.84rem;line-height:1.45;color:var(--sf-muted)}
.sf-line-mods li{margin:1px 0}
.sf-line-mods .sf-lm-g{font-weight:600;color:var(--sf-text)}
.sf-line-mods .sf-lm-d{white-space:nowrap}
.sf-line-mods .sf-lm-note{font-style:italic}
.co-lines .sf-line-mods li{display:block;padding:0;border:0}
.sf-line-modnote{display:block;margin:2px 0;font-size:.84rem;color:var(--sf-muted);font-style:italic;overflow-wrap:anywhere}
.sf-line-moderr{display:block;margin:6px 0;padding:8px 10px;border-radius:var(--sf-radius);background:#FEF3F2;border:1px solid #FDA29B;color:#B42318;font-size:.84rem;font-weight:600;line-height:1.4}
.sf-line-modprice{display:block;margin:6px 0;padding:8px 10px;border-radius:var(--sf-radius);background:#FFFAEB;border:1px solid #FEC84B;color:#93370D;font-size:.84rem;line-height:1.4}
.sf-line-edit{display:inline-block;min-height:44px;line-height:44px;font-size:.86rem;font-weight:600}

/* ── /product-modifiers ── */

/* ==== themes-more: colour tokens, new layouts and the Mode / Hearth / Pagina / Bloom / Dine themes ==============
   Tokens written by Themes::cssVars() on <html>: button (--sf-btn-*), sale tag (--sf-sale*), header and footer
   scopes (--sf-header-*, --sf-footer-*), weights (--sf-display-weight, --sf-display-bold, --sf-body-weight).
   Flags written by Themes::dataAttributes(): data-header (+ "search"), data-header-style, data-hero (+ "collage", "order"),
   data-card (+ "editorial", "wide", "compact", "soft", "menu"), data-footer (+ "minimal", "newsletter"), data-view, data-view-toggle,
   data-home, data-tone (page), data-header-tone, data-footer-tone (light | dark).
   Behaviour: public/shop-themes.js. Everything below is additive: the six earlier themes look as before.
   ====================================================================================================================== */

/* -- A. tokens and primitives -------------------------------------------------------------------------------------- */
:root{
  --sf-btn-bg:var(--sf-accent);--sf-btn-ink:var(--sf-accent-ink);--sf-btn-hover:var(--sf-accent-hover);
  --sf-sale:var(--sf-accent);--sf-sale-ink:var(--sf-accent-ink);--sf-sale-text:var(--sf-accent-text);
  --sf-header-bg:var(--sf-surface);--sf-header-ink:var(--sf-text);--sf-header-muted:var(--sf-muted);--sf-header-border:var(--sf-border);--sf-header-accent:var(--sf-accent-text);
  --sf-footer-bg:var(--sf-surface);--sf-footer-ink:var(--sf-text);--sf-footer-muted:var(--sf-muted);--sf-footer-border:var(--sf-border);--sf-footer-accent:var(--sf-accent-text);
  --sf-display-weight:600;--sf-display-bold:700;--sf-body-weight:400;
}
html.sf-html[data-sf-theme][data-tone="dark"]{color-scheme:dark}
html[data-tone="dark"] .sf-body{color-scheme:dark}
.sf-body{font-weight:var(--sf-body-weight)}
.sf-body h1,.sf-body h2,.sf-body h3,.sf-body h4,.sf-body h5,.sf-heading,
html[data-heading="upper"] .sf-body h1,html[data-heading="upper"] .sf-body h2,html[data-heading="upper"] .sf-heading{font-weight:var(--sf-display-weight)}
.sf-logo,.sf-404__code,.sf-card__ph,.sf-tile__ph,.sf-line__ph,.sf-hero__mark{font-weight:var(--sf-display-bold)}
/* the primary button and the sale tag have their own colours (they follow the accent until the seller picks one) */
.sf-btn--primary,.sf-body a.sf-btn--primary{background:var(--sf-btn-bg);border-color:var(--sf-btn-bg);color:var(--sf-btn-ink)}
.sf-btn--primary:hover,.sf-body a.sf-btn--primary:hover{background:var(--sf-btn-hover);border-color:var(--sf-btn-hover);color:var(--sf-btn-ink)}
.sf-badge--sale{background:var(--sf-sale);color:var(--sf-sale-ink)}
.sf-card__price .sf-price--sale{color:var(--sf-sale-text)}
.sf-body{--brand-btn:var(--sf-btn-bg);--brand-btn-hover:var(--sf-btn-hover);--brand-active:var(--sf-btn-hover)}
.sf-body .btn-primary,.sf-body .btn-primary:hover{color:var(--sf-btn-ink)}

/* header and footer are scopes of their own: inside them the semantic tokens mean "on this bar", so every component
   (links, icons, dropdowns, the newsletter form ...) reads correctly on a light, tinted or dark bar without extra rules */
.sf-header{
  --sf-bg:var(--sf-header-bg);--sf-surface:var(--sf-header-bg);--sf-text:var(--sf-header-ink);--sf-muted:var(--sf-header-muted);
  --sf-border:var(--sf-header-border);--sf-accent-text:var(--sf-header-accent);
  --sf-border-strong:color-mix(in srgb,var(--sf-header-ink) 38%,var(--sf-header-bg));
  --sf-accent-soft:color-mix(in srgb,var(--sf-header-bg) 91%,var(--sf-accent));
}
.sf-header .sf-nav__sub{--sf-text:var(--sf-header-ink);--sf-muted:var(--sf-header-muted);--sf-border:var(--sf-header-border)}
.sf-footer{
  color:var(--sf-footer-ink);
  --sf-bg:var(--sf-footer-bg);--sf-surface:var(--sf-footer-bg);--sf-text:var(--sf-footer-ink);--sf-muted:var(--sf-footer-muted);
  --sf-border:var(--sf-footer-border);--sf-accent-text:var(--sf-footer-accent);
  --sf-border-strong:color-mix(in srgb,var(--sf-footer-ink) 38%,var(--sf-footer-bg));
  --sf-accent-soft:color-mix(in srgb,var(--sf-footer-bg) 90%,var(--sf-accent));
}
/* status colours used by the catalogue and product pages (public/shop-catalog.css) need light variants on a dark page */
html[data-tone="dark"] .sf-cat-wrap,html[data-tone="dark"] .sf-pdp-wrap,html[data-tone="dark"] .sf-pdp-sticky,html[data-tone="dark"] .sf-lb{--ct-ok:#4ADE80;--ct-warn:#FBBF24;--ct-err:#FCA5A5}
/* the payment brand colours must stay readable on tinted footers too (WCAG AA) */
.sf-pay__badge--bkash{color:#A60E4F}
.sf-pay__badge--nagad{color:#8F4309}
/* an option with no matching products keeps readable text instead of fading to 3:1 (public/shop-catalog.css dims it with opacity) */
.sf-cat .sf-cat-check.is-empty{opacity:1}
.sf-cat .sf-cat-check.is-empty .sf-cat-check-label,.sf-cat .sf-cat-check.is-empty .sf-cat-check-n{color:var(--sf-muted)}
html[data-footer-tone="dark"] .sf-pay__badge{background:color-mix(in srgb,var(--sf-footer-ink) 8%,transparent);color:var(--sf-footer-ink);border-color:var(--sf-border-strong)}
html[data-footer-tone="dark"] .sf-body .sf-social a:hover{background:var(--sf-footer-ink);border-color:var(--sf-footer-ink);color:var(--sf-footer-bg)}

/* -- B. header: search-first layout and the transparent header ----------------------------------------------------- */
.sf-header__search{display:none}
@media (min-width:990px){
  html[data-header="search"]{--sf-header-h:112px}
  html[data-header="search"] .sf-header__inner{
    grid-template-columns:auto minmax(280px,640px) auto;grid-template-areas:"logo search tools" "nav nav nav";
    column-gap:clamp(20px,4vw,48px);padding-top:10px;min-height:0;
  }
  html[data-header="search"] .sf-header__search{display:flex;grid-area:search;align-items:center;position:relative;min-width:0}
  html[data-header="search"] .sf-header__search .sf-input{min-height:48px;padding-inline-end:52px;border-radius:calc(var(--sf-btn-radius) + 2px)}
  html[data-header="search"] .sf-header__search .sf-icon-btn{position:absolute;inset-inline-end:2px;top:50%;transform:translateY(-50%)}
  html[data-header="search"] .sf-nav{margin:2px 0 0;border-top:1px solid var(--sf-border);width:100%;justify-self:stretch}
  html[data-header="search"] .sf-nav__list{justify-content:flex-start}
  html[data-header="search"] .sf-header__tools [data-sf-open="search"]{display:none}
}
html.sf-hdr-over .sf-header{margin-bottom:calc(var(--sf-hdr-h,65px) * -1);transition:background-color .25s,border-color .25s,box-shadow .25s}
html.sf-hdr-over .sf-header.is-clear{background:transparent;border-bottom-color:transparent;box-shadow:none !important;
  --sf-text:#fff;--sf-muted:rgba(255,255,255,.86);--sf-border:rgba(255,255,255,.34);--sf-border-strong:rgba(255,255,255,.7)}
html.sf-hdr-over .sf-header.is-clear::before{
  content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:calc(100% + 64px);z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(10,14,22,.66),rgba(10,14,22,0));
}
html.sf-hdr-over .sf-hero[data-sf-under-header] .sf-hero__inner{padding-top:calc(var(--sf-hdr-h,65px) + clamp(28px,5vw,72px))}
html.sf-hdr-over .sf-header.is-clear .sf-nav__link::after{background:#fff}
@media (prefers-reduced-motion:reduce){html.sf-hdr-over .sf-header{transition:none}}

/* -- C. banners: lookbook collage (Mode) and "Order now" (Dine) ------------------------------------------------------ */
.sf-hero--collage{position:relative;isolation:isolate;display:grid;align-items:end;min-height:clamp(560px,84vh,860px);background:var(--sf-dark);color:#fff}
.sf-hero__mosaic{position:absolute;inset:0;z-index:-2;display:grid;gap:6px;grid-template-columns:1.15fr 1fr;grid-template-rows:1.3fr 1fr}
.sf-hero__tile{position:relative;overflow:hidden;min-height:0;background:linear-gradient(160deg,color-mix(in srgb,var(--sf-accent) 62%,#000),color-mix(in srgb,var(--sf-accent) 26%,#000))}
.sf-hero__tile img{display:block;width:100%;height:100%;object-fit:cover}
.sf-hero__tile--1{grid-column:1;grid-row:1 / 3}
.sf-hero__tile--2{grid-column:2;grid-row:1}
.sf-hero__tile--3{grid-column:2;grid-row:2}
.sf-hero__tile--4{display:none}
.sf-hero__tile.is-empty.sf-hero__tile--2{background:linear-gradient(200deg,color-mix(in srgb,var(--sf-accent) 40%,#000),#000)}
.sf-hero__tile.is-empty.sf-hero__tile--3{background:linear-gradient(120deg,color-mix(in srgb,var(--sf-accent) 22%,#000),color-mix(in srgb,var(--sf-accent) 55%,#000))}
@media (min-width:860px){
  .sf-hero__mosaic{grid-template-columns:1.35fr 1fr 1.1fr;grid-template-rows:1fr 1fr}
  .sf-hero__tile--4{display:block;grid-column:3;grid-row:1 / 3}
  .sf-hero__tile--2{grid-row:1}
}
.sf-hero--collage::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,10,14,.74) 0%,rgba(8,10,14,.4) 42%,rgba(8,10,14,.08) 100%)}
.sf-hero--collage .sf-hero__inner{padding-block:clamp(48px,9vw,120px) clamp(36px,6vw,80px)}
.sf-hero--collage .sf-hero__copy{max-width:760px}
.sf-hero--collage .sf-hero__copy .sf-eyebrow{color:rgba(255,255,255,.92)}
.sf-body .sf-hero--collage .sf-hero__title{font-size:clamp(2.7rem,.8rem + 8vw,7rem);line-height:.95;letter-spacing:.005em;margin-bottom:20px;color:#fff;text-wrap:balance}
.sf-hero--collage .sf-hero__text{color:rgba(255,255,255,.92)}

.sf-hero--order{background:var(--sf-accent-soft);color:var(--sf-text)}
.sf-hero--order .sf-hero__grid{display:grid;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(28px,5vw,72px)}
@media (min-width:860px){.sf-hero--order .sf-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.sf-hero--order .sf-hero__copy{max-width:600px}
.sf-hero--order .sf-hero__copy .sf-eyebrow{color:var(--sf-accent-text)}
.sf-body .sf-hero--order .sf-hero__title{font-size:clamp(2.3rem,1.1rem + 4.4vw,4rem);color:var(--sf-text);line-height:1.05;margin-bottom:12px}
.sf-hero--order .sf-hero__text{color:var(--sf-muted);margin-bottom:22px}
.sf-hero--order .sf-hero__actions .sf-btn{min-height:54px;padding-inline:30px;font-size:1rem}
.sf-hero--order .sf-hero__art{display:none}
@media (min-width:860px){.sf-hero--order .sf-hero__art{display:block}}
.sf-hero--order .sf-hero__art--plates{aspect-ratio:auto;border-radius:0;overflow:visible;background:none}
.sf-hero__plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vw,28px);max-width:500px;margin-inline:auto;padding-bottom:28px}
.sf-hero__plate{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid var(--sf-surface);box-shadow:0 16px 36px rgba(20,12,8,.22);background:var(--sf-accent-soft)}
.sf-hero__plate:nth-child(even){transform:translateY(30px)}
.sf-hero__plate img{width:100%;height:100%;object-fit:cover;display:block}

.sf-orderbar{margin-top:26px;padding:16px;border-radius:calc(var(--sf-radius) + 4px);background:var(--sf-surface);border:1px solid var(--sf-border);box-shadow:var(--sf-shadow);display:grid;gap:14px;max-width:520px}
.sf-orderbar__types{border:0;margin:0;padding:0;min-width:0}
.sf-orderbar__legend{padding:0;margin:0 0 8px;font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sf-muted)}
.sf-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:calc(var(--sf-btn-radius) + 5px);background:var(--sf-accent-soft)}
.sf-seg__opt{position:relative;display:block;cursor:pointer}
.sf-seg__opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sf-seg__opt span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 10px;border-radius:var(--sf-btn-radius);font-weight:700;color:var(--sf-text);transition:background-color .18s,color .18s,box-shadow .18s}
.sf-seg__opt span svg{width:20px;height:20px;flex:none}
.sf-seg__opt input:checked+span{background:var(--sf-btn-bg);color:var(--sf-btn-ink);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.sf-seg__opt input:focus-visible+span{outline:2px solid var(--sf-accent-text);outline-offset:2px}
.sf-orderbar__note{margin:0;font-size:.92rem;color:var(--sf-muted)}
.sf-orderbar:has(input[value="pickup"]:checked) [data-sf-order-note="delivery"],
.sf-orderbar:has(input[value="delivery"]:checked) [data-sf-order-note="pickup"]{display:none}
.sf-orderbar__facts{display:grid;gap:8px;margin:0;padding:12px 0 0;border-top:1px solid var(--sf-border);font-size:.92rem}
.sf-orderbar__facts li{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center;justify-content:space-between}
.sf-orderbar__k{display:inline-flex;align-items:center;gap:8px;color:var(--sf-muted)}
.sf-orderbar__k svg{width:18px;height:18px;flex:none}
.sf-orderbar__v{font-weight:600}
.sf-body a.sf-orderbar__v{color:var(--sf-text);display:inline-flex;align-items:center;min-height:44px}

/* -- D. product cards: editorial, wide, compact, soft, menu rows; list view ---------------------------------------- */
.sf-card__desc,.sf-card__format,.sf-dots{display:none}
.sf-card__title{overflow-wrap:anywhere}

html[data-card="editorial"] .sf-grid{gap:clamp(28px,4vw,52px) var(--sf-gap)}
html[data-card="editorial"] .sf-card__media{border-radius:0}
html[data-card="editorial"] .sf-card__body{padding-top:14px;gap:5px}
html[data-card="editorial"] .sf-card__title{font-family:var(--sf-font);font-size:.8rem;font-weight:500;line-height:1.4;letter-spacing:.09em;text-transform:uppercase}
html[data-card="editorial"] .sf-card__vendor{font-size:.66rem;letter-spacing:.16em}
html[data-card="editorial"] .sf-card__price{font-size:.92rem;margin-top:0}
html[data-card="editorial"] .sf-card__price .sf-price{font-weight:400}
html[data-card="editorial"] .sf-card__price .sf-price--sale{font-weight:600}
html[data-card="editorial"] .sf-card__badges{inset-inline-start:0;top:0;gap:0}
html[data-card="editorial"] .sf-badge{border-radius:0;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px}
html[data-card="editorial"] .sf-card__quick .sf-btn{border-width:1px}

html[data-card="wide"] .sf-grid{gap:clamp(36px,5vw,64px) clamp(20px,3vw,40px)}
html[data-card="wide"] .sf-card__body{padding-top:18px;gap:6px}
html[data-card="wide"] .sf-card__title{font-size:1.32rem;line-height:1.2;font-weight:var(--sf-display-weight)}
html[data-card="wide"] .sf-card__vendor{letter-spacing:.14em;font-size:.7rem}
html[data-card="wide"] .sf-card__price{margin-top:4px;font-size:1rem}

html[data-card="compact"] .sf-card__media{border-radius:3px;background:var(--sf-accent-soft);box-shadow:0 1px 2px rgba(20,20,30,.22),0 10px 20px rgba(20,20,30,.12)}
html[data-card="compact"] .sf-card__media::after{content:"";position:absolute;inset-block:0 0;inset-inline:0 auto;width:8px;background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,0));pointer-events:none;z-index:1}
html[data-card="compact"] .sf-card__body{padding-top:14px;gap:2px}
html[data-card="compact"] .sf-card__title{order:1;font-size:1.02rem;line-height:1.28;font-weight:var(--sf-display-weight)}
html[data-card="compact"] .sf-card__vendor{order:2;font-size:.86rem;letter-spacing:0;text-transform:none}
html[data-card="compact"] .sf-card__desc{order:3}
html[data-card="compact"] .sf-card__price{order:4;margin-top:4px}
html[data-card="compact"] .sf-card__format{display:inline-flex;align-items:center;position:absolute;inset-inline-start:10px;bottom:10px;z-index:2;min-height:22px;padding:2px 9px;border-radius:999px;
  background:var(--sf-surface);color:var(--sf-text);font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;box-shadow:0 1px 3px rgba(0,0,0,.28)}

html[data-card="soft"] .sf-card{background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:var(--sf-radius);padding:10px 10px 14px;transition:box-shadow .2s,transform .2s var(--sf-ease)}
@media (hover:hover){html[data-card="soft"] .sf-card:hover{box-shadow:var(--sf-shadow);transform:translateY(-3px)}}
html[data-card="soft"] .sf-card__media{border-radius:calc(var(--sf-radius) - 8px)}
html[data-card="soft"] .sf-card__body{padding:14px 8px 4px;text-align:center;align-items:center}
html[data-card="soft"] .sf-card__price{justify-content:center}
html[data-card="soft"] .sf-card__title{font-size:1.1rem;font-weight:var(--sf-display-weight)}
html[data-card="soft"] .sf-card__quick{margin:10px 6px 0}

html[data-card="menu"] .sf-grid{grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:760px){html[data-card="menu"] .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}}
html[data-card="menu"] .sf-card{display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-template-areas:"body media" "quick media";column-gap:16px;align-content:start;
  padding:16px;background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:var(--sf-radius);transition:border-color .2s,box-shadow .2s}
@media (hover:hover){html[data-card="menu"] .sf-card:hover{border-color:var(--sf-accent);box-shadow:var(--sf-shadow)}}
@media (max-width:389px){html[data-card="menu"] .sf-card{grid-template-columns:minmax(0,1fr) 88px;column-gap:12px;padding:14px}}
html[data-card="menu"] .sf-card__media{grid-area:media;width:104px;height:104px;aspect-ratio:1;border-radius:50%;overflow:visible;align-self:start;background:var(--sf-accent-soft)}
@media (max-width:389px){html[data-card="menu"] .sf-card__media{width:88px;height:88px}}
html[data-card="menu"] .sf-card__img{border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--sf-surface),0 6px 16px rgba(42,29,23,.2)}
html[data-card="menu"] .sf-card__ph{font-size:2rem}
html[data-card="menu"] .sf-card__badges{inset-inline-start:-6px;top:-6px}
html[data-card="menu"] .sf-card__body{grid-area:body;padding:0;gap:3px;min-width:0}
html[data-card="menu"] .sf-card__title{font-family:var(--sf-font);font-size:1.08rem;font-weight:700;line-height:1.3;letter-spacing:0}
/* the title link is the (stretched) target of the whole card; give the text itself a 44px box without moving anything */
html[data-card="menu"] .sf-card__title a{display:block;padding-block:11px;margin-block:-11px}
html[data-card="menu"] .sf-card__vendor{display:none}
html[data-card="menu"] .sf-card__desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--sf-muted);font-size:.9rem;line-height:1.45}
html[data-card="menu"] .sf-card__price{margin-top:4px;font-size:1.05rem}
html[data-card="menu"] .sf-card__price .sf-price{font-weight:700}
html[data-card="menu"] .sf-dots{display:flex}
html[data-card="menu"] .sf-card__quick{grid-area:quick;margin:12px 0 0;align-self:end}
html[data-card="menu"] .sf-card__quick .sf-btn{width:auto;min-width:136px;min-height:48px}
html[data-card="menu"] .sf-card[data-sold="1"] .sf-card__img{filter:grayscale(.5)}
/* comparing dishes is not a thing, and the toggle would sit on the round photo */
html[data-card="menu"] .sfx-cmp--card{display:none}

/* dietary marks */
.sf-dots{flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.sf-dot{position:relative;display:inline-block;width:16px;height:16px;flex:none;border:2px solid currentColor;border-radius:3px;color:#0A7D3E}
.sf-dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:currentColor}
.sf-dot--veg{color:#0A7D3E}
.sf-dot--nonveg{color:#B42318}
.sf-dot--vegan{color:#3F7A12;border-radius:50%}
.sf-dot--spicy{color:#C2410C;border-radius:50%}
.sf-dot--halal{color:#0E7490}
.sf-dot--gf{color:#8A5E00;transform:rotate(45deg);border-radius:2px}
.sf-dot--gf::after{transform:rotate(-45deg)}
.sf-dot--nuts{color:#8A4B1F;border-radius:6px 6px 3px 3px}
html[data-tone="dark"] .sf-dot--veg{color:#4ADE80}
html[data-tone="dark"] .sf-dot--nonveg{color:#FB7185}
html[data-tone="dark"] .sf-dot--vegan{color:#A3E635}
html[data-tone="dark"] .sf-dot--spicy{color:#FB923C}
html[data-tone="dark"] .sf-dot--halal{color:#22D3EE}
html[data-tone="dark"] .sf-dot--gf{color:#FBBF24}
html[data-tone="dark"] .sf-dot--nuts{color:#D6A06B}

/* list view (collections and search; the switch is shown by themes that ask for it, the default comes from the theme) */
.sf-cat-view{display:inline-flex;flex:none;border:1px solid var(--sf-border-strong);border-radius:var(--sf-btn-radius);overflow:hidden}
.sf-cat-view[hidden]{display:none !important}
.sf-cat-viewbtn{display:grid;place-items:center;width:44px;min-height:44px;border:0;background:transparent;color:var(--sf-muted);cursor:pointer}
.sf-cat-viewbtn[aria-pressed="true"]{background:var(--sf-text);color:var(--sf-bg)}
.sf-cat-viewbtn:focus-visible{outline:2px solid var(--sf-accent-text);outline-offset:-3px}
html[data-view="list"]:not([data-card="menu"]) .sf-cat-grid{grid-template-columns:minmax(0,1fr);gap:0}
html[data-view="list"]:not([data-card="menu"]) .sf-cat-grid .sf-card{
  display:grid;grid-template-columns:clamp(84px,24vw,132px) minmax(0,1fr);grid-template-areas:"media body" "media quick";column-gap:clamp(14px,3vw,24px);align-content:start;
  padding:18px 0;background:none;border:0;border-bottom:1px solid var(--sf-border);border-radius:0;box-shadow:none;transform:none;overflow:visible;
}
html[data-view="list"]:not([data-card="menu"]) .sf-cat-grid .sf-card__media{grid-area:media;align-self:start;width:100%}
html[data-view="list"]:not([data-card="menu"]) .sf-cat-grid .sf-card__body{grid-area:body;padding:0;text-align:start;align-items:flex-start}
html[data-view="list"]:not([data-card="menu"]) .sf-cat-grid .sf-card__price{justify-content:flex-start}
html[data-view="list"]:not([data-card="menu"]) .sf-cat-grid .sf-card__quick{grid-area:quick;margin:12px 0 0;max-width:220px}
html[data-view="list"]:not([data-card="menu"]) .sf-cat-grid .sf-card__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:4px 0 0;color:var(--sf-muted);font-size:.92rem;line-height:1.5;order:3}
html[data-view="list"]:not([data-card="menu"]) .sf-cat-grid .sf-card__title{font-size:1.1rem}
/* the compare toggle is an overlay on the picture: in a small list thumbnail it would cover the cover, so it stays on the grid and product page */
html[data-view="list"]:not([data-card="menu"]) .sf-cat-grid .sfx-cmp--card{display:none}

/* -- E. benefits row and the menu-first home ------------------------------------------------------------------------ */
.sf-benefits{padding-block:clamp(22px,3.4vw,40px);border-bottom:1px solid var(--sf-border)}
.sf-benefits__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;margin:0;padding:0;list-style:none}
@media (min-width:860px){.sf-benefits__list{grid-template-columns:repeat(var(--sf-benefit-n,4),minmax(0,1fr))}}
.sf-benefit{display:flex;gap:14px;align-items:flex-start;min-width:0}
@media (max-width:559px){.sf-benefit{flex-direction:column;gap:10px}}
.sf-benefit__icon{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--sf-accent-soft);color:var(--sf-accent-text)}
.sf-benefit__icon svg{width:24px;height:24px}
.sf-benefit__copy{min-width:0}
.sf-benefit__title{margin:0 0 2px;font-weight:700;line-height:1.3}
.sf-benefit__text{margin:0;font-size:.88rem;line-height:1.5;color:var(--sf-muted)}

.sf-mhome{padding-bottom:clamp(24px,4vw,56px)}
.sf-mhome__intro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:clamp(28px,4.4vw,52px);padding-bottom:14px}
.sf-mhome__legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:.84rem;color:var(--sf-muted)}
.sf-mhome__legend li{display:inline-flex;align-items:center;gap:7px}
.sf-mhome__bar{position:sticky;top:0;z-index:50;background:var(--sf-bg);border-bottom:1px solid var(--sf-border)}
html[data-sticky="1"] .sf-mhome__bar{top:var(--sf-hdr-h,calc(var(--sf-header-h) + 1px))}
.sf-mhome__tabs{padding-block:0}
.sf-mhome__tablist{display:flex;gap:8px;margin:0;padding:10px 2px;list-style:none;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.sf-mhome__tablist::-webkit-scrollbar{display:none}
.sf-mhome__tablist li{flex:none;scroll-snap-align:center}
.sf-body a.sf-mhome__tab{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid var(--sf-border-strong);border-radius:999px;background:var(--sf-surface);color:var(--sf-text);font-weight:600;white-space:nowrap;text-decoration:none}
.sf-body a.sf-mhome__tab:hover{background:var(--sf-accent-soft);text-decoration:none}
.sf-body a.sf-mhome__tab[aria-current="true"]{background:var(--sf-text);border-color:var(--sf-text);color:var(--sf-bg)}
.sf-mhome__section{padding-top:clamp(26px,4vw,44px);scroll-margin-top:calc(var(--sf-header-h) + 78px)}
.sf-body .sf-mhome__title{font-family:var(--sf-display);font-size:clamp(1.45rem,1.15rem + 1.3vw,2.05rem);line-height:1.15}

/* -- F. footers: minimal and newsletter-first ----------------------------------------------------------------------- */
html[data-footer="minimal"] .sf-footer__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:28px 64px;padding-block:clamp(30px,4.4vw,52px)}
html[data-footer="minimal"] .sf-footer__brand{flex:1 1 260px}
html[data-footer="minimal"] .sf-footer__col{flex:0 1 auto;min-width:140px}
html[data-footer="minimal"] .sf-footer__news{flex:1 1 320px;max-width:420px}
html[data-footer="newsletter"] .sf-footer__news{grid-column:1 / -1;order:-1;width:100%;max-width:640px;margin-inline:auto;text-align:center;padding-bottom:30px;border-bottom:1px solid var(--sf-border)}
html[data-footer="newsletter"] .sf-footer__news .sf-newsletter-form{flex-direction:row;justify-content:center}
html[data-footer="newsletter"] .sf-footer__news .sf-newsletter-btn{width:auto}
@media (max-width:479px){html[data-footer="newsletter"] .sf-footer__news .sf-newsletter-form{flex-direction:column}html[data-footer="newsletter"] .sf-footer__news .sf-newsletter-btn{width:100%}}
@media (min-width:990px){html[data-footer="newsletter"] .sf-footer__top{grid-template-columns:1.6fr repeat(var(--sf-footer-cols,2),1fr)}}

/* -- G. identity of the five added themes ---------------------------------------------------------------------------- */
/* Mode: fashion editorial */
html[data-sf-theme="mode"] .sf-announce{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
html[data-sf-theme="mode"] .sf-logo{font-size:1.5rem;letter-spacing:.24em;font-weight:var(--sf-display-bold)}
html[data-sf-theme="mode"] .sf-body .sf-nav__link{font-size:.72rem;letter-spacing:.16em}
html[data-sf-theme="mode"] .sf-btn{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
html[data-sf-theme="mode"] .sf-section{padding-block:clamp(44px,7vw,96px)}
html[data-sf-theme="mode"] .sf-section__head{align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--sf-text)}
html[data-sf-theme="mode"] .sf-section--tint{background:var(--sf-bg)}
html[data-sf-theme="mode"] .sf-tile__media{aspect-ratio:3/4;border-radius:0}
html[data-sf-theme="mode"] .sf-tile__label h3{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--sf-font);font-weight:500}
html[data-sf-theme="mode"] .sf-footer__brand .sf-logo{letter-spacing:.24em}
@media (max-width:640px){html[data-sf-theme="mode"] .sf-logo{font-size:1.2rem;letter-spacing:.14em}}
/* Hearth: furniture and home */
html[data-sf-theme="hearth"] .sf-section{padding-block:clamp(56px,9vw,128px)}
html[data-sf-theme="hearth"] .sf-hero--overlay{min-height:clamp(400px,40vw + 110px,620px);align-items:end}
html[data-sf-theme="hearth"] .sf-hero--overlay::before{background:linear-gradient(0deg,rgba(28,18,12,.74),rgba(28,18,12,.16) 72%)}
html[data-sf-theme="hearth"] .sf-body .sf-hero__title{font-size:clamp(2.6rem,1rem + 5.6vw,5.2rem);line-height:1.02;letter-spacing:-.01em}
html[data-sf-theme="hearth"] .sf-hero__copy{max-width:580px}
html[data-sf-theme="hearth"] .sf-section--tint{background:color-mix(in srgb,var(--sf-bg) 86%,var(--sf-accent))}
html[data-sf-theme="hearth"] .sf-tile__media{aspect-ratio:4/3}
html[data-sf-theme="hearth"] .sf-collections{gap:clamp(16px,2.4vw,32px)}
html[data-sf-theme="hearth"] .sf-section__head{margin-bottom:clamp(24px,4vw,48px)}
html[data-sf-theme="hearth"] .sf-eyebrow{letter-spacing:.2em}
/* Pagina: books and digital goods */
html[data-sf-theme="pagina"] .sf-section{padding-block:clamp(28px,4.5vw,52px)}
html[data-sf-theme="pagina"] .sf-section__head{padding-bottom:12px;border-bottom:1px solid var(--sf-border)}
html[data-sf-theme="pagina"] .sf-hero--split .sf-hero__grid{padding-block:clamp(24px,4vw,48px)}
html[data-sf-theme="pagina"] .sf-body .sf-hero__title{font-size:clamp(2rem,1.2rem + 3.4vw,3.4rem)}
html[data-sf-theme="pagina"] .sf-hero__art{aspect-ratio:16/10}
html[data-sf-theme="pagina"] .sf-section--tint{background:var(--sf-accent-soft)}
html[data-sf-theme="pagina"] .sf-tile__media{aspect-ratio:3/2}
/* Bloom: beauty and aromatics */
html[data-sf-theme="bloom"] .sf-hero--split{background:linear-gradient(135deg,var(--sf-accent-soft),color-mix(in srgb,var(--sf-accent-soft) 40%,var(--sf-bg)))}
html[data-sf-theme="bloom"] .sf-hero__art{justify-self:center;width:100%;max-width:440px;aspect-ratio:4/5;border-radius:999px 999px calc(var(--sf-radius) * 1.2) calc(var(--sf-radius) * 1.2)}
html[data-sf-theme="bloom"] .sf-hero__collage{grid-template-columns:1fr;grid-template-rows:1fr;padding:12px}
html[data-sf-theme="bloom"] .sf-hero__collage img:first-child{grid-row:1;border-radius:999px 999px calc(var(--sf-radius) * .9) calc(var(--sf-radius) * .9);box-shadow:none}
html[data-sf-theme="bloom"] .sf-hero__collage img:nth-child(n+2){display:none}
html[data-sf-theme="bloom"] .sf-body .sf-hero__title{font-size:clamp(2.2rem,1.1rem + 4.4vw,4rem);line-height:1.08}
html[data-sf-theme="bloom"] .sf-benefits{background:var(--sf-accent-soft);border:0}
html[data-sf-theme="bloom"] .sf-benefit__icon{background:var(--sf-surface)}
html[data-sf-theme="bloom"] .sf-section--tint{background:var(--sf-accent-soft)}
html[data-sf-theme="bloom"] .sf-tile__media{border-radius:calc(var(--sf-radius) * 1.3)}
html[data-sf-theme="bloom"] .sf-eyebrow{letter-spacing:.18em}
/* Dine: restaurants, cafes and cloud kitchens (large tap targets everywhere) */
html[data-sf-theme="dine"] .sf-btn{min-height:52px}
html[data-sf-theme="dine"] .sf-btn--sm{min-height:48px}
html[data-sf-theme="dine"] .sf-body .sf-nav__link{font-weight:600}
html[data-sf-theme="dine"] .sf-qty button,html[data-sf-theme="dine"] .sf-qty input{min-height:48px}
html[data-sf-theme="dine"] .sf-section--tint{background:var(--sf-accent-soft)}
/* ==== /themes-more ==== */
/* ==== review-followups (Cut M): 44 px tap targets on the storefront. Appended block; nothing above was changed. ==== */
/* The card title link keeps its stretched ::after (the whole card is the link) and the card height: padding and negative margin cancel. */
.sf-body .sf-card__title a{display:inline-block;padding-block:12px;margin-block:-12px}
.sf-footer__contact li{min-height:44px}
.sf-footer__contact a{display:inline-flex;align-items:center;min-height:44px}
/* ==== /review-followups-m ==== */

/* ── integration-pass W1: the product name in a cart line is a thumb-sized link on a phone (the box grows, the layout does not move) ── */
@media (max-width:640px){
  .sf-body .sf-cl__title{display:inline-block;padding-block:12px;margin-block:-12px}
}
/* ── /integration-pass W1 ── */

/* ── walkthrough-followups (item 7): a product name is 44 px or more to tap on its own line ───────────────────────────────────────────────────────
   Appended block; nothing above was changed. The card title link (the whole card is the link through its ::after) and the cart line title were 41 and
   43 px: the padding grows and the negative margin keeps the card and the cart line exactly as tall as before. */
.sf-body .sf-card__title a{padding-block:15px;margin-block:-15px}
@media (max-width:640px){
  .sf-body .sf-cl__title{padding-block:15px;margin-block:-15px}
}
/* ── /walkthrough-followups (item 7) ── */