/* =====================================================================
   MTJR Store — Theme B home page, "showcase" layout (2026-10-09)
   Loaded by lib/themes/b/home.php only, after theme-b.css. Every rule is
   scoped to body.ih or to ih-* classes, so no other page is affected.
   Colours: --brand / --brand-2 / --accent from the store settings.
   ===================================================================== */
body.ih { background:#fff; --ih-head:80px; --ih-head-stuck:60px; --ih-grey:#d8d9db; --ih-ink:#222; }
.ih-wrap { max-width:1150px; margin:0 auto; padding:0 20px; }

/* ─── Top strip (brand colour, language only) ─────────────────────── */
.ih-strip { background:var(--brand); color:var(--tb-on); font-size:13px; font-weight:600; }
.ih-strip .ih-wrap { display:flex; justify-content:flex-start; align-items:center; min-height:40px; }
html[dir=rtl] .ih-strip .ih-wrap { justify-content:flex-end; }
.ih-strip a { display:inline-flex; align-items:center; gap:6px; opacity:.95; }
.ih-strip a:hover { opacity:1; text-decoration:underline; }

/* ─── Header: white, sticky; slims down once the page scrolls ─────── */
.ih-head { position:sticky; top:0; z-index:60; background:#fff; transition:box-shadow .3s ease; }
.ih-head-row { display:flex; align-items:center; gap:20px; height:var(--ih-head); transition:height .3s ease; }
.ih-head.is-stuck { box-shadow:0 1px 10px rgba(0,0,0,.08); animation:ihSlide .35s ease; }
.ih-head.is-stuck .ih-head-row { height:var(--ih-head-stuck); }
@keyframes ihSlide { from { transform:translateY(-100%); } to { transform:none; } }
.ih-logo { flex:none; display:flex; align-items:center; }
.ih-burger { display:none; }

.ih-nav { display:flex; align-items:center; gap:22px; margin-inline-start:auto; font-weight:800; font-size:15px; color:var(--ih-ink); }
.ih-nav > a, .ih-drop > a { display:inline-flex; align-items:center; gap:4px; padding:8px 0; transition:color .2s; }
.ih-nav > a:hover, .ih-drop > a:hover, .ih-nav > a.on { color:var(--brand); }
.ih-drop { position:relative; }
.ih-drop-list {
  position:absolute; top:100%; inset-inline-start:-14px; min-width:230px; background:#fff; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.12); padding:8px 0; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.ih-drop:hover .ih-drop-list, .ih-drop:focus-within .ih-drop-list { opacity:1; visibility:visible; transform:none; }
.ih-drop-list a { padding:7px 16px; font-weight:500; font-size:14.5px; color:#333; transition:color .2s, padding .2s; }
.ih-drop-list a:hover { color:var(--brand); padding-inline-start:20px; }

.ih-tools { display:flex; align-items:center; gap:14px; }
.ih-circle {
  position:relative; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:#f1f2f1; color:#333; transition:background .25s, color .25s, transform .25s;
}
.ih-circle:hover { background:var(--tb-tint-2); color:var(--brand-2); }
.ih-cart { background:var(--brand); color:var(--tb-on); }
.ih-cart:hover { background:var(--brand-2); color:var(--tb-on); }
.ih-badge.tb-count {
  position:absolute; top:-5px; inset-inline-end:-5px; min-width:19px; height:19px; padding:0 4px; border-radius:999px;
  background:#fff; color:var(--brand-2); font-size:11px; font-weight:800; display:grid; place-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,.18); line-height:1;
}
.ih-badge.tb-count.zero { display:grid; } /* the reference always shows the counter, 0 included */
.ih-pill {
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:999px;
  background:#f1f2f1; color:#333; font-weight:700; font-size:14px; transition:background .25s, color .25s;
}
.ih-pill:hover { background:var(--tb-tint-2); color:var(--brand-2); }

/* ─── Full-screen search ──────────────────────────────────────────── */
.ih-search {
  position:fixed; inset:0; z-index:120; background:rgba(255,255,255,.97); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
.ih-search.open, .ih-search:target { opacity:1; visibility:visible; }
.ih-search-box { width:min(760px, 88vw); display:flex; align-items:center; border-bottom:2px solid var(--ih-ink); transform:translateY(20px); transition:transform .4s ease; }
.ih-search.open .ih-search-box, .ih-search:target .ih-search-box { transform:none; }
.ih-search-box input { flex:1; border:0; background:transparent; font-size:clamp(22px, 4vw, 40px); font-weight:700; padding:10px 4px; outline:none; box-shadow:none !important; color:var(--ih-ink); }
.ih-search-box button { border:0; background:none; cursor:pointer; color:var(--ih-ink); padding:8px; }
.ih-search-close { position:absolute; top:24px; inset-inline-end:28px; color:#333; transition:transform .3s; }
.ih-search-close:hover { transform:rotate(90deg); }

/* ─── Phone drawer ────────────────────────────────────────────────── */
.ih-drawer { position:fixed; inset:0; z-index:110; visibility:hidden; }
.ih-drawer.open, .ih-drawer:target { visibility:visible; }
.ih-drawer-scrim { position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .3s; }
.ih-drawer.open .ih-drawer-scrim, .ih-drawer:target .ih-drawer-scrim { opacity:1; }
.ih-drawer-panel {
  position:absolute; top:0; bottom:0; inset-inline-start:0; width:min(320px, 84vw); background:#fff; overflow-y:auto;
  display:flex; flex-direction:column; padding:0 0 24px; transform:translateX(-100%); transition:transform .35s ease;
}
html[dir=rtl] .ih-drawer-panel { transform:translateX(100%); }
.ih-drawer.open .ih-drawer-panel, .ih-drawer:target .ih-drawer-panel { transform:none; }
.ih-drawer-top { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #eee; }
.ih-drawer-panel > a, .ih-drawer-cats a { display:flex; align-items:center; gap:8px; padding:12px 18px; border-bottom:1px solid #f2f2f2; font-weight:700; color:#333; }
.ih-drawer-panel > a.on { color:var(--brand); }
.ih-drawer-h { padding:14px 18px 6px; font-size:12.5px; font-weight:800; color:var(--muted); }
.ih-drawer-cats a { font-weight:500; padding-inline-start:28px; }
/* Category icons in the header menu and the drawer (the same icons as the category pages). */
.ih-drop-list a, .ih-drawer-cats a { display:flex; align-items:center; gap:10px; }
.tb-cat-img.ih-cat-ic { width:30px; height:30px; border-width:1px; box-shadow:none; }
.tb-cat-img.ih-cat-ic.letter { font-size:14px; }

/* ─── Folding category lists (side menu + header list) ────────────── */
/* Folded by default; .open (theme-b-home.js) unfolds with a height slide and turns the arrow.
   Row = icon, name (takes the room), arrow at the end; the products underneath line up with the names. */
.ih-acc-head { display:flex; align-items:center; gap:10px; cursor:pointer; }
.ih-acc-head > span { flex:1; min-width:0; }
.ih-acc-head > .ih-cat-ic { flex:none; }
.ih-acc-head > .tb-ic { flex:none; transition:transform .3s ease; opacity:.7; }
.ih-acc.open > .ih-acc-head > .tb-ic { transform:rotate(180deg); }
.ih-acc-body { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .3s ease, visibility 0s linear .3s; }
.ih-acc.open > .ih-acc-body { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .3s ease, visibility 0s; }
.ih-acc-in { overflow:hidden; min-height:0; display:flex; flex-direction:column; }
/* side menu */
.ih-drawer-sec { border-bottom:1px solid #f2f2f2; }
.ih-drawer-sec > .ih-drawer-h { padding:12px 18px; font-size:inherit; font-weight:700; color:#333; }
.ih-drawer-sec.open > .ih-drawer-h { color:var(--brand); }
.ih-drawer-cats .ih-acc.open > .ih-acc-head { color:var(--brand); font-weight:700; }
.ih-drawer-cats .ih-acc-in a { padding:10px 18px; padding-inline-start:68px; font-size:14px; color:#555; background:#fafbfa; }
.ih-drawer-cats .ih-acc-in a.ih-acc-all { font-weight:700; color:var(--brand); }
/* header list (computer) */
.ih-drop-list { max-height:calc(100vh - 140px); overflow-y:auto; min-width:320px; } /* room for long product names */
.ih-drop-list .ih-acc.open > .ih-acc-head { color:var(--brand); }
.ih-drop-list .ih-acc-in a { padding:6px 16px; padding-inline-start:56px; font-size:13.5px; color:#555; }
.ih-drop-list .ih-acc-in a:hover { padding-inline-start:60px; }
.ih-drop-list .ih-acc-in a.ih-acc-all { font-weight:700; color:var(--brand); }

/* ─── Wordmark (store name, or the uploaded logo) ─────────────────── */
.ih-mark { display:inline-flex; flex-direction:column; line-height:1; color:var(--ih-ink); }
.ih-mark-name { font-weight:900; letter-spacing:-.5px; }
.ih-mark-name::after { content:""; display:block; height:3px; border-radius:2px; background:var(--brand); margin-top:4px; width:62%; }
.ih-mark.sm .ih-mark-name { font-size:27px; color:var(--brand); }
.ih-mark.sm .ih-mark-name::after { background:var(--accent); height:2px; }
.ih-mark.md .ih-mark-name { font-size:46px; }
.ih-mark.lg .ih-mark-name { font-size:clamp(56px, 8.5vw, 112px); }
/* Long store names (over 8 letters) stay on one line: a smaller wordmark in each place. */
.ih-mark.long .ih-mark-name { white-space:nowrap; }
.ih-mark.lg.long .ih-mark-name { font-size:clamp(36px, 4.6vw, 66px); }
.ih-mark.md.long .ih-mark-name { font-size:34px; }
.ih-mark.lg .ih-mark-name::after { height:5px; margin-top:12px; width:100%; background:linear-gradient(90deg, var(--brand), var(--accent)); }
.ih-mark.has-logo img { height:36px; width:auto; max-width:250px; object-fit:contain; }
.ih-mark.md.has-logo img { height:44px; max-width:280px; }
.ih-mark.lg.has-logo img { height:clamp(90px, 12vw, 150px); }

/* ─── Hero: full width, moving photos under a light diagonal shade ── */
.ih-hero { position:relative; height:720px; overflow:hidden; background:#0c0c0e; }
.ih-hero-bg, .ih-slide, .ih-slide img, .ih-hero-shade { position:absolute; inset:0; }
.ih-slide img { width:100%; height:100%; object-fit:cover; }
/* One shared 21 s cycle, three photos 7 s apart: each fades in on top (z-index), holds, then
   sits under the next one; a slow zoom-out runs the whole time so the picture never stands still.
   The first photo starts already visible (negative delay) so the page never opens on an empty frame. */
/* Pre-Storm (2026-10-23): official TOTACHI banners with their own wording. Four photos 7 s apart in a 28 s
   cycle, cross-fade only — no zoom (it would cut the banner text at the edges) and no mirroring. */
.ih-slide { opacity:0; animation:ihCycle4 28s linear infinite both; will-change:opacity; }
.ih-slide.s1 { animation-delay:-1.5s; }
.ih-slide.s2 { animation-delay:5.5s; }
.ih-slide.s3 { animation-delay:12.5s; }
.ih-slide.s4 { animation-delay:19.5s; }
@keyframes ihCycle4 {
  0%    { opacity:0; z-index:3; }
  5.25% { opacity:1; z-index:3; }
  6%    { z-index:2; }
  30%   { opacity:1; }
  30.75%{ opacity:0; z-index:1; }
  100%  { opacity:0; z-index:1; }
}
/* 2026-10-31: five banners (six with an uploaded hero photo). Same 7 s per photo and the same fade timing,
   in a 35 s / 42 s cycle (the percentages above scaled to the longer cycle). */
@media (prefers-reduced-motion:no-preference) {   /* reduced motion keeps the still first photo (rule at the end) */
  .ih-hero-bg.ih-n5 .ih-slide { animation-name:ihCycle5; animation-duration:35s; }
  .ih-hero-bg.ih-n6 .ih-slide { animation-name:ihCycle6; animation-duration:42s; }
}
.ih-slide.s5 { animation-delay:26.5s; }
.ih-slide.s6 { animation-delay:33.5s; }
@keyframes ihCycle5 {
  0%    { opacity:0; z-index:3; }
  4.2%  { opacity:1; z-index:3; }
  4.8%  { z-index:2; }
  24%   { opacity:1; }
  24.6% { opacity:0; z-index:1; }
  100%  { opacity:0; z-index:1; }
}
@keyframes ihCycle6 {
  0%    { opacity:0; z-index:3; }
  3.5%  { opacity:1; z-index:3; }
  4%    { z-index:2; }
  20%   { opacity:1; }
  20.5% { opacity:0; z-index:1; }
  100%  { opacity:0; z-index:1; }
}
/* The banner keeps its own proportions (never cropped); the line and the button sit in a dark band under it,
   so no shade is needed on the photos. Wider than 1600px the banner stops growing (the files are 1314 px wide)
   and its sides fade into the dark background. */
.ih-hero { height:auto; }
.ih-hero-bg { position:relative; inset:auto; width:100%; max-width:1600px; margin:0 auto; aspect-ratio:1314 / 410; overflow:hidden; }
@media (min-width:1601px) {
  .ih-hero-bg { -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
                mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
}
.ih-hero .ih-hero-text h1 { color:#fff; }
.ih-hero .ih-outline { border-color:#fff; color:#fff; flex:none; }
.ih-hero .ih-outline:hover { border-color:var(--brand); }
.ih-hero-in { position:relative; z-index:5; }
.ih-hero-text { display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap;
                padding:22px 0; animation:ihRise .9s ease .15s both; }
.ih-hero h1 { font-size:clamp(20px, 2.2vw, 28px); font-weight:800; letter-spacing:.5px; margin:0; color:var(--ih-ink); line-height:1.5; }
@keyframes ihRise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

/* 2026-11-01: with JavaScript the slider takes over from the CSS cycle above (theme-b-home.js adds .ih-js):
   the next photo slides in from the left in Arabic and from the right in English, one dot per photo under the
   banner, swipe on phones. Without JavaScript the CSS cycle keeps running as before.
   The frame keeps its fixed proportions, so nothing moves around it. */
/* A single photo simply stays (the CSS cycle would fade it out after 7 s). */
.ih-hero-bg.ih-n1 .ih-slide { animation:none; opacity:1; }
.ih-hero-bg.ih-js { touch-action:pan-y; }
.ih-hero-bg.ih-js .ih-slide { animation:none; opacity:1; z-index:1; visibility:hidden; transform:translateX(0); will-change:transform; }
.ih-hero-bg.ih-js .ih-slide.is-on { visibility:visible; z-index:2; }
.ih-hero-bg.ih-js .ih-slide.is-in { visibility:visible; z-index:3; }
.ih-hero-bg.ih-js .ih-slide img { -webkit-user-drag:none; user-select:none; }
/* Dots: space kept from the first paint (visibility, not display), shown once the slider runs. 36 px tap area each. */
.ih-dots { display:flex; justify-content:center; align-items:center; gap:2px; height:36px; margin-top:6px;
           position:relative; z-index:5; visibility:hidden; }
.ih-dots.on { visibility:visible; }
.ih-dot { width:36px; height:36px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center;
          -webkit-tap-highlight-color:transparent; }
.ih-dot::before { content:""; width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.45);
                  transition:width .35s ease, background-color .35s ease; }
.ih-dot:hover::before { background:rgba(255,255,255,.8); }
.ih-dot[aria-current="true"]::before { width:26px; background:var(--brand); }
.ih-dot:focus-visible { outline:none; }
.ih-dot:focus-visible::before { box-shadow:0 0 0 2px #0c0c0e, 0 0 0 4px #fff; }
.ih-dots + .ih-hero-in .ih-hero-text { padding-top:10px; }

.ih-outline {
  display:inline-flex; align-items:center; justify-content:center; min-width:170px; height:56px; padding:0 30px;
  border:1.5px solid var(--ih-ink); border-radius:999px; color:var(--ih-ink); font-weight:600; font-size:15px;
  background:transparent; position:relative; overflow:hidden; isolation:isolate; transition:color .35s ease, border-color .35s ease;
}
.ih-outline::before {
  content:""; position:absolute; inset:0; z-index:-1; background:var(--brand); border-radius:inherit;
  transform:scaleX(0); transform-origin:right; transition:transform .35s ease;
}
html[dir=ltr] .ih-outline::before { transform-origin:left; }
.ih-outline:hover { color:var(--tb-on); border-color:var(--brand); }
.ih-outline:hover::before { transform:scaleX(1); }

/* ─── "About" section: one huge centred heading, centred paragraphs ─ */
.ih-about { padding:70px 0 80px; text-align:center; }
.ih-narrow { max-width:1120px; }
.ih-big { font-size:clamp(34px, 5.2vw, 72px); font-weight:800; color:var(--ih-ink); margin:0 0 34px; letter-spacing:-.5px; line-height:1.25; }
.ih-about p { font-size:17px; line-height:1.95; color:#555; margin:0 auto 18px; max-width:1100px; }
.ih-about p b { color:var(--ih-ink); }

/* ─── Products (same heading style; the shared theme B cards) ─────── */
.ih-products { padding:10px 0 80px; text-align:center; }
.ih-products .ih-big { margin-bottom:10px; }
.ih-sub { color:#666; font-size:17px; margin:0 0 34px; }
.ih-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; text-align:start; }
.ih-grid .tb-card { transition:transform .3s ease, box-shadow .3s ease; }
.ih-grid .tb-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.08); }
.ih-center { margin-top:34px; }

/* ─── Categories with their icons (same heading style) ─────────────── */
.ih-cats { padding:10px 0 80px; text-align:center; }
.ih-cat-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:26px 30px; }
.ih-cat { width:132px; display:flex; flex-direction:column; align-items:center; gap:10px; font-weight:700; font-size:15px; color:var(--ih-ink); line-height:1.35; }
.ih-cat .tb-cat-img { width:112px; height:112px; transition:transform .3s ease, box-shadow .3s ease; }
.ih-cat:hover .tb-cat-img { transform:translateY(-4px); box-shadow:0 0 0 2px var(--brand), 0 12px 24px rgba(0,0,0,.08); }
.ih-cat:hover .nm { color:var(--brand); }

/* ─── Footer: grey band with columns, dark bottom bar ─────────────── */
.ih-foot { background:var(--ih-grey); color:#333; padding:90px 0 0; }
.ih-foot-grid { display:grid; grid-template-columns:1.1fr 1.3fr 1.1fr 1fr; gap:24px; padding-bottom:70px; }
.ih-foot-brand p { margin:14px 0 0; color:#444; font-size:14px; }
.ih-col h4 {
  font-size:18px; font-weight:800; margin:0 0 14px; padding-bottom:12px; position:relative; color:var(--ih-ink);
  border-bottom:2px solid rgba(255,255,255,.75);
}
.ih-col h4::after { content:""; position:absolute; bottom:-2px; inset-inline-start:0; width:24px; height:2px; background:var(--ih-ink); }
.ih-links { display:flex; flex-direction:column; }
.ih-links a { padding:5px 0; font-size:14px; color:#444; display:flex; align-items:center; gap:8px; transition:color .2s, transform .2s; }
.ih-links a::before { content:"›"; font-weight:800; color:#222; }
html[dir=rtl] .ih-links a::before { content:"‹"; }
.ih-links a:hover { color:var(--brand-2); transform:translateX(-3px); }
html[dir=ltr] .ih-links a:hover { transform:translateX(3px); }
.ih-social { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.ih-social a {
  width:30px; height:30px; border-radius:50%; border:1.5px solid #222; display:grid; place-items:center; color:#222;
  transition:transform .3s ease, background .3s, color .3s, border-color .3s;
}
.ih-social a:hover { transform:translateY(4px); background:var(--brand); border-color:var(--brand); color:var(--tb-on); } /* "sink" */
.ih-line { display:flex; align-items:flex-start; gap:8px; font-size:14px; color:#444; margin:6px 0; }
.ih-line .tb-ic { margin-top:4px; color:#222; }
.ih-bottom { background:#0d0f0e; color:#e9ece9; font-size:13.5px; }
.ih-bottom .ih-wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; flex-wrap:wrap; }
.ih-pay { display:flex; gap:8px; }
.ih-pay span { background:#fff; color:#222; border-radius:5px; padding:2px 9px; font-size:11.5px; font-weight:800; }

/* ─── Floating WhatsApp + back to top ─────────────────────────────── */
.ih-wa {
  position:fixed; z-index:65; right:28px; bottom:96px; width:46px; height:46px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:transform .25s;
}
.ih-wa:hover { transform:scale(1.08); background:var(--brand-2); }
.ih-wa .tb-ic { animation:ihSpin 5s ease-in-out infinite; }
@keyframes ihSpin { 0%, 70% { transform:none; } 85% { transform:rotate(360deg); } 100% { transform:rotate(360deg); } }
.ih-top {
  position:fixed; z-index:65; left:20px; bottom:20px; width:50px; height:50px; border-radius:50%; background:#fff; color:#333;
  display:grid; place-items:center; box-shadow:0 2px 12px rgba(0,0,0,.14);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s, transform .3s, visibility .3s;
}
.ih-top.show { opacity:1; visibility:visible; transform:none; }

.ih-flash { padding-top:14px; }

/* ─── Tablets ─────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .ih-nav { gap:16px; font-size:14px; }
  .ih-pill span { display:none; }
  .ih-pill { width:42px; padding:0; justify-content:center; }
  .ih-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .ih-foot-grid { grid-template-columns:1fr 1fr; }
}

/* ─── Phones ──────────────────────────────────────────────────────── */
@media (max-width:900px) {
  body.ih { --ih-head:60px; }
  .ih-nav, .ih-pill { display:none; }
  .ih-head-row { gap:10px; }
  .ih-burger { display:grid; place-items:center; width:40px; height:40px; color:#222; flex:none; }
  .ih-logo { position:absolute; left:50%; transform:translateX(-50%); }
  .ih-head-row { position:relative; }
  .ih-tools { margin-inline-start:auto; gap:4px; }
  .ih-circle { background:none; width:40px; height:40px; color:#222; }
  .ih-circle:hover { background:none; }
  .ih-cart { background:none; color:#222; }
  .ih-cart:hover { background:none; color:var(--brand); }
  .ih-mark.sm.long .ih-mark-name { font-size:20px; }
  .ih-mark.sm.has-logo img { height:26px; max-width:172px; } /* centred between the menu and the cart */
  .ih-badge.tb-count { top:0; inset-inline-end:0; background:var(--brand); color:var(--tb-on); }
  .ih-wa { right:16px; bottom:calc(var(--tb-bar-h, 60px) + 22px + env(safe-area-inset-bottom)); }
  .ih-about p { padding-inline:64px; } /* centred lines stay clear of the WhatsApp button (right:16px, 46px wide) */
  .ih-top { left:14px; bottom:calc(var(--tb-bar-h, 60px) + 18px + env(safe-area-inset-bottom)); width:44px; height:44px; }
}
@media (max-width:700px) {
  .ih-wrap { padding:0 16px; }
  /* Phones: TOTACHI's own upright banners (600x750), whole; the line and the button stacked under them. */
  .ih-hero-bg { aspect-ratio:600 / 750; }
  .ih-hero-text { flex-direction:column; align-items:stretch; gap:14px; padding:18px 0 22px; }
  /* Keep the line and the button clear of the floating WhatsApp button (right:16px, 46px wide), as in "about". */
  .ih-hero h1 { font-size:20px; padding-right:56px; }
  .ih-hero .ih-outline { align-self:flex-start; margin-right:56px; }
  .ih-outline { height:48px; min-width:150px; padding:0 22px; }
  .ih-about { padding:34px 0 40px; text-align:start; }
  .ih-about .ih-big { font-size:34px; margin-bottom:18px; }
  .ih-about p { font-size:15.5px; line-height:2; }
  /* The WhatsApp button floats at the right edge (right:16px, 46px wide). Keep the short
     "why shop with us" lines clear of it, so it never covers the start of a line. */
  .ih-about p { padding-left:0; padding-right:56px; } /* lines start at the right: + the 16px page margin = 72px */
  .ih-products { padding:6px 0 44px; text-align:start; }
  .ih-products .ih-big, .ih-cats .ih-big { font-size:30px; }
  .ih-cats { padding:0 0 44px; }
  .ih-cat-grid { gap:18px 10px; }
  .ih-cat { width:calc((100% - 20px) / 3); font-size:13px; }
  .ih-cat .tb-cat-img { width:84px; height:84px; }
  .ih-sub { font-size:15px; margin-bottom:18px; }
  .ih-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .ih-center { text-align:center; }
  .ih-foot { padding-top:50px; }
  .ih-foot-grid { grid-template-columns:1fr; gap:30px; padding-bottom:40px; }
  .ih-foot-brand { text-align:center; }
  .ih-bottom .ih-wrap { justify-content:center; text-align:center; padding:14px 16px; }
}

@media (prefers-reduced-motion:reduce) {
  .ih-slide { animation:none; }
  .ih-slide.s1 { opacity:1; }
  .ih-hero-text, .ih-wa .tb-ic, .ih-head.is-stuck { animation:none; }
  .ih-outline::before, .ih-drop-list, .ih-search, .ih-search-box, .ih-drawer-panel { transition:none; }
  .ih-acc-body, .ih-acc.open > .ih-acc-body, .ih-acc-head > .tb-ic { transition:none; }
  .ih-dot::before { transition:none; }
}
@media print { .ih-hero-bg, .ih-dots, .ih-wa, .ih-top { display:none; } }

/* ─── Language globe in the header (setting store_top_strip = hide, 2026-10-20) ───
   The globe (.ih-lang) is printed only by stores with that setting, so these rules change nothing elsewhere.
   2026-10-29: the globe stays on phones too (every page, everyone); the header shows the small brand mark
   instead of the word, beside the menu, so there is room (assets/dealer.css, «رأس المتجر»).
   Very narrow phones: the logo joins the row between the menu and the icons, so search does not touch it either. */
@media (max-width:379px) {
  .ih-head-row:has(.ih-lang) .ih-logo { position:static; transform:none; flex:1; min-width:0; justify-content:center; }
  .ih-head-row:has(.ih-lang) .ih-mark.sm.has-logo img { max-width:100%; }
  .ih-head-row:has(.ih-lang) .ih-tools { margin-inline-start:0; }
}

/* ─── The home header on another page (body.ihh, 2026-10-26: «الموزّعون») ───
   tb_head() prints the same header there (TB_HOME_HEADER_PAGES); only its measures come along,
   the page keeps its own background and content. Nothing here touches the home page (body.ih). */
body.ihh { --ih-head:80px; --ih-head-stuck:60px; --ih-grey:#d8d9db; --ih-ink:#222; }
@media (max-width:900px) { body.ihh { --ih-head:60px; } }

/* Store pages row in the home footer (من نحن + the policies, 2026-10-30) */
.ih-legal { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; border-top:1px solid rgba(0,0,0,.12); padding-top:14px; padding-bottom:14px; font-size:14px; }
.ih-legal a { color:#444; padding:3px 0; }
.ih-legal a:hover { color:#000; text-decoration:underline; }