/* =====================================================================
   BALAD PICKS — Shared marketplace components
   Loaded AFTER base.css. Cart→WhatsApp · Reviews · List-your-store ·
   Brand slideshow · Carousel · Tabs · Bento · Post-delivery review · Logo
   ===================================================================== */

/* ─── Real logo lockups ─────────────────────────── */
.nav-logo-img { height: 38px; width: auto; display: block; filter: none; }
.site-nav.scrolled .nav-logo-img { height: 32px; transition: height .45s ease; }
.footer-logo-img { height: 54px; width: auto; margin-bottom: 16px; opacity: .96; }
.brand-plate {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 22px 30px; border-radius: var(--r-lg);
  background: rgba(0,0,0,.32); border: 1px solid rgba(212,168,75,.22);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.brand-plate img { height: clamp(48px, 8vw, 92px); width: auto; }

/* ─── Toast ─────────────────────────────────────── */
#balad-toast-wrap {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 3000; display: flex; flex-direction: column; gap: 10px;
  align-items: center; pointer-events: none; width: min(92vw, 420px);
}
/* BLD-022: on <=560px the toast (92vw wide) shares bottom:84px with .cart-fab
   and .delivery-demo-btn, which both drop to bottom:74px at the same breakpoint —
   a fired toast can span edge-to-edge and collide with both side FABs. Raise it
   clear of the FAB row (58px cart-fab + margin) instead of touching the FABs. */
@media (max-width: 560px) {
  #balad-toast-wrap { bottom: 148px; }
}
.balad-toast {
  pointer-events: auto; width: 100%;
  background: rgba(20,24,32,.96); backdrop-filter: blur(14px);
  border: 1px solid rgba(212,168,75,.3); border-radius: var(--r-md);
  padding: 13px 16px; color: var(--white); font-size: .84rem;
  display: flex; align-items: center; gap: 11px;
  box-shadow: 0 14px 44px rgba(0,0,0,.5);
  transform: translateY(16px); opacity: 0;
  transition: transform .35s var(--ease-spring), opacity .35s ease;
}
.balad-toast.show { transform: translateY(0); opacity: 1; }
.balad-toast .t-ico { color: var(--gold); flex-shrink: 0; display: flex; }
.balad-toast .t-ico.green { color: var(--green-wa); }
.balad-toast .t-ico svg { width: 18px; height: 18px; }

/* Constrain injected WhatsApp icons (WA_ICON has no width/height attrs) */
.btn-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }
.drawer-foot .btn-whatsapp svg,
.modal .btn-whatsapp svg { width: 18px; height: 18px; }

/* ─── Add-to-cart button ────────────────────────── */
.btn-add-cart {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 14px; margin-bottom: 8px;
  background: var(--gold); color: var(--navy);
  border-radius: var(--r-md); font-size: .8rem; font-weight: 700;
  letter-spacing: .01em; transition: var(--trans); cursor: pointer;
}
.btn-add-cart:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn-add-cart.added { background: var(--green-wa); color: #fff; }
.btn-add-cart svg { width: 15px; height: 15px; }
.btn-add-cart--wa { background: var(--green-wa); color: #fff; }
.btn-add-cart--wa:hover { background: #1ebe5a; box-shadow: 0 8px 28px rgba(37, 211, 102, 0.3); }

/* ─── Floating cart FAB (injected) ──────────────── */
.cart-fab {
  position: fixed; right: 22px; bottom: 84px; z-index: 1500;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 34px rgba(212,168,75,.45), 0 4px 12px rgba(0,0,0,.4);
  transition: transform .3s var(--ease-spring); cursor: pointer;
}
.cart-fab:hover { transform: scale(1.08); }
.cart-fab svg { width: 24px; height: 24px; }
.cart-fab .cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 11px; background: var(--navy);
  color: var(--gold); font-family: var(--font-sans); font-size: .72rem;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--gold); transform: scale(0); transition: transform .3s var(--ease-spring);
}
.cart-fab .cart-count.visible { transform: scale(1); }
@media (max-width: 560px){ .cart-fab { bottom: 74px; right: 16px; } }

/* ─── Slide-over drawer (injected) ──────────────── */
.balad-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(8,10,14,.72);
  backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.balad-overlay.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 2010;
  width: min(430px, 92vw); background: var(--navy-850);
  border-left: 1px solid rgba(212,168,75,.18);
  display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .42s var(--ease-out);
  box-shadow: -24px 0 60px rgba(0,0,0,.5);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.drawer-head h3 { font-family: var(--font-serif); font-size: 1.3rem; color: var(--white); }
.drawer-close {
  width: 44px; height: 44px; border-radius: 50%; color: var(--gray-300);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  border: 1px solid rgba(255,255,255,.1); transition: var(--trans);
}
.drawer-close:hover { color: var(--gold); border-color: var(--gold); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.drawer-foot { padding: 20px 24px; border-top: 1px solid rgba(255,255,255,.07); }

/* Cart items */
.cart-empty { text-align: center; color: var(--gray-400); padding: 48px 0; font-size: .9rem; }
.cart-empty svg { width: 46px; height: 46px; color: var(--gray-500); margin: 0 auto 16px; }
.cart-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.cart-item-img { width: 60px; height: 60px; border-radius: var(--r-sm); object-fit: cover; background: var(--navy-600); flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info h5 { font-family: var(--font-sans); font-size: .86rem; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.cart-item-info .ci-price { font-size: .82rem; color: var(--gold); font-weight: 600; }
.cart-item-info .ci-store { font-size: .72rem; color: var(--gray-500); }
.qty-stepper { display: inline-flex; align-items: center; gap: 0; margin-top: 8px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-full); overflow: hidden; }
.qty-stepper button { width: 40px; height: 40px; color: var(--gray-300); font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: var(--trans-fast); }
.qty-stepper button:hover { background: rgba(212,168,75,.14); color: var(--gold); }
.qty-stepper span { min-width: 30px; text-align: center; font-size: .82rem; font-weight: 600; color: var(--white); }
.ci-remove { align-self: flex-start; color: var(--gray-500); font-size: .74rem; transition: color var(--trans-fast); }
.ci-remove:hover { color: #e06666; }
.cart-total-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.cart-total-row .ct-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-400); }
.cart-total-row .ct-amount { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700; color: var(--gold); }
.drawer-foot .btn-whatsapp { width: 100%; justify-content: center; }
.cart-note { font-size: .72rem; color: var(--gray-500); text-align: center; margin-top: 10px; line-height: 1.5; }

/* Task 52/BLD-004/BLD-005: buyer contact-capture mini-form ahead of the
   per-store WhatsApp order buttons (marketplace.js buildContactFieldsHTML()). */
.cart-contact-fields { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cart-contact-fields p { font-size: .74rem; color: var(--gray-400); margin-bottom: 10px; }
.cart-contact-fields .field { margin-bottom: 10px; }
.cart-contact-fields .field:last-of-type { margin-bottom: 0; }
.cart-contact-fields .field[aria-invalid="true"] { border-color: #e06666; }
.cart-contact-fields .cart-contact-error { padding: 10px 14px; font-size: .78rem; margin: 10px 0 0; }

/* BLD-015 Part A: delivery address + phone mini-form — same shape as .cart-contact-fields
   above, own block since it captures different data (marketplace.js buildShippingFieldsHTML()). */
.cart-shipping-fields { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cart-shipping-fields p { font-size: .74rem; color: var(--gray-400); margin-bottom: 10px; }
.cart-shipping-fields .field { margin-bottom: 10px; }
.cart-shipping-fields .field:last-of-type { margin-bottom: 0; }
.cart-shipping-fields .field[aria-invalid="true"] { border-color: #e06666; }
.cart-shipping-fields .cart-shipping-error { padding: 10px 14px; font-size: .78rem; margin: 10px 0 0; }

/* BLD-015 Part B: per-store shipping cost line inside the cart drawer's store group — shown
   before the buyer checks out or orders on WhatsApp, never a surprise at confirmation time. */
.cart-shipping-line { font-size: .78rem; color: var(--gray-400); margin-top: 6px; }

/* Multi-store note shared by the drawer (inline .cart-note) and the cart page
   group panel below — a plain amber-tinted callout, not an error, since a
   multi-store cart is a normal state, not a problem. */
.bld-cart-groups-note {
  font-size: .82rem; line-height: 1.55; color: var(--gray-300);
  background: rgba(212,168,75,.06); border: 1px solid rgba(212,168,75,.18);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 20px;
}

/* ─── Cart page: per-store grouping (BLD UX fix) ──────────────────────────
   Only rendered (marketplace.js renderCartPageGroups()) once the cart holds
   2+ stores — a single-store cart never mounts this, so it stays visually
   identical to before this fix. Sits above the native WooCommerce Cart
   block, which keeps owning per-item qty/remove/coupon/shipping. */
.bld-cart-groups { margin-bottom: 28px; }
.bld-cart-group {
  background: var(--navy-700); border: 1px solid rgba(255,255,255,.055);
  border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 14px;
}
.bld-cart-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px;
}
.bld-cart-group-head h3 {
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700; color: var(--white);
}
.bld-cart-group-subtotal { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--gold); }
.bld-cart-group-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bld-cart-group-actions .btn-whatsapp,
.bld-cart-group-actions .btn-primary { min-height: 44px; }

/* Task 52: post-order "Contact store" / "Request a refund" panel — the WA
   flow's only thank-you UI (see marketplace.js showOrderActions()). */
.balad-order-actions {
  position: fixed; right: 24px; bottom: 24px; z-index: 2005;
  display: none; flex-direction: column; gap: 10px;
  background: var(--navy-800); border: 1px solid rgba(212,168,75,.2);
  border-radius: var(--r-lg); padding: 44px 20px 20px; width: min(280px, calc(100vw - 48px));
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.balad-order-actions.open { display: flex; }
.balad-order-actions .oa-close {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  color: var(--gray-400); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; border: 1px solid rgba(255,255,255,.1); transition: var(--trans);
}
.balad-order-actions .oa-close:hover { color: var(--gold); border-color: var(--gold); }
.balad-order-actions .btn-whatsapp,
.balad-order-actions .btn-outline { width: 100%; justify-content: center; }

/* Task 52 (plugin-rendered, WC "thank you" page): bld_checkout_render_thankyou_
   wa_actions() in inc/checkout.php echoes raw .bld-btn/.bld-btn--wa/.bld-btn--
   wa-outline markup with no matching CSS anywhere in the theme — it rendered as
   an unstyled default link (BLD UX fix). Styled here to match the theme's own
   button language instead of inventing a new one: --wa mirrors .btn-whatsapp
   (primary "Contact store" action); --wa-outline mirrors the understated
   .btn-ghost language, not the gold .btn-outline, since "Request a refund" is a
   rare, slightly-negative action that must read as clearly subordinate. */
/* Reworked 2026-08-08. The previous pass made "Request a refund" an outline pill and left it at
   the same min-height and padding as the primary, sitting immediately beside it — so it was still
   a same-sized pill next to a bright green one, and still read as an equally normal next step.
   Rank is carried by size, shape and position long before colour, so recolouring alone could not
   fix it (and the owner reported it as still wrong).

   Now: store name on its own line, primary WhatsApp button below it, and the refund demoted to a
   quiet underlined text link on its own line — one tap, easy to find if you want it, not an
   invitation if you don't. Also removes the wrapping flex row that piled name + two pills into an
   unaligned stack on narrow screens. */
.bld-thankyou-store-actions { margin-top: 28px; display: flex; flex-direction: column; gap: 22px; }
.bld-thankyou-store-action { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bld-thankyou-store-name { font-family: var(--font-sans); font-size: .8rem; font-weight: 700; color: var(--white); }
.bld-thankyou-store-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* Deliberately NOT .bld-btn: it must not inherit the pill's min-height, padding or radius, which
   is exactly what kept the old version reading as a peer of the primary action. 44px of tappable
   height is preserved via padding + line-height so this stays comfortable on a phone without
   looking like a button. */
.bld-refund-link {
  display: inline-flex; align-items: center;
  padding: 11px 2px; line-height: 1.35;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 500;
  color: var(--gray-400, var(--gray-300));
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.25);
  transition: var(--trans);
}
.bld-refund-link:hover { color: var(--white); text-decoration-color: rgba(255,255,255,.6); }
.bld-refund-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 9px 20px; border-radius: var(--r-full);
  font-family: var(--font-sans); font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  transition: var(--trans); cursor: pointer;
}
.bld-btn--wa { background: var(--green-wa); color: #fff; }
.bld-btn--wa:hover { background: #1ebe5a; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,.3); }
/* .bld-btn--wa-outline removed 2026-08-08 — the refund action no longer renders as a pill, so
   nothing emits this class. Left in place it would be a dead override rule of exactly the kind
   BLD-040 tracks, and the next person would have no way to tell it was unused. */
.bld-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ─── Generic modal (list-store / review / delivery) ── */
.modal {
  position: fixed; top: 50%; left: 50%; z-index: 2010;
  width: min(560px, 94vw); max-height: 90vh; overflow-y: auto;
  background: var(--navy-800); border: 1px solid rgba(212,168,75,.2);
  border-radius: var(--r-xl); padding: 34px clamp(22px,4vw,40px);
  transform: translate(-50%, -46%) scale(.96); opacity: 0; visibility: hidden;
  transition: transform .4s var(--ease-spring), opacity .3s ease, visibility .3s;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.modal.open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.modal-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; color: var(--gray-400); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border: 1px solid rgba(255,255,255,.1); transition: var(--trans); }
.modal-close:hover { color: var(--gold); border-color: var(--gold); }
.modal .m-label { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--gold); margin-bottom: 10px; }
.modal h3 { font-family: var(--font-serif); font-size: clamp(1.4rem,3vw,2rem); color: var(--white); margin-bottom: 8px; }
.modal > p { font-size: .88rem; color: var(--gray-400); margin-bottom: 24px; line-height: 1.6; }
.form-row { margin-bottom: 16px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row label { display: block; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-300); margin-bottom: 7px; }
.field {
  width: 100%; padding: 12px 15px; background: var(--navy-600);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md);
  color: var(--white); font-size: .9rem; outline: none; transition: border-color var(--trans);
}
/* BLD-014: .field sits under the 16px iOS zoom-avoidance threshold (14.4px) —
   bump to 16px at mobile widths only, so focusing a field doesn't force an
   automatic viewport zoom on iOS Safari; desktop keeps the smaller size. */
@media (max-width: 768px) {
  .field { font-size: 16px; }
}
.field:focus { border-color: rgba(212,168,75,.6); }
textarea.field { resize: vertical; min-height: 96px; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892A4' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.modal .btn-primary, .modal .btn-whatsapp { width: 100%; justify-content: center; margin-top: 8px; }
.modal-success { text-align: center; padding: 20px 0; }
.modal-success .ok-badge { width: 62px; height: 62px; border-radius: 50%; background: rgba(37,211,102,.14); border: 1px solid rgba(37,211,102,.4); color: var(--green-wa); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.modal-success .ok-badge svg { width: 30px; height: 30px; }

/* Star rating picker (interactive) */
.star-pick { display: inline-flex; gap: 5px; margin-bottom: 6px; }
.star-pick button { padding: 5px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.2); transition: color .15s; }
.star-pick button svg { width: 30px; height: 30px; }
.star-pick button.on { color: var(--gold); }

/* ─── Stars (display) ───────────────────────────── */
.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--gold); }
.stars svg { width: 15px; height: 15px; }
.stars .s-empty { color: rgba(212,168,75,.28); }

/* ─── Reviews section ───────────────────────────── */
.reviews-summary {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center;
  padding: 32px; background: var(--navy-700); border: 1px solid rgba(255,255,255,.055);
  border-radius: var(--r-lg); margin-bottom: 36px;
}
.rs-score { text-align: center; }
.rs-score .rs-num { font-family: var(--font-serif); font-size: 3.6rem; font-weight: 700; color: var(--gold); line-height: 1; }
.rs-score .stars { margin: 8px 0 6px; }
.rs-score .rs-count { font-size: .8rem; color: var(--gray-400); }
.rs-bars { display: flex; flex-direction: column; gap: 8px; }
.rs-bar { display: flex; align-items: center; gap: 12px; font-size: .78rem; color: var(--gray-400); }
.rs-bar .rs-star-label { width: 42px; flex-shrink: 0; }
.rs-track { flex: 1; height: 7px; border-radius: 4px; background: var(--navy-500); overflow: hidden; }
.rs-fill { height: 100%; background: var(--gold); border-radius: 4px; }
.rs-bar .rs-pct { width: 34px; text-align: right; flex-shrink: 0; }

.reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.review-card { padding: 24px; background: var(--navy-700); border: 1px solid rgba(255,255,255,.055); border-radius: var(--r-lg); transition: border-color var(--trans), transform var(--trans); }
.review-card:hover { border-color: rgba(212,168,75,.2); transform: translateY(-3px); }
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--navy-500); flex-shrink: 0; }
.review-who { flex: 1; }
.review-who .rv-name { font-size: .88rem; font-weight: 700; color: var(--white); display: flex; align-items: center; gap: 7px; }
.review-who .rv-verified { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green-wa); background: rgba(37,211,102,.12); padding: 2px 7px; border-radius: var(--r-full); }
.review-who .rv-meta { font-size: .72rem; color: var(--gray-500); }
.review-card .stars { margin-bottom: 10px; }
.review-card p { font-size: .84rem; color: var(--gray-300); line-height: 1.6; }
.review-prod { margin-top: 12px; font-size: .74rem; color: var(--gray-500); }
.review-prod b { color: var(--gold); font-weight: 600; }
.reviews-actions { text-align: center; margin-top: 36px; }

/* ─── Post-delivery review request card (demo) ──── */
.delivery-demo-btn { position: fixed; left: 22px; bottom: 84px; z-index: 1400; }
@media (max-width:560px){ .delivery-demo-btn { bottom: 74px; left: 16px; padding: 10px 14px; font-size: .74rem; } }
.review-request-card { text-align: center; }
.rrc-truck { width: 64px; height: 64px; border-radius: 50%; background: rgba(212,168,75,.12); border: 1px solid rgba(212,168,75,.34); color: var(--gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.rrc-truck svg { width: 32px; height: 32px; }
.rrc-prod { display: flex; align-items: center; gap: 12px; text-align: start; padding: 14px; background: var(--navy-600); border-radius: var(--r-md); margin: 18px 0; }
.rrc-prod img { width: 50px; height: 50px; border-radius: var(--r-sm); object-fit: cover; }
.rrc-prod h5 { font-family: var(--font-sans); font-size: .86rem; color: var(--white); }
.rrc-prod span { font-size: .74rem; color: var(--gray-400); }

/* ─── Brand slideshow / marquee ─────────────────── */
.brand-slideshow { overflow: hidden; position: relative; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brand-track { display: flex; align-items: center; gap: 20px; width: max-content; animation: brandMarquee 42s linear infinite; }
.brand-slideshow:hover .brand-track { animation-play-state: paused; }
@keyframes brandMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brand-slide {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 190px; height: 118px; border-radius: var(--r-lg);
  background: var(--navy-700); border: 1px solid rgba(255,255,255,.06);
  transition: border-color var(--trans), transform var(--trans);
}
.brand-slide:hover { border-color: rgba(212,168,75,.32); transform: translateY(-4px); }
.brand-slide img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(212,168,75,.3); }
.brand-slide .bs-name { font-size: .82rem; font-weight: 700; color: var(--white); }
.brand-slide .bs-cat { font-size: .68rem; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }

/* Crossfade hero brand slideshow (JS-driven) */
.brand-fader { position: relative; height: 132px; }
.brand-fader .bf-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(20px,4vw,52px); flex-wrap: wrap; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.brand-fader .bf-slide.active { opacity: 1; pointer-events: auto; }
.brand-fader .bf-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.brand-fader .bf-item img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(212,168,75,.3); }
.brand-fader .bf-item span { font-size: .78rem; color: var(--gray-300); }
.brand-dots { display: flex; gap: 7px; justify-content: center; margin-top: 18px; }
.brand-dots button { position: relative; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); transition: var(--trans); }
.brand-dots button.on { background: var(--gold); width: 22px; border-radius: 4px; }
/* Enlarge the tappable area without changing the dot's visual size (BLD-038). */
.brand-dots button::before { content: ''; position: absolute; inset: -16px; }

/* ─── Generic carousel ──────────────────────────── */
.carousel { position: relative; }
.carousel-track {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; flex: 0 0 clamp(240px, 30%, 320px); }
.carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.carousel-nav { display: flex; gap: 10px; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(212,168,75,.4); color: var(--gold);
  display: flex; align-items: center; justify-content: center; transition: var(--trans);
}
.carousel-btn:hover { background: rgba(212,168,75,.1); border-color: var(--gold); transform: translateY(-2px); }
.carousel-btn:disabled { opacity: .3; cursor: not-allowed; transform: none; }
.carousel-btn svg { width: 18px; height: 18px; }

/* ─── Tabs ──────────────────────────────────────── */
.tabs-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tab-btn {
  padding: 12px 22px; font-size: .82rem; font-weight: 600; color: var(--gray-400);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--trans-fast); letter-spacing: .02em;
}
.tab-btn:hover { color: var(--white); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tabFade .4s ease; }
@keyframes tabFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ─── Explore-tab panel layout (BLD UX fix: this was missing entirely — the
   home page's .tab-products-grid/.tab-panel-inner had zero rules, so its
   .product-card children rendered as unconstrained block boxes at full
   container width instead of a grid. Ported from design-samples/balad-picks/
   05-tabbed, aligned to the theme's own 1100/768/480 breakpoints instead of
   the sample's 980/640 so it matches .products-grid's behavior elsewhere. ─── */
.tab-panel-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--gap);
  align-items: start;
}
.tab-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.tab-store-spotlight { height: 100%; }
.tab-store-spotlight .store-thumb { aspect-ratio: auto; height: 150px; }
@media (max-width: 1100px) {
  .tab-panel-inner { grid-template-columns: 1fr; }
  .tab-store-spotlight { max-width: 420px; }
}
@media (max-width: 768px) {
  .tab-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tab-products-grid { grid-template-columns: 1fr; }
  .tab-store-spotlight { max-width: none; }
}

/* ─── Bento grid ────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: var(--gap); }
.bento-cell { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.06); background: var(--navy-700); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; transition: border-color var(--trans), transform var(--trans); }
.bento-cell:hover { border-color: rgba(212,168,75,.24); transform: translateY(-4px); }
.bento-cell.col-2 { grid-column: span 2; }
.bento-cell.row-2 { grid-row: span 2; }
.bento-cell .bento-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.75); transition: transform .6s var(--ease-out), filter .6s; z-index: 0; }
.bento-cell:hover .bento-img { transform: scale(1.08); filter: brightness(.62) saturate(.9); }
.bento-cell.has-img::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(16,20,28,.92), transparent 70%); z-index: 1; }
.bento-cell > * { position: relative; z-index: 2; }
.bento-cell .bento-stat-num { font-family: var(--font-serif); font-size: clamp(2.4rem,5vw,3.4rem); font-weight: 700; color: var(--gold); line-height: 1; }
.bento-cell h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; color: var(--white); }
.bento-cell p, .bento-cell .bento-sub { font-size: .8rem; color: var(--gray-400); }

/* ─── Editorial split rows ──────────────────────── */
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; margin-bottom: clamp(56px,8vw,110px); }
.split-row:last-child { margin-bottom: 0; }
.split-row.flip .split-media { order: 2; }
.split-media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; }
.split-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) saturate(.85); transition: transform .7s var(--ease-out); }
.split-row:hover .split-media img { transform: scale(1.05); }
.split-copy .section-label { display: block; margin-bottom: 12px; }
.split-copy h2 { color: var(--white); margin-bottom: 16px; text-align: start; }
.split-copy p { margin-bottom: 22px; }

/* ─── Responsive additions ──────────────────────── */
@media (max-width: 1100px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-cell.col-2 { grid-column: span 2; }
}
@media (max-width: 768px) {
  .reviews-summary { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .split-row { grid-template-columns: 1fr; }
  .split-row.flip .split-media { order: 0; }
  .form-row.two { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 180px; }
  .bento-cell.col-2, .bento-cell.row-2 { grid-column: auto; grid-row: auto; }
}

/* ---------------------------------------------------------------------------
 * Vendor sign-in entry points (task 108).
 *
 * Deliberately quiet: "List your store" stays the one loud action in the header, because it is
 * the relevant one for almost every visitor. Sign-in is for people who already have an account
 * and are looking for it, so it needs to be findable rather than prominent.
 * ------------------------------------------------------------------------ */

.nav-vendor-login {
	color: var(--white, #fff);
	opacity: .78;
	font-size: .92rem;
	white-space: nowrap;
	/* 44px so the header link is a real tap target on mobile, not a text sliver (cf. BLD-008). */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: .5rem;
}

.nav-vendor-login:hover,
.nav-vendor-login:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

.nav-vendor-login:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

/* 768px to match base.css:1657, which hides .nav-cta and .nav-inner .nav-search at exactly this
 * width — this link sits in the same row and must disappear with them, or it is left stranded
 * beside the hamburger on mobile. Reusing the sibling's breakpoint rather than inventing another
 * is also the whole point of BLD-020: the dashboard and storefront already run on two disjoint
 * breakpoint scales, and a third helps nobody. The mobile drawer carries its own copy of this
 * link, so nothing is lost by hiding it here. */
@media (max-width: 768px) {
	.nav-inner > .nav-vendor-login {
		display: none;
	}
}

.cta-list-store__signin {
	margin-top: 1rem;
	font-size: .95rem;
	opacity: .8;
}

.cta-list-store__signin a {
	color: var(--gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}