/* ==========================================================================
   WearBenin v2 — Components
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 22px;border-radius:var(--r-md);
  font-family:var(--font-ui);font-weight:700;font-size:15px;line-height:1;
  border:1.5px solid transparent;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
  text-align:center;white-space:nowrap
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(17,19,24,.08)}
.btn-primary:hover{background:var(--primary-dark, #D9550A);box-shadow:0 2px 6px rgba(17,19,24,.10)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:#fff}
.btn-light{background:#fff;color:var(--ink);border-color:transparent;box-shadow:0 1px 2px rgba(17,19,24,.08)}
.btn-light:hover{background:#F1F2F4}
.btn-light.on-dark:hover{background:#F1F2F4}
.btn-wa{background:var(--whatsapp);color:#fff;box-shadow:0 1px 2px rgba(17,19,24,.08)}
.btn-wa:hover{background:#0C9353;box-shadow:0 2px 6px rgba(17,19,24,.10)}
.btn-soft{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.btn-soft:hover{background:#FFE9D2}
.btn-danger{background:#fff;color:var(--red);border-color:#FCA5A5}
.btn-danger:hover{background:#FEF2F2}
.btn-sm{min-height:38px;padding:0 15px;font-size:13.5px;border-radius:var(--r-sm)}
/* Touch targets: the 44px rule applies to every control on small screens. */
@media(max-width:900px){.btn-sm{min-height:44px;padding:0 16px}}
.btn-lg{min-height:54px;padding:0 30px;font-size:16px;border-radius:var(--r-md)}
.btn-block{width:100%}
.btn[disabled],.btn.is-loading{opacity:.55;pointer-events:none}
.btn.is-loading::after{
  content:"";width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.link-action{
  display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:700;font-size:var(--fs-small)
}
@media(max-width:900px){.link-action{min-height:44px}}
.link-action svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.link-action:hover svg{transform:translateX(4px)}
.icon-btn{
  width:44px;height:44px;border-radius:var(--r-md);display:inline-grid;place-items:center;
  color:var(--ink-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);flex-shrink:0
}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{background:var(--line-2);color:var(--brand)}
.icon-btn.sm{width:44px;height:44px}
.icon-btn.sm svg{width:18px;height:18px}

/* ---------- Pills / badges / chips ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-micro);font-weight:700;line-height:1.4;white-space:nowrap
}
.pill-brand{background:var(--brand-soft);color:var(--brand)}
.pill-green{background:#E7F8EF;color:#0E7A3C}
.pill-amber{background:#FEF3C7;color:#92400E}
.pill-red{background:#FEE2E2;color:#991B1B}
.pill-grey{background:var(--line-2);color:var(--muted)}
.pill-ink{background:var(--ink);color:#fff}
.pill-outline{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.pill-hot{background:linear-gradient(135deg,#F97316,#DC2626);color:#fff}
.pill-verified{background:#E7F8EF;color:#0E7A3C}
.pill-verified svg{width:13px;height:13px}

.chip{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:var(--r-pill);border:1.5px solid var(--line);background:#fff;color:var(--ink-2);
  font-size:var(--fs-small);font-weight:600;transition:all var(--dur) var(--ease);white-space:nowrap
}
.chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .chip-count{font-size:12px;color:var(--muted);font-weight:600}
.chip.active .chip-count{color:rgba(255,255,255,.7)}
.chip-row{display:flex;gap:var(--s3);flex-wrap:wrap}
.chip-row.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chip-row.scroll::-webkit-scrollbar{display:none}

.tab-row{display:flex;gap:var(--s5);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tab-row::-webkit-scrollbar{display:none}
.tab{
  padding:14px 0;font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap;
  border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color var(--dur),border-color var(--dur)
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- Section head (64px rhythm) ---------- */
.section{padding-top:var(--s8)}
.section:first-child{padding-top:var(--s6)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s5)}
.section-head h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
/* Inline icons inside headings must be explicitly sized — an unsized SVG inside an h2 rendered
   at 201×201 and blew the Hot Deals section apart. */
.section-head h2 svg{width:22px;height:22px;flex:0 0 auto;color:var(--brand);vertical-align:-4px}
.section-head .section-sub{color:var(--muted);font-size:var(--fs-small);margin-top:6px}
.section-head .section-action{flex-shrink:0;padding-bottom:4px}
@media(max-width:900px){
  .section{padding-top:44px}
  .section-head{align-items:center}
}

/* ---------- Listing card ---------- */
.grid-cards{
  display:grid;gap:24px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))
}
@media(max-width:1279px){.grid-cards{gap:18px}}
@media(max-width:860px){.grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:900px) and (min-width:861px){.grid-cards{gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{
  background:#fff;border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 1px 3px rgba(16,24,40,.07);
  overflow:hidden;position:relative;display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)
}
.card:hover{border-color:#12A150;box-shadow:0 1px 3px rgba(16,24,40,.07)}
.card-media{position:relative;aspect-ratio:4/5;background:var(--line-2);overflow:hidden;display:block}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
.card:hover .card-media img{transform:scale(1.05)}
.card-media .img-fallback{width:100%;height:100%;display:grid;place-items:center;background:var(--line-2);color:var(--muted)}
.card-flag{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:2}
.card-fav{
  position:absolute;top:6px;right:6px;width:44px;height:44px;border-radius:50%;
  background:transparent;display:grid;place-items:center;color:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
  z-index:3;transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)
}
.card-fav svg{width:22px;height:22px}
.card-fav:hover{transform:scale(1.1);color:#fff}
.card-fav.on{color:#E85D04}
.card-fav.on svg{fill:var(--brand)}
.card-quick{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  background:rgba(17,19,24,.92);color:#fff;border-radius:var(--r-sm);min-height:42px;
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:700;
  opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)
}
.card:hover .card-quick{opacity:1;transform:none}
.card-quick svg{width:16px;height:16px}
.card-sold{
  position:absolute;inset:0;background:rgba(17,19,24,.55);display:grid;place-items:center;z-index:4;
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:.06em;text-transform:uppercase
}
.card-body{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-price{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--green);letter-spacing:-.01em;line-height:1.2}
.card-price .neg{font-size:12px;font-weight:600;color:var(--green);vertical-align:middle;margin-left:6px}
.card-title{font-size:15px;font-weight:600;color:#1F2937;line-height:1.4}
.card:hover .card-title{color:var(--brand)}
.card-meta{
  font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:9px
}
.card-meta svg{width:14px;height:14px}
.card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line);}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:4px}
.card-vendor{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);min-width:0}
.card-vendor .tick{color:var(--green);width:14px;height:14px;flex-shrink:0}
@media(max-width:860px){
  .card-body{padding:12px;gap:5px}
  .card-price{font-size:17.5px}
  /* "Negotiable" no longer fits beside a 17.5px price on a 2-col phone grid — it clipped. */
  .card-price .neg{display:none}
  .card-title{font-size:14.5px;line-height:1.35}
  .card-meta{font-size:12px;padding-top:7px}
  .card-quick{display:none}
  .card-flag{top:8px;left:8px}
  .card-fav{width:44px;height:44px;top:6px;right:6px}
}

/* Horizontal rail (hot deals / spotlight) */
.rail{display:flex;gap:24px;overflow-x:auto;padding:4px 4px 18px;margin:-4px -4px -18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rail > *{flex:0 0 auto;scroll-snap-align:start}
.rail-hot > *{width:300px}
.rail-vendor > *{width:340px}
.rail-similar > *{width:270px}
@media(max-width:900px){
  .rail{gap:14px}
  .rail-hot > *{width:230px}
  .rail-vendor > *{width:280px}
  .rail-similar > *{width:200px}
}

/* ---------- Skeleton ---------- */
.sk{background:linear-gradient(90deg,var(--line-2) 25%,#E7E9EE 37%,var(--line-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden}
.sk-card .sk-media{aspect-ratio:4/5}
.sk-card .sk-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.sk-line{height:13px;border-radius:6px}
.sk-line.w40{width:40%}.sk-line.w60{width:60%}.sk-line.w80{width:80%}.sk-line.w95{width:95%}
.sk-line.h20{height:20px}
.sk-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media(max-width:860px){.sk-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.sk-rail{display:flex;gap:24px;overflow:hidden}
.sk-rail > *{width:300px;flex:0 0 auto}

/* ---------- Empty / error states ---------- */
.state-box{
  background:#fff;border:1px dashed var(--line);border-radius:var(--r-lg);
  padding:var(--s8) var(--s5);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s3)
}
.state-ill{width:126px;height:126px;margin-bottom:4px}
.state-box h3{font-size:var(--fs-h3)}
.state-box p{color:var(--muted);font-size:var(--fs-small);max-width:440px;line-height:1.65}
.state-box .state-actions{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;margin-top:var(--s2)}
.inline-error{
  background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:var(--r-md);
  padding:14px 16px;font-size:var(--fs-small);display:flex;gap:10px;align-items:flex-start
}
.inline-error svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field > label,.field-label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:12px;color:var(--muted)}
.input,.select,.textarea{
  width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:#fff;font-size:15px;color:var(--ink);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)
}
.textarea{min-height:130px;resize:vertical;line-height:1.6}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px;cursor:pointer}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:#C9CDD4;box-shadow:0 0 0 3px rgba(17,19,24,.06)}
.input.err,.select.err,.textarea.err{border-color:var(--red)}
.field-error{font-size:12.5px;color:var(--red);font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.form-grid .span-2{grid-column:1/-1}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;gap:var(--s4)}}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;min-height:44px;padding:8px 0;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--brand);flex-shrink:0}
.radio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.radio-card{
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:14px;cursor:pointer;text-align:center;
  font-size:14px;font-weight:600;transition:all var(--dur) var(--ease);min-height:60px;display:grid;place-items:center
}
.radio-card:hover{border-color:var(--ink-2)}
.radio-card.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.radio-card input{position:absolute;opacity:0;pointer-events:none}

/* ---------- Breadcrumbs ---------- */
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap;padding:var(--s4) 0}
.crumbs a{color:var(--muted);transition:color var(--dur);display:inline-flex;align-items:center;min-height:32px}
.crumbs a:hover{color:var(--brand)}
.crumbs svg{width:13px;height:13px;opacity:.6}
.crumbs .current{color:var(--ink-2);font-weight:600}

/* ---------- Page head ---------- */
.page-head{padding:var(--s5) 0 var(--s5);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.page-head h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
.page-head .page-sub{color:var(--muted);font-size:var(--fs-small);margin-top:8px}
.page-title{font-size:var(--fs-h1);line-height:var(--lh-h1);padding:var(--s5) 0 var(--s4)}

/* ---------- Avatar ---------- */
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--brand-soft);flex-shrink:0;display:grid;place-items:center;color:var(--brand);font-weight:800;font-family:var(--font-display)}
.avatar.lg{width:72px;height:72px;font-size:26px}
.avatar.sm{width:32px;height:32px;font-size:13px}
.avatar.ring{border:3px solid #fff;box-shadow:var(--sh-md)}

/* ---------- Stars ----------
   Two stacked rows (outline under, filled clipped over) so fractional
   averages — 4.8, 4.6 — render honestly instead of rounding up to five. */
.stars{display:inline-flex;align-items:center;gap:2px;color:var(--star)}
.stars .stars-track{position:relative;display:inline-flex;gap:2px;color:var(--line)}
.stars .stars-fill{position:absolute;left:0;top:0;bottom:0;display:inline-flex;gap:2px;overflow:hidden;color:var(--star)}
.stars svg{width:15px;height:15px;flex:0 0 auto}
.stars .num{color:var(--muted);font-size:12.5px;font-weight:600;margin-left:5px}

/* ---------- Social icon buttons (§3) ---------- */
.social-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.social-btn{
  width:44px;height:44px;border-radius:12px;display:inline-grid;place-items:center;
  background:var(--line-2);color:var(--ink-2);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)
}
.social-btn svg{width:20px;height:20px}
.social-btn:hover{transform:translateY(-3px)}
.social-btn.brand-wa:hover{background:var(--whatsapp);color:#fff}
.social-btn.brand-ig:hover{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);color:#fff}
.social-btn.brand-fb:hover{background:var(--facebook);color:#fff}
.social-btn.brand-tt:hover{background:#000;color:#fff}
.social-btn.brand-x:hover{background:#000;color:#fff}
.social-btn.brand-tg:hover{background:var(--telegram);color:#fff}
.social-btn.on-dark{background:rgba(255,255,255,.12);color:#fff}
.social-btn.on-dark:hover{background:rgba(255,255,255,.24);color:#fff}
/* 44px minimum: these were 38×38 and failed the touch-target rule. */
.social-btn.sm{width:44px;height:44px;border-radius:12px}
.social-btn.sm svg{width:18px;height:18px}

/* Share row */
.share-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.share-label{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-right:2px}
.share-btn{
  width:44px;height:44px;border-radius:12px;display:inline-grid;place-items:center;background:var(--line-2);
  color:var(--ink-2);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)
}
.share-btn svg{width:19px;height:19px}
.share-btn:hover{transform:translateY(-3px);color:#fff}
.share-btn.s-wa:hover{background:var(--whatsapp)}
.share-btn.s-fb:hover{background:var(--facebook)}
.share-btn.s-x:hover{background:#000}
.share-btn.s-tg:hover{background:var(--telegram)}
.share-btn.s-copy:hover{background:var(--ink)}
.share-btn.s-native:hover{background:var(--brand)}
.share-btn.s-ig{width:auto;padding:0 16px;gap:9px;background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);color:#fff;font-size:13px;font-weight:700}
.share-btn.s-ig:hover{transform:translateY(-3px)}
.share-btn.s-ig svg{width:17px;height:17px}

/* ---------- Trust strip ----------
   Soft rounded tiles with gaps — not a bordered table of four cells (that read as
   "unstyled HTML" in review). */
.trust-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.trust-item{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  display:flex;align-items:center;gap:13px;padding:18px 20px;min-width:0;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)
}
.trust-item:hover{border-color:var(--line);box-shadow:var(--sh-sm)}
.trust-item > div{min-width:0}
.trust-ico{width:44px;height:44px;border-radius:13px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0}
.trust-ico svg{width:22px;height:22px}
.trust-item b{display:block;font-size:14.5px;font-weight:700;font-family:var(--font-ui);overflow-wrap:anywhere}
.trust-item span{font-size:12.5px;color:var(--muted);line-height:1.5;display:block;margin-top:2px;overflow-wrap:anywhere}
@media(max-width:1000px){.trust-strip{grid-template-columns:1fr 1fr}}
@media(max-width:520px){
  .trust-strip{grid-template-columns:1fr}
  .trust-item{padding:15px 17px;gap:12px}
  .trust-item b{font-size:14px}
}

/* ---------- Vendor card (spotlight rail + vendor index) ---------- */
.vendor-card{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)
}
.vendor-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.vendor-cover{aspect-ratio:16/7;background:var(--line-2);object-fit:cover;width:100%}
/* Only ever used if a vendor has no cover AND no listings to borrow a photo
   from — a branded panel, never an empty grey box. */
.vendor-cover-blank{
  display:grid;place-items:center;background:var(--ink-2);
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:15px
}
.vendor-card-body{padding:0 20px 20px;margin-top:-26px}
.vendor-logo-link{display:block;width:48px}
.vendor-logo{width:48px;height:48px;border-radius:14px;border:3px solid #fff;object-fit:cover;background:var(--brand-soft);box-shadow:var(--sh-sm);font-size:17px}
.vendor-name{font-family:var(--font-display);font-weight:800;font-size:18px;margin-top:12px;display:flex;align-items:center;gap:7px}
.vendor-name .tick{width:16px;height:16px;color:var(--green)}
.vendor-rating{display:inline-block;margin-top:6px}
.vendor-sub{font-size:13px;color:var(--muted);margin-top:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* The pin here used to inherit no size at all: an inline SVG with a viewBox and
   no width/height renders at its intrinsic 300×150 and swallowed the card. */
.vendor-sub svg{width:14px;height:14px;flex:0 0 auto;color:var(--muted)}
.vendor-sub .dot{width:3px;height:3px;border-radius:50%;background:var(--line)}
.vendor-card-foot{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ---------- Category tile ---------- */
.cat-tile{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;background:#1F2937;
  display:block;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)
}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.cat-tile:hover img{transform:scale(1.06)}
.cat-tile-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,24,0) 35%,rgba(17,19,24,.82) 100%)}
.cat-tile-text{position:absolute;left:18px;right:18px;bottom:18px;color:#fff}
.cat-tile-text b{font-family:var(--font-display);font-size:18px;font-weight:800;display:block;line-height:1.25}
.cat-tile-text span{font-size:12.5px;color:rgba(255,255,255,.82);display:block;margin-top:4px}
.cat-tile-row{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
@media(max-width:1100px){.cat-tile-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){
  .cat-tile-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;margin:0 calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
  .cat-tile-row::-webkit-scrollbar{display:none}
  .cat-tile-row .cat-tile{flex:0 0 62%;aspect-ratio:4/5}
}

/* ---------- Promo banners (section 7) ---------- */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:820px){.promo-grid{grid-template-columns:1fr;gap:16px}}
.promo{
  position:relative;border-radius:var(--r-lg);overflow:hidden;padding:36px 38px;min-height:220px;
  display:flex;flex-direction:column;justify-content:center;gap:10px;color:#fff
}
.promo h3{color:#fff;font-size:24px;line-height:1.25;max-width:340px}
.promo p{font-size:14.5px;color:rgba(255,255,255,.86);max-width:330px;line-height:1.6}
.promo .promo-cta{margin-top:8px;align-self:flex-start}
.promo .promo-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;z-index:0}
.promo > *{position:relative;z-index:1}
.promo::after{content:"";position:absolute;inset:0;z-index:0}
.promo-1::after{background:linear-gradient(100deg,rgba(17,19,24,.88) 25%,rgba(17,19,24,.3) 100%)}
/* Second promo block becomes a slim horizontal strip in the brand palette so the two
   banners never stack as two heavy full-size slabs. */
.promo-2{
  background:var(--brand-soft);color:var(--ink);
  min-height:0;flex-direction:row;align-items:center;gap:18px;
  padding:18px 24px;
}
.promo-2::after{content:none}
.promo-2 h3{color:var(--ink);font-size:17px;max-width:none;margin:0;white-space:nowrap}
.promo-2 p{color:var(--ink-2);font-size:13.5px;max-width:none;margin:0;flex:1}
.promo-2 .promo-cta{margin:0;flex-shrink:0;min-height:44px;box-shadow:0 1px 2px rgba(17,19,24,.08)}
@media(max-width:560px){
  .promo-2{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 20px}
  .promo-2 h3{white-space:normal}
  .promo-2 .promo-cta{width:100%}
}
@media(max-width:520px){.promo{padding:26px 22px;min-height:190px}.promo h3{font-size:20px}}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:16px}}
.step{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px 28px;position:relative}
.step-num{
  width:44px;height:44px;border-radius:14px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:18px;margin-bottom:18px
}
.step h3{font-size:var(--fs-h4);margin-bottom:8px}
.step p{color:var(--muted);font-size:14px;line-height:1.7}

/* ---------- Testimonials ---------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:980px){.review-grid{grid-template-columns:1fr;gap:16px}}
.review-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:14px}
.review-card blockquote{margin:0;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.review-card .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.review-card .who b{display:block;font-size:14px}
.review-card .who span{font-size:12.5px;color:var(--muted)}

/* ---------- Newsletter / WhatsApp community (section 14) ----------
   Brand-palette surface (ink + brand accent). The only green on this block is
   the WhatsApp button itself — a full emerald panel clashed with the
   orange/ink system (flagged in design review). */
.community-strip{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink);color:#fff;
  padding:44px 46px;display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:center;
  border:1px solid rgba(255,255,255,.08);
}
.community-strip::before{ content:none; }   /* was an orange radial glow halo — removed as distracting */
.community-copy,.community-form{position:relative;z-index:1}
.community-eyebrow{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-2);background:rgba(232,93,4,.16);border:1px solid rgba(232,93,4,.35);
  padding:6px 12px;border-radius:var(--r-pill);
}
.community-eyebrow svg{width:14px;height:14px}
.community-strip h2{color:#fff;font-size:28px;line-height:1.25;max-width:24ch}
.community-strip p{color:rgba(255,255,255,.78);font-size:14.5px;margin-top:10px;max-width:430px;line-height:1.7}
.community-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.community-note{color:rgba(255,255,255,.62);margin-top:12px}
.community-note a{color:var(--brand-2);text-decoration:underline}
.newsletter{display:flex;gap:10px;flex-wrap:wrap}
.newsletter input{
  flex:1;min-width:200px;min-height:52px;border-radius:var(--r-md);border:1.5px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:#fff;padding:0 16px;font-size:15px
}
.newsletter input::placeholder{color:rgba(255,255,255,.55)}
.newsletter input:focus{outline:none;border-color:var(--brand-2);background:rgba(255,255,255,.14)}
@media(max-width:900px){.community-strip{grid-template-columns:1fr;gap:26px;padding:32px 24px}.community-strip h2{font-size:23px}}

/* ---------- Spec table ---------- */
.spec-table{width:100%;border-collapse:collapse;font-size:14.5px}
.spec-table tr{border-bottom:1px solid var(--line-2)}
.spec-table tr:last-child{border-bottom:0}
.spec-table th{text-align:left;font-weight:600;color:var(--muted);padding:13px 0;width:190px;vertical-align:top;font-family:var(--font-ui)}
.spec-table td{padding:13px 0;color:var(--ink)}

/* ---------- Safety panel ---------- */
.safety-panel{background:var(--brand-soft);border-radius:var(--r-lg);padding:24px 26px}
.safety-panel h4{display:flex;align-items:center;gap:9px;font-size:var(--fs-h4);color:#9A3412}
.safety-panel h4 svg{width:19px;height:19px}
.safety-panel ul{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.safety-panel li{display:flex;gap:10px;font-size:13.5px;color:#7C2D12;line-height:1.6}
.safety-panel li svg{width:15px;height:15px;flex-shrink:0;margin-top:3px;color:var(--green)}

/* ---------- Media query: card text on small ---------- */
@media(max-width:520px){
  .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* ---------- Signed-out wall (account-gated routes) ----------
   Rendered in place of the page when a visitor is not signed in: headline,
   what the page is for, a way in, and what an account is worth. */
.auth-wall{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:var(--s8) var(--s6) var(--s6);margin:var(--s5) 0 var(--s8);max-width:780px;
  box-shadow:var(--sh-sm)
}
.auth-wall .state-ill{width:104px;height:104px;margin-bottom:2px}
.auth-wall h1{font-size:var(--fs-h1);line-height:var(--lh-h1);margin-top:8px}
.auth-wall-sub{color:var(--muted);font-size:16px;line-height:1.7;margin-top:12px;max-width:540px}
.auth-wall-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.auth-wall-perks{margin-top:32px;border-top:1px solid var(--line-2);padding-top:24px}
.auth-wall-perks h2{font-size:var(--fs-h4);margin-bottom:16px}
.auth-wall-perks ul{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.auth-wall-perks li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.auth-wall-perks li svg{width:18px;height:18px;color:var(--brand);flex:0 0 auto;margin-top:2px}
.auth-wall-perks b{display:block;font-weight:700}
.auth-wall-perks span{color:var(--muted);font-size:13px;line-height:1.55;display:block;margin-top:2px}
.auth-wall > .text-micro{margin-top:24px}
@media(max-width:640px){
  .auth-wall{padding:var(--s6) var(--s5) var(--s5)}
  .auth-wall-perks ul{grid-template-columns:1fr}
}

/* ---------- Route transition placeholder ---------- */
.route-loading{padding-top:32px}

/* ==========================================================================
   Discovery band + spec chips — CSS that was missing when this markup landed
   (agent wrote the DOM for the area directory, trending band and spec chips
   but never styled them, so they rendered as unstyled markup).
   ========================================================================== */

/* ---------- Shop by area: directory panel ---------- */
.area-panel{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--sh-sm);
}
.area-row{
  display:grid;grid-template-columns:28px 1fr auto 18px;align-items:center;gap:var(--s2);
  padding:12px var(--s3);border-radius:var(--r-md);border:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
  min-height:52px;
}
.area-row:hover{background:var(--brand-soft);border-color:rgba(232,93,4,.25);transform:translateX(2px)}
.area-ico{
  width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--canvas);color:var(--brand);
}
.area-ico svg{width:15px;height:15px}
.area-name{font-weight:600;font-size:var(--fs-body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.area-count{
  font-size:var(--fs-micro);font-weight:700;color:var(--muted);
  background:var(--canvas);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap;
}
.area-row:hover .area-count{background:#fff;color:var(--brand)}
.area-go{color:var(--muted);display:grid;place-items:center}
.area-go svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.area-row:hover .area-go svg{transform:translateX(3px);color:var(--brand)}

/* ---------- Trending / popular searches band ---------- */
.trend-band{
  position:relative;overflow:hidden;
  background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:var(--s5) var(--s5);
  display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:var(--s5);align-items:center;
}
.trend-band::after{ content:none; }   /* was an orange radial glow halo — removed as distracting */
.trend-head{position:relative;z-index:1}
.trend-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-2);margin-bottom:10px;
}
.trend-eyebrow svg{width:14px;height:14px}
.trend-head h2{color:#fff;font-size:var(--fs-h3);line-height:var(--lh-h3);max-width:22ch}
.trend-list{
  position:relative;z-index:1;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--s4);
}
.trend-list li{margin:0}
.trend-list a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-md);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
  min-height:48px;
}
.trend-list a:hover{background:rgba(232,93,4,.18);border-color:rgba(232,93,4,.45);transform:translateX(3px)}
.trend-rank{
  font-family:var(--font-display);font-size:var(--fs-small);font-weight:800;
  color:var(--brand-2);min-width:22px;
}
.trend-term{font-weight:600;font-size:var(--fs-small);color:#fff}

/* ---------- Spec chips (sizes / colours / category path) ---------- */
.spec-tags{display:flex;flex-wrap:wrap;gap:6px}
.spec-tag{
  display:inline-flex;align-items:center;
  background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:4px 11px;font-size:var(--fs-micro);font-weight:700;color:var(--ink-2);white-space:nowrap;
}
.spec-cat{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:600}
.spec-sep{color:var(--muted);font-weight:700}

/* ---------- Seller card chevron (was an unstyled full-bleed glyph) ---------- */
.seller-box > svg,
.seller-box .seller-go svg{
  width:18px;height:18px;flex:0 0 auto;color:var(--muted);
}
.seller-box:hover > svg{color:var(--brand)}

@media(max-width:900px){
  .area-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trend-band{grid-template-columns:1fr;gap:var(--s3);padding:var(--s4)}
  .trend-list{grid-template-columns:1fr}
}
@media(max-width:520px){
  .area-panel{grid-template-columns:1fr;padding:var(--s2)}
  .area-row{grid-template-columns:24px 1fr auto;padding:10px 12px}
  .area-go{display:none}
}

.card-cart{
  position:absolute;top:6px;right:56px;width:44px;height:44px;border-radius:50%;
  background:transparent;display:grid;place-items:center;color:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
  z-index:3;transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)
}
.card-cart svg{width:22px;height:22px}
.card-cart:hover{transform:scale(1.1);color:#fff}
.card-cart.on{color:var(--green)}
.card-cart.on:hover{color:var(--green)}

/* ---------- Cart (real cart page) ---------- */
.cart-list{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.cart-item{display:grid;grid-template-columns:92px 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:12px}
.cart-thumb{width:92px;height:92px;border-radius:8px;overflow:hidden;background:var(--line-2);display:block}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-thumb-empty{width:100%;height:100%;display:grid;place-items:center;color:var(--muted)}
.cart-thumb-empty svg{width:22px;height:22px}
.cart-main{min-width:0}
.cart-title{font-weight:600;font-size:15px;color:var(--ink);line-height:1.35}
.cart-title:hover{color:var(--brand)}
.cart-meta{font-size:12.5px;color:var(--muted);margin:3px 0 6px}
.cart-line-price{font-weight:800;color:var(--green);font-size:16px}
.cart-unit{font-size:12px;color:var(--muted);font-weight:500}
.cart-tools{display:flex;align-items:center;gap:12px;margin-top:10px}
.cart-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cart-stepper button{width:32px;height:32px;display:grid;place-items:center;background:#fff;color:var(--ink-2)}
.cart-stepper button:hover{background:var(--brand-soft);color:var(--brand)}
.cart-stepper button svg{width:14px;height:14px}
.cart-stepper span{min-width:34px;text-align:center;font-weight:700;font-size:14px}
.cart-remove{font-size:12.5px;color:#9A3412;font-weight:600}
.cart-remove:hover{color:#C2410C}
.cart-item[hidden]{display:none}
.cart-checkout{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cart-note{display:flex;gap:10px;align-items:flex-start;background:#FFF7ED;border:1px solid #FFE4C2;border-radius:10px;padding:14px 16px;color:var(--ink-2);font-size:13.5px}
.cart-note svg{width:18px;height:18px;color:var(--brand);flex-shrink:0;margin-top:1px}
@media(max-width:560px){
  .cart-item{grid-template-columns:72px 1fr}
  .cart-thumb{width:72px;height:72px}
  .cart-checkout{grid-column:1/-1;flex-direction:row;justify-content:flex-end}
}

/* ---------------- product video ---------------- */
.detail-video{margin-top:4px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#000}
.detail-video video{display:block;width:100%;max-height:520px;background:#000}
.card-video-badge{
  position:absolute;left:8px;bottom:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;
  background:rgba(17,19,24,.78);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:4px 8px;border-radius:var(--r-pill);pointer-events:none
}
.upload-tile video{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ---------------- search typeahead ---------------- */
.search-shell{position:relative}
.ta-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:calc(var(--z-header) + 8);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);overflow:hidden;padding:4px;text-align:left
}
.ta-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  width:100%;text-align:left;padding:10px;border:0;background:none;cursor:pointer;border-radius:var(--r-sm);min-height:48px}
.ta-row:hover,.ta-row.on{background:var(--canvas)}
.ta-ico{color:var(--muted);display:flex}
.ta-ico svg{width:16px;height:16px}
.ta-text{display:flex;flex-direction:column;min-width:0}
.ta-text b{font-weight:600;color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ta-text span{font-size:12px;color:var(--ink-2)}
.ta-price{font-weight:700;color:var(--green);font-size:13px;white-space:nowrap}
.ta-all{display:flex;align-items:center;gap:8px;width:100%;padding:11px 10px;border:0;
  border-top:1px solid var(--line-2);background:none;cursor:pointer;color:var(--brand);
  font-weight:700;font-size:13.5px;min-height:44px}
.ta-all svg{width:15px;height:15px}
.ta-empty{padding:12px;color:var(--ink-2);font-size:13.5px}