/* ── Design tokens ────────────────────────────────────────────────────────
   Two kinds of token live here and they are deliberately separated.

   COLOUR comes from the tenant's own theme (Page Settings > Theme), which
   js/theme-loader.js publishes as --theme-*. Selecting a template seeds that
   theme from the palette the template was designed around, so an untouched
   store still looks the way its designer intended, and an admin who picks a
   brand colour sees it applied here rather than only on the Default storefront.
   The literal in each var() is a last-resort fallback for the moment before the
   theme loader runs, and it is that template's design colour.

   SHAPE - radius, fonts, container width, shadows - is the template's identity
   and is NOT themeable. A palette should recolour a storefront, not turn one
   template into another. */

:root {
  --sf-ink: var(--theme-text, #171717);
  --sf-paper: var(--theme-surface, #ffffff);
  --sf-muted: var(--theme-text-muted, #6d6d6d);
  --sf-line: var(--theme-border, #e7e3e5);
  --sf-wash: var(--theme-surface-muted, #faf6f8);
  --sf-accent: var(--theme-primary, #e11d74);
  --sf-accent-dark: var(--theme-primary-hover, #b81460);
  /* The Theme tab keeps a separate Add to Cart colour, which defaults to the
     primary. Only the cart control uses it, matching the Default storefront. */
  --sf-cart: var(--theme-add-to-cart, var(--sf-accent));
  --sf-cart-hover: var(--theme-add-to-cart-hover, var(--sf-accent-dark));
  --sf-on-cart: var(--theme-on-add-to-cart, #fff);
  --sf-success: var(--theme-success, #15803d);
  --sf-danger: var(--theme-danger, #c81e3a);
  --sf-shadow: 0 18px 42px rgba(29, 20, 25, .09);
  --sf-radius: 9px;
  --sf-container: 1400px;
  --sf-heading: "Archivo", "Inter", sans-serif;
  --sf-body-font: "Inter", sans-serif;
  --sf-header-height: 60px;
  --sf-transition: .22s cubic-bezier(.4, 0, .2, 1);
}

body[data-storefront-theme="selene_beauty"] {
  /* Only the fallbacks differ from Aura's: when a theme is configured, both
     templates take their colour from it. */
  --sf-ink: var(--theme-text, #211a1d);
  --sf-muted: var(--theme-text-muted, #746c6f);
  --sf-line: var(--theme-border, #e8e1dc);
  --sf-wash: var(--theme-surface-muted, #f8f4f0);
  --sf-accent: var(--theme-primary, #8f5360);
  --sf-accent-dark: var(--theme-primary-hover, #6f3f49);
  --sf-shadow: 0 20px 55px rgba(48, 35, 40, .08);
  --sf-radius: 1px;
  --sf-heading: "Playfair Display", Georgia, serif;
  --sf-body-font: "Jost", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.sf-body {
  margin: 0;
  /* `clip` guards against sideways overflow without turning the body into a
     scroll container, which would break position:sticky on descendants. */
  overflow-x: clip;
  background: var(--sf-paper);
  color: var(--sf-ink);
  font-family: var(--sf-body-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.sf-body a { color: inherit; text-decoration: none; }
.sf-body img { display: block; max-width: 100%; }
/* :where() keeps this reset at zero specificity so component rules can still set
   their own font-size — a plain `.sf-body button` selector outranks them. */
:where(.sf-body) button, :where(.sf-body) input, :where(.sf-body) select { color: inherit; font: inherit; }
.sf-body button:not(.load-more) { border: 0; cursor: pointer; }

.sf-body h1, .sf-body h2, .sf-body h3, .sf-body h4, .sf-body p { margin-top: 0; }
.sf-body h1, .sf-body h2, .sf-body h3, .sf-body h4 { font-family: var(--sf-heading); }
.sf-body :focus-visible { outline-offset: 3px; }
.sf-container { width: min(100%, var(--sf-container)); margin-inline: auto; padding-inline: 24px; }
.sf-muted { color: var(--sf-muted); }
[hidden] { display: none !important; }

.sf-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 2000;
  transform: translateY(-150%);
  padding: 10px 16px;
  background: var(--sf-ink);
  color: #fff !important;
}
.sf-skip-link:focus { transform: translateY(0); }

.sf-announcement {
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 44px;
  background: var(--sf-ink);
  color: #fff;
  font-size: 12px;
  letter-spacing: .055em;
  text-align: center;
}
.sf-announcement[hidden] { display: none; }
.sf-announcement-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 32px; }
.sf-announcement-close {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .7;
  transform: translateY(-50%);
  transition: opacity var(--sf-transition), background var(--sf-transition);
}
.sf-announcement-close:hover { background: rgba(255, 255, 255, .14); opacity: 1; }
.sf-announcement-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sf-announcement a { border-bottom: 1px solid rgba(255,255,255,.5); }
.sf-announcement strong { color: #ffd8e8; }
body[data-storefront-theme="selene_beauty"] .sf-announcement strong { color: #f3d8dc; font-weight: 500; }

.sf-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--sf-line);
  backdrop-filter: blur(14px);
}
.sf-header-main {
  min-height: var(--sf-header-height);
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(260px, 520px) minmax(220px, auto);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.sf-brand {
  display: inline-flex;
  width: fit-content;
  max-width: 260px;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  font-family: var(--sf-heading);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sf-brand img { width: auto; max-width: 180px; height: 50px; object-fit: contain; object-position: left center; }
body[data-storefront-theme="selene_beauty"] .sf-brand {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: none;
}

.sf-search {
  display: flex;
  height: 38px;
  align-items: center;
  gap: 10px;
  padding: 0 5px 0 15px;
  border: 1px solid var(--sf-line);
  border-radius: 999px;
  background: var(--sf-paper);
  transition: border-color var(--sf-transition), box-shadow var(--sf-transition);
}
body[data-storefront-theme="selene_beauty"] .sf-search { border-radius: 0; background: var(--sf-wash); }
.sf-search:focus-within { border-color: var(--sf-ink); box-shadow: 0 0 0 3px rgba(143,83,96,.08); }
.sf-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.sf-search input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; }
.sf-search input::placeholder { color: #9b9698; }

/* ── Rotating search hint ─────────────────────────────────────────────────
   A native placeholder cannot be animated, so the rotating one is a separate
   layer sitting exactly over the input's text. It is aria-hidden and
   pointer-events:none - the input keeps its own aria-label, and clicks and
   carets pass straight through. custom-storefront.js empties the real
   placeholder while this is showing, and puts it back on focus, so the two are
   never visible at once. Without JS the native placeholder simply stays.

   "Search" is static and sits outside the moving window; only the category
   term scrolls. Everything reads at the placeholder's own weight and colour,
   so the whole thing looks like one placeholder rather than a label plus a
   highlighted word. */
.sf-search-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.sf-search-hint {
  --sf-search-hint-line: 22px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: var(--sf-search-hint-line);
  transform: translateY(-50%);
  display: flex;
  /* Both children are exactly one line tall, so there is nothing to centre -
     and centring would fight the track while it is briefly two lines tall. */
  align-items: flex-start;
  overflow: hidden;
  pointer-events: none;
  color: #9b9698;
  font: inherit;
  white-space: nowrap;
}
.sf-search-hint-static {
  flex: none;
  margin-right: .34em;
  line-height: var(--sf-search-hint-line);
}
/* The window the terms scroll through. Its height is fixed, so the track
   growing to two lines mid-slide cannot disturb anything around it. */
.sf-search-hint-rotator {
  flex: 1;
  min-width: 0;
  height: var(--sf-search-hint-line);
  overflow: hidden;
}
.sf-search-hint-track {
  display: block;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
.sf-search-hint-track.is-sliding { transform: translateY(-50%); }
/* Each line is exactly the window height, so -50% of a two-line track advances
   by precisely one line. */
.sf-search-hint-track > span {
  display: block;
  height: var(--sf-search-hint-line);
  line-height: var(--sf-search-hint-line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-search button {
  height: 28px;
  /* Centred as a flex line box rather than left to the button's default block
     layout. The label is all-caps, so its glyph box carries descender space
     that no glyph uses; centring that box put the visible ink about 1.5px high.
     line-height:1 collapses the unused leading so what is centred is the text
     itself. The trailing letter-space is trimmed off the right the same way. */
  --sf-search-tracking: .08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 14px;
  padding-right: calc(14px - var(--sf-search-tracking));
  border-radius: 999px;
  background: var(--sf-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--sf-search-tracking);
  text-transform: uppercase;
}
body[data-storefront-theme="selene_beauty"] .sf-search button { border-radius: 0; }

.sf-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.sf-action-link {
  position: relative;
  min-width: 46px;
  min-height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 3px 6px;
  border-radius: 999px;
  background: transparent;
  transition: background var(--sf-transition);
}
.sf-action-link:hover { background: var(--sf-wash); }
.sf-action-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.sf-action-link > span { font-size: 9px; line-height: 1; }
.sf-count {
  position: absolute;
  top: -1px;
  right: 0;
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--sf-accent);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}
.sf-icon-button { display: none; background: transparent; }
.sf-icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.sf-category-nav { position: relative; border-top: 1px solid var(--sf-line); }
.sf-category-nav > .sf-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
/* Let the dynamic categories share the one wrapping flow with the static "Shop all" link. */
.sf-category-nav-dynamic { display: contents; }
.sf-category-menu { position: static; }
.sf-category-nav .sf-category-parent {
  position: relative;
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 6px;
  padding: 0 17px;
  white-space: nowrap;
  font-family: var(--sf-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body[data-storefront-theme="selene_beauty"] .sf-category-nav .sf-category-parent { font-family: var(--sf-body-font); font-weight: 500; letter-spacing: .13em; }
.sf-category-nav .sf-category-parent::after {
  content: '';
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 0;
  height: 2px;
  background: var(--sf-accent);
  transform: scaleX(0);
  transition: transform var(--sf-transition);
}
.sf-category-nav .sf-category-parent:hover::after,
.sf-category-nav .sf-category-parent.is-active::after,
.sf-category-menu:hover .sf-category-parent::after,
.sf-category-menu:focus-within .sf-category-parent::after { transform: scaleX(1); }
.sf-category-parent > span { display: inline-flex; }
.sf-category-parent > span svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform var(--sf-transition); }
.sf-category-menu:hover .sf-category-parent > span svg,
.sf-category-menu:focus-within .sf-category-parent > span svg { transform: rotate(180deg); }

/* ===== MEGA MENU (matches aura-professional / selene-beauty tree) ===== */
.sf-mega {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  border-top: 1px solid var(--sf-line);
  background: var(--sf-paper);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--sf-transition), transform var(--sf-transition), visibility var(--sf-transition);
}
.sf-category-menu:hover > .sf-mega,
.sf-category-menu:focus-within > .sf-mega { opacity: 1; visibility: visible; transform: none; }
.sf-mega-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 38px;
  padding-block: 30px 34px;
}
.sf-mega-columns,
.sf-mega-flat {
  display: grid;
  align-content: start;
  max-height: min(60vh, 460px);
  overflow-y: auto;
}
.sf-mega-columns { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px 26px; }
.sf-mega-flat { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px 24px; }
.sf-mega-column-title {
  display: block;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--sf-line);
  font-family: var(--sf-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.sf-mega-column-title:hover { color: var(--sf-accent); }
.sf-mega-column ul { margin: 0; padding: 0; list-style: none; }
.sf-mega-link {
  display: block;
  padding: 4px 0 4px calc(var(--sf-mega-depth, 0) * 12px);
  color: var(--sf-muted);
  font-size: 13px;
  transition: color var(--sf-transition), padding-left var(--sf-transition);
}
.sf-mega-link:hover,
.sf-mega-link:focus-visible,
.sf-mega-link.is-active {
  color: var(--sf-ink);
  padding-left: calc(5px + (var(--sf-mega-depth, 0) * 12px));
}
.sf-mega-link.is-all { color: var(--sf-ink); font-weight: 500; }
.sf-mega-flat-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  color: var(--sf-muted);
  font-size: 13.5px;
  transition: color var(--sf-transition), padding-left var(--sf-transition);
}
.sf-mega-flat-link:hover,
.sf-mega-flat-link:focus-visible,
.sf-mega-flat-link.is-active { color: var(--sf-accent); padding-left: 5px; }
.sf-mega-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--sf-line); transition: background var(--sf-transition); }
.sf-mega-flat-link:hover .sf-mega-dot, .sf-mega-flat-link.is-active .sf-mega-dot { background: var(--sf-accent); }
.sf-mega-promo { display: grid; gap: 14px; align-content: start; }
.sf-mega-card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--sf-radius);
  background: var(--sf-wash);
}
.sf-mega-card-media img { width: 100%; height: 100%; object-fit: cover; }
.sf-mega-card-fallback {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--sf-muted);
  font-family: var(--sf-heading);
  font-size: 38px;
}
.sf-mega-card b {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sf-mega-card span { color: var(--sf-muted); font-size: 12px; }
.sf-mega-card:hover b { color: var(--sf-accent); }

.sf-main { min-height: 62vh; }
.sf-page-loader, .sf-state {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 50px 24px;
  text-align: center;
}
.sf-page-loader p, .sf-state p { margin: 0; color: var(--sf-muted); }
.sf-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--sf-line);
  border-top-color: var(--sf-accent);
  border-radius: 50%;
  animation: sf-spin .8s linear infinite;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

.sf-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 25px;
  border: 1px solid var(--sf-ink);
  border-radius: calc(var(--sf-radius) * .65);
  background: var(--sf-ink);
  color: #fff !important;
  font-family: var(--sf-body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: background var(--sf-transition), border-color var(--sf-transition), color var(--sf-transition);
}
.sf-button:hover { border-color: var(--sf-accent); background: var(--sf-accent); }
.sf-button-secondary { background: transparent; color: var(--sf-ink) !important; }
.sf-button-secondary:hover { border-color: var(--sf-ink); background: var(--sf-ink); color: #fff !important; }
.sf-button-full { width: 100%; }
.sf-button[disabled] { cursor: not-allowed; opacity: .48; }

.sf-hero { position: relative; overflow: hidden; background: var(--sf-ink); color: #fff; }
.sf-hero-track { display: flex; transition: transform .65s cubic-bezier(.4,0,.2,1); }
/* --sf-hero-height uses the shortest full-width banner on mobile and the
   best-fit median on larger screens; the clamp is only a loading fallback. */
.sf-hero-slide { position: relative; min-width: 100%; min-height: var(--sf-hero-height, clamp(410px, 48vw, 650px)); }
/* Different aspect ratios may letterbox, but no banner artwork is cropped. */
.sf-hero.is-measured .sf-hero-media img { object-fit: contain; }
/* The banner-less hero ramp is built from the accent rather than fixed colours,
   so a configured brand colour reaches the largest block of colour on the page.
   Built with black/white overlays instead of color-mix() so it needs no
   fallback, and each template keeps its own stop weighting. */
.sf-hero-media {
  position: absolute;
  inset: 0;
  background-color: var(--sf-accent);
  background-image: linear-gradient(135deg, rgba(0,0,0,.78), rgba(0,0,0,.18) 58%, rgba(255,255,255,.34));
}
body[data-storefront-theme="selene_beauty"] .sf-hero-media {
  background-image: linear-gradient(135deg, rgba(0,0,0,.74), rgba(0,0,0,.3) 55%, rgba(255,255,255,.3));
}
.sf-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.sf-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,.15) 68%, rgba(0,0,0,.04)); }
.sf-hero-slide.has-image .sf-hero-media::after { background: linear-gradient(0deg, rgba(0,0,0,.38), transparent 32%); }
.sf-hero-content {
  position: relative;
  z-index: 2;
  min-height: var(--sf-hero-height, clamp(410px, 48vw, 650px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 670px;
}
.sf-kicker {
  margin-bottom: 13px;
  color: #ffd4e6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
body[data-storefront-theme="selene_beauty"] .sf-kicker { color: #f3dedf; font-weight: 500; }
.sf-hero h1 { max-width: 760px; margin-bottom: 17px; font-size: clamp(42px, 6vw, 83px); line-height: .98; letter-spacing: -.03em; }
body[data-storefront-theme="selene_beauty"] .sf-hero h1 { font-weight: 500; line-height: 1.02; }
.sf-hero p { max-width: 560px; margin-bottom: 28px; color: rgba(255,255,255,.83); font-size: clamp(15px, 1.8vw, 19px); }
.sf-hero-slide.has-image .sf-hero-content { justify-content: flex-end; padding-bottom: 46px; }
.sf-hero .sf-button { border-color: #fff; background: #fff; color: var(--sf-ink) !important; }
.sf-hero .sf-button:hover { border-color: var(--sf-accent); background: var(--sf-accent); color: #fff !important; }
.sf-hero-controls { position: absolute; z-index: 3; left: 50%; bottom: 9px; display: flex; gap: 7px; transform: translateX(-50%); }
.sf-hero-controls button { width: 9px; height: 9px; padding: 0; border-radius: 8px; background: rgba(255,255,255,.52); transition: width var(--sf-transition), background var(--sf-transition); }
.sf-hero-controls button.is-active { width: 27px; background: #fff; }

.sf-benefits { border-bottom: 1px solid var(--sf-line); background: var(--sf-wash); }
.sf-benefits .sf-container { display: grid; grid-template-columns: repeat(3, 1fr); }
.sf-benefit { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 20px; text-align: left; }
.sf-benefit + .sf-benefit { border-left: 1px solid var(--sf-line); }
.sf-benefit svg { width: 25px; height: 25px; fill: none; stroke: var(--sf-accent); stroke-width: 1.5; flex: none; }
.sf-benefit strong { display: block; font-size: 13px; }
.sf-benefit span { display: block; color: var(--sf-muted); font-size: 12px; }

.sf-section { padding-block: 66px; }
.sf-section-alt { background: var(--sf-wash); }
.sf-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.sf-section-kicker { margin-bottom: 7px; color: var(--sf-accent); font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.sf-section-head h2 { margin-bottom: 0; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; }
body[data-storefront-theme="selene_beauty"] .sf-section-head h2 { font-weight: 500; }
.sf-section-link { padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }

.sf-section-foot { display: flex; justify-content: center; margin-top: 30px; }
.sf-category-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
/* Two rows maximum on the home page; the rest live on the all-categories page. */
.sf-category-grid.is-clamped > *:nth-child(n + 13) { display: none; }
.sf-category-card { display: block; text-align: center; }
.sf-category-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sf-line);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--sf-paper), var(--sf-wash));
  transition: transform var(--sf-transition), border-color var(--sf-transition), box-shadow var(--sf-transition);
}
body[data-storefront-theme="selene_beauty"] .sf-category-image { border-radius: 0; }
.sf-category-image img { width: 100%; height: 100%; object-fit: cover; }
.sf-category-fallback { font-family: var(--sf-heading); font-size: clamp(26px, 4vw, 48px); color: var(--sf-accent); }
.sf-category-card:hover .sf-category-image { transform: translateY(-5px); border-color: var(--sf-accent); box-shadow: var(--sf-shadow); }
.sf-category-card strong { display: block; margin-top: 13px; font-family: var(--sf-heading); font-size: 13px; }
body[data-storefront-theme="selene_beauty"] .sf-category-card strong { font-family: var(--sf-body-font); font-size: 12px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }

.sf-product-rail { position: relative; }
.sf-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sf-product-rail .sf-product-grid {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 22px) / 5);
  grid-template-columns: none;
  overflow-x: auto;
  padding: 4px 2px 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sf-product-rail .sf-product-grid::-webkit-scrollbar { display: none; }
.sf-rail-nav {
  position: absolute;
  z-index: 4;
  top: calc(50% - 40px);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sf-line);
  border-radius: 50%;
  background: var(--sf-paper);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .09);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sf-transition), background var(--sf-transition), color var(--sf-transition), border-color var(--sf-transition);
}
.sf-rail-nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-rail-nav:hover { border-color: var(--sf-accent); background: var(--sf-accent); color: #fff; }
.sf-product-rail.is-scrollable .sf-rail-nav { opacity: 1; pointer-events: auto; }
.sf-product-rail.is-scrollable .sf-rail-nav[disabled] { opacity: 0; pointer-events: none; }
.sf-rail-prev { left: -18px; }
.sf-rail-next { right: -18px; }
.sf-see-all-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px 20px;
  text-align: center;
  background: var(--sf-wash);
}
.sf-see-all-card:hover { border-color: var(--sf-accent); }
.sf-see-all-icon { display: inline-flex; }
.sf-see-all-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--sf-accent); stroke-width: 1.4; }
.sf-see-all-card strong { font-family: var(--sf-heading); font-size: 15px; line-height: 1.3; }
.sf-see-all-cta { padding-bottom: 3px; border-bottom: 1px solid currentColor; color: var(--sf-muted); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.sf-empty-rail { padding: 40px 20px; border: 1px dashed var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-wash); text-align: center; }
.sf-empty-rail p { margin-bottom: 4px; color: var(--sf-muted); font-size: 13px; }
.sf-empty-rail p:last-child { margin-bottom: 0; }
.sf-empty-rail strong { color: var(--sf-ink); font-family: var(--sf-heading); font-size: 15px; }

.sf-all-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 38px 24px; }
.sf-product-card {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  background: var(--sf-paper);
  scroll-snap-align: start;
  transition: transform var(--sf-transition), box-shadow var(--sf-transition), border-color var(--sf-transition);
}
.sf-product-card:hover { transform: translateY(-3px); border-color: rgba(143,83,96,.45); box-shadow: var(--sf-shadow); }
.sf-product-image-link { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; background: var(--sf-wash); }
body[data-storefront-theme="selene_beauty"] .sf-product-image-link { aspect-ratio: 4 / 5; }
.sf-product-image-link img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.sf-product-card:hover .sf-product-image-link img { transform: scale(1.045); }
.sf-product-badge {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 11px;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--sf-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body[data-storefront-theme="selene_beauty"] .sf-product-badge { border-radius: 0; }
.sf-product-body { flex: 1; display: flex; flex-direction: column; padding: 16px; }
.sf-product-category { margin-bottom: 5px; color: var(--sf-muted); font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
/* Clamped to three lines with the space reserved, matching .product-title in
   css/carousel-cards.css on the default template. */
.sf-product-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 52px;
  margin-bottom: 8px;
  font-family: var(--sf-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: normal;
}
body[data-storefront-theme="selene_beauty"] .sf-product-title { font-family: var(--sf-body-font); font-weight: 500; }
.sf-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.sf-price strong { font-size: 16px; }
.sf-price del { color: var(--sf-muted); font-size: 12px; }
.sf-price span { color: var(--sf-success); font-size: 11px; font-weight: 600; }
.sf-product-actions { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sf-product-actions .sf-button { min-height: 40px; padding-inline: 14px; }
.sf-cart-control { min-width: 0; }
/* The Add to Cart colour is configured separately from the primary in the Theme
   tab, and only this control honours it - exactly as on the Default storefront.
   It falls back to the primary when no override is set. */
/* Scoped through .sf-body so it outranks the per-theme `.sf-button` overrides
   further down the file - Giva's, for one, is more specific than a bare
   `.sf-cart-control .sf-button` and would otherwise win. */
.sf-body .sf-cart-control .sf-button {
  width: 100%;
  border-color: var(--sf-cart);
  background: var(--sf-cart);
  color: var(--sf-on-cart) !important;
}
.sf-body .sf-cart-control .sf-button:hover:not([disabled]) {
  border-color: var(--sf-cart-hover);
  background: var(--sf-cart-hover);
}

/* The quantity stepper the Add to cart button turns into. */
.sf-qty-stepper {
  position: relative;
  min-height: 40px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  border: 1px solid var(--sf-ink);
  border-radius: calc(var(--sf-radius) * .65);
  background: var(--sf-paper);
}
.sf-qty-stepper > button {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--sf-ink);
  font-size: 17px;
  line-height: 1;
}
.sf-qty-stepper > button:hover:not([disabled]) { color: var(--sf-accent); }
.sf-qty-stepper > button[disabled] { opacity: .35; cursor: not-allowed; }
.sf-qty-stepper > button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sf-qty-stepper > span { text-align: center; font-size: 14px; font-weight: 700; }
.sf-qty-max {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--sf-muted);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}
/* The wishlist heart sits in the card's action row, beside Add to cart, where
   the quick-view eye used to be. It takes that button's box so the row keeps
   its proportions; `border` is restated in full because
   `.sf-body button:not(.load-more)` sets `border: 0` and outranks the shared
   stylesheet. */
.sf-product-actions .miideal-wishlist-btn.in-actions {
  width: 41px;
  height: auto;
  min-height: 40px;
  border: 1px solid var(--sf-line);
  border-radius: calc(var(--sf-radius) * .65);
  background: transparent;
}
.sf-product-actions .miideal-wishlist-btn.in-actions svg {
  width: 18px;
  height: 18px;
  /* On the card ground rather than over a photo, so no lift needed. */
  filter: none;
}
.sf-product-actions .miideal-wishlist-btn.in-actions:hover { border-color: var(--miideal-wishlist-accent); }
.sf-product-actions .miideal-wishlist-btn.in-actions.is-saved { border-color: var(--miideal-wishlist-accent); }
.sf-stock-note { margin-top: 9px; color: var(--sf-danger); font-size: 11px; }

.sf-page-head { padding: 48px 0 24px; border-bottom: 1px solid var(--sf-line); }
.sf-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; color: var(--sf-muted); font-size: 12px; }
.sf-breadcrumbs a:hover { color: var(--sf-accent); }
.sf-page-head h1 { margin-bottom: 7px; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; }
body[data-storefront-theme="selene_beauty"] .sf-page-head h1 { font-weight: 500; }
.sf-page-head p { max-width: 680px; margin-bottom: 0; color: var(--sf-muted); }
.sf-catalog { padding-block: 30px 70px; }
.sf-catalog-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; }
.sf-catalog-main { min-width: 0; }
/* Sits beside the sort control on small screens; the sidebar is always on show
   above 900px so the trigger is not needed there. */
.sf-filter-trigger {
  display: none;
  width: 42px;
  height: 42px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  background: var(--sf-paper);
  color: var(--sf-ink);
}
.sf-filter-trigger svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sf-filter-trigger:hover { border-color: var(--sf-ink); }
.sf-filter-trigger.has-filters { border-color: var(--sf-accent); background: var(--sf-accent); color: #fff; }

/* Subcategory chips under the page title */
.sf-chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.sf-chip {
  height: 36px;
  flex: 0 0 auto;
  padding: 0 17px;
  border: 1px solid var(--sf-line);
  border-radius: 999px;
  background: var(--sf-paper);
  color: var(--sf-muted);
  font-family: var(--sf-body-font);
  font-size: 13px;
  white-space: nowrap;
  transition: border-color var(--sf-transition), background var(--sf-transition), color var(--sf-transition);
}
.sf-chip:hover { border-color: var(--sf-ink); color: var(--sf-ink); }
.sf-chip.is-active { border-color: var(--sf-ink); background: var(--sf-ink); color: #fff; }

/* Filter sidebar: pinned under the sticky header and capped to the space left
   in the viewport, so every group stays reachable while the grid scrolls.
   --sf-sticky-top is measured from the real header height at runtime. */
.sf-catalog-filters {
  position: sticky;
  top: calc(var(--sf-sticky-top, 138px) + 18px);
  max-height: calc(100vh - var(--sf-sticky-top, 138px) - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--sf-line) transparent;
}
.sf-catalog-filters::-webkit-scrollbar { width: 6px; }
.sf-catalog-filters::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--sf-line); }
.sf-catalog-filters::-webkit-scrollbar-thumb:hover { background: var(--sf-muted); }
.sf-filter-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sf-filter-panel-head h2 { margin: 0; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.sf-filter-panel-head > div { display: flex; align-items: center; gap: 14px; }
/* Sheet-only controls; the desktop sidebar is always visible so it needs neither. */
.sf-filter-close {
  display: none;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: var(--sf-wash);
  color: var(--sf-ink);
  font-size: 22px;
  line-height: 1;
}
.sf-filter-apply { display: none; width: 100%; margin-top: 18px; }
.sf-filter-group { border-top: 1px solid var(--sf-line); }
.sf-filter-group:last-child { border-bottom: 1px solid var(--sf-line); }
.sf-filter-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  background: transparent;
  color: var(--sf-ink);
  font-family: var(--sf-body-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-align: left;
  text-transform: uppercase;
}
.sf-filter-head svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform var(--sf-transition); }
.sf-filter-group.is-open .sf-filter-head svg { transform: rotate(180deg); }
.sf-filter-body { display: none; max-height: 280px; overflow-y: auto; padding-bottom: 14px; }
.sf-filter-group.is-open .sf-filter-body { display: block; }
.sf-filter-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--sf-muted);
  font-size: 13px;
  cursor: pointer;
}
.sf-filter-option:hover { color: var(--sf-ink); }
.sf-filter-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--sf-accent); }
.sf-filter-option input:checked ~ span { color: var(--sf-ink); font-weight: 500; }
.sf-filter-option em { color: var(--sf-muted); font-size: 11px; font-style: normal; }

.sf-load-more { display: flex; justify-content: center; margin-top: 34px; }
.sf-load-more .sf-button { min-width: 220px;}
/* Pinned under the header at every width so sort and filters stay in reach
   without scrolling back to the top of the list. */
.sf-catalog-toolbar {
  position: sticky;
  z-index: 60;
  top: calc(var(--sf-sticky-top, 138px) - 1px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sf-line);
  background: var(--sf-paper);
}
.sf-results-count { color: var(--sf-muted); font-size: 13px; }
.sf-catalog-tools { display: flex; align-items: center; gap: 10px; }
.sf-catalog-tools select {
  height: 42px;
  min-width: 180px;
  padding: 0 13px;
  border: 1px solid var(--sf-line);
  border-radius: calc(var(--sf-radius) * .65);
  background: var(--sf-paper);
  outline: 0;
}
.sf-catalog-tools select:focus { border-color: var(--sf-ink); }

.sf-product-page { padding-block: 40px 80px; }
.sf-product-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); gap: clamp(35px, 6vw, 90px); align-items: start; }
/* Sticky creates a stacking context, so the zoom pane's z-index is scoped to
   this subtree. The gallery is lifted while zooming, otherwise the info column
   (later in the DOM) paints its variant swatches over the pane. */
.sf-product-gallery { position: sticky; z-index: 1; top: calc(var(--sf-sticky-top, 138px) + 18px); }
.sf-product-gallery.is-zooming { z-index: 60; }
.sf-product-main-image { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--sf-radius); background: var(--sf-wash); }
body[data-storefront-theme="selene_beauty"] .sf-product-main-image { aspect-ratio: 4 / 5; }
.sf-product-main-image img { width: 100%; height: 100%; object-fit: contain; }
.sf-product-main-image.is-zooming { cursor: crosshair; }

/* Hover zoom: lens over the image, magnified pane beside the gallery. */
.sf-zoom-lens {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .22);
  box-shadow: 0 0 10px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.sf-product-main-image.is-zooming .sf-zoom-lens { display: block; }
.sf-zoom-pane {
  position: absolute;
  z-index: 40;
  top: 0;
  left: calc(100% + 20px);
  display: none;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  background-color: var(--sf-paper);
  background-repeat: no-repeat;
  box-shadow: var(--sf-shadow);
  pointer-events: none;
}
.sf-zoom-pane.is-visible { display: block; }

/* Thumbnails ride in a rail with arrows instead of a bare scrollbar. */
.sf-thumb-rail { margin-top: 12px; }
.sf-product-thumbs {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sf-product-thumbs::-webkit-scrollbar { display: none; }
.sf-product-thumb { width: 72px; aspect-ratio: 1; flex: none; padding: 2px; border: 1px solid var(--sf-line); background: var(--sf-paper); scroll-snap-align: start; }
.sf-product-thumb.is-active { border-color: var(--sf-accent); }
.sf-product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sf-thumb-rail .sf-rail-nav { top: calc(50% - 20px); width: 32px; height: 32px; }
.sf-thumb-rail .sf-rail-prev { left: -14px; }
.sf-thumb-rail .sf-rail-next { right: -14px; }
.sf-product-info { padding-top: 14px; }
/* Product name stays at body scale (15px ceiling) rather than a display size. */
.sf-product-info h1 { margin-bottom: 12px; font-size: 15px; font-weight: 700; line-height: 1.45; }
body[data-storefront-theme="selene_beauty"] .sf-product-info h1 { font-weight: 600; }
.sf-product-sku { margin-bottom: 18px; color: var(--sf-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.sf-product-info .sf-price strong { font-size: 25px; }
.sf-variants { display: grid; gap: 18px; margin-top: 24px; }
.sf-variants-loading { height: 74px; border-radius: var(--sf-radius); }
.sf-variant-label { display: block; margin-bottom: 9px; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.sf-variant-options { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-variant-option {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  background: var(--sf-paper);
  color: var(--sf-muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--sf-transition), color var(--sf-transition), box-shadow var(--sf-transition);
}
.sf-variant-option:hover { border-color: var(--sf-accent); color: var(--sf-ink); }
.sf-variant-option.is-selected { border-color: var(--sf-accent); box-shadow: inset 0 0 0 1px var(--sf-accent); color: var(--sf-ink); font-weight: 600; }
.sf-variant-option.is-unavailable { opacity: .4; cursor: not-allowed; }
.sf-variant-option.is-unavailable::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  border-top: 1px solid currentColor;
  transform: rotate(-18deg);
}
.sf-variant-option-image { flex-direction: column; width: 78px; height: auto; padding: 0; overflow: hidden; }
.sf-variant-option-image img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sf-wash); }
.sf-variant-option-image > span {
  width: 100%;
  padding: 4px 3px;
  border-top: 1px solid var(--sf-line);
  font-size: 10px;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-variant-option-image.is-selected > span { background: var(--sf-accent); border-top-color: var(--sf-accent); color: #fff; }

/* Product description / details accordion. */
.sf-product-accordion { margin: 26px 0 4px; border-top: 1px solid var(--sf-line); }
.sf-acc { border-bottom: 1px solid var(--sf-line); }
.sf-acc-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  background: transparent;
  color: var(--sf-ink);
  font-family: var(--sf-body-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}
.sf-acc-head svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform var(--sf-transition); }
.sf-acc.is-open .sf-acc-head svg { transform: rotate(180deg); }
.sf-acc-body { display: none; padding-bottom: 18px; color: var(--sf-muted); font-size: 13.5px; line-height: 1.65; }
.sf-acc.is-open .sf-acc-body { display: block; }
.sf-acc-body > *:last-child { margin-bottom: 0; }
.sf-acc-body p { margin-bottom: 10px; }
.sf-acc-body ul, .sf-acc-body ol { margin: 0 0 10px; padding-left: 18px; }
.sf-acc-body li { padding: 3px 0; }
.sf-acc-body h4, .sf-acc-body h5 { margin-bottom: 6px; color: var(--sf-ink); font-size: 13px; }
.sf-acc-body img { max-width: 100%; height: auto; }
.sf-acc-body table { width: 100%; border-collapse: collapse; }
.sf-acc-body th, .sf-acc-body td { padding: 6px 8px; border: 1px solid var(--sf-line); text-align: left; }
.sf-detail-list { margin: 0; padding: 0; list-style: none; }
.sf-detail-list li { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; border-bottom: 1px solid var(--sf-line); }
.sf-detail-list li:last-child { border-bottom: 0; }
.sf-detail-list strong { color: var(--sf-ink); font-weight: 600; text-align: right; }
/* Add to cart / Buy now / Share, as on the default template. */
.sf-purchase-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr); gap: 12px; margin: 26px 0; }
.sf-purchase-row .sf-button { min-height: 50px; justify-content: center; gap: 9px; padding-inline: 16px; }
.sf-purchase-row .sf-button svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sf-purchase-row .sf-buy-now svg { fill: currentColor; stroke: none; }
.sf-purchase-row .sf-cart-control .sf-button,
.sf-purchase-row .sf-qty-stepper { width: 100%; min-height: 50px; }
.sf-purchase-row .sf-qty-stepper { grid-template-columns: 46px minmax(0, 1fr) 46px; }
.sf-buy-now { border-color: var(--sf-accent); background: var(--sf-accent); }
.sf-buy-now:hover { border-color: var(--sf-accent-dark); background: var(--sf-accent-dark); }

/* Cart line quantity control. */
.sf-quantity { min-height: 40px; display: grid; grid-template-columns: 34px 38px 34px; align-items: center; border: 1px solid var(--sf-line); }
.sf-quantity button { height: 100%; background: transparent; }
.sf-quantity span { text-align: center; }
/* Badge row: the default template's trust strip, laid out as a wrapping grid. */
.sf-product-assurances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 14px 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--sf-line);
}
.sf-product-assurance { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sf-product-assurance svg { width: 26px; height: 26px; fill: none; stroke: var(--sf-accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sf-product-assurance span { color: var(--sf-muted); font-size: 11px; line-height: 1.35; }

.sf-cart-page { padding-block: 48px 80px; }
.sf-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; align-items: start; }
.sf-cart-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--sf-line); }
.sf-cart-row-image { overflow: hidden; aspect-ratio: 1; background: var(--sf-wash); }
.sf-cart-row-image img { width: 100%; height: 100%; object-fit: contain; }
.sf-cart-row h3 { margin: 2px 0 7px; font-family: var(--sf-body-font); font-size: 14px; }
.sf-cart-row-price { color: var(--sf-muted); font-size: 12px; }
.sf-cart-row-actions { display: flex; align-items: center; gap: 13px; margin-top: 12px; }
.sf-text-button { padding: 0; border-bottom: 1px solid var(--sf-line); background: transparent; color: var(--sf-muted); font-size: 11px; }
.sf-cart-row-total { font-weight: 700; white-space: nowrap; }
.sf-summary { position: sticky; top: calc(var(--sf-sticky-top, 138px) + 18px); padding: 23px; border: 1px solid var(--sf-line); background: var(--sf-paper); }
.sf-summary h2 { margin-bottom: 20px; font-size: 23px; }
.sf-summary-line { display: flex; justify-content: space-between; gap: 20px; margin: 10px 0; }
.sf-summary-total { margin: 17px 0 20px; padding-top: 15px; border-top: 1px solid var(--sf-line); font-size: 17px; font-weight: 700; }

.sf-scrim { position: fixed; z-index: 900; inset: 0; background: rgba(14,10,12,.48); backdrop-filter: blur(2px); }
.sf-drawer {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  width: min(430px, 94vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sf-paper);
  box-shadow: -20px 0 60px rgba(0,0,0,.16);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .27s ease, visibility .27s;
}
.sf-menu-drawer { right: auto; left: 0; transform: translateX(-105%); }
.sf-drawer.is-open { transform: translateX(0); visibility: visible; }
.sf-drawer-head { min-height: 67px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--sf-line); }
.sf-drawer-head strong { font-family: var(--sf-heading); font-size: 18px; }
.sf-drawer-head button { width: 42px; height: 42px; background: transparent; font-size: 30px; font-weight: 300; }
.sf-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.sf-empty-cart-icon { display: inline-flex; color: var(--sf-accent); }
.sf-empty-cart-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sf-drawer-foot { padding: 17px 20px 22px; border-top: 1px solid var(--sf-line); }
.sf-drawer-foot > div { display: flex; justify-content: space-between; margin-bottom: 14px; }
.sf-drawer-link { display: block; padding: 13px 0; border-bottom: 1px solid var(--sf-line); }
.sf-mobile-category-group { border-bottom: 1px solid var(--sf-line); }
.sf-mobile-category-group .sf-drawer-link { border-bottom: 0; }
.sf-drawer-parent-link { font-weight: 700; }
.sf-mobile-category-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  background: transparent;
  font-weight: 700;
  text-align: left;
}
.sf-mobile-category-toggle svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; transition: transform var(--sf-transition); }
.sf-mobile-category-group.is-open .sf-mobile-category-toggle svg { transform: rotate(180deg); }
.sf-mobile-category-panel { display: none; padding: 0 0 12px 12px; }
.sf-mobile-category-group.is-open .sf-mobile-category-panel { display: block; }
.sf-drawer-sublink {
  display: block;
  padding: 8px 0 8px calc(var(--sf-category-depth, 0) * 14px);
  color: var(--sf-muted);
  font-size: 13px;
}
.sf-drawer-sublink.is-heading { color: var(--sf-ink); font-weight: 600; padding-top: 12px; }
.sf-mini-cart-row { display: grid; grid-template-columns: 68px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--sf-line); }
.sf-mini-cart-row img { width: 68px; aspect-ratio: 1; object-fit: contain; background: var(--sf-wash); }
.sf-mini-cart-row strong { display: block; margin-bottom: 4px; font-size: 12px; }
.sf-mini-cart-row span { color: var(--sf-muted); font-size: 11px; }
.sf-mini-cart-remove { align-self: start; padding: 0; background: transparent; color: var(--sf-muted); font-size: 18px; }

.sf-toast {
  position: fixed;
  z-index: 1200;
  right: 22px;
  bottom: 22px;
  max-width: min(370px, calc(100vw - 44px));
  padding: 13px 18px;
  border-radius: var(--sf-radius);
  background: var(--sf-ink);
  color: #fff;
  box-shadow: var(--sf-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--sf-transition), transform var(--sf-transition);
}
.sf-toast.is-visible { opacity: 1; transform: translateY(0); }

.sf-footer { padding-top: 55px; border-top: 1px solid var(--sf-line); background: var(--sf-wash); }
.sf-footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 50px; padding-bottom: 48px; }
.sf-footer section { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.sf-footer h2 { margin-bottom: 7px; font-family: var(--sf-body-font); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.sf-footer-brand { margin-bottom: 4px; font-family: var(--sf-heading); font-size: 24px; font-weight: 700; }
.sf-footer-copy { max-width: 520px; margin-bottom: 7px; color: var(--sf-muted); font-size: 13px; }
.sf-footer-copy p:last-child { margin-bottom: 0; }
.sf-footer-contact { border-bottom: 1px solid var(--sf-line); font-size: 13px; }
.sf-footer address { margin-top: 10px; color: var(--sf-muted); font-size: 12px; font-style: normal; }
.sf-footer-bar { min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; border-top: 1px solid var(--sf-line); color: var(--sf-muted); font-size: 11px; }
.sf-footer-powered a { color: inherit; font-weight: 600; text-decoration: none; }
.sf-footer-powered a:hover, .sf-footer-powered a:focus-visible { color: var(--sf-accent, currentColor); text-decoration: underline; }
.sf-mobile-tabs { display: none; }

.sf-skeleton { overflow: hidden; position: relative; background: var(--sf-wash); }
.sf-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); transform: translateX(-100%); animation: sf-shimmer 1.3s infinite; }
@keyframes sf-shimmer { to { transform: translateX(100%); } }
.sf-skeleton-card { min-height: 360px; border: 1px solid var(--sf-line); }

@media (max-width: 1100px) {
  .sf-header-main { grid-template-columns: minmax(160px, auto) minmax(230px, 1fr) auto; gap: 14px; }
  .sf-desktop-action { display: none; }
  .sf-mega-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sf-mega-promo { display: none; }
  .sf-category-grid { grid-template-columns: repeat(4, 1fr); }
  .sf-category-grid.is-clamped > *:nth-child(n + 9) { display: none; }
  .sf-product-grid { grid-template-columns: repeat(3, 1fr); }
  .sf-product-rail .sf-product-grid { grid-auto-columns: calc((100% - 3 * 22px) / 4); }
  .sf-all-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-catalog-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 900px) {
  .sf-product-rail .sf-product-grid { grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; }
  .sf-all-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Filters become a bottom sheet: the sidebar has no room to sit beside the
     grid, and an inline block would push the products far down the page. */
  .sf-catalog-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sf-filter-trigger { display: inline-flex; }
  /* Sort stretches, the filter trigger sits at the end of the row. */
  .sf-catalog-tools select { flex: 1; min-width: 0; }

  /* The sidebar is behind a button here, so sort and filters ride along under
     the header instead of stranding the shopper at the top of the list. */
  /* Single column here, so the bar bleeds to the container edges. */
  .sf-catalog-toolbar { margin-inline: -24px; margin-bottom: 18px; padding: 10px 24px; }
  .sf-catalog-filters {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 84vh;
    max-height: 84dvh;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--sf-line);
    border-radius: calc(var(--sf-radius) * 2) calc(var(--sf-radius) * 2) 0 0;
    background: var(--sf-paper);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .18);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform .28s ease, visibility .28s;
  }
  .sf-catalog-layout.filters-open .sf-catalog-filters { transform: none; visibility: visible; }
  .sf-filter-panel-head { position: sticky; top: 0; z-index: 1; padding-bottom: 12px; margin-bottom: 4px; background: var(--sf-paper); }
  .sf-filter-panel-head h2 { font-size: 17px; }
  .sf-filter-close { display: inline-flex; }
  .sf-filter-apply { display: block; }
  .sf-filter-body { max-height: none; }
  .sf-filter-head { padding: 15px 0; }
  .sf-filter-option { padding: 9px 0; font-size: 14px; }

  /* One swipeable row instead of a block of wrapped chips. */
  .sf-chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .sf-chip-row::-webkit-scrollbar { display: none; }
}

@media (max-width: 760px) {
  :root { --sf-header-height: 56px; }
  .sf-container { padding-inline: 15px; }
  .sf-announcement { min-height: 32px; gap: 4px; font-size: 10px; }
  .sf-announcement span:nth-child(2), .sf-announcement a { display: none; }
  /* The search wraps to a second row, so row one is pinned to the standard
     header height instead of collapsing onto its tallest child. */
  .sf-header-main { grid-template-columns: 40px 1fr auto; grid-template-rows: var(--sf-header-height) auto; gap: 0 7px; min-height: 56px; }
  .sf-icon-button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .sf-brand { align-items: center; justify-self: center; max-width: 150px; font-size: 15px; text-align: center; }
  .sf-brand img { max-width: 140px; height: 50px; object-position: center; }
  body[data-storefront-theme="selene_beauty"] .sf-brand { font-size: 18px; }
  .sf-search { grid-column: 1 / -1; grid-row: 2; height: 38px; margin-bottom: 9px; }
  .sf-search button { display: none; }
  .sf-header-actions .sf-action-link:not(.sf-cart-trigger) { display: none; }
  .sf-action-link > span { display: none; }
  .sf-category-nav { display: none; }
  .sf-hero-slide, .sf-hero-content { min-height: var(--sf-hero-height, 500px); }
  .sf-hero-media::after { background: linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,.12) 75%); }
  .sf-hero-content { justify-content: flex-end; padding-bottom: 76px; }
  .sf-hero h1 { font-size: clamp(39px, 13vw, 59px); }
  .sf-benefits .sf-container { grid-template-columns: 1fr; }
  .sf-benefit { justify-content: flex-start; padding: 14px 5px; }
  .sf-benefit + .sf-benefit { border-top: 1px solid var(--sf-line); border-left: 0; }
  .sf-section { padding-block: 45px; }
  .sf-section-head { align-items: flex-start; }
  .sf-section-head h2 { font-size: 31px; }
  .sf-category-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .sf-category-grid.is-clamped > *:nth-child(n + 7) { display: none; }
  .sf-section-foot { margin-top: 22px; }
  .sf-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sf-product-rail .sf-product-grid { grid-auto-columns: calc((100% - 12px) / 2.25); gap: 12px; }
  .sf-rail-nav { display: none; }
  .sf-see-all-card { padding: 20px 14px; }
  .sf-see-all-card strong { font-size: 13px; }
  .sf-product-body { padding: 12px; }
  .sf-product-title { min-height: 40px; font-size: 13px; }
  /* The heart leaves the action row for the card's top-right corner, so Add to
     cart gets the full width. It stays in the row's markup and is lifted out
     with position: absolute - .sf-product-card is the nearest positioned
     ancestor. The white disc keeps it legible over the product photo. */
  .sf-product-actions { grid-template-columns: minmax(0, 1fr); }
  .sf-product-card .sf-product-actions .miideal-wishlist-btn.in-actions {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 4px rgba(16, 24, 40, .18);
  }
  .sf-product-card .sf-product-actions .miideal-wishlist-btn.in-actions svg { width: 17px; height: 17px; }
  .sf-page-head { padding-top: 34px; }
  /* One row keeps the pinned bar shallow — it is on screen the whole time. */
  .sf-catalog-toolbar { align-items: center; gap: 10px; margin-inline: -15px; padding-inline: 15px; }
  .sf-results-count { flex: none; font-size: 12px; }
  .sf-catalog-tools { flex: 1; min-width: 0; }
  .sf-chip-row { margin-inline: -15px; padding-inline: 15px; }
  .sf-product-layout { grid-template-columns: 1fr; gap: 30px; }
  .sf-product-gallery { position: static; }
  .sf-product-info h1 { font-size: 14px; }
  .sf-zoom-pane { display: none !important; }
  .sf-cart-layout { grid-template-columns: 1fr; }
  .sf-summary { position: static; }
  .sf-cart-row { grid-template-columns: 76px minmax(0, 1fr); }
  .sf-cart-row-total { grid-column: 2; }
  .sf-footer { padding-bottom: 72px; }
  .sf-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  .sf-footer-grid section:first-child { grid-column: 1 / -1; }
  .sf-footer-bar { padding-block: 15px; flex-direction: column; justify-content: center; gap: 4px; }
  .sf-mobile-tabs {
    position: fixed;
    z-index: 700;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: calc(59px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--sf-line);
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(12px);
  }
  .sf-mobile-tabs a, .sf-mobile-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: transparent; color: var(--sf-muted); font-size: 9px; }
  .sf-mobile-tabs svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
  .sf-mobile-tabs .is-active { color: var(--sf-accent); }
  .sf-mobile-tabs .sf-count { top: 4px; right: calc(50% - 24px); }
  .sf-toast { right: 14px; bottom: 75px; max-width: calc(100vw - 28px); }

  /* ── Product purchase bar ────────────────────────────────────────────
     Cart, Buy now and Share stay on one line and dock above the tab bar,
     matching product-detail.php. Share collapses to an icon so the two
     primary actions keep usable widths on narrow screens. */
  .sf-purchase-row {
    position: fixed;
    right: 0;
    bottom: calc(59px + env(safe-area-inset-bottom));
    left: 0;
    /* below .sf-mobile-tabs (700) so the tab bar always wins */
    z-index: 690;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px 46px;
    gap: 6px;
    margin: 0;
    padding: 9px 12px;
    border-top: 1px solid var(--sf-line);
    background: var(--sf-surface, #fff);
    box-shadow: 0 -4px 14px rgba(14, 10, 12, .12);
  }
  .sf-purchase-row .sf-button { min-height: 46px; padding-inline: 10px; }
  .sf-purchase-row .sf-cart-control .sf-button,
  .sf-purchase-row .sf-qty-stepper { min-height: 46px; }
  .sf-purchase-row .sf-qty-stepper { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  /* Icon-only share: the label is what forced the button onto its own row */
  .sf-purchase-row .sf-share { padding-inline: 0; }
  .sf-purchase-row .sf-share span { display: none; }
  /* Save collapses to its heart, like Share, so the two primary actions keep
     usable widths on a narrow screen. */
  .sf-purchase-row .sf-save-button { padding-inline: 0; }
  .sf-purchase-row .sf-save-button .miideal-wishlist-btn-text { display: none; }

  /* Clear the docked bar so the last content is never hidden behind it */
  body.sf-route-product .sf-product-page { padding-bottom: 68px; }
  body.sf-route-product .sf-footer { padding-bottom: 140px; }
}

@media (max-width: 430px) {
  .sf-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-category-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-category-grid.is-clamped > *:nth-child(n + 5) { display: none; }
  .sf-product-rail .sf-product-grid { grid-auto-columns: calc((100% - 12px) / 2.1); }
  .sf-all-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .sf-product-card { border-radius: calc(var(--sf-radius) * .65); }
  .sf-product-body { padding: 10px; }
  .sf-product-title { min-height: 30px; font-size: 11px; }
  .sf-product-category { font-size: 8px; }
  .sf-price strong { font-size: 14px; }
  .sf-price del, .sf-price span { font-size: 9px; }
  .sf-product-actions .sf-button { padding-inline: 8px; font-size: 9px; }
  .sf-chip { height: 34px; padding: 0 14px; font-size: 12px; }
  .sf-chip-row { gap: 7px; margin-top: 16px; }
  .sf-catalog-filters { max-height: 88vh; max-height: 88dvh; padding-inline: 15px; }
  .sf-page-head h1 { font-size: clamp(26px, 8vw, 36px); }
  .sf-section-kicker { font-size: 9px; }
  .sf-section-link { font-size: 10px; }
    .sf-section-kicker ~ h2 { font-size: 18px; }
  .sf-button { font-size: 9px; }

}

@media (prefers-reduced-motion: reduce) {
  /* The blanket rule below already collapses the hint's slide to an instant
     swap, so the words still rotate - they just stop moving. */
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Wishlist ────────────────────────────────────────────────────────────
   The control itself lives in css/wishlist.css; this only places it in the
   custom storefront and matches it to the active theme's accent. */
.sf-body {
  --miideal-wishlist-accent: var(--sf-accent);
  --miideal-wishlist-idle: var(--sf-ink);
  /* No disc behind the glyph: it sits straight on the product image, and the
     drop shadow in css/wishlist.css carries it over a light photo. */
  --miideal-wishlist-surface: transparent;
}

/* The Save button on the product page is laid out as one of the purchase-row
   buttons, so it takes their height and border rather than the pill default. */
.sf-purchase-row .miideal-wishlist-btn.with-label {
  min-height: 50px;
  width: 100%;
  border-radius: var(--sf-radius);
  border: 1px solid var(--sf-line);
  background: var(--sf-paper);
  color: var(--sf-ink);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .02em;
}
.sf-purchase-row .miideal-wishlist-btn.with-label:hover { border: 1px solid var(--sf-accent); }
.sf-purchase-row .miideal-wishlist-btn.with-label.is-saved { border: 1px solid var(--sf-accent); color: var(--sf-accent); }

.sf-wishlist-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }

@media (max-width: 720px) {
  .sf-wishlist-actions { justify-content: flex-start; }
  .sf-purchase-row .miideal-wishlist-btn.with-label { min-height: 46px; }
}

/* ===========================================================================
   GIVA LUXE
   ---------------------------------------------------------------------------
   A jewellery / accessories skin for the same single-page storefront: soft
   ivory grounds, an evergreen brand colour with a gold secondary, a serif
   display face, and pill controls.

   Two things separate it from the other two themes rather than just recolour
   them. Product cards are borderless tiles - the image sits on a tinted wash
   and the card edge disappears, which is how jewellery catalogs read - and the
   whole theme is tuned mobile-first: the small-screen block at the end of this
   section is the larger half of the work, because that is where this kind of
   store is actually shopped.

   Every rule is scoped to body[data-storefront-theme="giva_luxe"], so nothing
   here can reach Aura Professional or Selene Beauty.
   =========================================================================== */

body[data-storefront-theme="giva_luxe"] {
  --sf-ink: var(--theme-text, #1c2b27);
  --sf-paper: var(--theme-surface, #ffffff);
  --sf-muted: var(--theme-text-muted, #6b7a75);
  --sf-line: var(--theme-border, #e6e1da);
  --sf-wash: var(--theme-surface-muted, #f7f3ee);
  --sf-accent: var(--theme-primary, #14453d);
  --sf-accent-dark: var(--theme-primary-hover, #0d312b);
  /* Giva's secondary metallic maps to the palette's accent, which the Theme tab
     keeps separate from the primary. */
  --sf-gold: var(--theme-accent, #b98a44);
  --sf-gold-soft: #f2e7d4;
  --sf-shadow: 0 18px 46px rgba(20, 69, 61, .09);
  --sf-radius: 16px;
  --sf-container: 1320px;
  --sf-heading: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --sf-body-font: "Mulish", "Inter", system-ui, sans-serif;
  background: var(--sf-paper);
}

/* -- Announcement -------------------------------------------------------- */
body[data-storefront-theme="giva_luxe"] .sf-announcement {
  background: var(--sf-accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-storefront-theme="giva_luxe"] .sf-announcement strong { color: var(--sf-gold-soft); font-weight: 700; }

/* -- Header -------------------------------------------------------------- */
body[data-storefront-theme="giva_luxe"] .sf-header { border-bottom: 1px solid var(--sf-line); }
body[data-storefront-theme="giva_luxe"] .sf-brand {
  font-size: 25px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
}
body[data-storefront-theme="giva_luxe"] .sf-search {
  border: 1px solid var(--sf-line);
  border-radius: 999px;
  background: var(--sf-wash);
  overflow: hidden;
}
body[data-storefront-theme="giva_luxe"] .sf-search button {
  --sf-search-tracking: .06em;
  border-radius: 999px;
  background: var(--sf-accent);
}
body[data-storefront-theme="giva_luxe"] .sf-category-nav { border-top: 1px solid var(--sf-line); }
body[data-storefront-theme="giva_luxe"] .sf-category-nav .sf-category-parent {
  font-family: var(--sf-body-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
}
body[data-storefront-theme="giva_luxe"] .sf-count { background: var(--sf-gold); }

/* -- Buttons: pills, not squared blocks ---------------------------------- */
body[data-storefront-theme="giva_luxe"] .sf-button {
  border-radius: 999px;
  border-color: var(--sf-accent);
  background: var(--sf-accent);
  font-family: var(--sf-body-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: none;
}
body[data-storefront-theme="giva_luxe"] .sf-button:hover { border-color: var(--sf-accent-dark); background: var(--sf-accent-dark); }
body[data-storefront-theme="giva_luxe"] .sf-button-secondary { border-color: var(--sf-line); background: transparent; color: var(--sf-ink) !important; }
body[data-storefront-theme="giva_luxe"] .sf-button-secondary:hover { border-color: var(--sf-accent); background: transparent; color: var(--sf-accent) !important; }
body[data-storefront-theme="giva_luxe"] .sf-buy-now { border-color: var(--sf-gold); background: var(--sf-gold); }
body[data-storefront-theme="giva_luxe"] .sf-buy-now:hover { border-color: var(--sf-gold); background: var(--sf-gold); filter: brightness(.92); }
body[data-storefront-theme="giva_luxe"] .sf-qty-stepper { border-radius: 999px; overflow: hidden; }
body[data-storefront-theme="giva_luxe"] .sf-product-actions .miideal-wishlist-btn.in-actions { border-radius: 999px; }

/* -- Hero ---------------------------------------------------------------- */
/* The hero keeps white type on a dark ground: the slide copy is drawn over
   .sf-hero-media, which is always a dark gradient (or a tenant banner), so
   switching to ink text here would put dark on dark. */
body[data-storefront-theme="giva_luxe"] .sf-hero { background: var(--sf-accent); }
body[data-storefront-theme="giva_luxe"] .sf-hero-media {
  background-image: linear-gradient(135deg, rgba(0,0,0,.66), rgba(0,0,0,.24) 52%, rgba(255,255,255,.2));
}
body[data-storefront-theme="giva_luxe"] .sf-hero h1 { font-weight: 400; line-height: 1.06; }
body[data-storefront-theme="giva_luxe"] .sf-kicker { color: var(--sf-gold); font-weight: 700; letter-spacing: .2em; }

/* -- Sections ------------------------------------------------------------ */
body[data-storefront-theme="giva_luxe"] .sf-section-kicker { color: var(--sf-gold); }
body[data-storefront-theme="giva_luxe"] .sf-section-head h2 { font-weight: 400; letter-spacing: .01em; }
body[data-storefront-theme="giva_luxe"] .sf-section-link { border-bottom-color: var(--sf-gold); color: var(--sf-accent); text-transform: none; letter-spacing: .04em; font-size: 12.5px; }

/* -- Category circles ---------------------------------------------------- */
body[data-storefront-theme="giva_luxe"] .sf-category-image {
  border-color: transparent;
  background: var(--sf-wash);
  box-shadow: inset 0 0 0 1px rgba(20, 69, 61, .08);
}
body[data-storefront-theme="giva_luxe"] .sf-category-card:hover .sf-category-image {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--sf-gold), var(--sf-shadow);
}
body[data-storefront-theme="giva_luxe"] .sf-category-card strong {
  font-family: var(--sf-body-font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
}
body[data-storefront-theme="giva_luxe"] .sf-category-fallback { color: var(--sf-accent); }

/* -- Product card: borderless tile --------------------------------------- */
body[data-storefront-theme="giva_luxe"] .sf-product-card {
  border-color: transparent;
  border-radius: var(--sf-radius);
  background: transparent;
  overflow: visible;
}
body[data-storefront-theme="giva_luxe"] .sf-product-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
body[data-storefront-theme="giva_luxe"] .sf-product-image-link {
  aspect-ratio: 1 / 1;
  border-radius: var(--sf-radius);
  background: var(--sf-wash);
}
body[data-storefront-theme="giva_luxe"] .sf-product-card:hover .sf-product-image-link img { transform: scale(1.06); }
body[data-storefront-theme="giva_luxe"] .sf-product-badge {
  top: 10px;
  left: 10px;
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--sf-gold);
  letter-spacing: .06em;
}
body[data-storefront-theme="giva_luxe"] .sf-product-body { padding: 14px 2px 0; }
body[data-storefront-theme="giva_luxe"] .sf-product-category { color: var(--sf-gold); letter-spacing: .14em; }
body[data-storefront-theme="giva_luxe"] .sf-product-title {
  font-family: var(--sf-body-font);
  font-size: 14px;
  font-weight: 600;
  -webkit-line-clamp: 2;
  min-height: 40px;
}
body[data-storefront-theme="giva_luxe"] .sf-price strong { font-size: 17px; font-weight: 800; }
body[data-storefront-theme="giva_luxe"] .sf-price span { color: var(--sf-gold); font-weight: 700; }

/* -- Wishlist heart ------------------------------------------------------ */
/* -- Footer -------------------------------------------------------------- */
body[data-storefront-theme="giva_luxe"] .sf-footer { background: var(--sf-wash); color: var(--sf-ink); }
body[data-storefront-theme="giva_luxe"] .sf-footer h2 { color: var(--sf-accent); }
body[data-storefront-theme="giva_luxe"] .sf-footer a:hover { color: var(--sf-gold); }

/* === Giva Luxe - small screens ============================================
   This theme is shopped on a phone far more than on a desktop, so the mobile
   pass is deliberate rather than a fallback: a two-up grid with real gutters,
   type that stays readable at 360px, controls at a comfortable touch target,
   and a product page whose purchase row docks above the tab bar.
   ========================================================================== */

@media (max-width: 900px) {
  body[data-storefront-theme="giva_luxe"] .sf-section { padding-block: 34px; }
  body[data-storefront-theme="giva_luxe"] .sf-section-head { margin-bottom: 18px; align-items: center; }
  body[data-storefront-theme="giva_luxe"] .sf-section-head h2 { font-size: clamp(21px, 5.6vw, 30px); }
  body[data-storefront-theme="giva_luxe"] .sf-brand { font-size: 18px; letter-spacing: .18em; }
}

@media (max-width: 720px) {
  body[data-storefront-theme="giva_luxe"] .sf-container { padding-inline: 14px; }

  /* Two-up, the density this catalog is browsed at on a phone. */
  body[data-storefront-theme="giva_luxe"] .sf-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }
  /* Rails peek at the next card so the row reads as scrollable. The explicit
     columns from the rule above have to be undone here: a rail is
     grid-auto-flow:column, and leaving two explicit tracks in place would drop
     the first two cards into them and stack the rest on top. */
  body[data-storefront-theme="giva_luxe"] .sf-product-rail .sf-product-grid {
    grid-template-columns: none;
    grid-auto-columns: 46vw;
    gap: 12px;
  }

  body[data-storefront-theme="giva_luxe"] .sf-product-body { padding: 10px 2px 0; }
  body[data-storefront-theme="giva_luxe"] .sf-product-category { font-size: 9px; letter-spacing: .1em; }
  body[data-storefront-theme="giva_luxe"] .sf-product-title { font-size: 12.5px; min-height: 34px; line-height: 1.3; }
  body[data-storefront-theme="giva_luxe"] .sf-price { gap: 5px; margin-bottom: 10px; }
  body[data-storefront-theme="giva_luxe"] .sf-price strong { font-size: 14.5px; }
  body[data-storefront-theme="giva_luxe"] .sf-price del,
  body[data-storefront-theme="giva_luxe"] .sf-price span { font-size: 10.5px; }

  /* The quick-view eye is redundant next to a tappable card, and its column
     was squeezing the cart button below a comfortable width. */
  body[data-storefront-theme="giva_luxe"] .sf-product-actions .sf-button { min-height: 38px; font-size: 11px; padding-inline: 8px; }

  body[data-storefront-theme="giva_luxe"] .sf-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  body[data-storefront-theme="giva_luxe"] .sf-category-card strong { margin-top: 9px; font-size: 11px; }

  body[data-storefront-theme="giva_luxe"] .sf-hero h1 { font-size: clamp(24px, 7vw, 34px); }
  body[data-storefront-theme="giva_luxe"] .sf-kicker { font-size: 9.5px; letter-spacing: .16em; }

  body[data-storefront-theme="giva_luxe"] .sf-mobile-tabs { background: rgba(255, 255, 255, .985); }
  body[data-storefront-theme="giva_luxe"] .sf-mobile-tabs .is-active { color: var(--sf-accent); }

  body[data-storefront-theme="giva_luxe"] .sf-purchase-row { border-top-color: var(--sf-line); }
  body[data-storefront-theme="giva_luxe"] .sf-purchase-row .sf-button { border-radius: 999px; }
}

/* Narrow phones (iPhone SE / 360px Android): the two-up grid has to survive
   without the title or price wrapping into an unreadable stack. */
@media (max-width: 380px) {
  body[data-storefront-theme="giva_luxe"] .sf-container { padding-inline: 11px; }
  body[data-storefront-theme="giva_luxe"] .sf-product-grid { gap: 14px 9px; }
  body[data-storefront-theme="giva_luxe"] .sf-product-rail .sf-product-grid { gap: 10px; }
  body[data-storefront-theme="giva_luxe"] .sf-product-title { font-size: 11.5px; }
  body[data-storefront-theme="giva_luxe"] .sf-price strong { font-size: 13.5px; }
  body[data-storefront-theme="giva_luxe"] .sf-product-actions .sf-button { font-size: 10.5px; letter-spacing: .02em; }
  body[data-storefront-theme="giva_luxe"] .sf-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}