/* ==========================================================================
   Storefront theme — rendered inside the editor preview and the full preview.
   Everything is driven by custom properties set on .sf, and responsive rules
   use container queries so the preview frame (not the window) decides layout.
   ========================================================================== */
.sf {
  container-type: inline-size;
  --sf-surface: color-mix(in srgb, var(--sf-text) 5%, var(--sf-bg));
  --sf-line: color-mix(in srgb, var(--sf-text) 13%, var(--sf-bg));
  --sf-muted: color-mix(in srgb, var(--sf-text) 62%, var(--sf-bg));
  --sf-accent-soft: color-mix(in srgb, var(--sf-accent) 14%, var(--sf-bg));
  position: relative; min-height: 100%;
  background: var(--sf-bg); color: var(--sf-text);
  font-family: var(--sf-body); font-size: 15px; line-height: 1.6;
}
.sf * { box-sizing: border-box; }
.sf h1, .sf h2, .sf h3 { font-family: var(--sf-head); font-weight: var(--sf-head-weight, 600); letter-spacing: -0.015em; line-height: 1.15; margin: 0; color: var(--sf-text); }
.sf p { margin: 0; }
.sf a { color: inherit; }
.sf button { font: inherit; color: inherit; }
.sf-wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4cqi, 40px); }

.sf-announce { background: var(--sf-accent); color: var(--sf-on-accent); text-align: center; font-size: 13px; padding: 8px 16px; font-weight: 500; letter-spacing: .01em; }

.sf-header { border-bottom: 1px solid var(--sf-line); position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--sf-bg) 92%, transparent); backdrop-filter: blur(8px); }
.sf-header .sf-wrap { display: flex; align-items: center; gap: 12px; height: 64px; }
.sf-logo { font-family: var(--sf-head); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.sf-nav { display: flex; gap: 4px; flex: 1; min-width: 0; justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
.sf-nav::-webkit-scrollbar { display: none; }
.sf-nav a { flex: none; white-space: nowrap; padding: 6px 10px; border-radius: var(--sf-r-sm); color: var(--sf-muted); font-size: 14px; text-decoration: none; }
.sf-nav a:hover, .sf-nav a[aria-current="true"] { color: var(--sf-text); background: var(--sf-surface); }
.sf-cart-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--sf-line); border-radius: var(--sf-r-btn); padding: 7px 14px; cursor: pointer; font-size: 14px; }
.sf-cart-btn:hover { border-color: var(--sf-text); }
.sf-cart-btn .icon { width: 17px; height: 17px; }
.sf-prefs-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--sf-line); border-radius: var(--sf-r-btn); padding: 7px 12px; cursor: pointer; font-size: 14px; }
.sf-prefs-btn:hover { border-color: var(--sf-text); }
.sf-prefs-btn .icon { width: 17px; height: 17px; }
.sf-icon-link { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: inherit; flex: none; }
.sf-icon-link:hover { background: var(--sf-surface); }
.sf-icon-link .icon { width: 19px; height: 19px; }
.sf-pref-title { font-size: 16px; margin-bottom: 10px; }
.sf-prefs { display: flex; flex-direction: column; gap: 8px; }
.sf-pref { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; background: none; border: 1px solid var(--sf-line); border-radius: var(--sf-r-sm); cursor: pointer; text-align: left; }
.sf-pref:hover { border-color: var(--sf-text); }
.sf-pref[aria-pressed="true"] { border-color: var(--sf-accent); box-shadow: inset 0 0 0 1px var(--sf-accent); }
.sf-pref .icon { width: 18px; height: 18px; color: var(--sf-accent); }
.sf-cart-count { background: var(--sf-accent); color: var(--sf-on-accent); border-radius: 999px; font-size: 11.5px; min-width: 19px; line-height: 19px; text-align: center; padding: 0 5px; font-weight: 600; }

.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--sf-accent); color: var(--sf-on-accent); border: 1px solid var(--sf-accent);
  border-radius: var(--sf-r-btn); padding: 12px 22px; font-weight: 600; font-size: 14.5px; cursor: pointer; text-decoration: none;
  transition: filter .15s, transform .15s;
}
.sf-btn:hover { filter: brightness(1.08); }
.sf-btn:active { transform: translateY(1px); }
.sf-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.sf-btn-outline { background: transparent; color: var(--sf-text); border-color: var(--sf-line); }
.sf-btn-outline:hover { border-color: var(--sf-text); filter: none; }
.sf-btn-block { width: 100%; }
.sf-btn-sm { padding: 8px 14px; font-size: 13.5px; }

/* Hero */
.sf-hero { padding: clamp(36px, 7cqi, 88px) 0; }
.sf-hero .sf-wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 5cqi, 64px); align-items: center; }
.sf-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; color: var(--sf-accent); margin-bottom: 14px; }
.sf-hero h1 { font-size: clamp(32px, 5.4cqi, 60px); margin-bottom: 18px; }
.sf-hero-sub { font-size: clamp(15px, 1.6cqi, 18px); color: var(--sf-muted); max-width: 460px; margin-bottom: 28px; }
.sf-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-hero-art { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1.15; }
.sf-hero-art .sf-tile:first-child { grid-row: 1 / 3; }
.sf-tile { border-radius: var(--sf-r); overflow: hidden; display: grid; place-items: center; position: relative;
  background: linear-gradient(150deg, hsl(var(--h) 34% 86%), hsl(var(--h) 28% 72%)); }
.sf-tile svg { width: 62%; height: 62%; }
.sf-tile img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

.sf-hero-banner { padding: 0; }
.sf-hero-banner .sf-wrap { display: block; padding-top: clamp(20px, 3cqi, 32px); }
.sf-banner { position: relative; border-radius: var(--sf-r); overflow: hidden; min-height: clamp(320px, 48cqi, 520px); display: grid; align-items: end;
  background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--sf-accent) 55%, #fff) 0%, var(--sf-accent) 55%, color-mix(in srgb, var(--sf-accent) 70%, #000) 100%); }
.sf-banner .sf-banner-art { position: absolute; right: 4%; top: 8%; width: 42%; aspect-ratio: 1; opacity: .9; }
.sf-banner .sf-banner-art .sf-tile { width: 100%; height: 100%; border-radius: 50%; }
.sf-banner-copy { position: relative; padding: clamp(24px, 5cqi, 56px); max-width: 620px; color: var(--sf-on-accent); }
.sf-banner-copy h1, .sf-banner-copy .sf-eyebrow { color: var(--sf-on-accent); }
.sf-banner-copy .sf-hero-sub { color: color-mix(in srgb, var(--sf-on-accent) 82%, transparent); }
.sf-banner-copy .sf-btn { background: var(--sf-on-accent); color: var(--sf-accent); border-color: var(--sf-on-accent); }

.sf-hero-minimal .sf-wrap { display: block; text-align: center; }
.sf-hero-minimal .sf-hero-sub { margin-left: auto; margin-right: auto; }
.sf-hero-minimal .sf-hero-actions { justify-content: center; }
.sf-hero-minimal h1 { max-width: 820px; margin-left: auto; margin-right: auto; font-size: clamp(34px, 6.4cqi, 72px); }

/* Product grid */
.sf-section { padding: clamp(28px, 5cqi, 64px) 0; }
.sf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.sf-section-head h2 { font-size: clamp(22px, 3cqi, 32px); }
.sf-section-head p { color: var(--sf-muted); font-size: 14px; }
.sf-grid { display: grid; grid-template-columns: repeat(var(--sf-cols), minmax(0, 1fr)); gap: clamp(14px, 2.4cqi, 28px); }
.sf-card { display: flex; flex-direction: column; gap: 10px; text-align: left; background: none; border: 0; padding: 0; color: inherit; }
.sf-card-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--sf-r); overflow: hidden; cursor: pointer; border: 0; padding: 0; width: 100%; display: block; }
.sf-card-media .sf-tile { position: absolute; inset: 0; border-radius: 0; transition: transform .4s ease; }
.sf-card:hover .sf-tile { transform: scale(1.03); }
.sf-card-badge { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--sf-bg); color: var(--sf-text); font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.sf-card-badge.sale { background: var(--sf-accent); color: var(--sf-on-accent); }
.sf-card-name { margin: 0; font: inherit; }
.sf-card-title { font-weight: 500; font-size: 15px; line-height: 1.35; color: inherit; text-decoration: none; }
.sf-card-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.sf-price { display: flex; gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; }
.sf-price s { color: var(--sf-muted); font-size: 13.5px; }
.sf-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-add { background: transparent; border: 1px solid var(--sf-line); border-radius: var(--sf-r-btn); padding: 6px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.sf-add:hover:not([disabled]) { border-color: var(--sf-text); }
.sf-add[disabled] { opacity: .5; cursor: not-allowed; }
.sf-empty { padding: 48px 16px; text-align: center; color: var(--sf-muted); border: 1px dashed var(--sf-line); border-radius: var(--sf-r); }

.sf-values { border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); background: var(--sf-surface); }
.sf-values .sf-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 32px; padding-bottom: 32px; }
.sf-value { display: flex; gap: 14px; align-items: flex-start; }
.sf-value .sf-value-icon { width: 40px; height: 40px; border-radius: var(--sf-r-sm); background: var(--sf-accent-soft); color: var(--sf-accent); display: grid; place-items: center; flex: none; }
.sf-value .icon { width: 20px; height: 20px; }
.sf-value h3 { font-size: 16px; margin-bottom: 2px; font-family: var(--sf-body); font-weight: 600; letter-spacing: 0; }
.sf-value p { color: var(--sf-muted); font-size: 14px; }

.sf-newsletter { padding: clamp(36px, 6cqi, 72px) 0; text-align: center; }
.sf-newsletter h2 { font-size: clamp(22px, 3cqi, 30px); margin-bottom: 8px; }
.sf-newsletter p { color: var(--sf-muted); margin-bottom: 20px; }
.sf-newsletter form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; }
.sf-input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--sf-line); border-radius: var(--sf-r-btn); background: var(--sf-bg); color: var(--sf-text); font: inherit; }
.sf-input:focus { outline: 2px solid var(--sf-accent); outline-offset: 1px; }
.sf-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.sf-field { margin-bottom: 12px; }
.sf-field .sf-input { width: 100%; }

.sf-footer { border-top: 1px solid var(--sf-line); padding: 28px 0; font-size: 13px; color: var(--sf-muted); }
.sf-footer .sf-wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sf-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* Radius scales */
.sf-r-sharp { --sf-r: 0px; --sf-r-sm: 0px; --sf-r-btn: 0px; }
.sf-r-soft { --sf-r: 14px; --sf-r-sm: 8px; --sf-r-btn: 10px; }
.sf-r-pill { --sf-r: 22px; --sf-r-sm: 12px; --sf-r-btn: 999px; }

/* Overlays: drawer + quick view (interactive preview) */
.sf-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(10, 12, 14, .42); display: flex; justify-content: flex-end; animation: fadeIn .15s ease; }
.sf-drawer { width: min(420px, 100%); height: 100%; background: var(--sf-bg); color: var(--sf-text); display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,.2); animation: sfSlide .2s ease; }
@keyframes sfSlide { from { transform: translateX(30px); opacity: 0; } }
.sf-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--sf-line); }
.sf-drawer-head h2 { font-size: 20px; }
.sf-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.sf-drawer-foot { border-top: 1px solid var(--sf-line); padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.sf-icon-btn { background: none; border: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.sf-icon-btn:hover { background: var(--sf-surface); }
.sf-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--sf-line); }
.sf-line .sf-tile { width: 64px; height: 76px; border-radius: var(--sf-r-sm); }
.sf-line .sf-tile svg { width: 70%; }
.sf-qty { display: inline-flex; align-items: center; border: 1px solid var(--sf-line); border-radius: var(--sf-r-btn); margin-top: 6px; }
.sf-qty button { background: none; border: 0; width: 30px; height: 28px; cursor: pointer; font-size: 15px; }
.sf-qty span { min-width: 26px; text-align: center; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sf-remove { background: none; border: 0; color: var(--sf-muted); font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 0; margin-left: 10px; }
.sf-totals { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
.sf-totals .sf-total { font-weight: 700; font-size: 16px; padding-top: 6px; border-top: 1px solid var(--sf-line); margin-top: 4px; }
.sf-note { font-size: 12.5px; color: var(--sf-muted); }
.sf-msg-ok { color: var(--sf-accent); font-size: 13px; }
.sf-msg-err { color: #c0392b; font-size: 13px; }
.sf-progress { height: 5px; border-radius: 9px; background: var(--sf-surface); overflow: hidden; margin-top: 6px; }
.sf-progress span { display: block; height: 100%; background: var(--sf-accent); }

/* Product page */
.sf-pdp { padding: clamp(20px, 3cqi, 36px) 0 clamp(28px, 5cqi, 56px); }
.sf-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--sf-muted); margin-bottom: clamp(16px, 3cqi, 28px); }
.sf-crumbs a, .sf-crumbs button { color: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.sf-crumbs a:hover, .sf-crumbs button:hover { color: var(--sf-text); text-decoration: underline; text-underline-offset: 3px; }
.sf-crumbs [aria-current] { color: var(--sf-text); }
.sf-pdp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5cqi, 64px); align-items: start; }
.sf-pdp-media .sf-tile { aspect-ratio: 4 / 5; width: 100%; }
.sf-pdp-media .sf-tile svg { width: 55%; height: 55%; }
.sf-pdp-info { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 88px; }
.sf-pdp-info .sf-eyebrow { margin: 0; }
.sf-pdp-info h1 { font-size: clamp(28px, 4cqi, 42px); }
.sf-pdp-price { font-size: 20px; }
.sf-pdp-desc { color: var(--sf-muted); display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.sf-pdp-perks { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--sf-line); display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.sf-pdp-perks li { display: flex; align-items: center; gap: 10px; }
.sf-pdp-perks .icon { width: 18px; height: 18px; color: var(--sf-accent); }
.sf-success { text-align: center; padding: 28px 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sf-success .sf-check { width: 56px; height: 56px; border-radius: 50%; background: var(--sf-accent-soft); color: var(--sf-accent); display: grid; place-items: center; }
.sf-success .sf-check .icon { width: 28px; height: 28px; stroke-width: 2.4; }

/* Editor-only: disable interaction inside the frame preview */
.device-screen .sf a, .device-screen .sf button, .device-screen .sf input { pointer-events: none; }
.device-screen .sf-header { position: static; }

@container (max-width: 900px) {
  /* Categories move to their own scrollable row under the logo and cart. */
  .sf-header .sf-wrap { flex-wrap: wrap; justify-content: space-between; height: auto; row-gap: 6px; padding-top: 12px; padding-bottom: 8px; }
  .sf-nav { order: 3; flex-basis: 100%; justify-content: flex-start; margin: 0 -6px; }
  .sf-header .sf-wrap { flex-wrap: wrap; column-gap: 8px; }
  .sf-logo { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@container (max-width: 480px) {
  /* Icon and count are enough here; the button keeps its full aria-label. */
  .sf-cart-btn > span:not(.sf-cart-count) { display: none; }
  .sf-header .sf-wrap { column-gap: 4px; }
  .sf-logo { flex: 1 1 60px; font-size: 18px; }
  .sf-prefs-btn .icon { display: none; }
  .sf-prefs-btn, .sf-cart-btn { padding: 6px 8px; }
}
@container (max-width: 720px) {
  .sf-hero .sf-wrap { grid-template-columns: 1fr; }
  .sf-hero-art { aspect-ratio: 1.4; }
  .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-values .sf-wrap { grid-template-columns: 1fr; gap: 16px; }
  .sf-banner .sf-banner-art { width: 54%; right: -8%; top: -6%; opacity: .5; }
  .sf-pdp-grid { grid-template-columns: 1fr; }
  .sf-pdp-info { position: static; }
  .sf-pdp-media .sf-tile { aspect-ratio: 1.1; }
  .sf-newsletter form { flex-direction: column; }
}

/* Listing tools */
.sf-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -8px 0 20px; }
.sf-select { width: auto; flex: none; padding: 7px 10px; font-size: 14px; }
.sf-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.sf-search { display: flex; gap: 8px; margin-bottom: 24px; max-width: 560px; }
.sf-narrow { max-width: 760px; }
.sf-narrow h1 { font-size: clamp(26px, 4cqi, 36px); margin-bottom: 16px; }
.sf-sub { font-size: 20px; margin: 28px 0 10px; }
.sf-prose { display: flex; flex-direction: column; gap: 12px; color: var(--sf-muted); }
.sf-form { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.sf-form .sf-field, .sf-form .sf-field-row { width: 100%; }
.sf-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-order { padding: 14px 16px; border: 1px solid var(--sf-line); border-radius: var(--sf-r-sm); margin-top: 12px; }
.sf-order-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sf-order-items { margin: 8px 0 0; padding-inline-start: 18px; font-size: 14px; }

/* Product options, gallery, reviews, payment */
.sf-option { border: 0; padding: 0; margin: 0; }
.sf-option-values { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-option-btn { background: none; border: 1px solid var(--sf-line); border-radius: var(--sf-r-btn); padding: 7px 14px; cursor: pointer; font-size: 14px; }
.sf-option-btn:hover { border-color: var(--sf-text); }
.sf-option-btn[aria-pressed="true"] { border-color: var(--sf-accent); box-shadow: inset 0 0 0 1px var(--sf-accent); }
.sf-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sf-thumbs button { width: 64px; height: 64px; padding: 0; border: 1px solid var(--sf-line); border-radius: var(--sf-r-sm); overflow: hidden; cursor: pointer; background: none; }
.sf-thumbs button[aria-pressed="true"] { border-color: var(--sf-accent); box-shadow: 0 0 0 1px var(--sf-accent); }
.sf-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.sf-stars { color: #c08a2e; letter-spacing: 1px; }
.sf-review { padding: 14px 0; border-bottom: 1px solid var(--sf-line); }
.sf-review p { margin-top: 4px; }
.sf-review-form { margin-top: 16px; }
.sf-review-form summary { list-style: none; display: inline-flex; }
.sf-review-form summary::-webkit-details-marker { display: none; }
.sf-review-form form { margin-top: 14px; max-width: 520px; }
.sf-pay { border: 0; padding: 0; margin: 0 0 12px; }
.sf-pay-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--sf-accent); border-radius: var(--sf-r-sm); }
.sf-footer nav a { color: inherit; }
.sf[dir="rtl"] { font-size: 16px; line-height: 1.9; }
.sf[dir="rtl"] .sf-pdp-info { text-align: right; }