/* ============================================================
   Paylink storefront — current live palette (Cream + Sand + Forest)
   ============================================================
   Edit the :root variables at the top to swap the whole theme.
   Every component reads from those tokens — change ink, paper,
   cream, mocha, stone, sand, sale, and the storefront repaints.

   To make a NEW template variant from this file:
     1. Copy this file → storefront-template-2.css
     2. Edit the :root tokens AND/OR restructure the component
        rules (e.g. swap card layout from portrait to landscape,
        change the hero from full-bleed to split, switch the
        sticky topbar to a transparent one, etc).
     3. Hook the new template into the app via a `template`
        selector on the merchant's settings.
   ============================================================ */

:root {
  /* ── Brand palette ──────────────────────────────────────────
     The seven hexes that paint everything. */
  --sf-ink:        #1B4332;   /* forest — primary text, dark fills, buttons */
  --sf-paper:      #FBF8F3;   /* paper  — page background, button text on ink */
  --sf-cream:      #F1ECDF;   /* cream  — footer band, subtle highlight tint */
  --sf-mocha:      #5A6B5F;   /* sage-grey — secondary text + eyebrow caps */
  --sf-stone:      #8A958A;   /* sage-stone — disabled / muted */
  --sf-sand:       #E0D8C4;   /* sand   — hairlines + 1px borders */
  --sf-sale:       #9C5B4A;   /* clay   — sale / discount accent */

  /* Two newer tokens added in Phase 1F */
  --sf-sage:       #2D6A4F;   /* sage   — secondary accent (currently unused) */
  --sf-sage-soft:  #E3EAE2;   /* sage-soft — selected variant chip, payment tab,
                                 currency dropdown row, sort dropdown active */

  /* ── Typography ─────────────────────────────────────────────*/
  --sf-font:       'Plus Jakarta Sans', system-ui, sans-serif;
  --sf-font-serif: 'Fraunces', Georgia, serif;
  --sf-font-ar:    'Tajawal', 'SF Arabic', 'Geeza Pro', sans-serif;

  /* ── Tracking + scale ──────────────────────────────────────*/
  --sf-track-wide:  0.32em;   /* brand wordmark */
  --sf-track-caps:  0.12em;   /* nav links + eyebrow caps */
  --sf-track-label: 0.06em;   /* small labels */

  /* ── Layout ────────────────────────────────────────────────*/
  --sf-max:         1240px;
  --sf-gutter:      20px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  background: var(--sf-paper);
  color: var(--sf-ink);
  font-family: var(--sf-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[dir="rtl"], [dir="rtl"] * { font-family: var(--sf-font-ar); }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ─── 1. Topbar ─────────────────────────────────────────────
   Layout: burger (mobile) + brand on the START, lang/currency/
   cart cluster on the END. Backdrop-blur paper background;
   sand hairline border-bottom. Category strip below on desktop,
   hidden on mobile (lives in the hamburger drawer instead).   */
.sf-topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  background: rgba(251, 248, 243, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sf-sand);
}
.sf-topbar-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px var(--sf-gutter);
}
.sf-burger {
  display: none;             /* visible on mobile only */
  width: 38px; height: 38px;
  background: transparent; border: none; cursor: pointer;
  color: var(--sf-ink);
  align-items: center; justify-content: center;
}
.sf-brand {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent; border: none; cursor: pointer;
  padding: 0; min-width: 0;
}
.sf-brand img { height: 40px; width: auto; max-width: 64px; object-fit: contain; }
.sf-brand-name {
  font-size: 20px; font-weight: 600;
  letter-spacing: var(--sf-track-wide); text-transform: uppercase;
  color: var(--sf-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-topbar-spacer { flex: 1; }
.sf-topbar-cluster { display: flex; align-items: center; gap: 10px; }

/* Lang + currency badges */
.sf-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; color: var(--sf-ink);
  border: 1px solid var(--sf-sand);
  font-size: 12px; font-weight: 700; cursor: pointer;
}

/* Cart button — forest fill when items, paper outline when empty */
.sf-cart {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--sf-ink); color: var(--sf-paper);
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sf-cart--empty {
  background: transparent; color: var(--sf-ink);
  border: 1px solid var(--sf-sand);
}
.sf-cart-count {
  position: absolute; top: -4px; inset-inline-end: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--sf-sale); color: #fff;
  font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Category strip under topbar — letter-spaced caps. Active item
   gets an espresso underline. */
.sf-tb-cats {
  border-top: 1px solid var(--sf-cream);
  padding: 0 12px;
  display: flex; justify-content: center; overflow-x: auto;
}
.sf-tb-cats-inner {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 0;
}
.sf-cat-link {
  background: transparent; border: none; cursor: pointer;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 600;
  color: var(--sf-ink);
  text-transform: uppercase; letter-spacing: var(--sf-track-caps);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.sf-cat-link[aria-current="page"],
.sf-cat-link.is-active {
  font-weight: 800;
  border-bottom-color: var(--sf-ink);
}

/* Topbar height spacer for fixed positioning */
.sf-topbar-spacer-block { height: 116px; }

/* ─── 2. Hero ───────────────────────────────────────────────
   Full-bleed, 480px tall. Caption (eyebrow + headline + CTA)
   anchored to bottom-left. Sage gradient when no merchant
   image. Two-stripe dots at the bottom centre (rotation
   indicator).                                                */
.sf-hero {
  position: relative; width: 100%;
  height: 480px;
  background: linear-gradient(150deg, var(--sf-stone), var(--sf-mocha)) center/cover no-repeat;
  overflow: hidden;
}
.sf-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,18,0.05) 40%, rgba(15,23,18,0.42));
}
.sf-hero-cap {
  position: absolute; z-index: 2;
  inset-inline-start: clamp(20px, 6vw, 80px);
  bottom: clamp(40px, 8vh, 80px);
  color: #fff; max-width: 600px;
}
.sf-hero-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  opacity: 0.9; margin-bottom: 14px;
}
.sf-hero-title {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 300; letter-spacing: -0.02em; line-height: 1;
  margin: 0;
}
.sf-hero-cta {
  display: inline-block; margin-top: 24px;
  padding: 14px 28px;
  background: var(--sf-paper); color: var(--sf-ink);
  font-weight: 700; font-size: 12px;
  letter-spacing: var(--sf-track-caps); text-transform: uppercase;
  border: none; cursor: pointer; text-decoration: none;
}
.sf-hero-dots {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: inline-flex; gap: 6px; z-index: 2;
}
.sf-hero-dots i {
  width: 22px; height: 3px;
  background: rgba(255,255,255,0.45);
  display: inline-block;
}
.sf-hero-dots i.on { background: #fff; }

/* ─── 3. Value strip ────────────────────────────────────────
   Up to 4 trust signals beneath the hero. Tracked caps
   heading, sage-grey subtitle. Bordered top + bottom by
   sand hairlines.                                            */
.sf-values {
  border-bottom: 1px solid var(--sf-sand);
  background: var(--sf-paper);
}
.sf-values-row {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; padding: 22px 30px; text-align: center;
}
.sf-values-row > div {
  font-size: 12px; color: var(--sf-mocha); font-weight: 500;
  letter-spacing: 0.02em;
}
.sf-values-row b {
  display: block;
  color: var(--sf-ink); font-weight: 700; font-size: 13px;
  margin-bottom: 2px;
  letter-spacing: var(--sf-track-label); text-transform: uppercase;
}

/* ─── 4. Page section + headings ───────────────────────────
   Standard section wrapper. Section heading is a letter-spaced
   forest caps. Right-side "View all →" link is tracked caps. */
.sf-wrap {
  max-width: var(--sf-max); margin: 0 auto;
  padding: 40px var(--sf-gutter) 100px;
}
.sf-section { margin-bottom: 74px; }
.sf-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 26px;
}
.sf-sec-head h2 {
  font-size: 26px; font-weight: 600; margin: 0;
  color: var(--sf-ink);
  text-transform: uppercase; letter-spacing: 0.16em;
}
.sf-sec-head a {
  font-size: 12px; font-weight: 700;
  letter-spacing: var(--sf-track-caps); text-transform: uppercase;
  color: var(--sf-ink); text-decoration: none;
}

/* ─── 5. Category tiles ────────────────────────────────────
   3-up portrait tiles. Image with zoom-on-hover. Caption
   anchored bottom-left over a soft gradient at the foot. */
.sf-cats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.sf-cat {
  position: relative; display: block;
  background: var(--sf-cream); border: none; padding: 0;
  cursor: pointer; overflow: hidden; aspect-ratio: 3 / 4;
}
.sf-cat-img {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #E5DECC, #9DA68C);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 120px; font-weight: 700;
}
.sf-cat:hover .sf-cat-img { transform: scale(1.07); }
.sf-cat-ov {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  background: linear-gradient(180deg, transparent, rgba(15,23,18,0.55));
}
.sf-cat-cap {
  position: absolute; left: 22px; bottom: 22px; color: #fff;
  z-index: 2;
}
.sf-cat-name {
  font-size: 22px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.sf-cat-link2 {
  display: block; margin-top: 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--sf-track-caps); text-transform: uppercase;
  opacity: 0.9;
}

/* ─── 6. Product grid + cards ──────────────────────────────
   4-up portrait cards (responsive to 2-up below 880px).
   Two-image crossfade hover (.lay.a → .lay.b). Hover CTA
   slides up from the bottom. Badges (New / Save BD X) at
   top-left.                                                  */
.sf-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.sf-prod {
  background: transparent; border: none; padding: 0;
  text-align: start; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column;
}
.sf-prod-ph {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--sf-cream);
}
.sf-prod-ph .lay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 64px; font-weight: 700;
  transition: opacity 0.45s ease;
}
.sf-prod-ph .lay.b { opacity: 0; }
.sf-prod:hover .sf-prod-ph .lay.a { opacity: 0; }
.sf-prod:hover .sf-prod-ph .lay.b { opacity: 1; }
.sf-prod-tag {
  position: absolute; top: 12px; inset-inline-start: 12px;
  padding: 4px 10px; background: var(--sf-paper); color: var(--sf-ink);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: var(--sf-track-label); text-transform: uppercase;
  z-index: 2;
}
.sf-prod-tag.sale { background: var(--sf-sale); color: #fff; }
.sf-prod-cta {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 10px 14px; background: var(--sf-ink); color: var(--sf-paper);
  border: none; cursor: pointer;
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--sf-track-caps); text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2;
}
.sf-prod:hover .sf-prod-cta { opacity: 1; transform: translateY(0); }
.sf-prod-meta { padding: 13px 2px 0; text-align: center; }
.sf-prod-name {
  font-size: 13.5px; font-weight: 500; color: var(--sf-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-prod-rt {
  font-size: 11px; color: var(--sf-mocha);
  margin-top: 3px; letter-spacing: 1px;
}
.sf-prod-pr {
  margin-top: 5px;
  font-size: 13px; font-weight: 600; color: var(--sf-ink);
}
.sf-prod-was {
  color: var(--sf-mocha); text-decoration: line-through;
  font-weight: 400; margin-inline-start: 7px;
}

/* ─── 7. Editorial dark band ───────────────────────────────
   Full-bleed forest gradient with a side image. Used as a
   manifesto / about-shop block on the home. */
.sf-editorial {
  background: linear-gradient(135deg, var(--sf-ink) 0%, #0E2E22 100%);
  color: #fff;
  margin-inline: calc(-1 * var(--sf-gutter));
  padding: 74px 30px;
  margin-bottom: 74px;
  overflow: hidden; position: relative;
}
.sf-editorial-grid {
  max-width: var(--sf-max); margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr;
  align-items: center; gap: 56px;
}
.sf-editorial-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: #D8E1D5;
}
.sf-editorial h2 {
  font-family: var(--sf-font-serif);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 300; line-height: 1.1;
  margin: 14px 0 22px;
}
.sf-editorial p {
  font-size: 15.5px; line-height: 1.65;
  opacity: 0.85; margin: 0 0 28px;
  max-width: 540px;
}
.sf-editorial-cta {
  display: inline-block;
  padding: 14px 28px;
  background: var(--sf-paper); color: var(--sf-ink);
  font-weight: 700; font-size: 12px;
  letter-spacing: var(--sf-track-caps); text-transform: uppercase;
  border: none; cursor: pointer; text-decoration: none;
}
.sf-editorial-pic {
  aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, #9DA68C, #6B7768);
  border-radius: 0;
}

/* ─── 8. Footer ────────────────────────────────────────────
   Cream band, 4-column grid (brand + 3 link columns).
   Bottom bar with copyright + "powered by paylink". */
.sf-foot {
  border-top: 1px solid var(--sf-sand);
  background: var(--sf-cream);
  padding: 40px 0 22px;
}
.sf-foot-wrap {
  max-width: var(--sf-max); margin: 0 auto;
  padding: 0 var(--sf-gutter);
}
.sf-foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
}
.sf-foot-grid h5 {
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--sf-track-caps); text-transform: uppercase;
  color: var(--sf-mocha); margin: 0 0 14px;
}
.sf-foot-grid .b {
  font-size: 18px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sf-ink); margin-bottom: 12px;
}
.sf-foot-grid .bd {
  font-size: 13px; color: var(--sf-mocha); line-height: 1.55;
  max-width: 320px;
}
.sf-foot-grid .lk {
  display: flex; flex-direction: column; gap: 8px;
}
.sf-foot-grid .lk a {
  font-size: 13px; font-weight: 500;
  color: var(--sf-mocha); text-decoration: none;
}
.sf-foot-grid .lk a:hover { color: var(--sf-ink); }
.sf-foot-bottom {
  margin-top: 32px; padding-top: 18px;
  border-top: 1px solid var(--sf-sand);
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--sf-mocha);
}
.sf-foot-bottom b { color: var(--sf-ink); }

/* ─── 9. Checkout summary card (the "Your bag" pattern) ──── */
.sf-bag {
  background: #fff; border: 1px solid var(--sf-sand);
  padding: 22px;
}
.sf-bag-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.sf-bag-head .title {
  flex: 1; font-size: 16px; font-weight: 700; color: var(--sf-ink);
}
.sf-bag-head .tot {
  font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.sf-bag-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sf-cream);
}
.sf-bag-thumb {
  position: relative; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 6px;
  background: var(--sf-cream);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 16px;
}
.sf-bag-qty {
  position: absolute; top: -6px; inset-inline-end: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 50%;
  background: var(--sf-ink); color: var(--sf-paper);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.sf-bag-info { flex: 1; min-width: 0; }
.sf-bag-name {
  font-size: 13.5px; font-weight: 600; color: var(--sf-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-bag-sub {
  font-size: 11.5px; color: var(--sf-mocha); margin-top: 3px;
}
.sf-bag-price {
  font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--sf-ink);
  text-align: end;
}
.sf-promo-row { display: flex; gap: 8px; margin-top: 16px; }
.sf-promo-input {
  flex: 1; padding: 11px 14px;
  border: 1px solid var(--sf-sand); background: var(--sf-paper);
  color: var(--sf-ink); font-family: inherit;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.sf-promo-btn {
  padding: 11px 18px;
  border: 1px solid var(--sf-ink); background: #fff; color: var(--sf-ink);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  letter-spacing: var(--sf-track-caps); text-transform: uppercase;
}
.sf-bag-rows { margin-top: 18px; font-size: 13.5px; color: var(--sf-mocha); }
.sf-bag-rows > div {
  display: flex; justify-content: space-between; padding: 6px 0;
}
.sf-bag-rows .discount { color: var(--sf-sale); }
.sf-bag-rows .total {
  margin-top: 8px; padding-top: 12px;
  border-top: 1px solid var(--sf-sand);
  font-weight: 700; font-size: 17px; color: var(--sf-ink);
}
.sf-bag-cta {
  margin-top: 18px; width: 100%;
  padding: 16px 22px; border: none;
  background: var(--sf-ink); color: var(--sf-paper);
  font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
}

/* ─── 10. Responsive ───────────────────────────────────────
   Below 880px: cats + grid collapse to 2-up. Editorial goes
   1-column. Footer goes 2-up.
   Below 600px: burger shows, lang/cur badges hide, brand
   wordmark shrinks, hero gets shorter.
   No hover available: product CTA stays visible.            */
@media (max-width: 880px) {
  .sf-cats         { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sf-grid         { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sf-editorial-grid { grid-template-columns: 1fr; gap: 30px; }
  .sf-editorial    { padding: 56px 24px; }
  .sf-foot-grid    { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .sf-burger          { display: inline-flex; }
  .sf-topbar-cluster .sf-badge { display: none; }
  .sf-tb-cats         { display: none; }
  .sf-values-row      { grid-template-columns: 1fr 1fr; gap: 18px; }
  .sf-brand-name      { font-size: 16px; letter-spacing: 0.24em; }
  .sf-hero            { height: 360px; }
}
@media (hover: none) {
  .sf-prod-cta { opacity: 1; transform: none; }
}

/* ─── Optional: collapsible "Preview cart styling" section ───
   Stripped from the live storefront; only shown in theme picker. */
.sf-bag-preview-details { width: 100%; }
.sf-bag-preview-toggle {
  list-style: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--sf-cream);
  color: var(--sf-ink);
  border: 1px solid var(--sf-sand);
  border-radius: 999px;
  font-family: var(--sf-font);
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}
.sf-bag-preview-toggle::-webkit-details-marker { display: none; }
.sf-bag-preview-toggle:hover { background: var(--sf-sand); }
.sf-bag-preview-icon { display: inline-flex; }
.sf-bag-preview-chev {
  margin-inline-start: 4px;
  font-size: 18px; line-height: 1;
  transition: transform 0.2s ease;
}
.sf-bag-preview-details[open] .sf-bag-preview-chev { transform: rotate(90deg); }
.sf-bag-preview-body { margin-top: 24px; }


/* ── Merchant hero image must win over a theme's designed hero ───────────
   Some themes (tech, concept, magazine, market…) hard-set
   .sf-hero { background: … !important } for a graphic, image-less hero.
   When the merchant HAS set a hero image, the render drops the
   .sf-hero--empty class and exposes the image as --sf-hero-img. This rule
   has higher specificity (0,2,0) than a theme's bare .sf-hero (0,1,0), so
   it reinstates the image on every theme and hides any decorative side
   panel the theme layered on. Empty heroes keep the theme's own design. */
.sf-hero:not(.sf-hero--empty) {
  background: var(--sf-hero-img, transparent) center/cover no-repeat !important;
}
.sf-hero:not(.sf-hero--empty)::after { display: none !important; }

/* ── Merchant hero height must win over a theme's fixed hero height ──────
   Several themes hard-set .sf-hero { height: …!important } (and plum a
   min-height) for their designed hero, which silently overrode the
   merchant's hero-height slider. The render exposes the chosen height as
   --sf-hero-h on the always-present .sf-hero-resize class; this rule
   (0,2,0 > a theme's 0,1,0) reinstates it on every theme, and updates live
   as the draft streams a new value. */
.sf-hero.sf-hero-resize {
  height: var(--sf-hero-h, 480px) !important;
  min-height: var(--sf-hero-h, 480px) !important;
}