/* =====================================================================
   MTJR Store — Theme B ("fresh market")
   Loaded after shop.css only when the store picks theme B.
   Brand colours come from settings: --brand, --brand-2, --accent,
   plus --tb-tint / --tb-tint-2 (brand on white) and --tb-on (text on brand).
   ===================================================================== */
body.tb {
  --bg:#f5f6f4; --line:#e7e9e6; --ink:#1d2320; --muted:#6b726d;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(20,30,25,.04), 0 4px 14px rgba(20,30,25,.05);
  --shadow-lg:0 10px 30px rgba(20,30,25,.10);
  background:var(--bg);
}
.tb .wrap { max-width:1260px; }
.tb-ic { flex:none; display:inline-block; vertical-align:middle; }
.tb .btn { border-radius:999px; }
.tb .btn:hover { transform:none; }
.tb .btn:not(.ghost):not(.dark) { color:var(--tb-on); }
.tb .btn.ghost { border-color:var(--line); }
.tb input:focus, .tb select:focus, .tb textarea:focus { border-color:var(--brand); box-shadow:0 0 0 4px var(--tb-tint-2); }
.tb .check input, .tb input[type=radio] { accent-color:var(--brand); }
.tb .card { box-shadow:none; }
.tb .pager a.on, .tb .step.on { color:var(--tb-on); }

/* ─── Top strip ──────────────────────────────────────────────────── */
.tb-strip { background:var(--tb-tint); color:var(--brand-2); font-size:13px; font-weight:600; }
.tb-strip .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; }
.tb-strip-msg, .tb-strip-links, .tb-strip-links > * { display:flex; align-items:center; gap:6px; }
.tb-strip-links { gap:16px; }
.tb-strip a:hover { text-decoration:underline; }

/* ─── Header ─────────────────────────────────────────────────────── */
.tb-head { background:#fff; position:sticky; top:0; z-index:60; box-shadow:0 1px 0 var(--line); }
.tb-head-row { display:flex; align-items:center; gap:22px; padding-top:14px; padding-bottom:14px; }
.tb-brand { display:flex; align-items:center; gap:10px; font-weight:900; font-size:21px; color:var(--brand); white-space:nowrap; }
.tb-brand img { height:44px; width:auto; }
.tb-mark { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:var(--tb-on); font-size:20px; }
.tb-search { flex:1; position:relative; max-width:680px; margin-inline:auto; }
.tb-search input {
  width:100%; height:48px; padding-block:0; padding-inline:20px 52px; border:1.5px solid transparent; background:#f0f2ef;
  border-radius:999px; font-size:15px; outline:none; transition:.15s; -webkit-appearance:none; appearance:none;
}
.tb-search input:focus { background:#fff; border-color:var(--brand); box-shadow:0 0 0 4px var(--tb-tint-2); }
.tb-search input::-webkit-search-cancel-button { display:none; }
.tb-actions .tb-search-btn, .tb-search .tb-search-close { display:none; }
.tb-search button {
  position:absolute; inset-inline-end:5px; top:5px; width:38px; height:38px; border:0; border-radius:50%;
  background:var(--brand); color:var(--tb-on); display:grid; place-items:center; cursor:pointer;
}
.tb-actions { display:flex; align-items:center; gap:6px; }
.tb-act { position:relative; display:flex; align-items:center; gap:7px; padding:9px 12px; border-radius:999px; font-weight:700; font-size:14.5px; color:var(--ink); }
.tb-act:hover { background:var(--tb-tint); color:var(--brand); }
.tb-act .tb-ic { color:var(--brand); }
.tb-count {
  min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--accent); color:var(--tb-on-accent);
  font-size:11.5px; font-weight:800; display:inline-grid; place-items:center; line-height:1;
}
.tb-count.zero { display:none; }
.tb-bn-ic { position:relative; display:inline-flex; }
.tb-bn-ic .tb-count { position:absolute; top:-7px; inset-inline-start:-9px; height:18px; min-width:18px; font-size:10.5px; padding:0 5px; }
.tb-count.bump { animation:tbBump .45s ease; }
@keyframes tbBump { 40% { transform:scale(1.35); } }

/* Category bar: a rounded brand-coloured band. */
.tb-cats { padding-bottom:12px; }
.tb-cats-bar {
  display:flex; gap:4px; background:var(--brand); border-radius:14px; padding:7px; overflow-x:auto;
  scrollbar-width:none;
}
.tb-cats-bar::-webkit-scrollbar { display:none; }
.tb-cats-bar a {
  color:var(--tb-on); font-weight:700; font-size:15px; padding:8px 15px; border-radius:10px; white-space:nowrap; opacity:.92;
}
.tb-cats-bar a:hover { background:rgba(255,255,255,.16); opacity:1; }
.tb-cats-bar a.on { background:#fff; color:var(--brand); opacity:1; }

.tb-main { min-height:50vh; }

/* "Side" category mode: no category bar in the header, so a "الأقسام" menu sits next
   to the logo on computers (phones use the bottom bar), and sticky parts sit higher. */
.tb-catmenu { position:relative; flex:none; }
.tb-catmenu summary {
  list-style:none; display:flex; align-items:center; gap:7px; padding:10px 16px; border-radius:999px; cursor:pointer;
  background:var(--brand); color:var(--tb-on); font-weight:800; font-size:15px; user-select:none;
}
.tb-catmenu summary::-webkit-details-marker { display:none; }
.tb-catmenu summary:hover, .tb-catmenu[open] summary { background:var(--brand-2); }
.tb-catmenu-list {
  position:absolute; top:calc(100% + 8px); inset-inline-start:0; z-index:80; width:270px; max-height:70vh; overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; display:grid; gap:2px;
}
.tb-catmenu-list a { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:10px; font-weight:700; font-size:14.5px; }
.tb-catmenu-list a:hover { background:var(--tb-tint); color:var(--brand); }
.tb-catmenu-list a.on { background:var(--tb-tint); color:var(--brand); }
.tb-catmenu-list .tb-cat-img { width:36px; height:36px; font-size:15px; border-width:0; box-shadow:none; }
.tb-catmenu-list .tb-cat-img.all { background:var(--tb-tint); }
body.tb-nav-side .tb-side, body.tb-nav-side .tb-gallery, body.tb-nav-side .tb-summary { top:96px; }
body.tb-nav-side .tb-head { box-shadow:0 1px 0 var(--line), 0 6px 18px rgba(20,30,25,.04); }
.tb-main > .wrap > .alert:first-child, .tb-shop > .alert, .tb-pd-wrap > .alert, .tb-cart > .alert { margin-top:16px; }

/* ─── Toast (add to cart feedback) ───────────────────────────────── */
.tb-toast {
  position:fixed; z-index:90; inset-inline:0; margin-inline:auto; bottom:24px; width:max-content; max-width:calc(100% - 32px);
  background:#1d2320; color:#fff; padding:11px 20px; border-radius:999px; font-weight:700; font-size:14.5px;
  box-shadow:var(--shadow-lg); opacity:0; transform:translateY(16px); pointer-events:none; transition:.25s;
}
.tb-toast.show { opacity:1; transform:none; }
.tb-toast.bad { background:#b91c1c; }

/* ─── Breadcrumbs & section heads ────────────────────────────────── */
.tb-crumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:14px; color:var(--muted); padding:18px 0 14px; }
.tb-crumbs a:hover { color:var(--brand); }
.tb-crumbs b { color:var(--ink); }
.tb-sec { margin:30px 0; }
.tb-sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.tb-sec-head h2 { font-size:23px; margin:0; }
.tb-sec-head p { margin:2px 0 0; color:var(--muted); font-size:14px; }
.tb-more { color:var(--brand); font-weight:800; font-size:14.5px; white-space:nowrap; }
.tb-more:hover { text-decoration:underline; }

/* ─── Product card ───────────────────────────────────────────────── */
.tb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:14px; }
.tb-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.tb-row > .tb-card:nth-child(n+7) { display:none; }
.tb-card {
  position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; transition:box-shadow .18s, border-color .18s;
}
.tb-card:hover { box-shadow:var(--shadow-lg); border-color:transparent; }
.tb-card-img { position:relative; display:block; aspect-ratio:1/1; background:#fff; padding:14px; }
.tb-card-img img { width:100%; height:100%; object-fit:contain; border-radius:10px; }
.tb-badge {
  position:absolute; top:10px; inset-inline-start:10px; padding:3px 10px; border-radius:8px;
  font-size:12px; font-weight:800; background:var(--accent); color:var(--tb-on-accent);
}
.tb-badge.off { background:#e23b3b; color:#fff; }
.tb-badge.out { background:#4a514d; color:#fff; }
.tb-card.is-out .tb-card-img img { opacity:.5; filter:grayscale(.6); }
.tb-card-body { padding:2px 14px 12px; display:flex; flex-direction:column; gap:3px; flex:1; text-align:center; }
.tb-card-name {
  font-weight:700; font-size:15px; line-height:1.45; min-height:2.9em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tb-card-name:hover { color:var(--brand); }
.tb-card-meta { display:flex; justify-content:center; gap:8px; font-size:12.5px; color:var(--muted); min-height:1.6em; }
.tb-card-meta .low { color:var(--warn); font-weight:700; }
.tb-card-price { display:flex; justify-content:center; align-items:baseline; gap:8px; margin-top:auto; flex-wrap:wrap; }
.tb-card-price .now { color:var(--brand); font-weight:900; font-size:17px; }
.tb-card-price .was { color:var(--muted); font-size:13px; text-decoration:line-through; }

/* Add button flush with the card bottom; turns into − n + once in the cart. */
.tb-buy { margin-top:auto; }
.tb-buy form { margin:0; }
.tb-add {
  width:100%; height:44px; border:0; background:var(--brand); color:var(--tb-on); font-weight:800; font-size:15px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .15s;
}
.tb-add:hover { background:var(--brand-2); }
.tb-add:disabled { background:#e9ebe8; color:#8a908c; cursor:not-allowed; }
.tb-step { display:none; height:44px; align-items:stretch; background:var(--tb-tint); }
.tb-step form { display:flex; }
.tb-step button {
  width:52px; border:0; background:var(--brand); color:var(--tb-on); cursor:pointer; display:grid; place-items:center;
}
.tb-step button:hover { background:var(--brand-2); }
.tb-step button:disabled { opacity:.45; cursor:not-allowed; }
.tb-step-n { flex:1; display:grid; place-items:center; font-weight:900; font-size:17px; color:var(--brand-2); }
.tb-buy.in .tb-buy-add { display:none; }
.tb-buy.in .tb-step { display:flex; }
.tb-buy.busy { opacity:.7; pointer-events:none; }

/* ─── Home ───────────────────────────────────────────────────────── */
.tb-hero {
  position:relative; overflow:hidden; margin-top:20px; border-radius:22px; min-height:250px;
  background:linear-gradient(115deg,var(--tb-tint-2) 0%,var(--tb-tint) 55%,#fff 100%);
  display:flex; align-items:center; padding:44px 48px;
}
.tb-hero::before, .tb-hero::after {
  content:''; position:absolute; border-radius:50%; background:var(--brand); opacity:.08;
}
.tb-hero::before { width:300px; height:300px; inset-inline-end:-60px; top:-90px; }
.tb-hero::after { width:180px; height:180px; inset-inline-end:200px; bottom:-110px; opacity:.06; }
.tb-hero-text { position:relative; z-index:1; max-width:600px; }
.tb-hero h1 { font-size:38px; font-weight:900; color:var(--ink); margin:0 0 10px; }
.tb-hero p { font-size:17px; color:#4b524e; margin:0 0 22px; }
.tb-hero-btns { display:flex; gap:10px; flex-wrap:wrap; }
.tb-hero-btns .btn.ghost { background:#fff; }
.tb-hero-img { position:absolute; inset-inline-end:40px; bottom:0; max-height:90%; max-width:42%; object-fit:contain; z-index:1; }
.tb-hero.has-img .tb-hero-text { max-width:52%; }

.tb-circles { display:flex; gap:18px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:none; }
.tb-circles::-webkit-scrollbar { display:none; }
.tb-circle { flex:0 0 auto; width:112px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.tb-circle .nm { font-weight:700; font-size:14px; line-height:1.35; }
.tb-circle:hover .nm { color:var(--brand); }
.tb-cat-img {
  width:96px; height:96px; border-radius:50%; overflow:hidden; display:grid; place-items:center; flex:none;
  background:var(--tb-tint); border:2px solid #fff; box-shadow:0 0 0 1px var(--line); transition:.18s;
}
.tb-cat-img img { width:100%; height:100%; object-fit:cover; }
.tb-cat-img.letter { color:var(--brand); font-weight:900; font-size:30px; }
.tb-cat-img.icon img { width:64%; height:64%; object-fit:contain; }
.tb-circle:hover .tb-cat-img { box-shadow:0 0 0 2px var(--brand); }

.tb-perks { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.tb-perk { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
.tb-perk .ic { width:46px; height:46px; border-radius:50%; background:var(--tb-tint); display:grid; place-items:center; font-size:22px; flex:none; }
.tb-perk b { display:block; font-size:15px; }
.tb-perk span { color:var(--muted); font-size:13px; }

.tb-banner { display:block; border-radius:18px; overflow:hidden; background:var(--tb-tint-2); }
.tb-banner img { width:100%; }
.tb-banner-text { padding:34px; }
.tb-banner-text h2 { margin:0; }
.tb-panel { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; }
.tb-cta {
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:var(--brand); color:var(--tb-on); border-radius:20px; padding:30px 36px;
}
.tb-cta h2 { margin:0; font-size:25px; }
.tb-cta p { margin:6px 0 0; opacity:.9; }
.tb .tb-cta a.btn:not(.ghost):not(.dark) { background:#fff; color:var(--brand); }

/* ─── Catalogue ──────────────────────────────────────────────────── */
.tb-shop-layout { display:grid; grid-template-columns:262px minmax(0,1fr); gap:22px; align-items:start; }
.tb-side { position:sticky; top:150px; display:flex; flex-direction:column; gap:14px; }
.tb-rail { background:var(--tb-tint); border-radius:var(--r); padding:8px 0; max-height:58vh; overflow-y:auto; scrollbar-width:thin; }
.tb-rail a {
  position:relative; display:flex; align-items:center; gap:12px; padding:8px 16px; font-weight:700; font-size:15px;
}
.tb-rail a::before {
  content:''; position:absolute; inset-inline-start:0; top:8px; bottom:8px; width:4px; border-radius:0 4px 4px 0;
  background:transparent;
}
[dir=rtl] .tb-rail a::before { border-radius:4px 0 0 4px; }
.tb-rail a:hover { color:var(--brand); }
.tb-rail a.on { color:var(--brand); background:rgba(255,255,255,.55); }
.tb-rail a.on::before { background:var(--brand); }
.tb-rail .tb-cat-img { width:52px; height:52px; font-size:20px; }
.tb-rail .tb-cat-img.all { background:#fff; }
.tb-rail .nm { flex:1; line-height:1.35; }
.tb-rail .ct { font-size:12px; color:var(--muted); font-weight:600; }

.tb-filter { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
.tb-filter-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.tb-filter-head .tb-x { display:none; }
.tb-filter h4 { font-size:14px; margin:12px 0 8px; }
.tb-filter > form > h4:first-of-type { display:none; }
.tb-filter > form > .tb-radios { display:none; }
.tb-radios { display:flex; flex-direction:column; gap:6px; }
.tb-radios label { display:flex; gap:9px; align-items:center; cursor:pointer; font-size:14.5px; }
.tb-radios input { width:18px; height:18px; margin:0; }
.tb-range { display:flex; align-items:center; gap:6px; }
.tb-range input { padding:9px 10px; }
.tb-switch { display:flex; align-items:center; gap:9px; margin:12px 0; cursor:pointer; font-size:14.5px; font-weight:600; }
.tb-switch input { width:18px; height:18px; margin:0; accent-color:var(--brand); }
.tb-reset { display:block; text-align:center; margin-top:8px; color:var(--brand); font-weight:700; font-size:14px; }

.tb-results-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.tb-results-head h1 { font-size:24px; margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.tb-results-head h1 small { font-size:14.5px; color:var(--muted); font-weight:600; }
.tb-sort label { display:flex; align-items:center; gap:10px; margin:0; font-size:14px; color:var(--muted); font-weight:600; white-space:nowrap; }
.tb-sort select { width:auto; min-width:190px; background-color:#fff; border-radius:12px; color:var(--ink); font-weight:700; }
.tb-filter-btn { display:none; }
.tb-chips { display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 14px; }
.tb-chips a {
  display:inline-flex; align-items:center; gap:6px; background:var(--tb-tint); color:var(--brand-2);
  border-radius:999px; padding:5px 12px; font-size:13.5px; font-weight:700;
}
.tb-chips a:hover { background:var(--tb-tint-2); }
.tb-empty { text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:54px 20px; color:var(--muted); }
.tb-empty .ic { color:var(--brand); opacity:.55; margin-bottom:8px; display:flex; justify-content:center; }
.tb-scrim { display:none; }
.tb-x { border:0; background:transparent; cursor:pointer; color:var(--muted); display:grid; place-items:center; padding:6px; border-radius:50%; }
.tb-x:hover { background:#f0f2ef; color:var(--ink); }

/* ─── Product page ───────────────────────────────────────────────── */
.tb-pd { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; align-items:start; }
.tb-gallery { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; position:sticky; top:150px; }
.tb-gallery-main { position:relative; aspect-ratio:1/1; padding:28px; }
.tb-gallery-main img { width:100%; height:100%; object-fit:contain; }
.tb-gallery-main .tb-badge { top:16px; inset-inline-start:16px; font-size:13.5px; }
.tb-thumbs { display:flex; gap:8px; padding:0 14px 14px; overflow-x:auto; }
.tb-thumbs img { width:68px; height:68px; object-fit:contain; border-radius:10px; border:2px solid var(--line); cursor:pointer; background:#fff; }
.tb-thumbs img.on { border-color:var(--brand); }
.tb-pd-cat { display:inline-block; background:var(--tb-tint); color:var(--brand-2); font-weight:700; font-size:13px; padding:4px 12px; border-radius:999px; }
.tb-pd-info h1 { font-size:30px; margin:12px 0 6px; }
.tb-pd-sub { display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:14px; }
.tb-pd-sub b { color:var(--ink); }
.tb-pd-price { display:flex; align-items:baseline; gap:12px; margin:18px 0 6px; flex-wrap:wrap; }
.tb-pd-price .now { font-size:32px; font-weight:900; color:var(--brand); }
.tb-pd-price .was { color:var(--muted); text-decoration:line-through; font-size:16px; }
.tb-save { background:#e23b3b; color:#fff; border-radius:8px; padding:2px 9px; font-weight:800; font-size:13.5px; }
.tb-stock { display:flex; align-items:center; gap:7px; font-weight:700; font-size:14px; }
.tb-stock i { width:9px; height:9px; border-radius:50%; background:currentColor; }
.tb-stock.ok { color:var(--ok); } .tb-stock.low { color:var(--warn); } .tb-stock.out { color:var(--bad); }
.tb-pd-short { font-size:15.5px; color:#3f4642; margin:14px 0 0; }
.tb-pd-buy { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:20px 0 10px; }
.tb-qty { display:inline-flex; align-items:center; background:var(--tb-tint); border-radius:999px; padding:4px; }
.tb-qty button {
  width:42px; height:42px; border:0; border-radius:50%; background:#fff; color:var(--brand); cursor:pointer;
  display:grid; place-items:center; box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.tb-qty button:hover { background:var(--brand); color:var(--tb-on); }
.tb .tb-qty input {
  width:54px; height:42px; border:0; background:transparent; text-align:center; font-weight:900; font-size:17px; padding:0;
  -moz-appearance:textfield; box-shadow:none;
}
.tb-qty input::-webkit-outer-spin-button, .tb-qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.tb-qty.sm button { width:34px; height:34px; }
.tb .tb-qty.sm input { width:42px; height:34px; font-size:15px; }
.tb-pd-add { flex:1; min-width:180px; }
.tb-incart { font-size:14px; color:var(--brand-2); background:var(--tb-tint); border-radius:12px; padding:8px 12px; display:flex; align-items:center; gap:6px; }
.tb-incart a { font-weight:800; text-decoration:underline; }
.tb-pd-perks { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:18px 0; }
.tb-pd-perks div { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:13.5px; font-weight:600; }
.tb-pd-perks .tb-ic { color:var(--brand); }
.tb-pd-desc { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; }
.tb-pd-desc summary { font-weight:800; cursor:pointer; font-size:16px; }
.tb-pd-desc > div { margin-top:10px; color:#3f4642; }

/* ─── Cart ───────────────────────────────────────────────────────── */
.tb-cart-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:22px 0 14px; }
.tb-cart-title h1 { font-size:26px; margin:0; }
.tb-cart-title small { font-size:15px; color:var(--muted); font-weight:600; }
.tb-cart-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:22px; align-items:start; }
.tb-freebar { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; margin-bottom:12px; }
.tb-freebar .msg { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:var(--brand-2); margin-bottom:8px; }
.tb-freebar .bar { height:8px; background:#eceeeb; border-radius:999px; overflow:hidden; }
.tb-freebar .bar i { display:block; height:100%; background:var(--brand); border-radius:999px; }
.tb-lines { background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.tb-line { display:grid; grid-template-columns:76px minmax(0,1fr) auto 110px 36px; gap:14px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.tb-line:last-child { border-bottom:0; }
.tb-line-img img { width:76px; height:76px; object-fit:contain; border-radius:10px; background:#fafbfa; border:1px solid var(--line); }
.tb-line-info .nm { font-weight:800; display:block; line-height:1.4; }
.tb-line-info .sub { color:var(--muted); font-size:13.5px; }
.tb-line-info .low { color:var(--warn); font-size:12.5px; font-weight:700; }
.tb-line-total { font-weight:900; text-align:end; }
.tb-cart-actions { display:flex; gap:10px; margin-top:12px; }
.tb-summary { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; position:sticky; top:150px; }
.tb-summary h3 { margin:0 0 8px; }
.tb-summary .btn.lg { margin-top:12px; }
.tb-secure { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--muted); font-size:13px; margin-top:10px; }
.tb-wilaya { margin-bottom:10px; }
.tb-wilaya label span { display:flex; align-items:center; gap:5px; }

/* ─── Footer ─────────────────────────────────────────────────────── */
.tb-foot { background:#fff; border-top:1px solid var(--line); margin-top:56px; color:#4d5450; }
.tb-foot-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:28px; padding-top:38px; padding-bottom:28px; }
.tb-foot h4 { font-size:16px; color:var(--ink); margin:0 0 12px; }
.tb-foot-grid > div > a:not(.tb-brand) { display:block; padding:3px 0; font-size:14.5px; }
.tb-foot-grid a:hover { color:var(--brand); }
.tb-foot-about p { margin:10px 0 12px; font-size:14.5px; }
.tb-social { display:flex; flex-wrap:wrap; gap:8px; }
.tb-social a { background:var(--tb-tint); color:var(--brand-2); border-radius:999px; padding:5px 12px; font-size:13px; font-weight:700; }
.tb-foot-help > div { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:14.5px; }
.tb-foot-help .tb-ic { color:var(--brand); }
.tb-foot-bottom { background:var(--tb-tint); font-size:13px; }
.tb-foot-bottom .wrap { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
.tb-pay { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tb-pay span { background:#fff; border:1px solid var(--line); border-radius:8px; padding:3px 10px; font-weight:700; font-size:12px; }
.tb-pay em { font-style:normal; color:var(--muted); }

/* ─── Bottom nav (phones) ────────────────────────────────────────── */
.tb-botnav { display:none; }

/* ─── Shared pages (checkout, account, login…) keep their markup ─── */
.tb .tb-main > .wrap.section { padding-top:26px; }
.tb .hero { background:linear-gradient(115deg,var(--tb-tint-2),#fff); color:var(--ink); box-shadow:none; }
.tb .hero::after { display:none; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width:1180px) {
  .tb-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tb-row > .tb-card:nth-child(n+5) { display:none; }
}
@media (max-width:900px) {
  .tb-head-row { gap:12px; }
  .tb-actions .lbl { display:none; }
  .tb-act { padding:9px; }
  .tb-actions .tb-dealers-act { display:none; } /* 2026-10-27: phones reach «التجار» from the bottom bar */
  .tb-strip .tb-hide-sm { display:none; }
  .tb-hero { padding:30px 24px; min-height:0; }
  .tb-hero h1 { font-size:28px; }
  .tb-hero.has-img .tb-hero-text { max-width:none; }
  .tb-hero-img { display:none; }
  .tb-pd { grid-template-columns:1fr; gap:18px; }
  .tb-gallery { position:static; }
  .tb-cart-layout { grid-template-columns:1fr; }
  .tb-summary { position:static; }
  .tb-foot-grid { grid-template-columns:1fr 1fr; }

  /* Catalogue: narrow category rail on the side, filters in a bottom sheet. */
  .tb-shop-layout { grid-template-columns:84px minmax(0,1fr); gap:10px; }
  .tb-side { top:122px; }
  body.tb-nav-side .tb-side { top:86px; }
  .tb-catmenu { display:none; }
  .tb-shop-layout.tb-shop-top { grid-template-columns:minmax(0,1fr); }
  .tb-shop-top .tb-side { display:contents; }
  .tb-rail { max-height:calc(100vh - 200px); padding:4px 0; }
  .tb-rail a { flex-direction:column; gap:4px; padding:9px 4px; text-align:center; font-size:12px; }
  .tb-rail a::before { top:12px; bottom:12px; }
  .tb-rail .ct { display:none; }
  .tb-rail .tb-cat-img { width:50px; height:50px; }
  .tb-filter {
    position:fixed; z-index:95; inset-inline:0; bottom:0; border-radius:20px 20px 0 0; max-height:82vh; overflow-y:auto;
    padding:16px 18px calc(18px + env(safe-area-inset-bottom)); transform:translateY(105%); visibility:hidden; transition:transform .25s, visibility .25s;
    box-shadow:0 -10px 40px rgba(0,0,0,.18);
  }
  .tb-filter.open { transform:none; visibility:visible; }
  .tb-filter-head .tb-x { display:grid; }
  .tb-filter > form > h4:first-of-type, .tb-filter > form > .tb-radios { display:flex; }
  .tb-filter > form > h4:first-of-type { display:block; }
  .tb-scrim { position:fixed; inset:0; z-index:94; background:rgba(0,0,0,.38); }
  .tb-scrim.open { display:block; }
  .tb-results-head { gap:8px; }
  .tb-results-head h1 { font-size:19px; flex-basis:100%; }
  .tb-sort { flex:1; }
  .tb-sort label span { display:none; }
  .tb-sort select { min-width:0; width:100%; padding:9px 10px; font-size:14px; }
  .tb-filter-btn {
    display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff; border-radius:12px;
    padding:9px 12px; font-weight:700; cursor:pointer; color:var(--ink);
  }
  .tb-filter-btn i { font-style:normal; background:var(--brand); color:var(--tb-on); border-radius:999px; font-size:11px; padding:0 6px; }
  .tb-filter-btn .tb-ic { color:var(--brand); }

  .tb-botnav {
    display:flex; position:fixed; z-index:70; inset-inline:0; bottom:0; background:#fff; border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -4px 18px rgba(0,0,0,.05);
    height:calc(var(--tb-bar-h) + env(safe-area-inset-bottom));
  }
  body.tb { --tb-bar-h:60px; }
  .tb-botnav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11.5px; font-weight:700; color:var(--muted); }
  .tb-botnav a.on { color:var(--brand); }
  body.tb { padding-bottom:calc(var(--tb-bar-h) + 6px); }
  .tb .botnav { display:none; }
  .tb-toast { bottom:84px; }

  /* Product page: the buy bar stays reachable above the bottom nav. */
  .tb-pd-buy {
    position:sticky; bottom:calc(var(--tb-bar-h) + env(safe-area-inset-bottom)); z-index:20; background:#fff; margin:16px -16px 6px; padding:10px 16px;
    border-top:1px solid var(--line); box-shadow:0 -6px 16px rgba(0,0,0,.05); flex-wrap:nowrap;
  }
  .tb-pd-add { min-width:0; padding-inline:14px; }
  .tb-pd-now { display:none; }
}
@media (max-width:700px) {
  .tb-strip .wrap { min-height:30px; font-size:12px; }
  .tb-strip-msg { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Phones: one slim header row (logo · name · lens · account · cart); the search
     field only appears when the lens is tapped, laid over that row. */
  .tb-head-row { position:relative; gap:2px; padding-top:6px; padding-bottom:6px; }
  .tb-brand { flex:1; min-width:0; gap:7px; font-size:16px; }
  .tb-brand-name { overflow:hidden; text-overflow:ellipsis; }
  .tb-brand img { height:30px; }
  .tb-mark { width:30px; height:30px; font-size:14px; flex:none; }
  .tb-actions { gap:0; }
  .tb-act { padding:8px; }
  .tb-actions .tb-search-btn { display:flex; }
  .tb-search {
    display:none; position:absolute; inset:0; z-index:5; margin:0; max-width:none; background:#fff;
    align-items:center; gap:6px; padding-inline:12px 6px;
  }
  .tb-search:target, .tb-search.open { display:flex; }
  .tb-search input { flex:1; min-width:0; height:40px; padding-inline:16px 46px; background:#f0f2ef; }
  .tb-search button { top:50%; margin-top:-16px; width:32px; height:32px; inset-inline-end:58px; }
  .tb-search .tb-search-close { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; color:var(--muted); }
  .tb-search-close:hover { background:#f0f2ef; color:var(--ink); }
  .tb-cats { padding-bottom:8px; }
  .tb-cats-bar { border-radius:12px; padding:4px; }
  .tb-cats-bar a { font-size:13.5px; padding:6px 11px; }
  .tb-crumbs { font-size:13px; gap:6px; padding:10px 0 8px; }

  /* Category rail: flush with the screen edge, fixed width, even items, light dividers. */
  body.tb { --tb-head-h:104px; }
  body.tb.tb-nav-side { --tb-head-h:52px; }
  .tb-head-row { height:52px; }
  .tb-shop-layout { grid-template-columns:62px minmax(0,1fr); gap:10px; }
  .tb-side { margin-inline-start:-16px; top:var(--tb-head-h); }
  .tb-rail {
    width:78px; padding:0; border-radius:0; border-start-end-radius:14px; border-end-end-radius:14px;
    max-height:none; overscroll-behavior:contain;
    height:calc(100vh - var(--tb-head-h) - var(--tb-bar-h));
    height:calc(100dvh - var(--tb-head-h) - var(--tb-bar-h) - env(safe-area-inset-bottom));
  }
  /* Side mode: the list starts right under the header and ends on the bottom bar,
     so the page itself adds no space below it (the room goes under the products). */
  .tb-nav-side .tb-shop > .tb-crumbs { display:none; }
  body.tb.tb-p-shop.tb-nav-side .tb-shop { padding-bottom:0; }
  .tb-shop-side .tb-results { padding-top:12px; padding-bottom:24px; }
  .tb-shop-side .tb-side { align-self:stretch; }
  .tb-shop-side .tb-rail { position:sticky; top:var(--tb-head-h); border-radius:0; }
  .tb-shop-layout.tb-shop-top { grid-template-columns:minmax(0,1fr); }
  .tb-rail a {
    height:92px; justify-content:center; gap:5px; padding:6px 4px; overflow:hidden;
    border-bottom:1px solid rgba(20,30,25,.07); color:#3b423e;
  }
  .tb-rail a:last-child { border-bottom:0; }
  .tb-rail a::before, [dir=rtl] .tb-rail a::before { top:0; bottom:0; width:4px; border-radius:0; }
  .tb-rail a.on { background:#fff; color:var(--brand); }
  .tb-rail .tb-cat-img { width:42px; height:42px; font-size:17px; border-width:0; box-shadow:none; }
  .tb-rail .tb-cat-img.all { background:#fff; }
  .tb-rail a.on .tb-cat-img { box-shadow:0 0 0 2px var(--brand); }
  .tb-rail .nm {
    flex:none; width:100%; font-size:11.5px; line-height:1.3; font-weight:700;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .tb-rail a.on .nm { font-weight:900; }

  /* Catalogue pages (category, all products, search): no footer on phones, only the
     fixed bottom bar; extra bottom room so the last row never hides behind that bar. */
  body.tb.tb-p-shop .tb-foot { display:none; }
  body.tb.tb-p-shop { padding-bottom:calc(var(--tb-bar-h) + env(safe-area-inset-bottom)); }
  body.tb.tb-p-shop .tb-shop { padding-bottom:24px; }
  .tb-sec { margin:18px 0; }
  .tb-sec-head { margin-bottom:10px; }
  .tb-sec-head h2 { font-size:19px; }
  .tb-hero { margin-top:10px; border-radius:16px; padding:16px 18px; }
  .tb-hero h1 { font-size:20px; margin-bottom:6px; }
  .tb-hero p { font-size:13.5px; line-height:1.55; margin-bottom:12px; }
  .tb-hero .btn.lg { padding:8px 18px; font-size:14px; }
  .tb-hero-btns .btn.ghost { display:none; }
  .tb-circles { gap:12px; }
  .tb-circle { width:78px; }
  .tb-circle .nm { font-size:12.5px; }
  .tb-cat-img { width:70px; height:70px; }
  .tb-cat-img.letter { font-size:24px; }
  /* Rows scroll sideways on phones, like a shelf. */
  .tb-row { display:flex; overflow-x:auto; gap:10px; margin-inline:-16px; padding:0 16px 6px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .tb-row::-webkit-scrollbar { display:none; }
  .tb-row > .tb-card { flex:0 0 44%; scroll-snap-align:start; }
  .tb-row > .tb-card:nth-child(n+5) { display:flex; }
  .tb-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .tb-card-img { padding:8px; }
  .tb-card-body { padding:0 8px 10px; }
  .tb-card-name { font-size:13.5px; }
  .tb-card-price .now { font-size:15px; }
  .tb-card-price .was { font-size:11.5px; }
  .tb-add { height:40px; font-size:13.5px; gap:5px; }
  .tb-add .tb-ic { display:none; }
  .tb-step { height:40px; }
  .tb-step button { width:40px; }
  .tb-badge { font-size:11px; padding:2px 7px; top:7px; inset-inline-start:7px; }
  /* Perks shrink to one swipeable line of chips so products come up sooner. */
  .tb-perks { display:flex; gap:8px; overflow-x:auto; margin-inline:-16px; padding:0 16px 2px; scrollbar-width:none; }
  .tb-perks::-webkit-scrollbar { display:none; }
  .tb-perk { flex:0 0 auto; gap:8px; padding:6px 12px 6px 8px; border-radius:999px; }
  .tb-perk .ic { width:30px; height:30px; font-size:15px; }
  .tb-perk b { font-size:13px; white-space:nowrap; } .tb-perk span { display:none; }
  .tb-pd-perks { grid-template-columns:1fr; gap:6px; }
  .tb-pd-info h1 { font-size:23px; }
  .tb-pd-price .now { font-size:26px; }
  .tb-line { grid-template-columns:64px minmax(0,1fr) auto; grid-template-areas:"img info x" "img qty total"; gap:8px 12px; }
  .tb-line-img { grid-area:img; align-self:start; } .tb-line-img img { width:64px; height:64px; }
  .tb-line-info { grid-area:info; } .tb-line .tb-x { grid-area:x; align-self:start; justify-self:end; }
  .tb-line .tb-qty { grid-area:qty; justify-self:start; }
  .tb-line-total { grid-area:total; align-self:center; }
  .tb-foot-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .tb-foot-about, .tb-foot-help { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) {
  .tb-toast, .tb-filter, .tb-count.bump { transition:none; animation:none; }
}
@media print {
  .tb-strip, .tb-head, .tb-foot, .tb-botnav, .tb-toast { display:none !important; }
}

/* Store pages row (من نحن + the policies, 2026-10-30): the last line of every page, after the footer,
   so the phone catalogue pages (footer hidden) keep it too. */
.tb-legal { background:var(--tb-tint); border-top:1px solid var(--line); font-size:13.5px; }
.tb-legal .wrap { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 20px; padding-top:12px; padding-bottom:12px; }
.tb-legal a { color:#4d5450; padding:3px 0; }
.tb-legal a:hover { color:var(--brand); }
/* Phone cashier shop: its black invoice bar floats above the bottom bar, so the room it needs moves below the row. */
@media (max-width:900px) {
  body:has(.tbc-mbar) .tbc { padding-bottom:16px; }
  body:has(.tbc-mbar) .tb-legal .wrap { padding-bottom:84px; }
  /* Inner pages: the room kept under the page for the fixed bottom bar also counts the phone's home strip
     (safe area), as the bar's own height does, so the links row ends above the bar on every phone.
     Not the home page (body.ih), not the catalogue (its own rule above). */
  body.tb:not(.ih):not(.tb-p-shop) { padding-bottom:calc(var(--tb-bar-h) + 6px + env(safe-area-inset-bottom)); }
}