/* UPDATEFILE 4 */
/* Orbixis Storefront — single stylesheet, no framework.
   Inter (body) + Plus Jakarta Sans (headings/prices/logo) for a more
   premium, less "default system UI" look, per Ali's design feedback. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
  --sf-primary: #0d4d58;
  --sf-primary-dark: #082f36;
  --sf-primary-light: #12626f;
  --sf-secondary: #f5d581;
  --sf-bg: #f7f8f7;
  --sf-card: #ffffff;
  --sf-text: #16221f;
  --sf-text-muted: #6b7975;
  --sf-border: #e7e9e6;
  --sf-danger: #d1483f;
  --sf-radius: 14px;
  --sf-radius-sm: 9px;
  --sf-header-h: 60px;
  --sf-topnav-h: 44px;
  --sf-bottomnav-h: 62px;
  --sf-shadow: 0 2px 14px rgba(13, 77, 88, 0.08);
  --sf-shadow-lg: 0 10px 30px rgba(13, 77, 88, 0.14);
  --sf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sf-font-head: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shared page-width used by the header, utility bar, nav row, main
     content and footer — one variable instead of "max-width: 1200px"
     repeated in 5 places, so widening the site for large screens is a
     single change here instead of hunting down every occurrence.
     Grows in steps as the viewport grows (see the media queries further
     down) so laptops/wide desktops actually use their extra width
     instead of leaving big empty margins on both sides — phones and
     tablets are untouched (this only widens, container still shrinks to
     fit below its max-width like any normal max-width). */
  --sf-container: 1200px;
}
@media (min-width: 1400px) { :root { --sf-container: 1320px; } }
@media (min-width: 1600px) { :root { --sf-container: 1480px; } }
@media (min-width: 1900px) { :root { --sf-container: 1680px; } }

* { box-sizing: border-box; }
/* overflow-x:hidden here (2026-09-25 fix) — on mobile, any single
   element anywhere on the page that's even slightly wider than the
   viewport (a long unbroken word, a badge, a flex row that doesn't wrap
   quite right) used to make the WHOLE page horizontally scrollable
   instead of just that one element clipping or wrapping — which is
   exactly what showed up as "sidebar/product grid looks like the
   desktop layout, shifted off to the right, blank gaps while scrolling"
   on shop.php's mobile view: the page had silently grown wider than the
   screen and the visible viewport was just scrolled to a spot with
   nothing in it yet. This is a page-level safety net so no single
   overflowing element can ever do that again, regardless of which one
   it is on any given page. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--sf-font-body);
  background: var(--sf-bg);
  color: var(--sf-text);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--sf-bottomnav-h) + env(safe-area-inset-bottom));
  overflow-x: hidden;
  max-width: 100vw;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Headings, logo, prices and card titles read visually "heavier"/more
   premium in a distinct display face rather than the plain system font. */
.sf-logo-text, .sf-section-head h2, .sf-hero h1, .sf-hero-eyebrow,
.sf-banner-copy h2, .sf-banner-brand, .sf-card-title, .sf-card-price,
.sf-pd-price, h1, h2, h3, .sf-collection-head h3, .sf-footer-brand .sf-logo-text {
  font-family: var(--sf-font-head);
  letter-spacing: -0.01em;
}

/* ---------- Utility bar ---------- */
.sf-utility-bar { background: var(--sf-primary-dark); color: rgba(255,255,255,0.82); font-size: 12.5px; }
.sf-utility-inner {
  max-width: var(--sf-container); margin: 0 auto; padding: 7px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sf-utility-tagline { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-utility-phone { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.sf-utility-phone svg { width: 14px; height: 14px; }
.sf-utility-phone strong { color: var(--sf-secondary); }

/* ---------- Header ---------- */
.sf-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sf-primary);
  color: #fff;
  box-shadow: var(--sf-shadow);
}
.sf-header-inner {
  height: var(--sf-header-h);
  max-width: var(--sf-container);
  margin: 0 auto;
  padding: 0 28px; /* was 12px — more edge breathing room, tested by Ali on mobile 2026-09-25 */
  display: flex;
  align-items: center;
  gap: 10px;
}
.sf-icon-btn {
  background: none;
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.15s;
  position: relative;
}
.sf-icon-btn:active { background: rgba(255,255,255,0.15); }
.sf-icon-btn svg { width: 22px; height: 22px; }
.sf-menu-btn { display: none; }

.sf-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sf-logo-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--sf-secondary);
  color: var(--sf-primary-dark);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.sf-logo-text { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: #fff; }
/* Admin-uploaded logo (admin/settings.php) — replaces the mark+text
   pair above when one's been uploaded. Capped to the header's own
   height so a tall/square source image never blows out the header. */
.sf-logo-img { display: block; max-height: 38px; max-width: 180px; width: auto; height: auto; object-fit: contain; }

/* ---------- Search + category dropdown (combined bar) ---------- */
.sf-search-wrap {
  flex: 1;
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 10px;
  overflow: visible;
  /* Was 640px, then 980px — the yellow-arrow feedback (2026-09-25)
     showed real empty header space even at 980px on very wide screens,
     so the cap is removed outright. flex:1 on this wrapper already
     yields to the logo (flex-shrink:0) and icons (flex-shrink:0) on
     narrower widths, so it always fills exactly the remaining space
     between them, however wide or narrow that is. */
  max-width: none;
  margin-left: 14px;
  height: 42px;
  position: relative;
}
.sf-cat-dropdown { position: relative; flex-shrink: 0; }
.sf-cat-dropdown-btn {
  height: 100%; display: flex; align-items: center; gap: 6px;
  background: #eef4f0; border: none; border-radius: 10px 0 0 10px;
  padding: 0 12px; font-size: 13px; font-weight: 700; color: var(--sf-primary-dark);
  white-space: nowrap;
}
.sf-cat-dropdown-btn svg:first-child { width: 16px; height: 16px; }
.sf-cat-dropdown-chevron { width: 12px; height: 12px; transition: transform 0.15s; }
.sf-cat-dropdown-btn.open .sf-cat-dropdown-chevron { transform: rotate(180deg); }
.sf-cat-dropdown-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; max-height: 400px;
  overflow-y: auto; background: #fff; border-radius: var(--sf-radius-sm); box-shadow: var(--sf-shadow-lg);
  padding: 6px; z-index: 50; border: 1px solid var(--sf-border);
}
.sf-cat-dropdown-panel.open { display: block; }
.sf-cat-dropdown-panel a {
  display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--sf-text);
}
.sf-cat-dropdown-panel a:hover { background: var(--sf-bg); color: var(--sf-primary); }
.sf-cat-dropdown-panel a span { color: var(--sf-text-muted); font-weight: 600; }

.sf-search-form {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 4px 0 12px;
  height: 100%;
}
.sf-search-form input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--sf-text);
  font-size: 14px;
  height: 100%;
}
.sf-search-form input::placeholder { color: var(--sf-text-muted); }
.sf-search-form button {
  background: var(--sf-primary); border: none; color: #fff;
  width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sf-search-form button svg { width: 16px; height: 16px; }
.sf-search-form-mobile { display: none; padding: 0 12px 10px; margin: 0; max-width: none; height: 40px; background: #fff; border-radius: 10px; margin: 0 12px 10px; position: relative; }

/* ---------- Live search suggestions (instant, as-you-type) ---------- */
.sf-search-suggest {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border-radius: var(--sf-radius-sm); box-shadow: var(--sf-shadow-lg);
  border: 1px solid var(--sf-border); z-index: 55; max-height: 75vh; overflow-y: auto;
}
.sf-search-form-mobile .sf-search-suggest { left: -12px; right: -12px; width: calc(100% + 24px); }
.sf-search-suggest.open { display: block; }
.sf-search-suggestion {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--sf-border); transition: background 0.1s;
}
.sf-search-suggestion:last-of-type { border-bottom: none; }
.sf-search-suggestion:hover, .sf-search-suggestion.active { background: var(--sf-bg); }
.sf-search-suggestion-img {
  width: 42px; height: 42px; border-radius: 8px; overflow: hidden; background: #eef1f0;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #c3ccc9;
}
.sf-search-suggestion-img img { width: 100%; height: 100%; object-fit: cover; }
.sf-search-suggestion-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-search-suggestion-title {
  font-size: 13px; font-weight: 700; color: var(--sf-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-search-suggestion-meta { font-size: 11.5px; color: var(--sf-text-muted); }
.sf-search-suggest-viewall {
  display: block; text-align: center; padding: 11px; font-size: 13px; font-weight: 700;
  color: var(--sf-primary); background: var(--sf-bg);
}
.sf-search-suggest-viewall.active, .sf-search-suggest-viewall:hover { background: #e4ede8; }
.sf-search-suggest-empty { padding: 18px 14px; text-align: center; font-size: 13px; color: var(--sf-text-muted); }
.sf-search-suggest-loading { padding: 14px; text-align: center; font-size: 12.5px; color: var(--sf-text-muted); }

.sf-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.sf-how-it-works-btn {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 8px 16px; border: 1.5px solid var(--sf-primary-dark); border-radius: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.01em;
  background: var(--sf-secondary); color: var(--sf-primary-dark);
  text-decoration: none; transition: filter 0.15s, transform 0.1s;
}
.sf-how-it-works-btn:hover { filter: brightness(0.94); }
.sf-how-it-works-btn:active { transform: scale(0.97); }
@media (max-width: 700px) { .sf-how-it-works-btn { display: none; } }
.sf-search-toggle { display: none; }
.sf-icon-count {
  position: absolute; top: 0px; right: 0px;
  background: var(--sf-secondary); color: var(--sf-primary-dark);
  font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.sf-cart-btn { position: relative; }

/* Was a bare flex row with no wrapper — on a wide screen with only a
   handful of categories, the pills (left-aligned by flex default) never
   reached the row's own max-width, leaving a big block of unstyled dark
   background hanging off the right with nothing in it (Ali's "yahan
   space dalo" screenshot). The wrapper below centers the pill row when
   it's narrower than the header, so the row reads as a deliberately
   centered nav bar instead of a left-stuck row with dead space next to
   it — while still scrolling normally from the left, unaffected, once
   there are enough categories to actually overflow the header width. */
.sf-topnav-wrap {
  display: flex;
  justify-content: center;
  max-width: var(--sf-container);
  margin: 0 auto;
  padding: 0 12px 10px;
}
.sf-topnav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.sf-topnav::-webkit-scrollbar { display: none; }
.sf-topnav a {
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.18);
}
.sf-topnav a.active, .sf-topnav a:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: transparent; }

/* ---------- Drawer (mobile menu) ---------- */
.sf-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(8,20,22,0.45);
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.sf-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.sf-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 78%; max-width: 320px;
  background: #fff; z-index: 61; transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; box-shadow: var(--sf-shadow-lg);
}
.sf-drawer.open { transform: translateX(0); }
.sf-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; background: var(--sf-primary); color: #fff;
}
.sf-drawer-head .sf-icon-btn { color: #fff; }
.sf-drawer-nav { display: flex; flex-direction: column; padding: 8px; }
.sf-drawer-nav a {
  padding: 13px 12px; font-weight: 600; font-size: 15px;
  border-bottom: 1px solid var(--sf-border);
  display: flex; justify-content: space-between; align-items: center;
}
.sf-drawer-count { color: var(--sf-text-muted); font-weight: 500; font-size: 13px; }

/* ---------- Layout ---------- */
.sf-main { max-width: var(--sf-container); margin: 0 auto; padding: 0 14px 40px; min-height: 50vh; }

/* ---------- Hero / banner ---------- */
.sf-hero {
  margin: 16px 0 22px;
  border-radius: var(--sf-radius);
  background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-dark) 100%);
  color: #fff;
  padding: 34px 26px;
  position: relative;
  overflow: hidden;
}
.sf-hero::after {
  content: "";
  position: absolute; right: -60px; top: -60px; width: 240px; height: 240px;
  background: var(--sf-secondary); opacity: 0.16; border-radius: 50%;
}
.sf-hero::before {
  content: "";
  position: absolute; right: 40px; bottom: -80px; width: 160px; height: 160px;
  background: var(--sf-secondary); opacity: 0.12; border-radius: 50%;
}
.sf-hero-eyebrow {
  display: inline-block; background: var(--sf-secondary); color: var(--sf-primary-dark);
  font-weight: 800; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.sf-hero h1 { font-size: clamp(24px, 5vw, 38px); font-weight: 800; margin: 0 0 10px; letter-spacing: -0.02em; max-width: 520px; position: relative; }
.sf-hero p { margin: 0 0 20px; opacity: 0.88; font-size: 15px; max-width: 460px; position: relative; }
.sf-hero-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sf-secondary); color: var(--sf-primary-dark);
  font-weight: 800; font-size: 14.5px; padding: 12px 22px; border-radius: 999px;
  position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: transform 0.15s;
}
.sf-hero-btn:active { transform: scale(0.97); }

/* ---------- Trust row ---------- */
.sf-trust-header { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 32px 0 16px; }
.sf-trust-header-line { flex: 1; max-width: 70px; height: 1px; background: var(--sf-border); }
.sf-trust-header-pill {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--sf-font-head); font-weight: 700; font-size: 12.5px; color: var(--sf-primary-dark);
  background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: 999px; padding: 7px 16px;
}
.sf-trust-header-pill svg { width: 14px; height: 14px; color: var(--sf-secondary); }
/* One continuous horizontally-scrollable row — same scroll pattern as
   .sf-cat-row (category chips) elsewhere on this page. Went through a
   wrapping-grid version first (2026-09-25) but Ali asked for all 16
   badges to stay on one scrollable line instead. Each badge is its own
   small bordered card, fixed width so the row scrolls smoothly. */
.sf-trust-row {
  display: flex; gap: 10px; overflow-x: auto; margin-bottom: 8px;
  padding: 2px 2px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sf-trust-row::-webkit-scrollbar { display: none; }
.sf-trust-item {
  flex: 0 0 auto; width: 200px; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--sf-card); border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-sm); box-shadow: var(--sf-shadow);
}
@media (max-width: 480px) { .sf-trust-item { width: 175px; } }
.sf-trust-icon-circle {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: var(--sf-shadow);
}
/* Was 23px in a 46px circle (exactly half) — with several of the icon
   glyphs not perfectly filling their own 24x24 box (see the 'savings'
   fix above), a small icon floating in a lot of empty white circle read
   as "not fitting" per Ali's feedback. Bumped to a fuller ratio so the
   glyph visibly anchors inside the circle instead of looking lost in it. */
.sf-trust-icon-circle svg { display: block; width: 46px; height: 37px; padding-top: 20%; }
.sf-trust-tone-green svg { color: #1f9d55; }
.sf-trust-tone-orange svg { color: #e2792e; }
.sf-trust-tone-gray svg { color: #6b7975; }
.sf-trust-tone-gold svg { color: #b8860b; }
.sf-trust-tone-teal svg { color: var(--sf-primary); }
.sf-trust-item strong { display: block; font-family: var(--sf-font-head); font-size: 12.5px; font-weight: 800; }
.sf-trust-item span { display: block; font-size: 11px; color: var(--sf-text-muted); line-height: 1.35; margin-top: 2px; }

/* ---------- Section headers ---------- */
.sf-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 30px 0 14px;
}
.sf-section-head h2 { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.sf-section-head a { font-size: 13.5px; font-weight: 700; color: var(--sf-primary); }

/* ---------- Category chips (shop.php scroll row) ---------- */
.sf-cat-row {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none;
}
.sf-cat-row::-webkit-scrollbar { display: none; }
.sf-cat-chip {
  flex-shrink: 0; background: var(--sf-card); border: 1px solid var(--sf-border);
  border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 700;
  color: var(--sf-text); box-shadow: var(--sf-shadow); white-space: nowrap;
}
.sf-cat-chip:active { background: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-cat-chip span { opacity: 0.65; font-weight: 600; font-size: 12px; margin-left: 2px; }

/* ---------- Shop category toolbar (arrows + chips + sort, one row) ---------- */
.sf-cat-toolbar { display: flex; align-items: center; gap: 8px; }
.sf-cat-toolbar .sf-cat-row { flex: 1; min-width: 0; padding: 4px 2px; margin: 0; }
/* Homepage "Why Shop With Orbixis" trust row — same arrows+row toolbar
   pattern as shop.php's category toolbar above, wrapped around the
   trust badges instead of category chips (2026-09-25 correction: the
   arrow-buttons + "show ~7" feedback was about this row, not the
   category-circles row below it). */
.sf-trust-toolbar { display: flex; align-items: center; gap: 8px; }
.sf-trust-toolbar .sf-trust-row { flex: 1; min-width: 0; margin-bottom: 0; }
.sf-cat-scroll-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--sf-border); background: var(--sf-card);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--sf-text);
}
.sf-cat-scroll-btn svg { width: 16px; height: 16px; }
.sf-cat-scroll-btn:hover { border-color: var(--sf-primary); color: var(--sf-primary); }
.sf-cat-toolbar-sort { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sf-cat-toolbar-sort label { font-size: 13px; color: var(--sf-text-muted); font-weight: 600; white-space: nowrap; }
/* Mobile fix (2026-09-25): the arrow buttons crowded/overlapped the
   first chip or trust card on narrow phone widths — there's no room
   for a 30px circle plus its gap next to the row on a 375px screen.
   Below 640px, native touch-swipe already scrolls these rows fine (same
   as before the arrows existed), so the buttons just hide here instead
   of fighting for space; the row itself keeps full width. */
@media (max-width: 640px) {
  .sf-cat-scroll-btn { display: none; }
}
@media (max-width: 780px) {
  .sf-cat-toolbar { flex-wrap: wrap; }
  .sf-cat-toolbar-sort { width: 100%; order: 3; justify-content: flex-end; margin-top: 8px; }
}

/* ---------- Category circles (homepage) — horizontal scroll, WoodMart-style ---------- */
.sf-cat-card-row {
  display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 14px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sf-cat-card-row::-webkit-scrollbar { display: none; }
.sf-cat-card {
  flex: 0 0 auto; width: 84px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sf-cat-card-icon {
  width: 76px; height: 76px; border-radius: 50%; background: var(--sf-card);
  border: 1px solid var(--sf-border); color: var(--sf-primary); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sf-shadow); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.sf-cat-card-icon svg { width: 26px; height: 26px; }
.sf-cat-card-icon img { width: 100%; height: 100%; object-fit: cover; }
.sf-cat-card:active .sf-cat-card-icon { transform: scale(0.94); }
@media (hover: hover) { .sf-cat-card:hover .sf-cat-card-icon { border-color: var(--sf-primary); box-shadow: var(--sf-shadow-lg); transform: translateY(-2px); } }
.sf-cat-card-label { font-family: var(--sf-font-head); font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.sf-cat-card-count { font-size: 10.5px; color: var(--sf-text-muted); font-weight: 600; }
.sf-cat-card-viewall .sf-cat-card-icon { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff; }

/* ---------- Shop layout (sidebar + grid) ---------- */
.sf-shop-layout { display: flex; align-items: flex-start; gap: 24px; margin-top: 14px; }
.sf-shop-main { flex: 1; min-width: 0; }

.sf-filter-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--sf-card);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  padding: 4px 14px 14px;
}
.sf-filter-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 6px; font-family: var(--sf-font-head); font-weight: 800; font-size: 14px; }
.sf-filter-clear { font-size: 12px; font-weight: 600; color: var(--sf-primary); text-decoration: none; }
.sf-filter-clear:hover { text-decoration: underline; }

.sf-filter-group { border-top: 1px solid var(--sf-border); padding: 10px 0; }
.sf-filter-group summary { font-weight: 700; font-size: 13px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.sf-filter-group summary::-webkit-details-marker { display: none; }
.sf-filter-group summary::after { content: '\2212'; font-size: 14px; color: var(--sf-text-muted); }
.sf-filter-group:not([open]) summary::after { content: '+'; }
.sf-filter-options { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 220px; overflow-y: auto; }

.sf-filter-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.sf-filter-check input { accent-color: var(--sf-primary); width: 15px; height: 15px; flex-shrink: 0; }
.sf-filter-check span { flex: 1; }
.sf-filter-check small { color: var(--sf-text-muted); font-size: 11px; }

/* Mobile "Filter" toggle button (shop.php) — hidden on desktop, where
   the sidebar is always visible in its own column. */
.sf-filter-toggle-btn {
  display: none; align-items: center; gap: 8px; width: 100%;
  background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm);
  padding: 11px 14px; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--sf-text);
  box-shadow: var(--sf-shadow);
}
.sf-filter-toggle-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 780px) {
  .sf-filter-toggle-btn { display: flex; }
  /* 2026-09-25 fix — likely the REAL root cause of the mobile shop-grid
     blowup, found after chasing it inside the card itself for a while:
     .sf-shop-layout has `align-items: flex-start` (fine on desktop, where
     it's row-direction and align-items only affects height). But here we
     switch it to flex-direction:column for mobile — and in a COLUMN flex
     container, align-items controls the CROSS axis, which is now WIDTH.
     So .sf-shop-main (holding the whole product grid) was sizing itself
     to its own content's preferred width instead of stretching to the
     full available width, which is exactly the kind of unconstrained
     sizing that let the grid/cards balloon out on mobile. Homepage's
     grid sections never sit inside this two-level flex layout, which is
     why they always rendered fine while shop.php's didn't. */
  .sf-shop-layout { flex-direction: column; align-items: stretch; }
  /* Collapsed by default (2026-09-25 fix) — this list was previously
     always open AND uncapped on mobile (see the removed max-height:none
     override below), so the full category/condition checkbox list ran
     the length of several screens before the actual product grid ever
     appeared. Now it only shows when the Filter button above is tapped,
     and .sf-filter-options below keeps its 220px internal scroll cap
     (same as desktop) even when open, so it can never do that again. */
  .sf-filter-sidebar { width: 100%; display: none; margin-top: 10px; }
  .sf-filter-sidebar.open { display: block; }
}

/* ---------- Product grid ---------- */
/* 2026-09-25: switched from `display:grid; grid-template-columns:repeat(N,1fr)`
   to flexbox + an explicit calc() width per card. Confirmed live (Samsung
   Galaxy A36, real device — not an emulator) that the grid `1fr` tracks were
   computing an absurd ~40000px+ width no matter what caused it (tried:
   min-width:0, removing aspect-ratio, align-items:stretch — none of it
   held). Flexbox with flex-grow:0 and flex-shrink:0 and a fixed calc()
   basis makes each card's width a hard, non-negotiable number that content
   (long titles, images, anything) can never influence, however that
   specific device/browser is misbehaving with `fr` units. */
.sf-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sf-grid > .sf-card {
  flex: 0 0 calc((100% - 12px) / 2);
  max-width: calc((100% - 12px) / 2);
}
@media (min-width: 620px) {
  .sf-grid { gap: 16px; }
  .sf-grid > .sf-card { flex-basis: calc((100% - 32px) / 3); max-width: calc((100% - 32px) / 3); }
}
@media (min-width: 900px) {
  .sf-grid > .sf-card { flex-basis: calc((100% - 48px) / 4); max-width: calc((100% - 48px) / 4); }
}
/* Homepage sections (Best Deals, New Arrivals) go straight to 6
   columns on wide screens — the shop page's own 5-column rule below has
   higher specificity (.sf-shop-main .sf-grid) so it still wins there
   regardless of this. */
@media (min-width: 1150px) {
  .sf-grid { gap: 18px; }
  .sf-grid > .sf-card { flex-basis: calc((100% - 90px) / 6); max-width: calc((100% - 90px) / 6); }
  .sf-shop-main .sf-grid > .sf-card { flex-basis: calc((100% - 72px) / 5); max-width: calc((100% - 72px) / 5); }
}

.sf-card {
  background: var(--sf-card);
  border-radius: var(--sf-radius);
  overflow: hidden;
  box-shadow: var(--sf-shadow);
  display: flex; flex-direction: column;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: 1px solid var(--sf-border);
  min-width: 0;
}
.sf-card:active { transform: scale(0.98); }
@media (hover: hover) { .sf-card:hover { box-shadow: var(--sf-shadow-lg); transform: translateY(-4px); } }
.sf-card-imglink { display: block; }

/* 2026-09-25 fix: was `aspect-ratio: 1/1` — on some mobile browsers/WebViews,
   an aspect-ratio box nested inside this flex-column card, which is itself
   a CSS Grid `1fr` item, hits a known circular-sizing bug: width and height
   keep resolving off each other and the browser lands on some huge "square"
   number instead of the real square (confirmed live via devtools: the card
   computed at ~40643 x 40773px — nearly equal, i.e. exactly the aspect-ratio
   box's shape — which then blew the whole grid column out to ~81302px wide).
   Swapped to the classic padding-top percentage hack, which gives the same
   1:1 square visually but has no such circular dependency — width alone
   determines height, nothing resolves off content size. */
.sf-card-img { width: 100%; padding-top: 100%; background: #f8faf9; position: relative; overflow: hidden; }
.sf-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease-in-out; }
@media (hover: hover) { .sf-card:hover .sf-card-img img { transform: scale(1.05); } }
.sf-card-img-ph { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #c3ccc9; }
.sf-card-img-ph svg { width: 34%; height: 34%; }

/* Hover photo scroller (2026-09-25) — several photos stacked exactly on
   top of each other; JS (initCardHoverGalleries in app.js) toggles which
   one has .active while the card is hovered. Crossfades via opacity
   rather than swapping src, so there's no flicker/reflow between frames. */
.sf-card-img-stack { position: absolute; inset: 0; width: 100%; height: 100%; }
.sf-card-img-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; }
.sf-card-img-frame.active { opacity: 1; }
/* Small dot row, bottom-center, so it's visually obvious a card has
   more than one photo even before hovering — purely decorative (no
   click/nav target), the frame cycling itself is hover/timer-driven. */
.sf-card-img-stack::after {
  content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.85);
  box-shadow: 8px 0 0 rgba(255,255,255,0.5), -8px 0 0 rgba(255,255,255,0.5), 16px 0 0 rgba(255,255,255,0.3), -16px 0 0 rgba(255,255,255,0.3);
  opacity: 0; transition: opacity 0.2s ease; z-index: 2; pointer-events: none;
}
@media (hover: hover) { .sf-card:hover .sf-card-img-stack::after { opacity: 1; } }

.sf-badge-stack { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.sf-badge-stack-pd { position: absolute; top: 12px; left: 12px; }
.sf-badge {
  font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.02em; width: fit-content;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.sf-badge-discount { background: var(--sf-danger); color: #fff; }
.sf-badge-hot { background: var(--sf-secondary); color: var(--sf-primary-dark); }
.sf-badge-low { background: var(--sf-primary-dark); color: #fff; }

/* "Only X left!" — bottom-right of the image, white pill with a red
   border/text (urgency without a solid-red block dominating the photo). */
.sf-only-left-badge {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  background: #fff; color: var(--sf-danger); border: 1px solid var(--sf-danger);
  font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.sf-only-left-badge.sf-qty-badge { color: var(--sf-primary-dark); border-color: var(--sf-primary-dark); }

/* Wishlist heart — card version: floating circle top-right of image */
.sf-wish-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.95);
  border: none; display: flex; align-items: center; justify-content: center;
  color: var(--sf-text-muted); box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.sf-wish-btn svg { width: 17px; height: 17px; }
@media (hover: hover) { .sf-wish-btn:hover { transform: scale(1.1); background: #ffffff; color: var(--sf-danger); } }
.sf-wish-btn.active { color: var(--sf-danger); }
.sf-wish-btn.active svg { fill: var(--sf-danger); }
.sf-wish-btn.sf-wish-pop { transform: scale(1.25); }
.sf-wish-btn-pd {
  position: static; width: auto; height: auto; border-radius: 999px; background: var(--sf-bg);
  padding: 7px 14px; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--sf-text);
  box-shadow: none; border: 1px solid var(--sf-border);
}
.sf-wish-btn-pd.active { color: var(--sf-danger); border-color: var(--sf-danger); background: #fdecea; }
.sf-pd-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }

.sf-card-body {
  padding: 12px 14px 10px; display: flex; flex-direction: column;
  /* 2026-09-25 fix (the REAL root cause of the mobile grid blowup, found
     after the min-width:0 and aspect-ratio fixes alone didn't resolve it):
     this was `align-items: flex-start`, which sizes each child (title,
     category, price) to its OWN intrinsic content width instead of
     stretching to this container's actual (definite) width. .sf-card-title
     below is a `display:-webkit-box` line-clamp element — without a
     definite width forced onto it, some mobile browsers (confirmed live on
     a Samsung Galaxy A36) compute its UNWRAPPED, full-title width as a
     sizing contribution, which then inflates the whole 1fr grid column.
     `stretch` (the flex default, restored explicitly here) forces title/
     category/price to the card's real width so long titles wrap/clamp
     instead of reporting their full-length width upward. */
  align-items: stretch;
  gap: 3px; flex: 1; text-align: left;
  min-width: 0;
}
.sf-card-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sf-text-muted); }
.sf-card-qty { font-size: 11px; font-weight: 700; color: var(--sf-primary-dark); margin-top: 1px; }
.sf-card-title {
  font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--sf-primary-dark);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 1px;
  width: 100%; min-width: 0; max-width: 100%;
  overflow-wrap: break-word; word-break: break-word;
}
.sf-card-price { font-size: 15.5px; font-weight: 800; color: var(--sf-primary); margin-top: 5px; }
.sf-card-price small { font-size: 11px; font-weight: 600; color: var(--sf-text-muted); }
.sf-card-price-row { margin-top: 6px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sf-card-price-sale { font-size: 16px; font-weight: 800; color: var(--sf-text); margin-top: 0; }
/* Highlighter-style % off, shown inline next to the price rather than
   as a corner ribbon on the photo. */
.sf-card-discount-pill {
  font-size: 12.5px; font-weight: 800; color: var(--sf-primary-dark);
  background: var(--sf-secondary); padding: 1px 6px; border-radius: 4px;
}
.sf-card-compare-at { font-size: 11px; color: var(--sf-text-muted); margin-top: 1px; }
.sf-card-price-strike { text-decoration: line-through; }

/* Full-width "Add to Cart" — outlined, not filled, per the reference design */
.sf-card-add-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; border: none; border-top: 1px solid var(--sf-border);
  background: #fff; color: var(--sf-primary);
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em; padding: 12px 12px;
  margin-top: auto; border-radius: 0 0 calc(var(--sf-radius) - 1px) calc(var(--sf-radius) - 1px);
  transition: background 0.2s ease, transform 0.1s ease;
}
.sf-card-add-btn:hover { background: var(--sf-bg); }
.sf-card-add-btn:active { background: var(--sf-border); transform: scale(0.98); }

/* ---------- Empty / loading states ---------- */
.sf-empty { text-align: center; padding: 60px 20px; color: var(--sf-text-muted); grid-column: 1 / -1; }
.sf-empty svg { width: 48px; height: 48px; opacity: 0.35; margin-bottom: 10px; }

/* ---------- Shop toolbar ---------- */
.sf-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 16px 0 14px; flex-wrap: wrap;
}
.sf-toolbar-count { font-size: 13px; color: var(--sf-text-muted); font-weight: 600; }
.sf-select {
  border: 1px solid var(--sf-border); background: var(--sf-card); border-radius: var(--sf-radius-sm);
  padding: 8px 12px; font-size: 13.5px; font-weight: 600; color: var(--sf-text);
}

.sf-load-more-wrap { text-align: center; margin-top: 26px; }
.sf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sf-primary); color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 26px; border-radius: 999px; border: none; box-shadow: var(--sf-shadow);
}
.sf-btn:active { transform: scale(0.97); }
.sf-btn[disabled] { opacity: 0.55; }
.sf-btn-block { width: 100%; justify-content: center; }

/* ---------- Product detail ---------- */
.sf-breadcrumb { font-size: 12.5px; color: var(--sf-text-muted); margin: 16px 0 4px; }
.sf-breadcrumb a { font-weight: 600; color: var(--sf-primary); }
.sf-pd {
  display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 10px;
}
@media (min-width: 780px) { .sf-pd { grid-template-columns: 1fr 1fr; gap: 36px; } }

.sf-gallery-main {
  aspect-ratio: 1/1; border-radius: var(--sf-radius); overflow: hidden; background: #eef1f0;
  box-shadow: var(--sf-shadow); position: relative;
}
.sf-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.sf-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.sf-gallery-thumbs img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 9px; flex-shrink: 0;
  border: 2px solid transparent; opacity: 0.7;
}
.sf-gallery-thumbs img.active { border-color: var(--sf-primary); opacity: 1; }

.sf-pd-cat { font-size: 12px; font-weight: 700; color: var(--sf-primary); text-transform: uppercase; letter-spacing: 0.03em; }
.sf-pd-title { font-size: 24px; font-weight: 800; margin: 6px 0 4px; letter-spacing: -0.01em; }
.sf-pd-meta { font-size: 13.5px; color: var(--sf-text-muted); margin-bottom: 14px; }

.sf-pd-price-block {
  background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm);
  padding: 14px 16px; margin: 6px 0 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
}
.sf-pd-price { font-size: 28px; font-weight: 800; color: var(--sf-primary); }
.sf-pd-price small { font-size: 14px; font-weight: 600; color: var(--sf-text-muted); }
.sf-pd-price-strike { font-size: 14px; color: var(--sf-text-muted); text-decoration: line-through; }
.sf-pd-save-badge { background: #fdecea; color: var(--sf-danger); font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }

.sf-pd-section-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sf-text); margin-bottom: 10px; }
.sf-cond-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.sf-pd-no-cond { font-size: 13px; color: var(--sf-text-muted); background: #f6f7f8; border: 1px solid var(--sf-border); border-radius: 8px; padding: 12px 14px; margin: 0; }
.sf-cond-opt {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius-sm);
  padding: 11px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.sf-cond-opt.active { border-color: var(--sf-primary); background: #eef6f4; }
.sf-cond-opt-label { font-weight: 700; font-size: 14px; }
.sf-cond-opt-qty { font-size: 12px; color: var(--sf-text-muted); font-weight: 600; }
.sf-cond-opt-price { font-weight: 800; color: var(--sf-primary); font-size: 15px; }

.sf-pd-notes { font-size: 14px; line-height: 1.6; color: var(--sf-text); background: var(--sf-card); border-radius: var(--sf-radius-sm); padding: 14px 16px; margin-bottom: 20px; border: 1px solid var(--sf-border); }
.sf-pd-notice { display: flex; gap: 10px; align-items: flex-start; background: #fff8e8; border: 1px solid #f0dfa8; border-radius: var(--sf-radius-sm); padding: 12px 14px; font-size: 13px; color: #6b5a1e; margin-top: 14px; }
.sf-pd-notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* ---------- Footer ---------- */
/* Was a single dark block with everything squeezed left and nothing to
   balance the width on wide screens ("footer dekh kitne beqar ha" — Ali).
   Redone as a proper multi-column footer: a thin brand-color top border
   for definition, a fuller brand column (description + social icons),
   4 real columns of links, and a distinct bottom bar (copyright + a
   payment-methods row) separated by its own divider — the shape most
   real storefronts use, instead of one undifferentiated block. */
.sf-footer { background: var(--sf-primary-dark); color: rgba(255,255,255,0.85); margin-top: 40px; border-top: 3px solid var(--sf-secondary); }
.sf-footer-inner { max-width: var(--sf-container); margin: 0 auto; padding: 40px 20px 20px; }
.sf-footer-top { display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 18px; text-align: center; }
@media (min-width: 700px) { .sf-footer-top { grid-template-columns: 1.5fr repeat(3, 1fr); text-align: left; } }
.sf-footer-col { display: flex; flex-direction: column; gap: 9px; }
.sf-footer-col h4 { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sf-secondary); margin: 0 0 6px; }
.sf-footer-col a, .sf-footer-col span { font-size: 13.5px; color: rgba(255,255,255,0.78); }
.sf-footer-col a { transition: color 0.15s ease; }
.sf-footer-col a:hover { color: #fff; }
.sf-footer-brand-col { gap: 10px; }
.sf-footer-brand { display: flex; align-items: center; gap: 8px; justify-content: center; }
@media (min-width: 700px) { .sf-footer-brand { justify-content: flex-start; } }
.sf-footer-tagline { font-weight: 600; margin: 2px 0 0; opacity: 0.9; font-size: 13.5px; }
.sf-footer-desc { font-size: 13px; line-height: 1.55; opacity: 0.65; margin: 0; max-width: 320px; }
@media (max-width: 699px) { .sf-footer-desc { margin: 0 auto; } }
.sf-footer-social { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
@media (min-width: 700px) { .sf-footer-social { justify-content: flex-start; } }
.sf-footer-social a {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.85);
  transition: background 0.15s ease, color 0.15s ease;
}
.sf-footer-social a:hover { background: var(--sf-secondary); color: var(--sf-primary-dark); border-color: transparent; }
.sf-footer-social svg { width: 16px; height: 16px; }
.sf-footer-note { font-size: 12.5px; opacity: 0.6; max-width: 420px; margin: 0 auto 14px; text-align: center; }
.sf-footer-bottom {
  display: flex; flex-direction: column-reverse; gap: 12px; align-items: center;
  justify-content: space-between; padding-top: 6px;
}
@media (min-width: 700px) { .sf-footer-bottom { flex-direction: row; } }
.sf-footer-copy { font-size: 12px; opacity: 0.55; margin: 0; text-align: center; }
.sf-footer-payments { display: flex; gap: 8px; }
.sf-footer-payments span {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 5px; padding: 4px 8px;
}

/* ---------- Bottom app nav (mobile only) ---------- */
.sf-bottomnav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: #fff; border-top: 1px solid var(--sf-border);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.sf-bottomnav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; color: var(--sf-text-muted);
  padding: 4px 10px; border-radius: 10px; min-width: 60px; position: relative;
}
.sf-bottomnav a svg { width: 22px; height: 22px; }
.sf-bottomnav a.active { color: var(--sf-primary); }
.sf-icon-count-bottomnav { top: -2px; right: 6px; }

/* ---------- Responsive switches ---------- */
@media (max-width: 900px) {
  .sf-topnav-wrap { display: none; }
  .sf-menu-btn { display: flex; }
  .sf-search-wrap { display: none; }
  .sf-search-toggle { display: flex; }
  .sf-bottomnav { display: flex; }
  .sf-utility-tagline { font-size: 11.5px; }
  body { padding-bottom: calc(var(--sf-bottomnav-h) + env(safe-area-inset-bottom)); }
  /* With the search bar hidden, the logo sits right next to the
     search/wishlist/cart icons with only the header's own 10px gap —
     fine on most phones, but tight on the narrowest ones. Push the
     icon group to the far right explicitly instead of relying on
     leftover space, so there's always breathing room either way. */
  .sf-header-actions { margin-left: auto; }
}
.sf-search-form-mobile.open { display: flex; }

@media (max-width: 560px) {
  .sf-utility-phone { display: none; }
}

@media (max-width: 480px) {
  .sf-hero { padding: 26px 18px; }
}

/* ---------- Banner carousel (admin/banners.php) ---------- */
.sf-banner-carousel {
  position: relative;
  border-radius: var(--sf-radius);
  overflow: hidden;
  background: #f0f2f3;
  margin-bottom: 4px;
  margin-top: 7px !important;
}
.sf-banner-track { position: relative; width: 100%; aspect-ratio: 16 / 6; min-height: 160px; }
.sf-banner-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease;
  display: flex; align-items: center;
}
.sf-banner-slide.active { opacity: 1; visibility: visible; }
.sf-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Sizing below matches what Ali tested live via devtools (2026-09-25)
   and asked to keep permanently — noticeably roomier than the original
   compact values, closer to the reference screenshot's "Special Deals /
   Everything Your Family Needs" banner. */
.sf-banner-copy {
  position: relative; z-index: 1;
  padding: 89px 120px;
  max-width: 95%;
  background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.75) 70%, rgba(255,255,255,0) 100%);
}
.sf-banner-brand { font-weight: 800; font-size: 20px; color: var(--sf-primary); margin-bottom: 6px; }
.sf-banner-copy h2 { font-size: clamp(34px, 3vw, 36px); font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; line-height: 1.2; }
.sf-banner-copy p { font-size: 18.5px; color: var(--sf-text-muted); margin: 0 0 28px; max-width: 529px; }
.sf-banner-copy .sf-hero-btn { position: static; display: inline-flex; padding: 14px 26px; font-size: 15.5px; }
.sf-banner-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.85); color: var(--sf-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 2; box-shadow: var(--sf-shadow);
}
.sf-banner-arrow svg { width: 18px; height: 18px; }
.sf-banner-arrow-prev { left: 10px; }
.sf-banner-arrow-next { right: 10px; }
.sf-banner-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.sf-banner-dot { width: 7px; height: 7px; border-radius: 50%; border: none; background: rgba(255,255,255,0.6); cursor: pointer; padding: 0; }
.sf-banner-dot.active { background: #fff; width: 18px; border-radius: 4px; }
@media (max-width: 620px) {
  .sf-banner-copy { max-width: 78%; background: linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.85) 85%, rgba(255,255,255,0.3) 100%); padding: 14px 16px; }
  .sf-banner-copy p { display: none; }
  /* Mobile banner text sizing Ali tested live via devtools (2026-09-25)
     — kept permanently here, scoped to this same mobile breakpoint
     (desktop keeps the larger values set earlier this session). */
  .sf-banner-brand { font-size: 15px; margin-bottom: 3px; }
  .sf-banner-copy h2 { font-size: clamp(25px, 3vw, 37px); margin: 0 0 5px; line-height: 1.1; }
  .sf-banner-copy .sf-hero-btn { padding: 10px 14px; font-size: 11.5px; }
}

/* ---------- Curated collections (admin/collections.php) ---------- */
.sf-collections-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 22px 0;
}
@media (min-width: 860px) { .sf-collections-row { grid-template-columns: repeat(2, 1fr); } }
.sf-collection-block {
  background: var(--sf-card);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  padding: 14px 16px 18px;
  box-shadow: var(--sf-shadow);
}
.sf-collection-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sf-collection-head h3 { font-size: 14.5px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.sf-collection-head a { font-size: 12px; font-weight: 700; color: var(--sf-primary); }
/* Was a fixed 4-column grid — a collection with only 1 or 2 tiles in it
   (very common: Ali's been creating one collection per category with a
   single tile) left 2-3 grid columns sitting empty next to the picture,
   which is exactly the "ak side py picture aur baqi empty" complaint.
   auto-fit sizes the columns to however many tiles actually exist (up
   to 4 per row, same as before once there ARE 4+), so a 1-tile
   collection's card is no longer half dead space.
   The 1fr tracks + a flat max-width:420px (below, now removed) caused a
   second, related complaint: a 4-tile collection sitting in the wider of
   the two grid columns had its tiles stop at 420px but the white CARD
   kept going to its own (wider) edge, leaving an empty rectangle of card
   background to the right — exactly the gap circled in the "ye space
   khali q ha" screenshot. width: fit-content makes the grid box itself
   only as wide as its actual tracks (no stretching to fill the card),
   and a fixed max track size (110px, was open-ended 1fr) stops a
   low-count collection's tiles from ballooning to fill the card instead. */
.sf-collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 110px)); gap: 10px; width: fit-content; max-width: 100%; }
.sf-collection-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--sf-text); }
.sf-collection-tile-img {
  width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: #f0f2f3; display: flex; align-items: center; justify-content: center;
  color: var(--sf-text-muted);
}
.sf-collection-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.sf-collection-tile-img svg { width: 22px; height: 22px; }
.sf-collection-tile-label { font-size: 11px; font-weight: 700; line-height: 1.25; }
@media (max-width: 460px) { .sf-collection-grid { grid-template-columns: repeat(3, 1fr); width: 100%; } }

/* ---------- Testimonials (admin/testimonials.php) ---------- */
.sf-testi-section { margin: 40px 0 24px; text-align: center; }
.sf-testi-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-primary); margin-bottom: 8px; }
.sf-testi-heading { font-size: 26px; margin: 0 0 24px; }
/* Continuous auto-scroll (marquee) — the track holds the card list
   rendered TWICE back to back (see index.php), then animates left
   forever; because the two copies are identical, the loop point is
   invisible. Paused on hover so a visitor can actually read a card
   without it sliding out from under the cursor. */
.sf-testi-scroll { overflow: hidden; text-align: left; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.sf-testi-track { display: flex; gap: 16px; width: max-content; animation: sfTestiScroll 45s linear infinite; }
.sf-testi-scroll:hover .sf-testi-track { animation-play-state: paused; }
@keyframes sfTestiScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sf-testi-card { background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 20px; box-shadow: var(--sf-shadow); display: flex; flex-direction: column; gap: 12px; width: 280px; flex-shrink: 0; }
.sf-testi-card-featured { background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-dark) 100%); border-color: transparent; color: #fff; }
.sf-testi-stars { display: flex; gap: 2px; }
.sf-testi-stars svg { width: 16px; height: 16px; }
.sf-testi-star-filled { color: #f5b942; }
.sf-testi-star-empty { color: rgba(107, 121, 117, 0.35); }
.sf-testi-card-featured .sf-testi-star-empty { color: rgba(255, 255, 255, 0.35); }
.sf-testi-text { font-size: 14px; line-height: 1.55; margin: 0; flex: 1; }
.sf-testi-person { display: flex; align-items: center; gap: 10px; }
.sf-testi-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sf-testi-avatar-initial { display: flex; align-items: center; justify-content: center; background: var(--sf-secondary); color: var(--sf-primary-dark); font-weight: 800; font-size: 14px; }
.sf-testi-card-featured .sf-testi-avatar-initial { background: rgba(255, 255, 255, 0.18); color: #fff; }
.sf-testi-name { font-size: 13px; font-weight: 700; }
.sf-testi-meta { font-size: 12px; color: var(--sf-text-muted); }
.sf-testi-card-featured .sf-testi-meta { color: rgba(255, 255, 255, 0.75); }

/* ---------- Best Sellers row (admin/best_sellers.php) ---------- */
.sf-bestseller-wrap { position: relative; }
.sf-bestseller-row {
  display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 14px; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sf-bestseller-row::-webkit-scrollbar { display: none; }
.sf-bestseller-item { flex: 0 0 210px; position: relative; }
.sf-bestseller-item .sf-card { height: 100%; }
/* Circular pink "Best Seller" badge, top-left, overlapping the image —
   matches the reference design Ali asked to match. */
.sf-bestseller-ribbon {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fbd5e6; color: #9b3865;
  font-size: 10px; font-weight: 800; line-height: 1.15; text-align: center;
  display: flex; align-items: center; justify-content: center; padding: 4px;
  box-shadow: var(--sf-shadow);
}
.sf-bestseller-arrow {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sf-border);
  background: #fff; color: var(--sf-text); display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; box-shadow: var(--sf-shadow);
}
.sf-bestseller-arrow svg { width: 16px; height: 16px; }
.sf-bestseller-arrow-prev { left: -6px; }
/* Mobile fix (2026-09-25) — the 52px ribbon circle + 34px wishlist
   heart both sitting on a ~175-210px-wide card read as cramped/heavy on
   small phones; scale both down a bit and tighten the item width so a
   little more of the next card peeks in, same carousel behavior, just
   less crowded per card. */
@media (max-width: 480px) {
  .sf-bestseller-item { flex-basis: 175px; }
  .sf-bestseller-ribbon { width: 42px; height: 42px; font-size: 9px; top: 6px; left: 6px; }
  .sf-wish-btn { width: 28px; height: 28px; top: 8px; right: 8px; }
  .sf-wish-btn svg { width: 14px; height: 14px; }
}
.sf-bestseller-arrow-next { right: -6px; }
.sf-bestseller-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.sf-bestseller-dots .sf-banner-dot { background: var(--sf-border); }
.sf-bestseller-dots .sf-banner-dot.active { background: var(--sf-primary); width: 18px; border-radius: 4px; }
@media (max-width: 640px) {
  .sf-bestseller-arrow { display: none; } /* touch-scroll is enough on mobile; dots still show */
}

/* ---------- Product detail: buy box extras (qty stepper, tabs, trust mini-row) ---------- */
.sf-pd-sku { font-size: 12px; color: var(--sf-text-muted); font-weight: 600; }
.sf-pd-trust-mini {
  display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
  background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm);
  padding: 12px 14px;
}
.sf-pd-trust-mini > div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--sf-text); }
.sf-pd-trust-mini svg { width: 17px; height: 17px; color: var(--sf-primary); flex-shrink: 0; }

.sf-pd-section-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sf-pd-section-label-row .sf-pd-section-label { margin-bottom: 0; }
.sf-cond-guide-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  background: none; border: 1.5px solid var(--sf-primary); padding: 0;
  font-size: 12px; font-weight: 800; line-height: 1;
  color: var(--sf-primary); transition: background 0.15s, color 0.15s;
}
.sf-cond-guide-link:hover { background: var(--sf-primary); color: #fff; }

.sf-pd-qty-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sf-qty-stepper {
  display: inline-flex; align-items: center; border: 1.5px solid var(--sf-border);
  border-radius: 999px; overflow: hidden;
}
.sf-qty-btn {
  width: 34px; height: 34px; border: none; background: #fff; color: var(--sf-primary);
  font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.sf-qty-btn:hover { background: var(--sf-bg); }
.sf-qty-val { min-width: 34px; text-align: center; font-weight: 700; font-size: 14px; }

.sf-pd-buy-actions { display: flex; flex-direction: column; gap: 10px; }
.sf-btn-outline {
  background: #fff; color: var(--sf-primary); border: 1.5px solid var(--sf-primary); box-shadow: none;
}

.sf-pd-tabs { margin-top: 26px; }
.sf-pd-tabs-nav { display: flex; gap: 4px; border-bottom: 1.5px solid var(--sf-border); margin-bottom: 16px; overflow-x: auto; }
.sf-pd-tab-btn {
  background: none; border: none; padding: 10px 14px; font-size: 13px; font-weight: 700;
  color: var(--sf-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1.5px; white-space: nowrap;
}
.sf-pd-tab-btn.active { color: var(--sf-primary); border-bottom-color: var(--sf-primary); }
.sf-pd-tab-panel { display: none; }
.sf-pd-tab-panel.active { display: block; }
.sf-pd-notes-empty { font-size: 13.5px; color: var(--sf-text-muted); }
.sf-pd-specs { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sf-pd-specs th { text-align: left; color: var(--sf-text-muted); font-weight: 600; padding: 8px 10px 8px 0; width: 40%; vertical-align: top; }
.sf-pd-specs td { padding: 8px 0; font-weight: 600; border-bottom: 1px solid var(--sf-border); }
.sf-pd-specs tr:last-child td, .sf-pd-specs tr:last-child th { border-bottom: none; }

/* ---------- Modal (Condition Guide) ---------- */
.sf-modal-backdrop {
  position: fixed; inset: 0; background: rgba(8,20,22,0.55); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.sf-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.sf-modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -48%);
  width: calc(100% - 32px); max-width: 460px; max-height: 84vh; overflow-y: auto;
  background: #fff; border-radius: var(--sf-radius); box-shadow: var(--sf-shadow-lg);
  z-index: 91; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.sf-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.sf-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--sf-border); position: sticky; top: 0; background: #fff; }
.sf-modal-head h3 { margin: 0; font-size: 16px; }
.sf-modal-head .sf-icon-btn { color: var(--sf-text); width: 30px; height: 30px; }
.sf-modal-body { padding: 6px 18px 18px; }

/* Condition Guide — richer card style (icon + accent border per
   condition), per Ali's reference design. */
.sf-cond-guide-modal { max-width: 540px; }
.sf-modal-close-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.9); color: var(--sf-text);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--sf-shadow);
}
.sf-modal-close-x svg { width: 18px; height: 18px; }
.sf-cond-guide-head { text-align: center; padding: 30px 10px 4px; }
.sf-cond-guide-head h3 { margin: 0 0 10px; font-size: 24px; font-weight: 800; color: var(--sf-primary-dark); }
.sf-cond-guide-squiggle { width: 130px; height: 10px; color: var(--sf-secondary); margin: 0 auto 6px; display: block; }
.sf-cond-guide-modal .sf-modal-body { padding: 4px 22px 26px; display: flex; flex-direction: column; gap: 14px; }
.sf-cond-guide-item {
  display: flex; align-items: flex-start; gap: 14px;
  border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius);
  padding: 16px 18px; background: #fff;
}
.sf-cond-guide-item-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid currentColor; box-shadow: var(--sf-shadow);
}
.sf-cond-guide-item-icon svg { width: 24px; height: 24px; }
.sf-cond-guide-item-text { flex: 1; min-width: 0; }
.sf-cond-guide-item-label { font-family: var(--sf-font-head); font-weight: 800; font-size: 15.5px; color: var(--sf-primary-dark); margin-bottom: 4px; }
.sf-cond-guide-item-desc { font-size: 12.5px; color: var(--sf-text-muted); line-height: 1.55; }

.sf-cond-guide-tone-sealed { border-color: #f0dfa8; background: #fffaf0; }
.sf-cond-guide-tone-sealed .sf-cond-guide-item-icon { color: #b8860b; }
.sf-cond-guide-tone-open { border-color: #d7e8de; background: #f4faf6; }
.sf-cond-guide-tone-open .sf-cond-guide-item-icon { color: #1f9d55; }
.sf-cond-guide-tone-inspected { border-color: #cfe2e5; background: #f2f8f9; }
.sf-cond-guide-tone-inspected .sf-cond-guide-item-icon { color: var(--sf-primary); }
.sf-cond-guide-tone-used { border-color: #e7ddc9; background: #fbf8f1; }
.sf-cond-guide-tone-used .sf-cond-guide-item-icon { color: #e2792e; }
.sf-cond-guide-tone-incomplete { border-color: #e3d9ee; background: #f8f5fb; }

/* ---------- Quick View (trigger button on cards + modal content) ---------- */
/* Overlay button on the card image — hidden by default and revealed on
   hover on devices that actually support hover (desktop mouse); touch
   devices have no hover state to reveal it, so it just stays visible
   there instead (same `@media (hover: hover)` gating already used for
   the hover photo scroller's ::after dot row). */
.sf-quickview-btn {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; z-index: 2;
  background: rgba(13,77,88,0.92); color: #fff; border: none; border-radius: 999px;
  padding: 8px 14px; font-size: 12px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.sf-quickview-btn svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .sf-quickview-btn { opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
  .sf-card:hover .sf-quickview-btn { opacity: 1; pointer-events: auto; }
}

.sf-quickview-modal { max-width: 760px; }
.sf-qv { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 4px 0; }
@media (min-width: 620px) { .sf-qv { grid-template-columns: 1fr 1fr; gap: 26px; } }
.sf-qv-gallery-main {
  aspect-ratio: 1/1; border-radius: var(--sf-radius-sm); overflow: hidden;
  background: #eef1f0; box-shadow: var(--sf-shadow); position: relative;
}
.sf-qv-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.sf-qv-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,0.92); color: var(--sf-primary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25); z-index: 2; padding: 0;
}
.sf-qv-arrow:hover { background: #fff; }
.sf-qv-arrow svg { width: 20px; height: 20px; }
.sf-qv-prev { left: 8px; }
.sf-qv-next { right: 8px; }
.sf-qv-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.sf-qv-thumb {
  width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
  border: 2px solid transparent; opacity: 0.7; cursor: pointer;
}
.sf-qv-thumb.active { border-color: var(--sf-primary); opacity: 1; }
.sf-qv-title { font-size: 19px; font-weight: 800; margin: 6px 0 4px; letter-spacing: -0.01em; line-height: 1.25; }
.sf-qv-price { font-size: 22px; font-weight: 800; color: var(--sf-primary); margin: 4px 0 14px; }
.sf-qv-price small { font-size: 13px; font-weight: 600; color: var(--sf-text-muted); }
.sf-qv-cond-grid { max-height: 220px; overflow-y: auto; }
.sf-qv-actions { margin-top: 4px; }
.sf-qv-full-link {
  display: flex; align-items: center; gap: 4px; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--sf-primary); margin-top: 12px;
}
.sf-qv-full-link svg { width: 14px; height: 14px; }
.sf-qv-loading { padding: 40px 10px; text-align: center; color: var(--sf-text-muted); font-size: 14px; }
.sf-cond-guide-tone-incomplete .sf-cond-guide-item-icon { color: #7a52b8; }
.sf-cond-guide-tone-asis { border-color: #f3c6c1; background: #fdf3f2; }
.sf-cond-guide-tone-asis .sf-cond-guide-item-icon { color: var(--sf-danger); }
@media (max-width: 480px) {
  .sf-cond-guide-item { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- Cart page ---------- */
.sf-cart-layout { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 6px; align-items: start; }
@media (min-width: 820px) { .sf-cart-layout { grid-template-columns: 1fr 320px; } }
.sf-cart-list { display: flex; flex-direction: column; gap: 12px; }
.sf-cart-row {
  display: flex; gap: 12px; align-items: center; background: var(--sf-card);
  border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); padding: 12px;
}
.sf-cart-row-img { width: 68px; height: 68px; border-radius: 8px; overflow: hidden; background: #f0f2f3; flex-shrink: 0; }
.sf-cart-row-img img { width: 100%; height: 100%; object-fit: cover; }
.sf-cart-row-body { flex: 1; min-width: 0; }
.sf-cart-row-title { display: block; font-weight: 700; font-size: 13.5px; color: var(--sf-text); margin-bottom: 2px; }
.sf-cart-row-cond { font-size: 12px; color: var(--sf-text-muted); font-weight: 600; margin-bottom: 6px; }
.sf-cart-row-price-mobile { display: none; font-size: 13px; font-weight: 800; color: var(--sf-primary); margin-bottom: 6px; }
.sf-cart-row-qty { display: flex; align-items: center; gap: 10px; }
.sf-cart-row-qty .sf-qty-btn { width: 28px; height: 28px; border: 1px solid var(--sf-border); border-radius: 50%; background: #fff; font-size: 15px; }
.sf-cart-row-qty .sf-qty-val { font-size: 13px; min-width: 20px; }
.sf-cart-row-remove { background: none; border: none; color: var(--sf-danger); font-size: 12px; font-weight: 700; margin-left: auto; padding: 4px; }
.sf-cart-row-total { font-weight: 800; font-size: 14.5px; color: var(--sf-primary); flex-shrink: 0; min-width: 60px; text-align: right; }
@media (max-width: 480px) {
  .sf-cart-row-price-mobile { display: block; }
  .sf-cart-row-total { display: none; }
}

.sf-cart-summary-card {
  background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
  padding: 18px; box-shadow: var(--sf-shadow); position: sticky; top: calc(var(--sf-header-h) + 16px);
}
.sf-cart-summary-card h3 { font-size: 15px; margin: 0 0 14px; }
.sf-cart-summary-row { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; color: var(--sf-text); }
.sf-cart-summary-total { font-size: 16px; font-weight: 800; color: var(--sf-primary); border-top: 1px solid var(--sf-border); padding-top: 10px; margin-top: 4px; }
.sf-cart-summary-note { font-size: 11.5px; color: var(--sf-text-muted); margin-bottom: 14px; }
.sf-cart-continue-link { display: block; text-align: center; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--sf-primary); }

/* ---------- Checkout page ---------- */
.sf-checkout-layout { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 6px; align-items: start; }
@media (min-width: 860px) { .sf-checkout-layout { grid-template-columns: 1fr 320px; } }
.sf-checkout-block {
  background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
  padding: 18px; margin-bottom: 16px;
}
.sf-checkout-block h3 { font-size: 14.5px; margin: 0 0 14px; }
.sf-checkout-block label { display: block; font-size: 12.5px; font-weight: 700; color: var(--sf-text); margin-bottom: 12px; }
.sf-checkout-block label:last-child { margin-bottom: 0; }
.sf-checkout-block input[type=text], .sf-checkout-block input[type=email], .sf-checkout-block input[type=tel], .sf-checkout-block textarea {
  display: block; width: 100%; margin-top: 5px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm);
  padding: 10px 12px; font-size: 13.5px; font-family: inherit; color: var(--sf-text);
}
.sf-checkout-block textarea { resize: vertical; }
.sf-checkout-row { display: flex; gap: 12px; }
.sf-checkout-row label { flex: 1; }
.sf-checkout-hint { font-size: 11.5px; color: var(--sf-text-muted); margin: -6px 0 0; }
.sf-checkout-hint-inline { font-weight: 400; color: var(--sf-text-muted); }

.sf-checkout-options { display: flex; flex-direction: column; gap: 8px; }
.sf-checkout-option {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius-sm); padding: 11px 14px; cursor: pointer; margin-bottom: 0;
}
.sf-checkout-option:has(input:checked), .sf-checkout-option-checked { border-color: var(--sf-primary); background: #eef6f4; }
.sf-checkout-option input { width: auto; margin: 0; }
.sf-checkout-option-body { flex: 1; display: flex; flex-direction: column; font-weight: 400; }
.sf-checkout-option-title { font-weight: 700; font-size: 13.5px; color: var(--sf-text); }
.sf-checkout-option-desc { font-size: 12px; color: var(--sf-text-muted); }
.sf-checkout-option-price { font-weight: 800; color: var(--sf-primary); font-size: 13.5px; }

.sf-checkout-error {
  background: #fdecea; border: 1px solid #f3c6c1; color: var(--sf-danger);
  border-radius: var(--sf-radius-sm); padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.sf-checkout-item-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; color: var(--sf-text); }

.sf-checkout-confirm { text-align: center; padding: 60px 20px; max-width: 420px; margin: 0 auto; }
.sf-checkout-confirm svg { color: #1f9d55; margin-bottom: 14px; }
.sf-checkout-confirm h2 { font-size: 20px; margin: 0 0 10px; }
.sf-checkout-confirm p { color: var(--sf-text-muted); font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.sf-checkout-confirm strong { color: var(--sf-primary); }

/* ---------- Static pages (page.php) ---------- */
.sf-static-page { max-width: 760px; margin: 10px auto 40px; }
.sf-static-page h1 { font-size: 30px; margin: 0 0 18px; }
.sf-static-page-body { font-size: 14.5px; line-height: 1.7; color: var(--sf-text); }
.sf-static-page-body h2 { font-size: 18px; margin: 26px 0 10px; }
.sf-static-page-body h3 { font-size: 15px; margin: 20px 0 8px; }
.sf-static-page-body p { margin: 0 0 14px; }
.sf-static-page-body ul, .sf-static-page-body ol { margin: 0 0 14px; padding-left: 22px; }
.sf-static-page-body li { margin-bottom: 6px; }
.sf-static-page-body a { color: var(--sf-primary); font-weight: 600; text-decoration: underline; }

/* ---------- "How It Works" numbered steps (used inside an admin Pages
   entry — see sf-static-page-body above; these classes are just extra
   markup an admin page's trusted HTML content can opt into) ----------
   Sized deliberately large/bold per Ali's explicit request ("bara bara")
   — original layout and copy, not copied from any reference site. */
.sf-how-intro {
  display: inline-block; background: var(--sf-secondary); color: var(--sf-primary-dark);
  font-weight: 800; font-size: 15px; padding: 8px 16px; border-radius: 8px;
  margin: 0 0 30px;
}
.sf-how-steps { display: flex; flex-direction: column; gap: 48px; margin: 8px 0 34px; }
.sf-how-step { display: flex; align-items: center; gap: 26px; }
.sf-how-step:nth-child(even) { flex-direction: row-reverse; text-align: right; }
.sf-how-step-num {
  font-size: 116px; font-weight: 800; line-height: 0.85; flex-shrink: 0;
  font-family: Georgia, 'Times New Roman', serif; color: var(--sf-secondary);
  -webkit-text-stroke: 2px var(--sf-primary-dark);
}
.sf-how-step-body h2 { font-size: 27px; margin: 4px 0 10px; color: var(--sf-primary-dark); line-height: 1.2; }
.sf-how-step-body p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--sf-text); }
.sf-how-cta { text-align: center; margin-top: 8px; }
/* .sf-static-page-body a sets color:var(--sf-primary) + underline for
   plain text links — same teal as this button's own background, which
   made the "Start Shopping" label unreadable (dark-on-dark). This
   overrides it back to a normal white, no-underline button label. */
.sf-how-cta .sf-btn, .sf-static-page-body .sf-how-cta a.sf-btn {
  color: #fff; text-decoration: none;
}
@media (max-width: 560px) {
  .sf-how-step, .sf-how-step:nth-child(even) { flex-direction: column; text-align: left; align-items: flex-start; gap: 6px; }
  .sf-how-step-num { font-size: 76px; }
  .sf-how-step-body h2 { font-size: 22px; }
}

/* Batch No lines (card, quick view, product page) */
.sf-card-batch, .sf-batch-line { font-size: 12px; color: var(--sf-text-muted, #6b7280); margin-top: 4px; }
.sf-card-batch strong, .sf-batch-line strong { color: var(--sf-primary-dark, #0e4d55); font-weight: 700; }
.sf-batch-tag { color: var(--sf-text-muted, #6b7280); font-weight: 600; }
.sf-pd-price-block .sf-batch-line { flex-basis: 100%; }