/* 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;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
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));
}
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: 1200px; 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: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  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; }

/* ---------- Search + category dropdown (combined bar) ---------- */
.sf-search-wrap {
  flex: 1;
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 10px;
  overflow: visible;
  max-width: 640px;
  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: 420px; 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: 2px; margin-left: auto; flex-shrink: 0; }
.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: 1200px;
  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: 1200px; 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); }
.sf-trust-row {
  display: flex; flex-wrap: wrap; margin-bottom: 8px;
  background: linear-gradient(180deg, rgba(13, 77, 88, 0.045), rgba(13, 77, 88, 0.01));
  border-radius: var(--sf-radius); overflow: hidden; box-shadow: var(--sf-shadow);
}
.sf-trust-item {
  flex: 1 1 45%; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 18px 16px; border-right: 1px solid rgba(13, 77, 88, 0.09); border-bottom: 1px solid rgba(13, 77, 88, 0.09);
}
.sf-trust-item:nth-last-child(-n+2) { border-bottom: none; }
@media (min-width: 700px) {
  .sf-trust-item { flex: 1 1 0; border-bottom: none; }
  .sf-trust-item:last-child { border-right: none; }
}
.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; }
.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; }
@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; }

/* This page alone gets a bit more breathing room than the 1200px global
   container (.sf-main) so 5 product cards + sidebar have room to sit
   comfortably side by side on large screens, same "small details
   matter" spacing as the reference design. Only shop.php is affected —
   .sf-main itself (homepage, product page, etc.) is untouched. */
@media (min-width: 1300px) {
  .sf-main:has(.sf-shop-layout) { max-width: 1360px; }
}

.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; }

@media (max-width: 780px) {
  .sf-shop-layout { flex-direction: column; }
  .sf-filter-sidebar { width: 100%; }
  .sf-filter-options { max-height: none; }
}

/* ---------- Product grid ---------- */
.sf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 620px) { .sf-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 900px) { .sf-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1150px) { .sf-shop-main .sf-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; } }

.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);
}
.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; }

.sf-card-img { aspect-ratio: 1 / 1; background: #f8faf9; position: relative; overflow: hidden; }
.sf-card-img img { 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 { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #c3ccc9; }
.sf-card-img-ph svg { width: 34%; height: 34%; }

.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);
}

/* 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; align-items: flex-start;
  gap: 3px; flex: 1; text-align: left;
}
.sf-card-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sf-text-muted); }
.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;
}
.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: 1200px; 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)); }
}
.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; }
.sf-banner-copy {
  position: relative; z-index: 1;
  padding: 20px 24px;
  max-width: 62%;
  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: 15px; color: var(--sf-primary); margin-bottom: 6px; }
.sf-banner-copy h2 { font-size: clamp(16px, 3vw, 24px); font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; line-height: 1.2; }
.sf-banner-copy p { font-size: 12.5px; color: var(--sf-text-muted); margin: 0 0 12px; max-width: 320px; }
.sf-banner-copy .sf-hero-btn { position: static; display: inline-flex; padding: 9px 16px; font-size: 12.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; }
}

/* ---------- 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; }
.sf-testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; text-align: left; }
.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; }
.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; }
.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 {
  background: none; border: none; padding: 0; font-size: 12px; font-weight: 700;
  color: var(--sf-primary); text-decoration: underline; text-underline-offset: 2px;
}

.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; }
.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: 24px; 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; }