/* ============================================================
   TastyHouse 2.0 — WordPress / WooCommerce overrides
   Loaded AFTER prototype.css. Adapts the prototype design system
   (which sat inside a fake browser "chrome" frame) to a real,
   document-flow WordPress theme.
   ============================================================ */

/* The prototype painted a grey canvas behind a device frame; in WP we
   want the warm marketplace background directly on the body. */
html, body { height: auto; }
body { background: var(--bg); color: var(--ink); }
#root { width: auto; height: auto; }

/* Sane reading width (prototype used an ultrawide 1980px container). */
:root { --maxw: 1340px; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; width: 100%; }

/* Elements that only existed in the prototype shell — never rendered here,
   but hidden defensively. (.mtabbar is real now — the mobile bottom tab bar.) */
.chrome, .chrome-bar, .demobar { display: none !important; }

/* Keep the sticky header below the WP admin bar when logged in. */
.admin-bar .thnav { top: 32px; }
@media (max-width: 782px){ .admin-bar .thnav { top: 46px; } }

/* Media defaults */
img { max-width: 100%; height: auto; }
.th-section { padding: 30px 0; }
/* Homepage listing rails: tighten the bottom gap on mobile. */
@media (max-width: 760px) { .th-home-rail { padding-bottom: 10px; } }
.th-pagewrap { min-height: 50vh; }
/* Page wraps set inline `padding:N 0` which wipes the .container horizontal gutters,
   letting content hit the screen edge (most visible on mobile). Re-assert the gutters. */
.container.th-pagewrap { padding-left: 28px !important; padding-right: 28px !important; }
@media (max-width: 720px) {
	.container.th-pagewrap { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- Header tweaks for real anchors ---- */
.thnav .logo, .thnav a { cursor: pointer; }
/* Horizontal PNG logo (header + footer). !important + max-width guard: WooCommerce
   pages load extra stylesheets whose img rules (height:auto / max-width:100%)
   otherwise out-rank this class and blow the logo up to its natural size. */
.th-logo-img { display: block; height: 40px !important; width: auto !important; max-width: none !important; }
@media (max-width: 720px){ .thnav .th-logo-img { height: 30px !important; } }
.thnav-inner { gap: 18px; }
.thnav .vtab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: var(--r-pill); cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.thnav .vtab:hover { background: var(--surface-2); color: var(--ink); }
.thnav .vtab.on { background: var(--primary-soft); color: var(--primary-700); }
.thnav .searchbar { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 9px 14px; flex: 1 1 0; min-width: 0; max-width: 460px; }
.thnav .searchbar input { border: 0; outline: 0; background: transparent; font: inherit; flex: 1; min-width: 0; color: var(--ink); }
.thnav .searchbar-go { display: inline-flex; align-items: center; justify-content: center; padding: 6px; }
.row { display: flex; } .row.gap10 { gap: 10px; } .row.acenter { align-items: center; }

/* Mobile nav toggle */
.th-navtoggle { display: none; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px; cursor: pointer; color: var(--ink-2); }
.th-navtoggle:hover { color: var(--primary-700); border-color: var(--primary); }
@media (max-width: 980px){
  /* logo (left) + action cluster (right) on one row; opened search drops below */
  .thnav-inner { flex-wrap: wrap; row-gap: 10px; }
  .thnav-actions { gap: 6px; }

  /* verticals open as a dropdown anchored under the whole header */
  .thnav .vtabs { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); flex-direction: column; padding: 10px 16px; gap: 4px; box-shadow: var(--shadow); max-height: 72vh; overflow-y: auto; }
  .thnav .vtabs.open { display: flex; }
  .thnav .vtabs .vlabel { display: inline !important; }
  .th-navtoggle, .th-searchtoggle { display: inline-flex; }

  /* search bar collapses to the toggle icon; opens as its own full-width row */
  .thnav .searchbar { display: none; order: 10; flex-basis: 100%; max-width: none; }
  .thnav .searchbar.open { display: flex; }
}
/* Phones: keep page content (and the footer) clear of the fixed bottom tab bar */
@media (max-width: 720px){
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .th-footer { margin-bottom: 0 !important; }
}

/* Mobile verticals strip (home) — a scrollable row of rounded card chips right
   under the header: colored icon on top, label underneath. Desktop keeps the
   same tabs inside the header, so the strip only shows ≤980px. */
.th-vstrip { display: none; }
@media (max-width: 980px){
  .th-vstrip { display: block; }
  .th-vstrip-track { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 12px 8px 4px; }
  .th-vstrip-track::-webkit-scrollbar { display: none; }
  /* auto margins = "safe" centering: the row is centred whenever it fits, but if
     it ever overflows it stays left-anchored and scrollable (nothing clipped) —
     justify-content:center would crop the first chips instead. */
  .th-vstrip-item:first-child { margin-left: auto; }
  .th-vstrip-item:last-child { margin-right: auto; }
  .th-vstrip-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    min-width: 70px; padding: 12px 10px 12px; flex-shrink: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-sm);
    font-weight: 600; color: var(--ink); text-align: center; white-space: nowrap;
  }
  .th-vstrip-item:active { transform: scale(.96); }
  /* every icon gets the exact same 20×20 box (svg or uploaded image alike) */
  .th-vstrip-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
  .th-vstrip-ic svg, .th-vstrip-ic img { width: 20px; height: 20px; object-fit: contain; }
  /* the globe glyph fills its whole 24-unit viewBox while the other glyphs span
     ~16 units, so at an equal box it reads bigger — draw it smaller to match */
  .th-vstrip-ic.is-globe svg { width: 16px; height: 16px; }
  /* negative side margins let long labels (Restaurants / Multi-Stores) borrow the
     chip's 10px side padding instead of widening the chip past 70px */
  .th-vstrip-lbl { line-height: 1; font-size: 10px; margin: 0 -7px; }
}

/* ---- WooCommerce: connect-only adaptation ---- */
/* Hide cart / checkout chrome — this is a connect-only marketplace (BR-9). */
.woocommerce-cart-notice, .cart, .added_to_cart,
.woocommerce-mini-cart, .widget_shopping_cart,
.single_add_to_cart_button, form.cart .quantity { display: none !important; }

/* Map WooCommerce loop & single onto the prototype card / detail system. */
ul.products { list-style: none; margin: 0; padding: 0; }
.woocommerce ul.products li.product { margin: 0; }

/* Connect button (replaces add-to-cart) */
.th-connect { display: flex; flex-direction: column; gap: 10px; }
.th-connect .btn.wa, .th-connect .btn.ghost { width: 100%; justify-content: center; }
.th-connect-row { display: flex; gap: 10px; }
.th-connect-row .btn { flex: 1; justify-content: center; }
/* Narrow phones: shrink the storefront connect button labels so they fit. */
@media (max-width: 400px) {
  .vsf-contact .th-connect .btn { font-size: 10.5px; }
}
/* Storefront business-hours times: shrink on small screens so the 7-day row fits. */
@media (max-width: 560px) {
  .vsf-day-t { font-size: 8px; }
}

/* Form controls must never force a grid/flex track wider than the screen —
   without this, side-by-side inputs push the whole dashboard past the viewport
   and .dmain's overflow-x:hidden clips the banner + fields on phones. */
.input, .select, .textarea { min-width: 0; max-width: 100%; }
/* Two-column field rows (.th-grid2) stack on phones. Inline styles set the
   columns, so override with !important; never touch display (JS toggles it). */
@media (max-width: 600px) {
  .th-grid2 { grid-template-columns: 1fr !important; }
  /* Save / View storefront buttons: two nowrap lg buttons side-by-side are wider
     than a phone (and get clipped). Stack them, left-aligned to their own width. */
  .th-shop-actions { flex-direction: column; align-items: flex-start; }

  /* Listing row actions (View / Edit / Deactivate / Delete): drop the text and
     show colour-coded icon-only buttons so the row fits — edit teal, delete red. */
  .th-listing-actions .th-blabel { display: none; }
  .th-listing-actions .btn { padding: 8px; width: 34px; height: 34px; gap: 0; }
  .th-listing-actions .btn svg { margin: 0; }

  /* Banner overlay controls (Change / Add / Remove banner) go icon-only too, so
     they don't crowd the banner on narrow phones. Shared .th-iconbtn class. */
  .th-iconbtn .th-blabel { display: none; }
  .th-iconbtn.btn { padding: 8px; width: 34px; height: 34px; gap: 0; }
  .th-iconbtn.btn svg { margin: 0; }
}

/* Contact lock (lapsed subscription — BR-3 / FR-CON-03) */
.contact-lock { position: relative; border-radius: var(--r); overflow: hidden; }
.contact-lock-blur { filter: blur(6px); pointer-events: none; user-select: none; opacity: .55; }
.contact-lock-veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 18px; background: rgba(251,247,242,.55); }
.contact-lock-badge { width: 40px; height: 40px; border-radius: 50%; background: var(--warning-soft); color: var(--warning); display: grid; place-items: center; }
.contact-lock-title { font-weight: 800; font-family: var(--font-display); }
.contact-lock-sub { font-size: 12.5px; color: var(--ink-2); max-width: 34ch; }

/* Vertical hero cards (home) */
.th-verticals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 980px) { .th-verticals { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .th-verticals { grid-template-columns: 1fr; } }
.th-vcard { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; color: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.th-vcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.62)); }
.th-vcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th-vcard .vc-body { position: relative; z-index: 2; }
.th-vcard .vc-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.th-vcard .vc-tag { font-size: 12.5px; opacity: .92; margin-top: 3px; }
.th-vcard:hover img { transform: scale(1.05); transition: transform .4s ease; }

/* Hero band */
.th-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 360px; display: flex; align-items: center; margin-top: 22px; box-shadow: var(--shadow); }
.th-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,20,12,.78), rgba(30,20,12,.18)); }
.th-hero .hero-inner { position: relative; z-index: 2; padding: 40px 44px; max-width: 620px; color: #fff; }
.th-hero .hero-inner h1 { font-size: clamp(28px,4vw,46px); color: #fff; }
.th-hero .hero-inner p { font-size: 17px; color: rgba(255,255,255,.9); margin: 12px 0 20px; }

/* Section heads */
.th-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 0 18px; }
.th-shead h2 { font-size: clamp(22px,2.4vw,30px); }
.th-shead .sub { color: var(--ink-3); font-size: 14.5px; margin-top: 4px; }

/* Generic content prose (about/terms/faq pages) */
.th-prose { max-width: 80ch; }
.th-prose h2 { font-size: 22px; margin: 26px 0 10px; }
.th-prose h3 { font-size: 17px; margin: 20px 0 8px; }
.th-prose p { margin: 0 0 14px; color: var(--ink-2); line-height: 1.65; }
.th-prose ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); line-height: 1.7; }

/* Pricing cards */
.th-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: start; }
.th-plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); }
.th-plan.featured { border-color: var(--accent-700); box-shadow: var(--shadow); }
.th-plan .pp { font-family: var(--font-display); font-weight: 800; font-size: 34px; }
.th-plan .feat { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 9px; }
.th-plan .feat li { display: flex; gap: 9px; font-size: 14px; color: var(--ink-2); }
.th-tier { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.th-tier .tier { border: 1px solid var(--line-2); border-radius: var(--r); padding: 8px 12px; font-size: 13px; cursor: pointer; }
.th-tier .tier.best { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-700); font-weight: 700; }

/* Step / wizard (onboarding) */
.th-steps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.th-step { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.th-step .n { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; font-size: 12px; }
.th-step.on { border-color: var(--primary); color: var(--primary-700); background: var(--primary-soft); }
.th-step.done { border-color: var(--secondary); color: var(--secondary-700); background: var(--secondary-soft); }
.th-step.done .n, .th-step.on .n { background: currentColor; color: #fff; }

/* Forms */
.th-form { display: grid; gap: 16px; max-width: 560px; }
.th-form.cols { grid-template-columns: 1fr 1fr; }
.th-form .field { display: flex; flex-direction: column; gap: 6px; }
.th-form label { font-weight: 600; font-size: 13.5px; }
.th-form input, .th-form select, .th-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); font: inherit; background: var(--surface); color: var(--ink); }
.th-form input:focus, .th-form select:focus, .th-form textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.th-form .full { grid-column: 1 / -1; }
@media (max-width: 640px){ .th-form.cols { grid-template-columns: 1fr; } }

/* Dashboard / admin layout */
.th-console { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: start; }
.th-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; position: sticky; top: 90px; }
.th-side a { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--r); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.th-side a:hover { background: var(--surface-2); }
.th-side a.on { background: var(--primary-soft); color: var(--primary-700); }
.th-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; }
.th-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.th-stat .sv { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--primary-700); }
.th-stat .sl { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.th-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.th-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 10px 12px; border-bottom: 2px solid var(--line-2); }
.th-table td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
@media (max-width: 860px){ .th-console { grid-template-columns: 1fr; } .th-side { position: static; } }

/* Dashboard tables on mobile: the wrapping panel usually carries an inline
   overflow:hidden, which clips the right-hand action buttons on small screens.
   Instead, let the panel scroll sideways and keep rows on one readable line. */
@media (max-width: 820px) {
	.panel:has(.th-table thead) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
	.th-table:has(thead) { min-width: 660px; font-size: 13px; }
	.th-table:has(thead) th { padding: 9px 10px; white-space: nowrap; }
	.th-table:has(thead) td { padding: 10px; white-space: nowrap; vertical-align: middle; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
	.th-table:has(thead) td:last-child { max-width: none; overflow: visible; }
	.th-table:has(thead) td > .row { flex-wrap: nowrap !important; }
	.th-table:has(thead) .btn.sm { padding: 6px 10px; font-size: 12px; flex-shrink: 0; }
}

/* Empty / notice states */
.th-empty { text-align: center; padding: 60px 20px; }
.th-note { display: flex; gap: 12px; background: var(--info-soft); border: 1px solid rgba(45,111,224,.28); border-radius: var(--r); padding: 14px 16px; font-size: 14px; color: var(--ink-2); }
.th-note.key { background: var(--primary-soft); border-color: rgba(242,106,27,.3); }
.th-note.warn { background: var(--warning-soft); border-color: rgba(224,138,30,.35); }
.th-note.ok { background: var(--secondary-soft); border-color: var(--secondary); color: var(--secondary-700); }

/* Breadcrumb */
.th-crumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); margin: 18px 0 10px; }
.th-crumb a:hover { color: var(--primary-700); }
/* Mobile: tighten the breadcrumb spacing (some crumbs set inline top margins). */
@media (max-width: 720px) {
  .th-crumb { margin-top: 0 !important; margin-bottom: 14px !important; }
}

/* Category chips */
.th-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 22px; }
.th-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-pill); padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color .14s, color .14s, background .14s; }
.th-chip:hover { border-color: var(--primary); color: var(--primary-700); }
.th-chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Listing grid: 5 cards per row on desktop (→ 15 per page = 3 rows). */
@media (min-width: 1080px) { .lgrid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 760px) and (max-width: 1079px) { .lgrid { grid-template-columns: repeat(3, 1fr); } }

/* ===== Sub-tabs (Service Requests etc.) — same pill style as the admin tabs ===== */
.th-subtabs { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px; margin: 0 0 20px; flex-wrap: wrap; max-width: 100%; }
.th-subtab { background: transparent; border: none; border-radius: var(--r-pill); padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; line-height: 1; transition: background .18s, color .18s, box-shadow .18s; }
.th-subtab:hover { color: var(--ink); }
.th-subtab.on { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(242,106,27,.32); }
.th-subtab-n { background: rgba(0,0,0,.06); color: var(--ink-2); border-radius: var(--r-pill); font-size: 11px; font-weight: 800; padding: 1px 7px; min-width: 18px; text-align: center; }
.th-subtab.on .th-subtab-n { background: rgba(255,255,255,.28); color: #fff; }

/* ===== Select2 (themed orange) — applied platform-wide to .select / .orderby ===== */
.th-select2.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
	height: auto; min-height: 42px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
	background: var(--surface); display: flex; align-items: center; padding: 8px 32px 8px 14px; font-size: 15px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 1.35; padding: 0; font-weight: 500; font-size: 15px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ink-3); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--ink-3) transparent transparent; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
/* compact variant for the shop/search sort dropdown */
.th-select2-sort.select2-container .select2-selection--single { min-height: 0; border-radius: var(--r-pill); padding: 9px 32px 9px 16px; font-size: 13.5px; font-weight: 600; }
/* dropdown */
.th-select2-drop.select2-dropdown { border: 1.5px solid var(--primary); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); margin-top: 4px; }
.th-select2-drop .select2-results__option { font-size: 14px; padding: 9px 13px; color: var(--ink-2); }
.th-select2-drop .select2-results__option--highlighted[aria-selected] { background: var(--primary); color: #fff; }
.th-select2-drop .select2-results__option[aria-selected=true] { background: var(--primary-soft); color: var(--primary-700); font-weight: 700; }
.th-select2-drop .select2-search--dropdown { padding: 8px; }
.th-select2-drop .select2-search--dropdown .select2-search__field { border: 1.5px solid var(--line-2); border-radius: 8px; padding: 8px 10px; }
.th-select2-drop .select2-search--dropdown .select2-search__field:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
/* Global fallback: theme EVERY Select2 dropdown orange, even ad-hoc inits that
   don't pass our dropdownCssClass. (Loaded after select2.css, so this wins.) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--primary); color: #fff; }
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true] { background: var(--primary-soft); color: var(--primary-700); font-weight: 600; }
/* When the control lives INSIDE the field's <label> (e.g. the Select2 country
   picker), keep the label text on top and the control full-width below it —
   matching sibling-input fields. */
.field > label .select,
.field > label .input,
.field > label .select2-container { display: block; width: 100%; margin-top: 7px; }
.field > label .select2-container { width: 100% !important; }

/* ===== Shop / search results toolbar + sort ===== */
.th-shop-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 4px 0 18px; }
.th-orderby-form { margin: 0; }
.woocommerce-result-count { margin: 0; color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
/* Theme the sort dropdown (our search page + WooCommerce catalog ordering) */
select.orderby,
.woocommerce-ordering select.orderby {
	appearance: none; -webkit-appearance: none;
	border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink);
	border-radius: var(--r-pill); padding: 10px 38px 10px 16px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
select.orderby:focus,
.woocommerce-ordering select.orderby:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.woocommerce-ordering { margin: 0; }

/* ===== Pagination (WooCommerce + the_posts_pagination) ===== */
.th-pagination .nav-links,
.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul {
	display: flex !important; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
	list-style: none; margin: 0; padding: 0; border: 0 !important; margin-top: 40px !important;
}
.woocommerce-pagination ul li { margin: 0; border: 0; border:none !important; }
.th-pagination a.page-numbers,
.th-pagination span.page-numbers,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: inline-flex !important; align-items: center !important; gap: 4px !important; justify-content: center !important;
	min-width: 42px !important; height: 42px !important; padding: 0 13px !important;
	border: 1.5px solid var(--line-2) !important; border-radius: var(--r-pill) !important;
	background: var(--surface) !important; color: var(--ink-2) !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1 !important; text-decoration: none !important;
	transition: border-color .14s, color .14s, background .14s !important;
}
.th-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover { border-color: var(--primary); color: var(--primary-700); background: var(--primary-soft); }
.th-pagination span.page-numbers.current,
.th-pagination a.page-numbers.current,
.woocommerce-pagination span.page-numbers.current,
.woocommerce-pagination li span.current { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.th-pagination span.page-numbers.dots,
.woocommerce-pagination span.page-numbers.dots { border-color: transparent; background: transparent; }
.th-pagination .page-numbers.prev svg { transform: rotate(180deg); }
.th-pagination h2.screen-reader-text, .th-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Badges already from prototype (.badge). Toast */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 9px; z-index: 9999; box-shadow: var(--shadow-lg); font-weight: 600; font-size: 14px; }
.toast .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--whatsapp); display: grid; place-items: center; }

/* Footer link cursor */
footer.th-footer .footcol div[role="link"], footer.th-footer a { cursor: pointer; }

/* WooCommerce notices restyle */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--r); border: 1px solid var(--line-2); padding: 14px 16px; list-style: none; }
.woocommerce-message { background: var(--success-soft); }

/* Single listing layout */
.th-single { display: grid; grid-template-columns: 1.3fr 1fr; gap: 34px; align-items: start; }
.th-single .gallery img { width: 100%; border-radius: var(--r-lg); }
@media (max-width: 900px){ .th-single { grid-template-columns: 1fr; } }
.th-attrs { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.th-attrs li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-size: 13px; }
.th-attrs li b { display: block; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; font-weight: 700; }

/* Modal */
.th-modal-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(30,20,12,.5); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.th-modal { background: var(--surface); border-radius: var(--r-xl); width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); }
.th-modal .input, .th-modal .select, .th-modal .textarea { width: 100%; }
.th-modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; color: #fff; }
.th-modal-head.ink { background: var(--ink); }
.th-modal-head.wa { background: var(--whatsapp-700, #128C4B); }
.th-modal-body { padding: 22px; }
.th-modal-x { background: rgba(255,255,255,.16); color: #fff; border: 0; width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.th-modal-x:hover { background: rgba(255,255,255,.28); }
.th-modal .field { display: block; margin-bottom: 14px; }
.th-modal .field > span.lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.th-modal .field .err { color: var(--danger); font-size: 12px; margin-top: 4px; }
.th-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Mobile: collapse two-up form grids and fix the availability (hours) rows,
   which otherwise overflow with a fixed day label + two fixed-width time inputs. */
@media (max-width: 600px) {
	.th-grid2 { grid-template-columns: 1fr !important; }
	.th-hours-grid { gap: 14px !important; }
	.th-hours-row { gap: 8px 10px !important; }
	.th-hours-row > span:first-child { width: 100% !important; }
	.th-hours-row .input[type="time"] { flex: 1 1 90px; min-width: 0; max-width: none !important; }
}

/* Form controls (used in modals + account) */
.input, .select, .textarea { border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 11px 13px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); }
.input.err, .select.err, .textarea.err { border-color: var(--danger); }
.textarea { min-height: 70px; resize: vertical; }

/* In-app chat thread (modal + dashboard) */
.th-chatbox { display: flex; flex-direction: column; gap: 10px; height: 300px; overflow-y: auto; padding: 16px; background: var(--surface-2); }
.th-chat-input { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--line); }
.th-chat-input .input { flex: 1; }
.th-threadlist { overflow-y: auto; }
.chatconv .th-chatbox { flex: 1; height: auto; }

/* ===== Single listing detail (mirrors prototype ListingDetail) ===== */
.th-ldetail-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.th-ldetail-main { min-width: 0; }
.th-ldetail-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; }

/* Gallery */
.th-gallery { position: relative; }
/* Share / Save circular icon buttons floating over the top-right of the image section. */
.th-gallery-actions { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 8px; }
.th-gact { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink-3); cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s ease, color .15s ease, transform .1s ease; }
.th-gact:hover { background: #fff; transform: translateY(-1px); }
.th-gact:active { transform: translateY(0); }
.th-gact svg { width: 18px; height: 18px; }
.th-gact.th-fav.on { color: var(--primary); }

/* Share popup — a row of circular brand icons (icon-only). */
.th-share-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.th-share-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 56px; padding: 6px 2px; border: 0; background: none; cursor: pointer; text-decoration: none; }
.th-share-ico { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; overflow: hidden; transition: transform .12s ease; }
.th-share-ico svg { width: 24px; height: 24px; }
.th-share-ico.logo { background: none !important; }
.th-share-ico.logo svg { width: 100%; height: 100%; }
.th-share-opt:hover .th-share-ico { transform: scale(1.07); }
.th-share-cap { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.th-share-opt:hover .th-share-cap { color: var(--ink); }
.th-share-copy-row { display: flex; gap: 8px; margin-top: 20px; }
.th-share-copy-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; height: 44px; font-size: 13.5px; color: var(--ink-2); background: var(--surface-2); }
.th-share-copy-row .th-share-copy { flex: 0 0 auto; }

.th-gallery-main { border-radius: 22px; overflow: hidden; height: 500px; position: relative; display: grid; place-items: center; }
.th-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Multi-image gallery slider (reuses the .hslider JS via data-th-slider). */
.th-gslider { position: relative; border-radius: 22px; overflow: hidden; height: 500px; background: var(--surface-2); box-shadow: var(--shadow-sm); }
.th-gslider .hslider-track { height: 100%; }
.th-gslide { flex: 0 0 100%; height: 100%; }
.th-gslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Listing gallery: drop the dot indicator on large screens (arrows remain); keep it on small screens. */
@media (min-width: 900px) { .th-gslider .hslider-dots { display: none; } }
/* Keep the gallery's prev/next arrows on phones too — the shared .hslider-arrow
   rule hides them ≤560px (that's for the hero slider), but the listing gallery keeps them. */
@media (max-width: 560px) { .th-gslider .hslider-arrow { display: grid; } }
.th-gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.th-gallery-thumb { width: 88px; height: 66px; border-radius: 12px; overflow: hidden; cursor: pointer; padding: 0; border: 1px solid var(--line); background: none; }
.th-gallery-thumb.on { outline: 3px solid var(--primary); outline-offset: -1px; border-color: transparent; }
.th-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Locked social links (subscription inactive) */
.th-social-locked { opacity: .55; cursor: not-allowed; user-select: none; pointer-events: none; }

/* ===== Listing image lightbox ===== */
/* Gallery magnifier button (bottom-right) — distinct from the portfolio .th-lb-open.
   Shown on large screens (where the slider dots are hidden); hidden on small
   screens (where the dots act as the indicator and a tap opens the lightbox). */
.th-gzoom { position: absolute; bottom: 14px; right: 14px; z-index: 3; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .12s; }
.th-gzoom:hover { background: rgba(0,0,0,.78); transform: scale(1.06); }
@media (max-width: 899.98px) { .th-gzoom { display: none; } }
.th-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; padding: 44px; }
.th-lb.on { display: flex; animation: th-lb-in .18s ease; }
@keyframes th-lb-in { from { opacity: 0; } to { opacity: 1; } }
.th-lb-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 12px 44px rgba(0,0,0,.55); user-select: none; -webkit-user-drag: none; }
.th-lb-close, .th-lb-nav { position: absolute; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.th-lb-close:hover, .th-lb-nav:hover { background: rgba(255,255,255,.28); }
.th-lb-close { top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; }
.th-lb-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; }
.th-lb-nav.prev { left: 20px; }
.th-lb-nav.next { right: 20px; }
.th-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; font-weight: 600; background: rgba(0,0,0,.45); padding: 5px 13px; border-radius: 999px; letter-spacing: .03em; }
@media (max-width: 640px) {
	.th-lb { padding: 14px; }
	.th-lb-nav { width: 42px; height: 42px; }
	.th-lb-nav.prev { left: 8px; }
	.th-lb-nav.next { right: 8px; }
	.th-lb-close { top: 12px; right: 12px; }
}

/* Content sections */
.th-ldetail-section { margin-top: 30px; }
.th-ldetail-section > h3 { font-size: 20px; margin-bottom: 12px; }
.th-desc { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }

/* Rail card */
.th-rail-card { padding: 22px; }
.th-rail-card .th-rail { margin-top: 0; }
.th-rail .th-rail-actions .btn { width: 100%; justify-content: center; }
.th-vendor-ava { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; color: #fff; font-weight: 800; font-size: 22px; background: linear-gradient(135deg, hsl(var(--h,20) 70% 62%), hsl(calc(var(--h,20) + 24) 72% 52%)); }
.th-vendor-ava.has-logo { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }

.th-ldetail-related { margin-top: 48px; }

/* ===== Dashboard / admin shell (prototype .dash) ===== */
.appmain .dash { margin: 0; }
.dmain .th-cards { margin-bottom: 0; }
.dmain .stat .v { color: var(--ink); }
/* let dashboard tables/cards breathe */
.dmain h1, .dmain h2 { margin-top: 0; }

/* Sidebar live nav badges (vendor / rider hubs) */
.dside .ditem-badge {
	margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
	background: rgba(255,255,255,.16); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
}
.dside .ditem-badge[hidden] { display: none; }
/* Active tab is orange — flip the badge to solid white with primary text. */
.dside .ditem.on .ditem-badge { background: #fff; color: var(--primary-700); }
/* One-shot bump when the count goes up. */
.dside .ditem-badge.bump { animation: thBadgeBump .55s cubic-bezier(.2,.7,.3,1.4); }
/* Continuous attention pulse on alert tabs (Service Requests / Available jobs). */
.dside .ditem-badge.live { animation: thBadgePulse 1.9s ease-in-out infinite; }
.dside .ditem-badge.live.bump { animation: thBadgeBump .55s cubic-bezier(.2,.7,.3,1.4), thBadgePulse 1.9s ease-in-out infinite .55s; }
.dside .ditem.on .ditem-badge.live { animation: thBadgePulseWhite 1.9s ease-in-out infinite; }
@keyframes thBadgeBump { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes thBadgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,106,27,.55); } 70% { box-shadow: 0 0 0 7px rgba(242,106,27,0); } }
@keyframes thBadgePulseWhite { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .dside .ditem-badge.live, .dside .ditem-badge.bump { animation: none; } }

/* ===== Dashboard mobile menu: hamburger + offcanvas sidebar (replaces the top scroll strip) ===== */
.dash-mobilebar { display: none; }
.dside-close { display: none; }
.dash-scrim { display: none; }
@media (max-width: 900px) {
	/* Top bar with the hamburger (injected into .dmain) */
	.dash-mobilebar { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
	.dash-burger { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 11px; display: grid; place-items: center; cursor: pointer; color: var(--ink); flex-shrink: 0; transition: background .15s; }
	.dash-burger:hover { background: var(--surface-2); }
	.dash-mobilebar-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink); }

	/* Sidebar → slide-in drawer (overrides the prototype's horizontal scroll strip) */
	.dside { position: fixed !important; top: 0; left: 0; bottom: 0; width: 286px; max-width: 84vw; z-index: 1300;
		flex-direction: column !important; overflow-y: auto !important; max-height: none !important;
		padding: 20px 14px !important; gap: 4px !important; transform: translateX(-100%); transition: transform .26s ease; }
	.dside.open { transform: translateX(0); box-shadow: 0 18px 60px rgba(0,0,0,.5); }
	.dside .ditem { white-space: normal; }
	.dside .ditem .badge, .dside .ditem-badge { display: inline-flex !important; }
	.dside .dside-foot { display: block !important; }

	/* Close (×) button inside the drawer */
	.dside-close { display: grid !important; place-items: center; position: absolute; top: 14px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }
	.dside-close:hover { background: rgba(255,255,255,.24); }

	/* Backdrop */
	.dash-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1290; opacity: 0; transition: opacity .26s ease; }
	.dash-scrim.show { opacity: 1; }
	.dash-scrim[hidden] { display: none; }
	body.dash-menu-open { overflow: hidden; }
}

/* ===== My Profile (account details) ===== */
.th-profile-rows { display: flex; flex-direction: column; }
.th-profile-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.th-profile-row:last-child { border-bottom: 0; }
.th-profile-row .k { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.th-profile-row .v { font-weight: 600; color: var(--ink); text-align: right; word-break: break-word; }

/* ===== Onboarding (stepper rail + form) ===== */
.th-onb-grid { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; }
.th-onb-rail { padding: 22px; position: sticky; top: 90px; }
.th-onb .stepper { display: flex; flex-direction: column; gap: 4px; }
.th-onb .th-step { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border: 0; background: none; border-radius: var(--r); font-size: 14px; font-weight: 600; color: var(--ink-3); }
.th-onb .th-step .th-step-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; font-size: 12.5px; flex-shrink: 0; color: var(--ink-3); }
.th-onb .th-step.on { color: var(--primary-700); }
.th-onb .th-step.on .th-step-dot { background: var(--primary); color: #fff; }
.th-onb .th-step.done { color: var(--secondary-700); }
.th-onb .th-step.done .th-step-dot { background: var(--secondary); color: #fff; }
@media (max-width: 820px) {
	.th-onb-grid { grid-template-columns: 1fr; }
	/* On phones, show the form first and drop the step-indicator rail below it —
	   it reads better than a tall stepper panel pushing the form down. */
	.th-onb-main { order: 1; }
	.th-onb-rail { position: static; order: 2; }
	.th-onb .stepper { flex-direction: row; flex-wrap: wrap; }
}

/* ===== WooCommerce reviews (listing detail) ===== */
.th-reviews .woocommerce-Reviews-title,
.th-reviews #comments > h2:first-child { display: none; } /* we render our own "Reviews" heading */
#reviews .commentlist { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#reviews .commentlist li.review, #reviews .commentlist li.comment { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
#reviews .comment_container { display: flex; gap: 12px; align-items: flex-start; }
#reviews .comment_container img.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
#reviews .comment-text { flex: 1; min-width: 0; background: var(--surface) }
#reviews .comment-text .meta { font-size: 13px; color: var(--ink-3); margin: 2px 0 6px; }
#reviews .comment-text .woocommerce-review__author { color: var(--ink); font-size: 14.5px; }
#reviews .comment-text .description p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
#reviews .star-rating { color: var(--accent); margin-bottom: 4px; }
#reviews .woocommerce-noreviews { color: var(--ink-3); margin-bottom: 16px; }

#review_form_wrapper { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
#reviews .comment-reply-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; display: block; margin-bottom: 2px; }
#reviews .comment-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
#reviews .comment-form > p { margin: 0; }
#reviews .comment-form label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
#reviews .comment-form input[type=text], #reviews .comment-form input[type=email], #reviews .comment-form input[type=url], #reviews .comment-form textarea {
	width: 100%; border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 11px 13px; font: inherit; background: var(--surface); color: var(--ink); }
#reviews .comment-form input:focus, #reviews .comment-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
#reviews .comment-form textarea { min-height: 110px; resize: vertical; }
#reviews .comment-form-rating .stars { display: inline-flex; gap: 3px; font-size: 20px; }
#reviews .comment-form-rating select { border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 8px 10px; font: inherit; }
/* !important to beat WooCommerce's `.woocommerce #respond input#submit`. */
#reviews .form-submit .submit, #reviews .comment-form .submit,
#reviews #respond input#submit, .th-reviews #respond input#submit,
.woocommerce #review_form #respond input#submit, .woocommerce #reviews #respond input#submit {
	background: var(--primary) !important; color: #fff !important; border: 0 !important;
	border-radius: var(--r-pill) !important; padding: 12px 24px !important; font-weight: 700 !important;
	font-size: 14px !important; cursor: pointer; width: auto; text-shadow: none; transition: background .15s;
}
#reviews .form-submit .submit:hover, #reviews #respond input#submit:hover, .th-reviews #respond input#submit:hover,
.woocommerce #review_form #respond input#submit:hover, .woocommerce #reviews #respond input#submit:hover { background: var(--primary-600) !important; }
#reviews .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-3); }
#reviews .comment-form-cookies-consent input { width: auto; }

/* ===== Header account menu (logged-in) ===== */
.th-usermenu { position: relative; display: inline-flex; }
.th-avatar { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--primary), var(--accent-700)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px; display: grid; place-items: center; }
.th-avatar:hover { box-shadow: 0 0 0 3px var(--primary-soft); }
.th-usermenu-pop { position: absolute; top: calc(100% + 10px); right: 0; width: 244px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s; z-index: 500; }
.th-usermenu:hover .th-usermenu-pop, .th-usermenu:focus-within .th-usermenu-pop { opacity: 1; visibility: visible; transform: translateY(0); }
/* hover bridge so the menu doesn't close in the gap */
.th-usermenu-pop::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.th-um-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.th-um-name { font-weight: 700; font-size: 14.5px; }
.th-um-mail { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-um-items { display: flex; flex-direction: column; gap: 1px; }
.th-um-items a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.th-um-items a:hover { background: var(--surface-2); color: var(--ink); }
.th-um-items a svg { color: var(--ink-3); }
.th-um-logout { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 11px !important; color: var(--danger) !important; }
.th-um-logout svg { color: var(--danger) !important; }

/* ===== Card-row sliders (Swiper) ===== */
.th-rail-swiper { position: relative; padding: 4px 2px 6px; }
.th-rail-swiper .swiper-slide { height: auto; }
.th-rail-swiper .swiper-slide > .lcard { height: 100%; }

/* Pre-init layout: lay slides out as the final row so there's no
   "one giant card" flash before Swiper takes over. Swiper adds
   .swiper-initialized to the container once ready, dropping these rules. */
.th-rail-swiper:not(.swiper-initialized) { overflow: hidden; }
.th-rail-swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 16px; }
.th-rail-swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 auto; width: calc((100% - 4 * 16px) / 5); }
@media (max-width: 1320px) { .th-rail-swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 1040px) { .th-rail-swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 760px)  { .th-rail-swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 16px) / 2); } }
@media (max-width: 560px)  { .th-rail-swiper:not(.swiper-initialized) .swiper-slide { width: 80%; } }

/* ===== Preloader ===== */
#th-preloader { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: grid; place-items: center; transition: opacity .4s ease, visibility .4s ease; }
#th-preloader.hide { opacity: 0; visibility: hidden; }
.th-preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.th-preloader-inner svg { animation: th-pre-bounce 1.1s ease-in-out infinite; }
.th-preloader-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--primary-soft); border-top-color: var(--primary); animation: th-pre-spin .8s linear infinite; }
@keyframes th-pre-spin { to { transform: rotate(360deg); } }
/* Inline button spinner (reuses the preloader keyframes). Sits inside a .btn
   while an async action is in flight; currentColor so it matches the button. */
.th-btn-spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: .85; animation: th-pre-spin .7s linear infinite; vertical-align: middle; }
.btn.is-busy { pointer-events: none; opacity: .85; }
@keyframes th-pre-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ===== Themed auth (login / register) ===== */
.th-authwrap { display: grid; place-items: center; min-height: 56vh; }
.th-authcard { width: 100%; max-width: 420px; padding: 30px 28px; }
.th-auth-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; }
.th-auth-head h1 { font-size: 24px; }
.th-auth-form { display: flex; flex-direction: column; gap: 14px; }
.th-auth-form .field { display: flex; flex-direction: column; gap: 6px; }
.th-auth-form .field .lbl { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.th-auth-remember { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.th-auth-remember input { width: auto; }
.th-auth-forgot { font-size: 13px; color: var(--primary); font-weight: 600; }
.th-auth-forgot:hover { text-decoration: underline; }
.th-auth-err { color: var(--danger); font-size: 13px; font-weight: 600; }
.th-auth-foot { text-align: center; margin-top: 16px; font-size: 14px; color: var(--ink-3); }
.th-auth-foot a { color: var(--primary-700); font-weight: 700; }

/* Prominent "Sell with us" (vendor) CTA — always visible, incl. mobile where the nav button is hidden */
.th-seller-cta { margin-top: 18px; padding: 16px 16px 18px; border-radius: var(--r-lg); background: var(--primary-soft); text-align: center; }
.th-seller-cta-txt { display: block; font-size: 13.5px; font-weight: 600; color: var(--primary-700); margin-bottom: 10px; }
.th-seller-btn { justify-content: center; }

/* ===== Google Sign-In ("Continue with Google") ===== */
.th-google-signin { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.th-google-btn { width: 100%; display: flex; justify-content: center; min-height: 40px; }
.th-google-btn > div { margin: 0 auto; }
.th-google-signin .th-google-err { font-size: 13px; color: var(--danger); text-align: center; }
.th-auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink-3); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.th-auth-or::before, .th-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
/* Sign-in progress overlay (shown after the Google popup closes, until redirect) */
.th-gload { position: fixed; inset: 0; z-index: 6000; background: rgba(251,247,242,.94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px; animation: th-lb-in .2s ease; }
.th-gload p { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.th-gload span { font-size: 13px; color: var(--ink-3); max-width: 280px; line-height: 1.5; }

/* ===== Plan tier selector (pricing + onboarding) ===== */
.th-plan-tiers { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 6px; }
.th-ptier { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 11px 14px; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .14s, background .14s; }
.th-ptier:hover { border-color: var(--primary); background: var(--primary-soft); }
.th-ptier.best { border-color: var(--primary); }
.th-ptier-label { font-weight: 600; }
.th-ptier-save { font-size: 11.5px; font-weight: 700; color: var(--accent-700); margin-left: 6px; }
.th-ptier-price { font-weight: 800; font-family: var(--font-display); white-space: nowrap; }

/* ===== Full-bleed dashboard / admin: fill height, flush footer ===== */
.th-dash-page .appmain { display: flex; flex-direction: column; }
.th-dash-page .dash { flex: 1; min-height: calc(100vh - var(--nav-h)); }
.th-dash-page .dside { align-self: stretch; max-height: none; position: static; }
.th-dash-page .dmain { min-height: calc(100vh - var(--nav-h)); }
.th-dash-page .th-footer { margin-top: -1px; }

/* ===== Toastify (top-right) ===== */
.toastify.th-toastify { border-radius: var(--r-pill); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); padding: 12px 18px; display: flex; align-items: center; gap: 10px; }
.toastify.th-toastify .toast-close { color: #fff; opacity: .85; font-size: 18px; padding-left: 6px; }

/* ===== Plan picker (choose-a-plan) ===== */
.th-planpick { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.th-planpick-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.th-planopt { position: relative; display: block; border: 2px solid var(--line-2); border-radius: var(--r-lg); padding: 16px; cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; }
.th-planopt:hover { border-color: var(--ink-3); }
.th-planopt.on { border-color: var(--primary); background: var(--primary-soft); }
.th-planopt input { position: absolute; opacity: 0; pointer-events: none; }
.th-planopt-body { display: flex; flex-direction: column; gap: 4px; }
.th-planopt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.th-planopt-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; display: inline-flex; align-items: center; gap: 6px; }
.th-planopt-tag { font-size: 12.5px; }
.th-planopt-from { font-size: 13px; margin-top: 4px; color: var(--ink-2); }
.th-planpanel-benefits { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 18px; margin-bottom: 22px;}
.th-tier-head, .th-benefits-head { font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.th-tiergrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.th-tiergrid[hidden], .th-planpanel[hidden] { display: none !important; }
.th-tieropt { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 13px 15px; cursor: pointer; transition: border-color .14s, background .14s, box-shadow .14s; background: var(--surface); }
.th-tieropt:hover { border-color: var(--primary); }
.th-tieropt.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--primary-soft); }
.th-tieropt input { position: absolute; opacity: 0; pointer-events: none; }
.th-tieropt-main { display: flex; flex-direction: column; gap: 2px; }
.th-tieropt-label { font-weight: 700; font-size: 14px; }
.th-tieropt-save { font-size: 11px; font-weight: 700; color: var(--accent-700); }
.th-tieropt-price { font-family: var(--font-display); font-weight: 800; white-space: nowrap; }
.th-tieropt.best::after { content: 'Best value'; position: absolute; top: -9px; right: 10px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); }
.th-planpanel .th-tieropt { min-height: 64px; }
.th-planpanel-benefits { border-top: 1px solid var(--line); padding-top: 14px; }
.th-planpick-pay { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.th-pay-summary { display: flex; flex-direction: column; gap: 2px; }
.th-pay-text { font-size: 15px; }
.th-planpick-pay .th-plan-proceed { width: 100%; justify-content: center; }
@media (max-width: 520px) { .th-planpick-radios, .th-tiergrid { grid-template-columns: 1fr; } }

/* ===== WooCommerce cart / checkout / account (themed, full-width) ===== */
.th-wc-page .th-prose { max-width: none; }
.th-wc-page .woocommerce { font-size: 14.5px; }
.th-wc-page .woocommerce form .form-row { margin: 0 0 14px; }
.th-wc-page .woocommerce form .form-row label, .th-wc-page .woocommerce-billing-fields label, .th-wc-page .woocommerce-account-fields label { font-weight: 600; font-size: 13px; margin-bottom: 5px; display: block; color: var(--ink-2); }
.th-wc-page .woocommerce form .form-row input.input-text,
.th-wc-page .woocommerce form .form-row textarea,
.th-wc-page .woocommerce select,
.th-wc-page .woocommerce input[type=text], .th-wc-page .woocommerce input[type=email], .th-wc-page .woocommerce input[type=password], .th-wc-page .woocommerce input[type=tel] {
	border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 11px 13px; font: inherit; background: var(--surface); color: var(--ink); width: 100%; }
.th-wc-page .woocommerce input:focus, .th-wc-page .woocommerce textarea:focus, .th-wc-page .woocommerce select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.th-wc-page .woocommerce .button, .th-wc-page #place_order, .th-wc-page .checkout-button, .th-wc-page .wc-proceed-to-checkout .button {
	background: var(--primary); color: #fff; border: 0; border-radius: var(--r-pill); padding: 13px 24px; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.th-wc-page .woocommerce .button:hover, .th-wc-page #place_order:hover { background: var(--primary-600); }

/* Checkout 2-column */
@media (min-width: 900px) {
	.th-wc-page form.checkout.woocommerce-checkout { display: grid; grid-template-columns: 1.3fr .9fr; gap: 30px; align-items: start; }
	.th-wc-page form.checkout #customer_details { grid-column: 1; }
	.th-wc-page form.checkout #order_review_heading { display: none; }
	.th-wc-page form.checkout #order_review { grid-column: 2; position: sticky; top: 90px; }
}
.th-wc-page #order_review, .th-wc-page .cart_totals { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.th-wc-page #place_order, .th-wc-page .wc-proceed-to-checkout .button { width: 100%; justify-content: center; text-align: center; }
.th-wc-page table.shop_table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.th-wc-page table.shop_table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.th-wc-page table.shop_table td { padding: 14px; border-top: 1px solid var(--line); }
.th-wc-page .cart-collaterals { margin-top: 24px; display: flex; justify-content: flex-end; }
.th-wc-page .cart-collaterals .cart_totals { width: 100%; max-width: 380px; }
.th-wc-page #payment { background: transparent; }
.th-wc-page #payment ul.payment_methods { background: var(--surface-2); border-radius: var(--r); padding: 14px; list-style: none; margin: 0 0 14px; }

/* ===== Checkout order-summary controls (remove / clear / empty state) ===== */
.th-order-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 30px; }
.th-order-title { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); }
.th-order-title svg { color: var(--primary); }
.th-clear-order { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1.5px solid var(--line-2); color: var(--ink-2); border-radius: var(--r-pill); padding: 7px 13px; font-weight: 600; font-size: 12.5px; cursor: pointer; transition: border-color .14s, color .14s, background .14s; }
.th-clear-order:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft, rgba(220,38,38,.08)); }
.th-clear-order:disabled { opacity: .5; cursor: default; }
.th-coitem-rm { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 8px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); font-size: 15px; line-height: 1; text-decoration: none; vertical-align: middle; transition: background .14s, color .14s; }
.th-coitem-rm:hover { background: var(--danger); color: #fff; }
.th-wc-page table.shop_table td.product-total { white-space: nowrap; }
/* Line-item thumbnail (mirrors block checkout) */
.th-coitem { display: inline-flex; align-items: center; gap: 11px; vertical-align: middle; }
.th-coitem-thumb { width: 44px; height: 44px; border-radius: var(--r); object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
.th-coitem-name { font-weight: 700; color: var(--ink); }
.th-order-empty { text-align: center; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 30px 22px; }
.th-order-empty-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; margin: 0 auto 12px; }
.th-order-empty b { display: block; font-size: 16px; }
@media (min-width: 900px) {
	.th-wc-page form.checkout .th-order-empty { grid-column: 2; }
}

/* Trim the checkout to the essentials for a plan purchase */
.th-wc-page .woocommerce-shipping-fields,
.th-wc-page .woocommerce-additional-fields,
.th-wc-page .woocommerce-notices-wrapper,
.th-wc-page .woocommerce-form-coupon-toggle,
.th-wc-page #order_review_heading { display: none; } /* our .th-order-toolbar is the heading */
.th-wc-page #place_order { margin-top: 30px; }

/* My Account: sidebar + content */
@media (min-width: 760px) {
	.th-wc-page .woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
}
.th-wc-page .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.th-wc-page .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.th-wc-page .woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.th-wc-page .woocommerce-MyAccount-navigation li.is-active a { background: var(--primary-soft); color: var(--primary-700); }

/* ===== Buyer account (vendor-dashboard shell) ===== */
.th-acct-dash .dmain > .woocommerce { display: block; }
.th-acct-dash .woocommerce-MyAccount-navigation { display: none; } /* our .dside replaces it */
.th-acct-page .dmain h1, .th-acct-page .dmain h2 { margin-top: 0; }
.th-acct-overview .stat { transition: border-color .15s, box-shadow .15s; }
.th-acct-overview a.stat:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.th-acct-overview .stat .k { display: inline-flex; align-items: center; gap: 6px; }
.th-acct-dash .woocommerce-MyAccount-content, .th-acct-dash .th-cards, .th-acct-overview { max-width: 860px; }
.th-acct-page .woocommerce .woocommerce-MyAccount-content > p:first-child { color: var(--ink-2); }
/* themed form controls inside account content */
.th-acct-page .woocommerce form .form-row { margin: 0 0 14px; }
.th-acct-page .woocommerce form .form-row label, .th-acct-page .woocommerce fieldset legend { font-weight: 600; font-size: 13px; color: var(--ink-2); display: block; margin-bottom: 5px; }
.th-acct-page .woocommerce input[type=text], .th-acct-page .woocommerce input[type=email], .th-acct-page .woocommerce input[type=password], .th-acct-page .woocommerce input[type=tel] { border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 11px 13px; font: inherit; background: var(--surface); color: var(--ink); width: 100%; max-width: 480px; }
.th-acct-page .woocommerce input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.th-acct-page .woocommerce .button, .th-acct-page .woocommerce button[type=submit] { background: var(--primary); color: #fff; border: 0; border-radius: var(--r-pill); padding: 12px 22px; font-weight: 700; cursor: pointer; }
.th-acct-page .woocommerce .button:hover, .th-acct-page .woocommerce button[type=submit]:hover { background: var(--primary-600); }

/* Account form: keep each field to one tidy column so the password eye-toggle
   (wrapped in .th-pw-wrap by theme.js) sits at the input's right edge, not far
   out at the content edge. */
.th-acct-page .woocommerce form .form-row { max-width: 480px; }
.th-acct-page .woocommerce .th-pw-wrap { display: block; max-width: 480px; }
.th-acct-page .woocommerce .th-pw-wrap > input { max-width: none; }
/* Turn the default "Password change" fieldset into a themed card. */
.th-acct-page .woocommerce fieldset { max-width: 520px; margin: 22px 0 18px; padding: 20px 20px 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.th-acct-page .woocommerce fieldset legend { float: none; width: auto; padding: 0; margin: 0 0 14px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.th-acct-page .woocommerce fieldset .form-row:last-child { margin-bottom: 4px; }
/* Display-name hint under the field. */
.th-acct-page .woocommerce #account_display_name_description { display: block; margin-top: 4px; color: var(--ink-3); }
.th-acct-page .woocommerce #account_display_name_description, .th-acct-page .woocommerce #account_display_name_description em { font-size: 12px; }
/* First / last name rows: stack full-width instead of floating side by side. */
.th-acct-page .woocommerce .form-row-first, .th-acct-page .woocommerce .form-row-last { float: none; width: 100%; }

/* ===== Feature list with green circular checks (prototype) ===== */
.feat { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.feat li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.feat li > span:first-child { width: 22px; height: 22px; border-radius: 50%; background: #1F9D55; color: #fff !important; display: inline-grid; place-items: center; flex-shrink: 0; }
.feat li > span:first-child svg { width: 13px; height: 13px; }

/* ===== Checkout: panelled form sections ===== */
.th-wc-page .woocommerce-billing-fields,
.th-wc-page .woocommerce-additional-fields,
.th-wc-page .woocommerce-account-fields,
.th-wc-page .woocommerce-shipping-fields,
.th-wc-page form.checkout_coupon,
.th-wc-page form.login,
.th-wc-page .woocommerce-form-login { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; margin: 0 0 18px; }
.th-wc-page #customer_details .col2-set { display: block; }
.th-wc-page #customer_details .col-1, .th-wc-page #customer_details .col-2 { width: auto; float: none; }
.th-wc-page .woocommerce-billing-fields h3, .th-wc-page .woocommerce-additional-fields h3, .th-wc-page #order_review_heading { font-family: var(--font-display); font-size: 18px; margin: 0 0 14px; }
.th-wc-page .woocommerce-info, .th-wc-page .woocommerce-error, .th-wc-page .woocommerce-message { border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2); padding: 14px 16px; list-style: none; margin-bottom: 18px; }

/* ===== WooCommerce BLOCKS: cart & checkout (themed) ===== */
.th-wc-page .wc-block-checkout, .th-wc-page .wc-block-cart { margin-top: 6px; }
/* .th-wc-page .wc-block-components-sidebar-layout { gap: 30px; align-items: flex-start; } */

/* Steps as themed panels */
.th-wc-page .wc-block-components-checkout-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; margin: 0 0 18px; }
.th-wc-page .wc-block-components-checkout-step::after { display: none; } /* remove default separator line */
.th-wc-page .wc-block-components-checkout-step__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); }
.th-wc-page .wc-block-components-checkout-step__heading { margin-top: 0; margin-bottom: 6px; }
.th-wc-page .wc-block-components-checkout-step__description { color: var(--ink-3); }

/* Inputs / selects (floating-label blocks) */
.th-wc-page .wc-block-components-text-input input,
.th-wc-page .wc-block-components-text-input textarea,
.th-wc-page .wc-blocks-components-select__select {
	border-radius: var(--r) !important; border: 1.5px solid var(--line-2) !important; background: var(--surface) !important; color: var(--ink); }
.th-wc-page .wc-block-components-text-input input:focus,
.th-wc-page .wc-block-components-text-input textarea:focus,
.th-wc-page .wc-blocks-components-select__select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft) !important; outline: none; }
.th-wc-page .wc-block-components-text-input.is-active label,
.th-wc-page .wc-blocks-components-select__label { color: var(--ink-3); }
.th-wc-page .wc-block-components-address-form__address_2-toggle,
.th-wc-page .wc-block-components-address-card__edit { color: var(--primary-700); font-weight: 600; }
.wc-block-components-form .wc-block-components-checkout-step .wc-block-components-country-input.wc-block-components-address-form__country { margin-top: 14px;}
.wp-block-woocommerce-checkout-order-summary-block { border:none !important; }

/* Place-order / proceed button */
.th-wc-page .wc-block-components-button.contained,
.th-wc-page .wc-block-components-checkout-place-order-button { background: var(--primary) !important; color: #fff !important; border-radius: var(--r-pill) !important; font-weight: 700 !important; }
.th-wc-page .wc-block-components-button.contained:hover,
.th-wc-page .wc-block-components-checkout-place-order-button:hover { background: var(--primary-600) !important; }

/* Sidebar / order summary */
.th-wc-page .wc-block-checkout__sidebar, .th-wc-page .wc-block-cart__sidebar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.th-wc-page .wc-block-checkout__sidebar.is-large { position: sticky; top: 90px; }
.th-wc-page .wc-block-components-checkout-order-summary__title-text,
.th-wc-page .wc-block-components-checkout-order-summary__title-price { font-family: var(--font-display); font-weight: 800; }
.th-wc-page .wc-block-components-product-name { font-weight: 700; color: var(--ink); }
.th-wc-page .wc-block-components-order-summary-item__quantity { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.th-wc-page .wc-block-components-totals-footer-item { font-weight: 800; font-size: 16px; }
.th-wc-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--primary-700); }
.th-wc-page .wcs-recurring-totals-panel__title .wc-block-components-totals-item__label { font-weight: 700; }
.th-wc-page .wc-block-components-panel__button { font-weight: 600; color: var(--ink-2); }
.th-wc-page .wc-block-components-notice-banner { border-radius: var(--r); }

/* Cart line-items table */
.th-wc-page .wc-block-cart-items { width: 100%; border-collapse: collapse; background: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.th-wc-page .wc-block-cart-items__header th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.th-wc-page .wc-block-cart-items__row td { padding: 16px; border-top: 1px solid var(--line); vertical-align: top; }
.th-wc-page .wc-block-cart-item__image img { border-radius: var(--r); border: 1px solid var(--line); width: 72px; height: 72px; object-fit: cover; }
.th-wc-page .wc-block-cart-item__product .wc-block-components-product-name { font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; }
.th-wc-page .wc-block-cart-item__product .wc-block-components-product-name:hover { color: var(--primary-700); }
.th-wc-page .wc-block-cart-item__prices { color: var(--ink-2); font-size: 14px; margin: 4px 0 10px; }
.th-wc-page .wc-block-cart-item__total .price { font-family: var(--font-display); font-weight: 800; }
table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image {width:105px;}

/* ===== Toggle switch (My Shop availability) ===== */
.th-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.th-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.th-switch .th-switch-track { position: absolute; inset: 0; background: var(--line-2); border-radius: var(--r-pill); cursor: pointer; transition: background .15s; }
.th-switch .th-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.th-switch input:checked + .th-switch-track { background: var(--primary); }
.th-switch input:checked + .th-switch-track::after { transform: translateX(20px); }

/* My Shop banner / logo controls */
.th-banner-ctrl .btn { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); }
.th-banner-ctrl .btn:hover { background: var(--surface-2); }
.th-logo-edit .ph { border: 3px solid var(--surface); border-radius: 22px; overflow: hidden; }

/* ===== Cover banner sizing — fixed 16:9 platform-wide =====
   ONE shared 16:9 ratio for every storefront cover (vendor, influencer, rider)
   and every dashboard edit preview, so the banner frames identically in the
   editor and on the live storefront, and identically at every screen size.
   The public covers get 16:9 from .vsf-cover (prototype.css); this rule gives
   the influencer/rider editor previews the same ratio. Uploads are normalised
   to 1600×900 by the cropper and served at the th-banner image size.
   (Directory cards lead with the square-ish profile photo instead, so they keep
   the default .lcard .media 4/3 ratio.) */
.th-banner-preview { aspect-ratio: 16 / 9; height: auto; }

/* ===== Onboarding intent (what do you sell?) ===== */
.th-intent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.th-intent-card { position: relative; display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--line-2); border-radius: var(--r-lg); padding: 14px; cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; }
.th-intent-card:hover { border-color: var(--ink-3); }
.th-intent-card input { position: absolute; opacity: 0; pointer-events: none; }
.th-intent-card .th-intent-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-700); display: grid; place-items: center; flex-shrink: 0; }
.th-intent-card .th-intent-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: none; place-items: center; }
.th-intent-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.th-intent-card:has(input:checked) .th-intent-check { display: grid; }
@media (max-width: 560px) { .th-intent-grid { grid-template-columns: 1fr; } }

/* ===== Listing gallery dropzone ===== */
.th-gallery-drop { display: flex; gap: 10px; flex-wrap: wrap; }
.th-gallery-add { width: 84px; height: 84px; border-radius: 12px; border: 2px dashed var(--line-2); background: var(--surface-2); cursor: pointer; display: grid; place-items: center; color: var(--ink-3); }
.th-gallery-add:hover { border-color: var(--primary); color: var(--primary-700); }
.th-gallery-add span { display: block; font-size: 11px; font-weight: 600; margin-top: 2px; }
.th-gthumb { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.th-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-gthumb-rm { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center; }
.th-gthumb-cover { position: absolute; bottom: 0; left: 0; right: 0; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; text-align: center; padding: 2px; }

/* ===== Vertical chips (what-you-sell pickers) ===== */
.th-vchips { display: flex; flex-wrap: wrap; gap: 10px; }
.th-vchip-opt { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--line-2); border-radius: var(--r-pill); padding: 9px 16px 9px 12px; cursor: pointer; background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: 13.5px; transition: border-color .15s, background .15s, color .15s; user-select: none; }
.th-vchip-opt:hover { border-color: var(--ink-3); }
.th-vchip-opt input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.th-vchip-opt .th-vchip-ic { display: inline-grid; place-items: center; color: var(--ink-3); }
.th-vchip-opt.on, .th-vchip-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-700); }
.th-vchip-opt.on .th-vchip-ic, .th-vchip-opt:has(input:checked) .th-vchip-ic { color: var(--primary-700); }

/* Quantity selector */
.th-wc-page .wc-block-components-quantity-selector { border: 1.5px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden; max-width: 120px; }
.th-wc-page .wc-block-components-quantity-selector__input { font-weight: 700; color: var(--ink); }
.th-wc-page .wc-block-components-quantity-selector__button { color: var(--ink-2); }
.th-wc-page .wc-block-components-quantity-selector__button:hover { color: var(--primary-700); }
.th-wc-page .wc-block-cart-item__remove-link { color: var(--ink-3); font-size: 12.5px; }
.th-wc-page .wc-block-cart-item__remove-link:hover { color: var(--danger); }

/* Cart layout (items left, totals right) */
.th-wc-page .wc-block-cart .wc-block-components-sidebar-layout { gap: 30px; align-items: flex-start; }
@media (max-width: 700px) {
	.th-wc-page .wc-block-cart-items__header { display: none; }
	.th-wc-page .wc-block-cart-item__image img { width: 56px; height: 56px; }
}

@media (max-width: 900px) {
	/* Reorder on mobile: image → sidebar (rail card, vendor, disclaimer) → description/reviews.
	   display:contents flattens the main column so the gallery & content sections become
	   siblings of the rail, letting us order them with flex. */
	.th-ldetail-grid { display: flex; flex-direction: column; gap: 0; }
	.th-ldetail-main { display: contents; }
	.th-gallery { order: 1; }
	.th-ldetail-rail { order: 2; position: static; margin-top: 22px; }
	.th-ldetail-main > .th-ldetail-section { order: 3; }
	.th-gallery-main { height: 300px; }
	.th-gslider { height: 300px; }
}

/* ---- Influencer portfolio editor (dropzone + reorder) ---- */
.th-pf { display: grid; gap: 12px; }
.th-pf-dropzone { border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 16px; transition: border-color .15s, background .15s; cursor: pointer; }
.th-pf-dropzone.dragover { border-color: var(--primary); background: var(--surface-2); }
.th-pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.th-pf-tile { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: var(--surface-2); cursor: grab; border: 1px solid var(--line); }
.th-pf-tile:active { cursor: grabbing; }
.th-pf-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.th-pf-tile.dragging { opacity: .4; }
.th-pf-tile.drop-target { outline: 2px solid var(--primary); outline-offset: -2px; }
.th-pf-tile .th-pf-handle { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.5); color: #fff; border-radius: 7px; width: 24px; height: 24px; display: grid; place-items: center; pointer-events: none; }
.th-pf-tile .th-pf-remove { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.th-pf-tile .th-pf-remove:hover { background: var(--danger, #d33); }
.th-pf-tile .th-pf-new { position: absolute; left: 6px; bottom: 6px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; pointer-events: none; }
.th-pf-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 10px; text-align: center; color: var(--ink-2); }
.th-pf-cta { font-weight: 600; color: var(--primary); }

/* ---- Lightbox (influencer portfolio viewer) ---- */
.th-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(20,14,8,.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .18s; }
.th-lightbox.on { opacity: 1; visibility: visible; }
.th-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: var(--shadow-lg); user-select: none; }
.th-lb-btn { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: none; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.th-lb-btn:hover { background: rgba(255,255,255,.25); }
.th-lb-close { top: 20px; right: 20px; }
.th-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.th-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.th-lb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: 13px; font-weight: 600; }
.th-portfolio-grid .th-lb-open { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1; padding: 0; border: none; cursor: zoom-in; background: var(--surface-2); }
.th-portfolio-grid .th-lb-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .th-lb-btn { width: 40px; height: 40px; } }

/* ---- Multi-line clamp helper ---- */
.th-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* "New" pill shown in place of stars when a store has no reviews yet. */
.th-newbadge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 9px; }

/* ---- Reviews (AJAX) ---- */
.th-revlist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.th-rev { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.th-rev-ava { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-700); font-weight: 800; font-size: 16px; }
.th-rev-body { flex: 1; min-width: 0; }
.th-rev-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.th-rev-author { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.th-rev-date { font-size: 12px; color: var(--ink-3); }
.th-rev-starline { display: inline-flex; gap: 1px; margin: 3px 0; }
.th-rev-text { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.th-rev-empty { padding: 4px 0 8px; }

.th-rev-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.th-rev-form-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; margin: 0; }
.th-rev-rate-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.th-rev-rate-lbl { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.th-rev-stars-pick { display: inline-flex; gap: 2px; }
.th-rev-star { background: none; border: 0; padding: 0; cursor: pointer; color: var(--line-2); line-height: 0; transition: color .12s; }
.th-rev-star.on { color: var(--accent); }
.th-rev-textarea { min-height: 100px; resize: vertical; }
.th-rev-actions { display: flex; align-items: center; gap: 12px; }
.th-rev-msg { font-size: 13px; }

.th-rev-login { display: flex; align-items: center; gap: 14px; padding: 18px; color: var(--ink-2); }
.th-rev-login b { color: var(--ink); }
.th-rev-login .btn { margin-left: auto; flex-shrink: 0; }

/* ============================================================
 * Homepage quick-banners (on-demand: service / rider / influencer)
 * ============================================================ */
.qbanner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .qbanner-grid { grid-template-columns: 1fr; } }
.qbanner {
	position: relative; display: flex; flex-direction: column; align-items: flex-start;
	text-align: left; gap: 4px; padding: 22px 22px 20px; border-radius: 18px;
	border: 1px solid var(--line); background: var(--surface); color: var(--ink);
	cursor: pointer; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
	box-shadow: var(--shadow-sm);
}
.qbanner:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 14px 30px rgba(0,0,0,.12)); }
.qbanner-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 8px; color: #fff; }
.qbanner-eyebrow { font-family: var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; font-weight: 700; opacity: .65; }
.qbanner-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.1; }
.qbanner-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; margin: 2px 0 10px; }
.qbanner-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.qbanner-teal { background: linear-gradient(160deg, var(--secondary-soft, #e4f5f0), var(--surface) 70%); border-color: var(--secondary, #0d705c); }
.qbanner-teal .qbanner-ico { background: var(--secondary, #0d705c); }
.qbanner-teal .qbanner-cta { color: var(--secondary-700, #0a5a49); }
.qbanner-orange { background: linear-gradient(160deg, var(--primary-soft, #ffe6d4), var(--surface) 70%); border-color: var(--primary, #f26a1b); }
.qbanner-orange .qbanner-ico { background: var(--primary, #f26a1b); }
.qbanner-orange .qbanner-cta { color: var(--primary-700, #c4530f); }
.qbanner-gold { background: linear-gradient(160deg, var(--accent-soft, #fdf0cf), var(--surface) 70%); border-color: var(--accent, #f2a33a); }
.qbanner-gold .qbanner-ico { background: var(--accent, #f2a33a); }
.qbanner-gold .qbanner-cta { color: var(--accent-700, #b9781f); }

/* ---- Rider profile editor chip-checkboxes ---- */
.th-chip-check { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 30px; font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.th-chip-check:hover { border-color: var(--primary); }
.th-chip-check input { width: auto; margin: 0; accent-color: var(--primary); }
.th-chip-check:has(input:checked) { background: var(--primary-soft, #ffe6d4); border-color: var(--primary); color: var(--primary-700, #c4530f); }

/* ---- Rider job cards ---- */
.th-job { transition: box-shadow .15s; }
.th-job:hover { box-shadow: var(--shadow-md, 0 10px 26px rgba(0,0,0,.10)); }

/* ---- Vendor sell CTA (homepage) ---- */
.sell-cta {
	position: relative; overflow: hidden; border-radius: 22px;
	background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft) 0%, #FFFDF8 55%), var(--accent-soft);
	color: var(--ink); padding: 40px 44px; display: flex; align-items: center; justify-content: space-between;
	gap: 32px; flex-wrap: wrap; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.sell-cta-glow { position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, var(--accent, #f2a33a) 0%, transparent 70%); opacity: .22; pointer-events: none; }
.sell-cta-body { position: relative; max-width: 560px; }
.sell-cta .eyebrow { font-family: var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.sell-cta-title { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1.08; margin: 0 0 12px; color: var(--ink); }
.sell-cta-sub { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0 0 18px; }
.sell-cta-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sell-cta-points li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.sell-cta-points li svg { color: #fff; }
.sell-cta-action { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 200px; }
.sell-cta-link { background: none; border: none; color: var(--ink-2); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: center; padding: 4px; }
.sell-cta-link:hover { color: var(--ink); }
@media (max-width: 720px) { .sell-cta { padding: 30px 26px; } .sell-cta-action { width: 100%; } }

/* ---- Promotions: Spotlight banner + add-on pricing ---- */
.th-spotlight { background: linear-gradient(120deg, var(--secondary-soft), #fff); border: 1px solid var(--secondary); border-radius: 14px; padding: 14px 16px; margin: 14px 0 18px; }
.th-spotlight-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12.5px; color: var(--secondary-700); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
/* Spotlight vendor cards reuse the .lcard look (see prototype.css); just give
   the grid tighter min columns so up to 5 sit in one row, and brand the pill. */
.th-spotlight .lgrid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.th-spotlight .th-spot-lbl { background: var(--secondary); color: #fff; display: inline-flex; align-items: center; gap: 4px; }
/* The spotlight vendor card leads with the storefront banner, so its media box
   uses the same fixed 16:9 cover ratio (overriding the shared .lcard .media 4/3). */
.lcard.th-spotlight-card .media { aspect-ratio: 16 / 9; }

/* In-feed Spotlight (mobile): the top banner is hidden and a full-width Spotlight
   card is woven into the 2-col listing grid after every 4 listings. Desktop keeps
   the top banner and hides the in-feed cards. Breakpoint matches .lgrid → 2 cols. */
/* Storefront page: minimal top padding on mobile (the cover card sits near flush). */
@media (max-width: 620px) {
	.th-vsf-pagewrap.th-pagewrap,
	.th-rsf-pagewrap.th-pagewrap,
	.th-inf-pagewrap.th-pagewrap { padding-top: 5px !important; }
}

.th-spot-inline { display: none; }
@media (max-width: 620px) {
	.th-spotlight-top { display: none; }
	.th-spot-inline { display: block; grid-column: 1 / -1; margin: 6px 0; }
	.th-spot-inline .lgrid { grid-template-columns: 1fr; }
}

.th-addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.th-addon-table td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.th-addon-table tr:last-child td { border-bottom: none; }
.th-deal-form { display: flex; flex-direction: column; gap: 12px; }
.th-deal-form .was { text-decoration: line-through; opacity: .6; margin-left: 4px; }
@media (max-width: 640px) { .th-addon-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * Marketing pages (About / Terms / FAQ / Contact) + Blog
 * ============================================================ */

/* FAQ accordion (native <details>) */
.th-faq-item { padding: 0; overflow: hidden; }
.th-faq-item[open] { border-color: var(--secondary); }
.th-faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 18px 20px; }
.th-faq-item > summary::-webkit-details-marker { display: none; }
.th-faq-item > summary::marker { content: ""; }
.th-faq-q { flex: 1; font-weight: 700; font-size: 16px; font-family: var(--font-display); color: var(--ink); }
.th-faq-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; transition: transform .18s ease, background .15s, color .15s; }
.th-faq-item[open] .th-faq-ic { background: var(--secondary); color: #fff; transform: rotate(45deg); }
.th-faq-a { padding: 0 20px 18px; }
.th-faq-a p { font-size: 14.5px; line-height: 1.65; margin: 0; }

/* Contact: app-store badges */
.th-storebadge { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: 12px; padding: 9px 16px; }
.th-storebadge > span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.th-storebadge small { font-size: 10px; opacity: .8; }
.th-storebadge b { font-family: var(--font-display); font-weight: 800; font-size: 15px; }

/* Blog index grid + cards */
.th-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.th-blog-card .media { aspect-ratio: 16/9; }
.th-blog-date { position: absolute; left: 12px; bottom: 12px; background: rgba(0,0,0,.42); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.th-readmore { color: var(--secondary-700); font-weight: 700; font-size: 13.5px; }

/* Single blog post body spacing */
.th-blog-prose p { font-size: 16px; line-height: 1.75; margin-bottom: 18px; }

/* ============================================================
 * Notifications (header bell + dropdown + dashboard panel)
 * ============================================================ */
.th-notif { position: relative; display: inline-flex; }
.th-notif-btn { position: relative; }
.th-notif-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

.th-notif-pop { position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: calc(100vw - 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: 600; overflow: hidden; }
.th-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.th-notif-head b { font-size: 15px; font-family: var(--font-display); }
.th-notif-readall { background: none; border: 0; cursor: pointer; color: var(--secondary-700); font-size: 12.5px; font-weight: 700; }
.th-notif-readall:hover { text-decoration: underline; }

.th-notif-list { max-height: 380px; overflow-y: auto; }
.th-notif-loading, .th-notif-empty { padding: 26px 16px; text-align: center; font-size: 13.5px; }
.th-notif-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .12s; }
.th-notif-row:last-child { border-bottom: 0; }
.th-notif-row:hover { background: var(--surface-2); }
.th-notif-row.unread { background: var(--primary-soft); }
.th-notif-row.unread:hover { background: color-mix(in srgb, var(--primary-soft) 78%, var(--ink) 4%); }
.th-notif-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.th-notif-t { font-weight: 700; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.th-notif-b { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.th-notif-time { font-size: 11.5px; margin-top: 1px; }
.th-notif-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); margin-top: 5px; }
.th-notif-foot { padding: 11px 16px; border-top: 1px solid var(--line); text-align: center; }
.th-notif-foot a { font-size: 13px; font-weight: 700; color: var(--secondary-700); }

/* Dashboard notifications section */
.th-notif-page { display: flex; flex-direction: column; }
.th-notif-page .th-notif-item { display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; border-radius: 12px; transition: background .12s; }
.th-notif-page .th-notif-item:last-child { border-bottom: 0; }
.th-notif-page .th-notif-item:hover { background: var(--surface-2); }
.th-notif-page .th-notif-item.unread { background: var(--primary-soft); }
.th-notif-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--secondary-soft); color: var(--secondary-700); display: grid; place-items: center; }
.th-notif-item.unread .th-notif-ic { background: var(--primary-soft); color: var(--primary-700); }
.th-notif-item .th-notif-tx { gap: 3px; }
.th-notif-item .th-notif-t { font-size: 14.5px; }
.th-notif-item .th-notif-b { font-size: 13px; }
@media (max-width: 640px) { .th-notif-pop { position: fixed; top: var(--nav-h, 64px); right: 8px; left: 8px; width: auto; } }

/* ============================================================
 * Verticals & Categories — browse-page cards + admin editor
 * ============================================================ */

/* "Browse Categories" collapse/expand toggle (vertical detail page) */
.th-catbrowse-toggle { display: inline-flex; align-items: center; gap: 6px; }
.th-catbrowse-chev { display: inline-flex; transition: transform .2s ease; transform: rotate(90deg); }
.th-catbrowse-toggle[aria-expanded="true"] .th-catbrowse-chev { transform: rotate(-90deg); }
.th-catbrowse-panel[hidden] { display: none; }
.th-catbrowse-panel { animation: th-cat-reveal .22s ease; }
@keyframes th-cat-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* The search box sits above the category rows and is always visible. */
.th-catbrowse-panel > .th-catlist-search { margin-bottom: 12px; }
/* Categories past the cap are server-hidden ([hidden]) and revealed by "Show all";
   search also hides non-matching chips via [hidden]. The chips/cards set their own
   `display`, which would otherwise beat the browser's [hidden] rule — so force it. */
.th-catbrowse-panel [hidden] { display: none !important; }
.th-catgrid > .th-catlist-empty { grid-column: 1 / -1; }

/* "Browse Categories" filter cards */
.th-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin-bottom: 8px; }
.th-catcard { display: flex; flex-direction: column; gap: 8px; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; cursor: pointer; overflow: hidden; text-align: center; transition: border-color .14s, box-shadow .14s, transform .14s; font: inherit; }
.th-catcard:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.th-catcard.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.th-catcard-media { position: relative; width: 100%; aspect-ratio: 16/10; display: grid; place-items: center; background: var(--surface-2); overflow: hidden; }
.th-catcard.has-img .th-catcard-media { aspect-ratio: 16/11; }
.th-catcard-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-catcard-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.28) 100%); }
.th-catcard-icon { width: 46px !important; height: 46px !important; object-fit: contain !important; }
.th-catcard.is-icon .th-catcard-media { background: var(--primary-soft); }
.th-catcard-glyph { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-700); }
.th-catcard.on .th-catcard-glyph { background: var(--primary); color: #fff; }
.th-catcard-lbl { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.25; padding: 0 8px 12px; }
.th-catcard.has-img .th-catcard-lbl { padding-top: 2px; }
.th-listing-results.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }

/* Saved page: loader overlay for the initial fetch and while removing a card. */
.th-saved-wrap { position: relative; min-height: 160px; }
#th-saved-grid.is-loading { opacity: .4; pointer-events: none; transition: opacity .15s; }
.th-saved-loader { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.th-saved-loader[hidden] { display: none; }
.th-spin-ring { width: 36px; height: 36px; border: 3px solid var(--line-2); border-top-color: var(--primary); border-radius: 50%; animation: th-spin .7s linear infinite; }
@keyframes th-spin { to { transform: rotate(360deg); } }

/* Admin: verticals & categories editor */
.th-vadmin-vert .th-vadmin-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--primary-soft); color: var(--primary-700); display: grid; place-items: center; }
.th-vadmin-ic .th-vic-img { width: 24px; height: 24px; object-fit: contain; }
.th-vadmin-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.th-vadmin-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; align-items: start; }
.th-vadmin-catgrid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; align-items: start; }
.th-vadmin-cat { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; margin-bottom: 12px; background: var(--surface-2); }
.th-media-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.th-media-prev { width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; display: grid; place-items: center; flex: 0 0 auto; }
.th-media-prev.empty::after { content: "—"; color: var(--ink-3); }
.th-media-prev img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 760px) { .th-vadmin-grid, .th-vadmin-catgrid { grid-template-columns: 1fr; } }

/* ---- Rider dashboard: My jobs tabs (unified pill style) + live availability feed ---- */
.th-jobtabs { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px; margin-bottom: 20px; flex-wrap: wrap; max-width: 100%; }
.th-jobtab { background: transparent; border: none; border-radius: var(--r-pill); padding: 8px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; line-height: 1; transition: background .18s, color .18s, box-shadow .18s; }
.th-jobtab:hover { color: var(--ink); }
.th-jobtab.on { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(242,106,27,.32); }
.th-jobtab-n { display: inline-grid; place-items: center; min-width: 18px; padding: 1px 7px; border-radius: var(--r-pill); background: rgba(0,0,0,.06); color: var(--ink-2); font-size: 11px; font-weight: 800; }
.th-jobtab.on .th-jobtab-n { background: rgba(255,255,255,.28); color: #fff; }
@keyframes th-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- Admin: Plans & pricing — bubble (pill) tabs ---- */
.th-atabs { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px; margin-bottom: 20px; flex-wrap: wrap; max-width: 100%; }
.th-atabs.sub { margin-bottom: 18px; }
.th-atab, .th-stab { background: transparent; border: none; border-radius: 999px; padding: 8px 18px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; line-height: 1; transition: background .18s, color .18s, box-shadow .18s; }
.th-atab:hover, .th-stab:hover { color: var(--ink); }
.th-atab.on, .th-stab.on { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(242,106,27,.32); }
.th-atab.on svg, .th-stab.on svg { color: #fff; }
.th-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .th-cols2 { grid-template-columns: 1fr; } }
.th-price-in { display: flex; align-items: stretch; }
.th-price-in span { display: grid; place-items: center; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; font-weight: 800; color: var(--ink-2); }
.th-price-in .input { border-radius: 0 10px 10px 0; }

/* ---- Admin: add-on cards (grouped by kind) ---- */
.th-addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.th-addon-card--wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .th-addon-grid { grid-template-columns: 1fr; } }
.th-addon-card { padding: 20px; }
.th-addon-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.th-addon-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft, #fdf0cf); color: var(--accent-700, #b9781f); }
.th-addon-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.th-addon-row + .th-addon-row { border-top: 1px dashed var(--line); }
.th-addon-dur { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.th-addon-row .th-price-in { width: 150px; }

/* ---- Admin: "Best value" picker ---- */
.th-best-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; margin-top: 6px; }
.th-best-pick input { width: auto; margin: 0; accent-color: var(--accent, #f2a33a); }
.th-best-pick:has(input:checked) { color: var(--accent-700, #b9781f); }
.th-best-pick svg { color: var(--accent, #f2a33a); }

/* ---- Ads: dynamic sliders (front-end) ---- */
/* Bottom slider is capped shorter than the full hero. */
.hslider.compact .hslide { min-height: clamp(200px, 26vw, 350px); }
/* A single CTA fills the row (matches the prototype). */
.hslide-content .btn.full { width: 100%; }
/* Image-only slide: the whole slide is one clickable banner. */
.hslide-link { display: block; text-decoration: none; }
/* Label sizes to its content, not the full column width. */
.hslide-content .th-slide-badge { align-self: flex-start; width: auto; }
/* Custom-coloured CTA: keep the chosen colours on hover (no accent swap). */
.hslide-btns .th-cbtn { background: var(--bbg, var(--accent)); border: 1.5px solid var(--bbg, var(--accent)); color: var(--bc, #3d2a05); }
.hslide-btns .th-cbtn:hover { background: var(--bbg, var(--accent)); border-color: var(--bbg, var(--accent)); color: var(--bc, #3d2a05); transform: none; }

/* ---- Ads: admin overview preview (per-slide controls) ---- */
.th-ad-preview { margin-top: 8px; }
.th-ad-pslide-ctrls { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 6px; }
.th-ad-pslide-ctrls .btn { box-shadow: 0 2px 8px rgba(0,0,0,.25); text-decoration: none; }
/* Preview is for viewing — don't let its CTAs navigate away from the console. */
.th-ad-pslide .hslide-content { pointer-events: none; }
.th-atabs a.th-atab { text-decoration: none; }

/* ---- Ads: admin slide edit form ---- */
.th-ad-slide { border: 0; padding: 0; }
.th-ad-slide-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.th-ad-iolbl { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.th-ad-iolbl input { width: auto; margin: 0; }
.th-ad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.th-ad-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.th-ad-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.th-ad-rich { margin-top: 16px; }
.th-ad-slide.io-on .th-ad-rich { display: none; }
.th-ad-color { display: flex; align-items: center; gap: 8px; }
.th-ad-color input[type="color"] { width: 38px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: none; cursor: pointer; flex-shrink: 0; }
.th-ad-color input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent, #f2a33a); }
.th-ad-cnum { font-size: 11.5px; min-width: 32px; text-align: right; }
.th-ad-cf .th-ad-cval { margin-top: 6px; font-size: 12.5px; }
.th-ad-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.th-ad-btn { border: 1px dashed var(--line-2); border-radius: 11px; padding: 12px; }
.th-ad-btn-head { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
@media (max-width: 760px) { .th-ad-grid, .th-ad-grid3, .th-ad-btns { grid-template-columns: 1fr; } }

/* Password show/hide toggle (auto-wired on every password field). */
.th-pw-wrap { position: relative; display: block; }
.th-pw-wrap > input { width: 100%; padding-right: 44px; }
.th-pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 42px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; color: var(--ink-3); transition: color .14s; }
.th-pw-toggle:hover { color: var(--ink); }
.th-pw-toggle:focus-visible { outline: 2px solid var(--brand, currentColor); outline-offset: -3px; border-radius: var(--r); }
.th-pw-toggle svg { width: 20px; height: 20px; pointer-events: none; }
/* Suppress WooCommerce's built-in show/hide-password eye — theme.js replaces it
   with our own .th-pw-toggle, so this stops a duplicate icon (race backstop). */
.show-password-input, .hide-password-input { display: none !important; }

/* Per-table QR print sheet (Dine-In). Hidden on screen; isolated when printing. */
.th-print-root { display: none; }
@media print {
	body.th-printing > *:not(.th-print-root) { display: none !important; }
	body.th-printing .th-print-root { display: block !important; padding: 12px; }
	.th-print-root .th-tableqr-sheet { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
	.th-print-root .th-tableqr-card { break-inside: avoid; page-break-inside: avoid; border: 1px solid #ccc; }
}

/* Dine-In "ordering for Table X" banner (shown after a table QR scan). Pinned
   bottom-left so it never collides with the bottom-right basket FAB. */
.th-dinein-banner {
	position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1400;
	display: flex; align-items: center; gap: 10px;
	background: var(--ink); color: #fff; padding: 9px 10px 9px 14px;
	border-radius: var(--r-pill); box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
	font-size: 13.5px; max-width: min(420px, calc(100vw - 32px));
}
.th-dinein-banner-ico { font-size: 16px; line-height: 1; }
.th-dinein-banner-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-dinein-banner-txt b { font-weight: 700; }
.th-dinein-banner-x {
	flex-shrink: 0; background: rgba(255, 255, 255, .16); border: 0; color: #fff;
	border-radius: var(--r-pill); padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.th-dinein-banner-x:hover { background: rgba(255, 255, 255, .28); }
@media (max-width: 600px) {
	.th-dinein-banner { left: 12px; right: 78px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}

/* Service-request card actions. Desktop: Archive floats right, de-emphasised.
   Mobile: primary buttons fill the row two-up; Archive is a full-width, muted
   secondary action instead of an orphaned right-float. */
.th-req-actions .th-req-archive { margin-left: auto; color: var(--ink-3); }
@media (max-width: 560px) {
	.th-req-actions > .btn:not(.th-req-archive) { flex: 1 1 42%; justify-content: center; }
	.th-req-actions .th-req-archive { flex: 1 1 100%; margin-left: 0; justify-content: center; }
}

/* Universal modal close (×), top-right — a white disc so it reads on both light
   modal bodies and dark modal headers. Closes via the existing .th-modal-close handler. */
.th-modal { position: relative; }
.th-modal-x { position: absolute; top: 10px; right: 10px; z-index: 6; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #333; font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); }
.th-modal-x:hover { background: #f1f1f1; color: #000; }

/* Section-head tick wrapper (prototype .shead-main; tick/eyebrow read --rail-accent from prototype.css). */
.th-shead .shead-main { display: flex; align-items: stretch; gap: 13px; min-width: 0; }

/* Diaspora green overlay (banner + page hero). */
.th-hero-diaspora::after { background: linear-gradient(120deg, rgba(13,112,92,.88) 0%, rgba(10,88,73,.82) 45%, rgba(30,30,30,.82) 100%); }

/* Mobile: home rails become a 2-col grid of 4 + a full-width "View all". */
.th-rail-viewall { display: none; }
@media (max-width: 760px) {
  /* Phones: render the rail as a clean 2-col grid. Keyed off BOTH the JS-added
     .th-rail-grid class AND :not(.swiper-initialized) — Swiper never initialises
     at this width, so the grid still applies even if the JS class isn't set.
     minmax(0,1fr) (not a bare 1fr) stops a card with wider text/price/title from
     blowing its column out and squeezing the other; min-width:0 lets content wrap. */
  .th-rail-grid .swiper-wrapper,
  .th-rail-swiper:not(.swiper-initialized) .swiper-wrapper { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; transform: none !important; }
  .th-rail-swiper.th-rail-grid .swiper-slide,
  .th-rail-swiper:not(.swiper-initialized) .swiper-slide { width: auto !important; min-width: 0; max-width: 100%; margin: 0 !important; flex: 0 0 auto; }
  .th-rail-swiper.th-rail-grid .swiper-slide > .lcard,
  .th-rail-swiper:not(.swiper-initialized) .swiper-slide > .lcard { min-width: 0; }
  .th-rail-grid .swiper-slide:nth-child(n+5),
  .th-rail-swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+5) { display: none; }
  .th-rail-viewall { display: inline-flex; width: 100%; justify-content: center; margin-top: 16px; }
}

/* "Trending right now" — most-viewed category tiles. */
.th-mvc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 680px)  { .th-mvc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px)  { .th-mvc-grid { grid-template-columns: repeat(6, 1fr); gap: 14px; } }
.th-mvc-tile { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; min-height: 130px; background: #1a1a1a; border: 1px solid var(--line); transition: transform .18s ease, box-shadow .18s ease; }
.th-mvc-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.th-mvc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th-mvc-ic { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(2px); }
.th-mvc-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,14,0) 35%, rgba(10,12,14,.8) 100%); }
.th-mvc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 13px 12px; color: #fff; }
.th-mvc-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.th-mvc-meta { display: block; margin-top: 3px; font-size: 11.5px; color: rgba(255,255,255,.82); }

/* Multi-Stores category/subcategory page: compact header (no hero) + searchable
   name-only chip drill-down. */
.th-catpage-head { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; }
.th-catpage-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); transition: border-color .14s, color .14s, background .14s; }
.th-catpage-back:hover { border-color: var(--primary); color: var(--primary-700); background: var(--primary-soft); }
.th-catpage-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.1; margin: 0; flex: 1; min-width: 0; }
.th-catlist-toggle { flex-shrink: 0; gap: 6px; white-space: nowrap; }
.th-catlist-toggle-chev { transition: transform .18s; }
.th-catlist-toggle.is-open .th-catlist-toggle-chev { transform: rotate(180deg); }

.th-catchip-panel { margin-bottom: 20px; }
.th-catlist-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
@media (max-width: 720px) { .th-catlist-chips { gap: 7px 6px; } }
/* Chips are links here (drill-down) — mirror the .th-catchip pill look, no underline. */
.th-catchip-panel .th-catchip { text-decoration: none; }
.th-catchip-panel .th-catchip[hidden] { display: none; }
.th-catlist-search { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 10px 16px; }
.th-catlist-search input { border: 0; outline: 0; background: transparent; font: inherit; flex: 1; min-width: 0; color: var(--ink); }
.th-catlist-empty { width: 100%; }
/* Search now sits ABOVE the category chips inside the collapsible panel. */
.th-catchip-panel .th-catlist-search { margin-bottom: 12px; }
.th-catchip-panel .th-catlist-chips { margin-bottom: 0; }
/* Browse toggle chevron flips when the whole panel is open. */
.th-catbrowse-toggle .th-catlist-toggle-chev { transition: transform .18s; }
.th-catbrowse-toggle[aria-expanded="true"] .th-catlist-toggle-chev { transform: rotate(180deg); }

/* Category cards (vertical pages): theme SVG + uploaded SVG/PNG share the icon-circle. */
.th-catcard.is-glyph, .th-catcard.is-icon { padding: 16px 10px 13px; gap: 9px; align-items: center; }
.th-catcard.is-glyph .th-catcard-media, .th-catcard.is-icon .th-catcard-media { aspect-ratio: auto; width: auto; background: transparent; overflow: visible; }
.th-catcard.is-glyph .th-catcard-glyph, .th-catcard.is-icon .th-catcard-glyph { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); color: var(--primary); }
.th-catcard.is-glyph.on .th-catcard-glyph, .th-catcard.is-icon.on .th-catcard-glyph { background: #fff; border-color: var(--primary-soft); color: var(--primary-700); }
.th-catcard.is-icon .th-catcard-icon { width: 34px !important; height: 34px !important; object-fit: contain !important; }
.th-catcard.is-glyph .th-catcard-lbl, .th-catcard.is-icon .th-catcard-lbl { padding: 0; }
.th-catgrid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }

/* Category chips (vertical pages, "chip" display style) — compact filter pills. */
.th-catchips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
@media (max-width: 720px) { .th-catchips { gap: 7px 5px; } }
.th-catchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill); padding: 9px 15px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color .14s, color .14s, background .14s, box-shadow .14s; }
.th-catchip:hover { border-color: var(--primary); color: var(--primary-700); }
.th-catchip.on { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 2px var(--primary-soft); }
.th-catchip-ic { display: inline-grid; place-items: center; color: var(--primary); flex-shrink: 0; }
.th-catchip:hover .th-catchip-ic { color: var(--primary-700); }
.th-catchip.on .th-catchip-ic { color: #fff; }
.th-catchip-ic img { width: 15px; height: 15px; object-fit: contain; display: block; }
.th-catchip-lbl { line-height: 1.1; }

/* Location filter bar (vertical pages) — ported from the prototype loc-bar. */
.loc-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 8px 8px 16px; margin: 18px 0 18px; }
/* Home location bar: its wrapping <section> supplies the outer spacing, so the
   bar itself only needs a little breathing room above. */
.loc-bar[data-th-homeloc] { margin: 18px 0 0; }
/* When the same bar is rendered inline (collection detail pages, shop archive)
   instead of as the standalone home section, give it its own vertical gap —
   matching the per-vertical bar that sits just below the breadcrumb. */
.th-locwrap-inline .loc-bar[data-th-homeloc] { margin: 20px 0 18px; }
.loc-bar-summary { line-height: 1.3; }
.loc-bar-gap { margin-left: auto; }
.locpick { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-pill); padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; font-family: inherit; }
.locpick:hover { border-color: var(--ink-3); }
.locpick.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-700); }
.locpick .locpick-ico { color: var(--primary); display: inline-flex; }
.locpick.on .locpick-ico { color: var(--primary-700); }
.locpick-wrap { position: relative; }
.loc-menu { position: absolute; right: 0; z-index: 300; margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 300px; max-width: 78vw; max-height: 60vh; overflow: hidden; display: flex; flex-direction: column; }
.loc-menu[hidden] { display: none; }
.loc-menu-search { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.loc-menu-search input { border: 0; outline: 0; flex: 1; font-size: 14px; font-family: inherit; background: transparent; color: var(--ink); }
.loc-menu-list { overflow-y: auto; padding: 6px; }
.loc-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: transparent; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; text-align: left; font-family: inherit; }
.loc-opt:hover { background: var(--surface-2); color: var(--ink); }
.loc-opt.on { background: var(--primary-soft); color: var(--primary-700); }
.loc-opt .loc-opt-sub { font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-left: auto; }
/* Phones: reflow the pill into a tidy stacked card — a compact summary line on
   top, then a full-width location control below (bigger tap target, and it reads
   as intentional instead of a squished, wrapping pill). The menu anchors to the
   whole bar and drops full-width below it, so it can never be clipped. */
@media (max-width: 600px) {
	.loc-bar { position: relative; flex-wrap: wrap; border-radius: var(--r-lg); padding: 12px 13px; gap: 5px 10px; }
	.loc-bar[data-th-homeloc] { margin-bottom: 0; }  /* its section already provides the bottom margin */
	.loc-bar-gap { display: block; flex: 0 0 100%; height: 0; margin: 0; }  /* zero-height row break: keeps pin+summary on line 1, drops the control to line 2 */
	.loc-bar-scope { display: none; }                 /* redundant with the pick button's "All Nigeria" label */
	.loc-bar-summary { flex: 1 1 auto; }              /* sits inline, to the right of the pin */
	.locpick-wrap { position: static; flex: 1 1 auto; }
	.locpick { width: 100%; }
	.locpick > svg { margin-left: auto; }             /* keep icon+label left, push the chevron right */
	.loc-bar-clear { flex: 0 0 auto; }
	.loc-menu { top: 100%; left: 0; right: 0; width: auto; max-width: none; }
	/* On the small 2-col cards, the badges / image label / save button read too big — shrink them. */
	.lcard .badge, .lcard .ph-lbl { font-size: 8px; }
	.lcard .fav { width: 28px; height: 28px; }
	.lcard .fav svg { width: 14px; height: 14px; }
}

/* Listing features (properties) — value + label cards, shown where the menu is. */
.th-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.th-feature { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.th-feature-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-700); flex-shrink: 0; }
.th-feature-body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.th-feature-v { font-size: 18px; font-weight: 800; color: var(--ink); }
.th-feature-k { font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* Storefront opening hours — a clean two-column day list (one column on mobile). */
.th-vsf-hours .th-hours-week { margin-top: 14px; column-count: 2; column-gap: 30px; }
.th-hours-day { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 12px; border-radius: var(--r); font-size: 13.5px; break-inside: avoid; -webkit-column-break-inside: avoid; }
.th-hours-day + .th-hours-day { border-top: 1px solid var(--line); }
.th-hours-day-name { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.th-hours-day-time { color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.th-hours-day-time.is-closed { color: var(--danger); font-weight: 600; }
.th-hours-day.is-today { background: var(--surface-2); font-weight: 700; }
.th-hours-day.is-today .th-hours-day-name { color: var(--ink); }
.th-hours-day.is-today .th-hours-day-time { color: var(--ink-2); }

/* Prime share strip (storefront): comfortable type on desktop, compact on phones. */
.th-vsf-share-t { font-size: 13px; }
.th-vsf-share-s { font-size: 12.5px; }
@media (max-width: 760px) {
	.th-vsf-share-t { font-size: 11px; }
	.th-vsf-share-s { font-size: 10.5px; }
}

/* Storefront category chips — one row, horizontal scroll, thin (3px) styled scrollbar. */
.vsf-chiprow { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.vsf-chiprow::-webkit-scrollbar { height: 3px; }
.vsf-chiprow::-webkit-scrollbar-track { background: transparent; }
.vsf-chiprow::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.vsf-chiprow .chip { flex: 0 0 auto; white-space: nowrap; }
.vsf-chip-img { width: 16px; height: 16px; object-fit: contain; display: inline-block; }
.vsf-chip.on .vsf-chip-img { filter: brightness(0) invert(1); } /* keep uploaded icons visible on the active orange chip */
.th-hours-today { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-700); background: var(--primary-soft); padding: 2px 7px; border-radius: var(--r-pill); }
@media (max-width: 640px) {
	.th-vsf-hours .th-hours-week { column-count: 1; }
	.th-vsf-hours { padding: 16px !important; }
	.th-hours-day { padding: 10px 4px; }
}

/* Storefront product filter bar (search / category / price / sort). */
.th-vsf-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; margin-bottom: 18px; }
.vsf-f-qwrap { position: relative; display: flex; align-items: center; flex: 1 1 230px; min-width: 200px; }
.vsf-f-qwrap .vsf-f-ic { position: absolute; left: 12px; display: inline-flex; color: var(--ink-3); pointer-events: none; z-index: 1; }
.vsf-f-qwrap .vsf-f-q { width: 100%; padding-left: 38px; }
.vsf-f-catwrap, .vsf-f-sortwrap { flex: 1 1 175px; min-width: 165px; }
.vsf-f-price { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; }
.vsf-f-price .input { width: 96px; min-width: 0; }
.vsf-f-clear { flex-shrink: 0; }
[data-th-vsf-results].is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
@media (max-width: 640px) {
	.vsf-f-qwrap { flex-basis: 100%; }
	.vsf-f-catwrap, .vsf-f-sortwrap { flex: 1 1 45%; min-width: 0; }
	.vsf-f-price { flex: 1 1 100%; }
	.vsf-f-price .input { flex: 1; width: auto; }
}

/* Add to Home Screen prompt (mobile, before footer). */
.th-a2hs { display: none; }
@media (max-width: 760px) { .th-a2hs { display: block; padding: 0 16px 30px; } }
@media (display-mode: standalone) { .th-a2hs { display: none !important; } }
.th-a2hs-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl, 22px); padding: 26px 22px; box-shadow: var(--shadow-sm); text-align: center; }
.th-a2hs-card h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 6px; }
.th-a2hs-lead { color: var(--ink-3); font-size: 14px; margin: 0 0 18px; }
.th-a2hs-steps { display: flex; flex-direction: column; gap: 16px; text-align: left; margin: 0 0 18px; }
.th-a2hs-step { display: flex; gap: 14px; align-items: flex-start; }
.th-a2hs-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.th-a2hs-txt { font-size: 16px; line-height: 1.45; color: var(--ink); padding-top: 3px; }
.th-a2hs-txt svg { vertical-align: -3px; margin: 0 2px; }
.th-a2hs-foot { font-size: 13px; color: var(--ink-3); margin: 0; }

/* Recurring mobile install popup (bottom card, dismissible). Separate from the
   static .th-a2hs section above the footer — both coexist. Shown only on phones,
   hidden once installed as a PWA. JS toggles [hidden]; CSS handles the reveal. */
.th-a2hs-pop { position: fixed; left: 12px; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 3500; }
.th-a2hs-pop[hidden] { display: none; }
@media (min-width: 761px) { .th-a2hs-pop { display: none !important; } }
@media (display-mode: standalone) { .th-a2hs-pop { display: none !important; } }
.th-a2hs-pop-card { position: relative; max-width: 460px; margin: 0 auto; display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 14px 40px 14px 14px; animation: th-a2hs-pop-up .28s ease; }
@keyframes th-a2hs-pop-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.th-a2hs-pop-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: rgba(13,112,92,.12); color: var(--secondary, #0D705C); display: grid; place-items: center; }
.th-a2hs-pop-body { min-width: 0; }
.th-a2hs-pop-title { font-weight: 800; font-size: 15px; color: var(--ink); margin: 0 0 2px; }
.th-a2hs-pop-sub { font-size: 12.5px; color: var(--ink-3); margin: 0 0 8px; line-height: 1.4; }
.th-a2hs-pop-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.th-a2hs-pop-steps li { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; display: flex; gap: 7px; }
.th-a2hs-pop-steps .n { color: var(--ink); font-weight: 800; flex-shrink: 0; }
.th-a2hs-pop-steps[hidden], .th-a2hs-pop-cta[hidden] { display: none; }
.th-a2hs-pop-cta { margin-top: 2px; }
.th-a2hs-pop-cta .btn { gap: 7px; }
.th-a2hs-pop-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; border-radius: 8px; display: grid; place-items: center; }
.th-a2hs-pop-x:hover { background: var(--surface-2); color: var(--ink); }

/* =====================================================================
   WhatsApp Basket & Checkout — add-to-basket button, floating button (FAB)
   and the offcanvas drawer with the Delivery / Pickup checkout.
   ===================================================================== */

/* Add-to-basket button on listing cards (nested inside the .lcard anchor). */
.th-basket-add--card {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  box-shadow: 0 2px 8px rgba(242, 106, 27, .28);
}
.th-basket-add--card:hover { transform: translateY(-1px) scale(1.05); background: var(--primary-700); }
.th-basket-add--card:active { transform: scale(.96); }
.th-basket-add--card svg { width: 16px; height: 16px; }

/* Full-width basket button on the single-product rail. */
.btn.th-basket-add { background: var(--primary); color: #fff; }
.btn.th-basket-add:hover { background: var(--primary-700); }

/* ---- Floating basket button (FAB) ---- */
.th-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 3500;
  width: 60px; height: 60px; border: 0; border-radius: 50%;
  background: var(--primary); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(242, 106, 27, .42);
  transition: transform .14s ease;
}
.th-fab:hover { transform: translateY(-2px) scale(1.05); }
.th-fab[hidden] { display: none; }
.th-fab-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 22px; text-align: center;
  border: 2px solid var(--surface);
}

/* ---- Drawer / offcanvas ---- */
.th-drawer-overlay {
  position: fixed; inset: 0; z-index: 4200;
  background: rgba(30, 20, 12, .5); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
  display: flex; justify-content: flex-end;
}
.th-drawer-overlay.open { opacity: 1; }
.th-drawer-overlay[hidden] { display: none; }
.th-drawer {
  width: 100%; max-width: 430px; height: 100%;
  background: var(--surface);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.th-drawer-overlay.open .th-drawer { transform: translateX(0); }

.th-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.th-drawer-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-drawer-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.th-drawer-vendor { font-size: 12.5px; }
.th-drawer-x { width: 36px; height: 36px; border: 0; background: var(--surface-2); border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--ink-2); flex-shrink: 0; }
.th-drawer-x:hover { background: var(--line); }

.th-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; }
.th-drawer-foot { flex: 0 0 auto; padding: 16px 20px; border-top: 1px solid var(--line); background: var(--surface); }

/* Empty state */
.th-bempty { text-align: center; padding: 50px 16px; }
.th-bempty-ico { font-size: 44px; margin-bottom: 8px; }
.th-bempty h3 { font-size: 18px; margin: 0 0 6px; }

/* Line items */
.th-blist { display: flex; flex-direction: column; gap: 14px; }
.th-bitem { display: flex; gap: 12px; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.th-bitem:last-child { border-bottom: 0; padding-bottom: 0; }
.th-bitem-thumb {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--r, 12px);
  overflow: hidden; background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.th-bitem-thumb img { width: 100%; height: 100%; object-fit: cover; }
.th-bitem-thumb-ph { font-size: 22px; opacity: .55; }
.th-bitem-main { min-width: 0; flex: 1 1 auto; }
.th-bitem-title { font-weight: 700; font-size: 14.5px; }
.th-bitem-opt { font-size: 12px; margin-top: 2px; }
.th-bitem-each { font-size: 12.5px; margin-top: 3px; }
.th-bitem-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.th-bitem-line { font-weight: 800; font-size: 14px; font-family: var(--font-display); }
.th-bitem-rm { border: 0; background: none; color: var(--danger); font-size: 12px; cursor: pointer; padding: 0; }
.th-bitem-rm:hover { text-decoration: underline; }
.th-bqty { border: 1.5px solid var(--line-2); border-radius: var(--r-pill); }
.th-bqty button { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 16px; }
.th-bqty .th-qty-val { min-width: 24px; text-align: center; font-weight: 700; }

/* Summary block */
.th-bsum-block { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.th-bsum-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.th-bsum-row.strong { font-weight: 800; font-size: 16px; color: var(--ink); font-family: var(--font-display); padding-top: 6px; border-top: 1px solid var(--line); margin-top: 3px; }
.th-bfoot-actions { display: flex; gap: 10px; }
.th-bfoot-actions .btn { flex: 1 1 auto; justify-content: center; }
.th-bfoot-actions .btn.ghost { flex: 0 0 auto; }

/* Checkout form */
.th-checkout { display: flex; flex-direction: column; gap: 12px; }
.th-fulfil { display: flex; gap: 8px; padding: 4px; background: var(--surface-2); border-radius: var(--r-pill); }
.th-fulfil-opt { flex: 1 1 0; border: 0; background: none; padding: 9px 12px; border-radius: var(--r-pill); cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.th-fulfil-opt.on { background: var(--surface); color: var(--primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }

@media (max-width: 480px) {
  .th-drawer { max-width: 100%; }
  .th-fab { right: 16px; bottom: 16px; }
}

/* ---- Storefront "Order on WhatsApp" promo band ---- */
.th-order-promo {
  margin-top: 20px; padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: linear-gradient(100deg, var(--primary-soft, #fff3ea), var(--surface));
  border: 1px solid var(--primary-soft, #ffe2cd);
}
.th-order-promo-main { display: flex; gap: 14px; align-items: flex-start; min-width: 240px; flex: 1 1 320px; }
.th-order-promo-ico {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px;
  background: var(--primary); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(242, 106, 27, .3);
}
.th-order-promo-txt h2 { font-family: var(--font-display); font-size: 19px; margin: 0 0 4px; }
.th-order-promo-txt p { font-size: 13.5px; line-height: 1.5; margin: 0; max-width: 520px; }
.th-order-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.th-order-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}
.th-order-chip svg { color: var(--primary); }
.th-order-promo-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.th-order-promo-cta .btn { white-space: nowrap; }
.th-order-cta-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: rgba(255, 255, 255, .25); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
}
.th-order-promo-hint { font-size: 12px; }
@media (max-width: 600px) {
  .th-order-promo-main { flex-direction: column; }
  .th-order-promo-cta { align-items: stretch; width: 100%; }
  .th-order-promo-cta .btn { justify-content: center; }
  .th-order-promo-hint { text-align: center; }
}

/* iOS Safari gives date/time inputs an intrinsic width that ignores width:100%,
   so they overflow the field and force a horizontal scrollbar on the request
   forms (e.g. "Preferred date & time"). Make them shrink to their container. */
.th-form input[type="datetime-local"],
.th-form input[type="date"],
.th-form input[type="time"],
.th-form input[type="month"],
.th-form input[type="week"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* ---- Home featured image banners (Request a Rider / Brand Influencers) ---- */
.th-featbanners { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.th-featbanner {
  --tint: 20, 14, 8;                       /* per-banner overlay colour (RGB) */
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-xl, 22px);
  overflow: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: var(--shadow-sm);
  text-decoration: none; isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Directional colour overlay (matches the hero .hslide-scrim warm/gold tints)
   plus a bottom darken so the title / button stay legible. */
.th-featbanner::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(118deg, rgba(var(--tint), .85) 0%, rgba(var(--tint), .5) 45%, rgba(var(--tint), .14) 100%),
    linear-gradient(180deg, rgba(10, 8, 4, 0) 45%, rgba(10, 8, 4, .55) 100%);
}
.th-featbanner--rider { --tint: 80, 28, 6; }        /* warm orange (logistics) */
.th-featbanner--influencer { --tint: 58, 40, 8; }   /* gold (marketing) */
.th-featbanner:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.th-featbanner-body { position: relative; z-index: 1; padding: 24px 26px; color: #fff; }
.th-featbanner-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
  padding: 5px 11px; border-radius: var(--r-pill); margin-bottom: 12px;
}
.th-featbanner-title { font-family: var(--font-display); font-size: 25px; line-height: 1.1; margin: 0 0 6px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.th-featbanner-sub { font-size: 14px; line-height: 1.5; margin: 0 0 16px; color: rgba(255,255,255,.92); max-width: 430px; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
/* Real CTA button (visual only — the whole card is the link). */
.th-featbanner-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; border-radius: var(--r-pill);
  font-weight: 800; font-size: 14px; line-height: 1;
  background: #fff; color: var(--ink);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .16s ease, box-shadow .16s ease;
}
.th-featbanner-cta svg { transition: transform .16s ease; }
.th-featbanner:hover .th-featbanner-cta { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(0,0,0,.32); }
.th-featbanner:hover .th-featbanner-cta svg { transform: translateX(3px); }
@media (max-width: 720px) {
  .th-featbanners { grid-template-columns: 1fr; gap: 14px; }
  .th-featbanner { aspect-ratio: 16 / 10; }
}