/* ============================================================
   SMARTECH — design system
   Palette: charcoal #181818/#1c1c1c dark bands · pure white
   product sections · brand red #ff2c2c single accent (logo-matched) ·
   steel grey #8a8f94 secondary chrome.
   Type: Sora (display, wide-tracked eyebrows) + Inter (body),
   with Noto Sans Devanagari / SC / Arabic fallbacks per script.
   RTL: logical properties only — no hardcoded left/right.
   ============================================================ */

:root{
  --ink:#181818; --ink-2:#1c1c1c; --panel:#232323;
  --paper:#ffffff; --paper-2:#f5f5f4;
  --orange:#ff2c2c; --orange-deep:#d91f1f; --logo-grey:#898989;
  --steel:#8a8f94; --steel-2:#c4c8cb; --line:#e6e6e4; --line-dark:#2e2e2e;
  --ok:#3aa46a; --warn-bg:#fff6ec; --warn-line:#f5b26b;
  --font-body:"Inter","Noto Sans","Noto Sans Devanagari","Noto Sans SC","Noto Sans Arabic",system-ui,sans-serif;
  --font-display:"Sora","Inter","Noto Sans Devanagari","Noto Sans SC","Noto Sans Arabic",system-ui,sans-serif;
  --font-logo:"Ethnocentric Rg","Ethnocentric","Sora","Inter",system-ui,sans-serif; /* SMARTECH wordmark */
  --logo-red:#D82028; /* red of the T, sampled from the reference logo */
  --track:.18em; --radius:2px; --maxw:1200px;
  --sh:0 10px 30px rgba(24,24,24,.10);
}
html[lang="hi"]{ --font-display:"Noto Sans Devanagari","Sora",system-ui,sans-serif; --track:.08em; }
html[lang="zh"]{ --font-display:"Noto Sans SC","Sora",system-ui,sans-serif; --track:.14em; }
html[lang="ar"]{ --font-display:"Noto Sans Arabic","Sora",system-ui,sans-serif; --track:0; }
html[lang="ru"]{ --font-display:"Inter","Sora",system-ui,sans-serif; --track:.12em; } /* Sora ships no Cyrillic */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation:none!important; transition:none!important; } }
body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.6; font-size:16px; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.skip{ position:absolute; inset-inline-start:-999px; } .skip:focus{ inset-inline-start:8px; top:8px; background:var(--orange); color:#fff; padding:8px 14px; z-index:99; }

/* ---------- type ---------- */
.eyebrow{ font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--orange); }
.eyebrow.grey{ color:var(--steel); }
.display{ font-family:var(--font-display); font-weight:800; line-height:1.04; letter-spacing:-.01em; margin:0; }
h1.display{ font-size:clamp(38px,6vw,72px); }
h2.display{ font-size:clamp(28px,4vw,44px); }
.rule{ width:56px; height:3px; background:var(--orange); border:0; margin:22px 0; margin-inline-start:0; }
.muted{ color:var(--steel); }
.lead{ font-size:17px; max-width:62ch; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; border:0; border-radius:var(--radius);
  font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 26px; text-decoration:none; transition:background .15s,color .15s,border-color .15s; }
.btn .arr{ transition:transform .15s; }
html[dir="ltr"] .btn:hover .arr{ transform:translateX(4px); }
html[dir="rtl"] .btn:hover .arr{ transform:translateX(-4px); }
html[dir="rtl"] .arr{ display:inline-block; transform:scaleX(-1); }
html[dir="rtl"] .btn:hover .arr{ transform:scaleX(-1) translateX(4px); }
.btn-orange{ background:var(--orange); color:#fff; } .btn-orange:hover{ background:var(--orange-deep); }
.btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); } .btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }
.btn-dark{ background:var(--ink); color:#fff; } .btn-dark:hover{ background:#000; }
.btn-line{ background:transparent; color:var(--ink); border:1px solid var(--ink); } .btn-line:hover{ border-color:var(--orange); color:var(--orange); }
.btn-sm{ padding:9px 16px; font-size:11.5px; }
.btn.is-on{ background:var(--ink); color:var(--orange); border-color:var(--ink); }

/* ---------- header ---------- */
.hd{ position:sticky; top:0; z-index:60; background:var(--ink); color:#fff; border-block-end:1px solid var(--line-dark); }
.hd-in{ display:flex; align-items:center; gap:26px; min-height:64px; }
.logo{ font-family:var(--font-logo); font-weight:400; font-size:14.5px; letter-spacing:-.03em;
  -webkit-text-stroke:.045em currentColor; /* thickens Ethnocentric Regular toward the logo's bold cut */
  text-decoration:none; color:var(--logo-grey); white-space:nowrap; }
.logo b{ font-weight:400; color:var(--logo-red); }
/* registered mark: sits beside the wordmark without inheriting its
   letter-spacing or synthetic stroke, so it stays crisp at every size */
.logo .reg, .bm-word .reg{ font-size:.44em; line-height:0; vertical-align:super;
  letter-spacing:0; -webkit-text-stroke:0; font-family:var(--font-body); font-weight:600;
  margin-inline-start:.12em; }
.logo .reg{ color:var(--logo-grey); }
.bm-word .reg{ color:#fff; }

.hd nav{ display:flex; align-items:center; gap:4px; flex:1; }
.hd nav > a, .hd nav > button{ background:none; border:0; color:#d9d9d7; font:600 13px/1 var(--font-display);
  letter-spacing:.07em; text-transform:uppercase; padding:24px 12px; text-decoration:none; position:relative; }
.hd nav > a:hover, .hd nav > button:hover, .hd nav > a.on, .hd nav > button.on{ color:#fff; }
.hd nav > a.on::after, .hd nav > button.on::after{ content:""; position:absolute; inset-inline:12px; bottom:0; height:3px; background:var(--orange); }
.hd-tools{ display:flex; align-items:center; gap:8px; }
.icon-btn{ background:none; border:1px solid var(--line-dark); color:#d9d9d7; width:38px; height:38px; border-radius:var(--radius);
  display:grid; place-items:center; font-size:16px; } .icon-btn:hover{ border-color:var(--orange); color:var(--orange); }
.cmp-btn{ position:relative; }
.cmp-badge{ position:absolute; top:-6px; inset-inline-end:-6px; background:var(--orange); color:#fff; font:700 10.5px/1 var(--font-display);
  min-width:17px; height:17px; border-radius:9px; display:grid; place-items:center; padding-inline:3px; }

/* language switcher */
.lang{ position:relative; }
.lang-btn{ display:flex; align-items:center; gap:7px; background:none; border:1px solid var(--line-dark); color:#fff;
  font:700 12.5px/1 var(--font-display); letter-spacing:.06em; padding:10px 12px; border-radius:var(--radius); }
.lang-btn .lang-word{ text-transform:uppercase; color:var(--steel); font-size:11px; letter-spacing:.12em; }
.lang-btn:hover .lang-word{ color:#fff; }
.lang-btn .lang-code{ font-weight:800; }
@media (max-width:1040px){ .lang-btn .lang-word{ display:none; } }  /* code only when space is tight */
.lang-btn:hover{ border-color:var(--orange); }
.lang-menu{ position:absolute; inset-inline-end:0; top:calc(100% + 8px); background:#fff; color:var(--ink);
  border:1px solid var(--line); box-shadow:var(--sh); min-width:170px; display:none; z-index:70; }
.lang-menu.open{ display:block; }
.lang-menu button{ display:flex; justify-content:space-between; gap:14px; width:100%; background:none; border:0;
  padding:11px 14px; font:500 14px/1 var(--font-body); text-align:start; }
.lang-menu button:hover{ background:var(--paper-2); }
.lang-menu button.on{ color:var(--orange); font-weight:700; }
.lang-menu .code{ color:var(--steel); font:700 11px/1 var(--font-display); letter-spacing:.08em; }

/* mega menu */
.mega{ position:absolute; inset-inline:0; top:100%; background:#fff; color:var(--ink); border-block-start:3px solid var(--orange);
  box-shadow:0 24px 48px rgba(0,0,0,.28); display:none; max-height:calc(100vh - 80px); overflow:auto; }
.mega.open{ display:block; }
.mega-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.mega-col{ padding:26px 22px; border-inline-end:1px solid var(--line); }
.mega-col:last-child{ border-inline-end:0; }
.mega-col h4{ margin:0 0 2px; font:800 15px/1.3 var(--font-display); }
.mega-col h4 a{ text-decoration:none; } .mega-col h4 a:hover{ color:var(--orange); }
.mega-num{ font:800 12px/1 var(--font-display); color:var(--orange); letter-spacing:var(--track); }
.mega-count{ font-size:12px; color:var(--steel); margin:0 0 12px; }
.mega-col ul{ list-style:none; margin:0; padding:0; columns:1; }
.mega-col li a{ display:block; font-size:13px; color:#3c3c3a; text-decoration:none; padding:3.5px 0; }
.mega-col li a:hover{ color:var(--orange); }
.mega-col .viewall{ display:inline-block; margin-top:12px; font:700 12px/1 var(--font-display); letter-spacing:.06em;
  text-transform:uppercase; color:var(--orange); text-decoration:none; }
.mega-col .viewall:hover{ text-decoration:underline; }
.mega-col.two ul{ columns:2; column-gap:18px; }

/* search overlay */
.search-pane{ position:absolute; inset-inline:0; top:100%; background:#fff; color:var(--ink);
  border-block-start:3px solid var(--orange); box-shadow:0 24px 48px rgba(0,0,0,.28); display:none; }
.search-pane.open{ display:block; }
.search-in{ padding:22px 24px; }
.search-in input{ width:100%; border:0; border-block-end:2px solid var(--ink); font:600 20px/1.3 var(--font-display);
  padding:10px 2px; background:none; } .search-in input:focus{ outline:none; border-color:var(--orange); }
.search-res{ padding:8px 0 4px; max-height:320px; overflow:auto; }
.search-res a{ display:flex; justify-content:space-between; gap:16px; padding:10px 2px; text-decoration:none; border-block-end:1px solid var(--line); }
.search-res a:hover{ color:var(--orange); }
.search-res .m{ font:700 14px/1.3 var(--font-display); }
.search-res .c{ font-size:12px; color:var(--steel); }
.search-empty{ padding:14px 2px; color:var(--steel); font-size:14px; }

/* mobile nav */
.burger{ display:none; }
@media (max-width:960px){
  .hd nav{ display:none; }
  .burger{ display:grid; }
  .mnav{ display:none; background:var(--ink-2); border-block-start:1px solid var(--line-dark); }
  .mnav.open{ display:block; }
  .mnav a, .mnav button{ display:block; width:100%; text-align:start; background:none; border:0; color:#e8e8e6;
    font:600 15px/1 var(--font-display); letter-spacing:.05em; text-transform:uppercase; padding:15px 24px; text-decoration:none;
    border-block-end:1px solid var(--line-dark); }
  .mnav .sub a{ font:500 14px/1 var(--font-body); text-transform:none; color:#b9b9b6; padding:11px 24px; padding-inline-start:40px; }
  .mega-grid{ grid-template-columns:1fr 1fr; } .mega-col{ border-block-end:1px solid var(--line); }
}
@media (max-width:640px){ .mega-grid{ grid-template-columns:1fr; } }
@media (min-width:961px){ .mnav{ display:none!important; } }

/* ---------- dark hero band (home + category story) ---------- */
.band-dark{ background:linear-gradient(120deg,#181818 0%,#1c1c1c 100%); color:#fff; position:relative; overflow:hidden; }
.band-dark .muted{ color:#a9adb1; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding-block:84px; }
.hero-num{ position:absolute; inset-block-start:8px; inset-inline-end:-10px; font:800 clamp(160px,26vw,340px)/1 var(--font-display);
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.08); user-select:none; pointer-events:none; }
.hero-photo{ position:relative; z-index:1; }
.hero-photo .ph{ background:#f4f4f2; padding:26px; }
.hero-photo img{ width:100%; height:auto; max-height:520px; object-fit:contain; }
.hero-copy{ position:relative; z-index:1; }
.hero-copy .display .accent{ color:var(--orange); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
@media (max-width:880px){
  .hero-grid{ grid-template-columns:1fr; padding-block:56px; }
  .hero-photo{ order:-1; }
}

/* why strip */
.why{ background:var(--ink-2); border-block-start:1px solid var(--line-dark); color:#fff; }
.why-grid{ display:flex; justify-content:space-between; gap:22px; padding-block:38px; }
.why-item{ display:flex; gap:10px; align-items:center; color:#cfd2d4;
  font-size:clamp(11.5px, .98vw, 13.5px); white-space:nowrap; } /* each point stays on one line */
.why-item .tick{ color:var(--orange); font-weight:800; }
@media (max-width:880px){ .why-grid{ display:grid; grid-template-columns:1fr 1fr; }
  .why-item{ white-space:normal; font-size:13.5px; align-items:flex-start; } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- white sections ---------- */
.sect{ padding-block:78px; }
.sect-head{ margin-bottom:40px; }
.sect-head .display{ margin-top:10px; }

/* category tiles (home) */
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
/* two dedicated columns — text | image — so nothing can ever overlap.
   Same gradient, colors, type and hover zoom as before. */
.cat-tile{ background:linear-gradient(115deg,#1a1a1a 46%,#3a3a38 100%); color:#fff; min-height:300px;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:8px;
  text-decoration:none; overflow:hidden; }
.cat-tile img{ width:100%; height:100%; max-height:300px; object-fit:contain; object-position:center;
  padding:22px; align-self:center; transition:transform .25s; }
.cat-tile:hover img{ transform:scale(1.04); }
/* identical internal skeleton on every card: the two-line description slot is
   reserved even for one-line blurbs, so the number, title and text start at
   the same vertical position on all four tiles */
.cat-tile .tx{ padding:26px; display:flex; flex-direction:column; justify-content:center; }
.cat-tile .n{ color:var(--orange); font:800 13px/1 var(--font-display); letter-spacing:var(--track); }
.cat-tile h3{ margin:8px 0 6px; font:800 24px/1.15 var(--font-display); }
.cat-tile p{ margin:0; font-size:13px; line-height:1.6; color:#b9bdc0; min-height:calc(1.6em * 2); }
@media (max-width:760px){
  .cat-grid{ grid-template-columns:1fr; }
  /* stacked: text above, image below, generous padding, no overlap */
  .cat-tile{ grid-template-columns:1fr; min-height:0; }
  .cat-tile .tx{ padding:24px 24px 6px; }
  .cat-tile img{ order:2; height:200px; max-height:200px; padding:0 22px 22px; }
}

/* ---------- product cards ---------- */
.p-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:22px; }
.p-card{ border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; transition:box-shadow .18s,border-color .18s; }
.p-card:hover{ box-shadow:var(--sh); border-color:var(--steel-2); }
.p-card .im{ background:var(--paper-2); position:relative; aspect-ratio:1/1; display:grid; place-items:center; padding:18px; }
.p-card .im img{ max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.p-card .badge{ position:absolute; z-index:2; inset-block-start:0; inset-inline-start:0; background:var(--orange); color:#fff;
  font:800 11px/1 var(--font-display); letter-spacing:.1em; padding:7px 10px; text-transform:uppercase; }
.p-card .flagdot{ position:absolute; inset-block-start:10px; inset-inline-end:10px; background:var(--warn-bg);
  border:1px solid var(--warn-line); color:#a05a00; font:700 10px/1 var(--font-display); letter-spacing:.05em; padding:5px 8px; text-transform:uppercase; }
.p-card .bd{ padding:18px 18px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.p-card h3{ margin:0; font:800 17px/1.25 var(--font-display); }
.p-card .tg{ font-size:12.5px; color:var(--steel); }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.chip{ background:var(--paper-2); border:1px solid var(--line); font-size:11px; padding:4px 8px; color:#4c4c4a; }
.chip b{ color:var(--ink); font-weight:700; }
.p-card .acts{ margin-top:auto; display:flex; gap:8px; padding-top:12px; }
.p-card .acts .btn{ flex:1; justify-content:center; text-align:center; }

/* ---------- category page ---------- */
.cat-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; padding-block:74px; }
/* hero images float directly on the dark band — no card, no frame, no effects */
.cat-hero-grid .ph{ background:transparent; padding:0; border:none; box-shadow:none;
  display:flex; align-items:center; justify-content:center; }
.cat-hero-grid img{ width:100%; max-height:545px; object-fit:contain; } /* ~13% larger than the old 480px cap */
@media (max-width:880px){
  .cat-hero-grid{ grid-template-columns:1fr; padding-block:52px; }
  .cat-hero-grid .ph{ order:-1; }
  .cat-hero-grid img{ max-height:400px; }
}
.toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:26px; }
.toolbar .lbl{ font:700 11.5px/1 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--steel); }
.pillset{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ border:1px solid var(--line); background:#fff; font:600 12.5px/1 var(--font-body); padding:8px 14px; border-radius:999px; }
.pill:hover{ border-color:var(--orange); color:var(--orange); }
.pill.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.toolbar select{ border:1px solid var(--line); background:#fff; padding:8px 12px; font:600 13px/1 var(--font-body); border-radius:var(--radius); }
.toolbar .spacer{ flex:1; }

/* ---------- tables ---------- */
.tbl-scroll{ overflow-x:auto; border:1px solid var(--line); }
table.spec{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
table.spec thead th{ background:var(--ink); color:var(--orange); font:700 12px/1.3 var(--font-display); letter-spacing:.12em;
  text-transform:uppercase; text-align:start; padding:13px 16px; }
table.spec td, table.spec tbody th{ padding:12px 16px; text-align:start; border-block-end:1px solid var(--line); vertical-align:top; }
table.spec tbody tr:nth-child(odd){ background:var(--paper-2); }
table.spec tbody tr:last-child td, table.spec tbody tr:last-child th{ border-block-end:0; }
table.spec tbody th{ font-weight:600; white-space:nowrap; }
.tbl-note{ font-size:12.5px; color:var(--steel); margin-top:12px; max-width:88ch; }

/* comparison (user tool) */
table.cmp th.rowh{ background:var(--paper-2); font-weight:700; white-space:nowrap; }
table.cmp td .rm{ margin-top:8px; }
table.cmp .pimg{ width:120px; height:120px; object-fit:contain; background:var(--paper-2); padding:8px; margin-bottom:8px; }
table.cmp td{ min-width:180px; }

/* ---------- product page ---------- */
.crumbs{ font-size:13px; color:var(--steel); padding-block:18px; }
.crumbs a{ color:var(--steel); text-decoration:none; } .crumbs a:hover{ color:var(--orange); }
.pd-grid{ display:grid; grid-template-columns:minmax(300px,440px) 1fr; gap:48px; align-items:start; padding-block-end:70px; }
@media (max-width:880px){ .pd-grid{ grid-template-columns:1fr; gap:30px; } }
.pd-photo{ position:sticky; top:88px; }
.pd-photo .ph{ background:var(--paper-2); position:relative; padding:26px; }
.pd-photo img{ width:100%; aspect-ratio:1/1; object-fit:contain; mix-blend-mode:multiply; }
.pd-photo .badge{ position:absolute; inset-block-start:0; inset-inline-start:0; background:var(--orange); color:#fff;
  font:800 11px/1 var(--font-display); letter-spacing:.1em; padding:8px 12px; text-transform:uppercase; }
.quick{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.quick .q{ background:var(--paper-2); padding:14px 16px; }
.quick .k{ font:700 10.5px/1.3 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }
.quick .v{ font:800 17px/1.3 var(--font-display); margin-top:4px; }
.pd-head h1{ font-size:clamp(30px,4.5vw,46px); }
.pd-model{ color:var(--steel); font-size:15px; margin-top:8px; }
.pd-sec{ margin-top:34px; }
.pd-sec > h2{ font:800 13px/1 var(--font-display); letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px;
  padding-block-end:10px; border-block-end:1px solid var(--line); }
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ background:var(--paper-2); border:1px solid var(--line); padding:8px 13px; font-size:13px; font-weight:600; }
.feat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; margin:0; padding:0; list-style:none; }
.feat-grid li{ display:flex; gap:10px; font-size:14px; }
.feat-grid .tick{ color:var(--orange); font-weight:800; }
@media (max-width:640px){ .feat-grid{ grid-template-columns:1fr; } }
.warr{ display:flex; gap:16px; align-items:center; }
.qr-ph{ width:84px; height:84px; border:1.5px dashed var(--steel-2); display:grid; place-items:center;
  color:var(--steel); font:600 9.5px/1.2 var(--font-display); text-align:center; letter-spacing:.06em; padding:6px; flex:none; }
.pd-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-top:40px; }

/* pending / flag blocks */
.pending{ border:1.5px dashed var(--warn-line); background:var(--warn-bg); padding:16px 18px; position:relative; }
.pending .pin{ display:inline-block; background:var(--orange); color:#fff; font:800 10px/1 var(--font-display);
  letter-spacing:.14em; text-transform:uppercase; padding:5px 9px; margin-bottom:8px; }
.pending p{ margin:0; font-size:14px; color:#7a5a34; }
.flagnote{ border:1px solid var(--warn-line); background:var(--warn-bg); padding:14px 16px; font-size:13.5px; color:#7a5a34; margin-top:16px; }
.flagnote b{ display:block; color:#a05a00; font:800 11px/1.6 var(--font-display); letter-spacing:.1em; text-transform:uppercase; }

/* ---------- accessories ---------- */
.acc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.acc-card{ border:1px solid var(--line); padding:26px 22px; transition:box-shadow .18s; }
.acc-card:hover{ box-shadow:var(--sh); }
.acc-card .glyph{ width:52px; height:52px; background:var(--ink); color:var(--orange); display:grid; place-items:center;
  font:800 22px/1 var(--font-display); margin-bottom:16px; }
.acc-card h3{ margin:0 0 6px; font:800 16px/1.3 var(--font-display); }
.acc-card p{ margin:0; font-size:13px; color:var(--steel); }
@media (max-width:960px){ .acc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .acc-grid{ grid-template-columns:1fr; } }
.std-acc{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- compare tray ---------- */
.tray{ position:fixed; inset-inline:0; bottom:0; background:var(--ink); color:#fff; z-index:55;
  box-shadow:0 -12px 30px rgba(0,0,0,.3); transform:translateY(110%); transition:transform .22s; }
.tray.show{ transform:translateY(0); }
.tray-in{ display:flex; align-items:center; gap:16px; padding-block:12px; flex-wrap:wrap; }
.tray-items{ display:flex; gap:10px; flex-wrap:wrap; flex:1; }
.tray-chip{ display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line-dark);
  padding:7px 10px; font:600 12.5px/1 var(--font-display); }
.tray-chip button{ background:none; border:0; color:var(--steel); font-size:14px; padding:0; line-height:1; }
.tray-chip button:hover{ color:var(--orange); }

/* ---------- company / contact ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
@media (max-width:840px){ .two-col{ grid-template-columns:1fr; } }
.stack > * + *{ margin-top:22px; }
.kv{ display:grid; gap:16px; }
.kv .row{ display:flex; gap:14px; align-items:flex-start; }
.kv .k{ font:700 11px/1.6 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--steel); min-width:96px; }
form.cf{ display:grid; gap:14px; }
form.cf label{ font:700 11.5px/1 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--steel); display:block; margin-bottom:6px; }
form.cf input, form.cf textarea{ width:100%; border:1px solid var(--line); background:#fff; padding:12px 14px;
  font:400 15px/1.5 var(--font-body); border-radius:var(--radius); }
form.cf input:focus, form.cf textarea:focus{ outline:none; border-color:var(--orange); }
.form-msg{ font-size:14px; padding:12px 14px; display:none; }
.form-msg.ok{ display:block; background:#eef7f1; border:1px solid #bfe3cd; color:#20603c; }
.form-msg.err{ display:block; background:var(--warn-bg); border:1px solid var(--warn-line); color:#a05a00; }

/* ---------- footer ---------- */
.ft{ background:var(--ink); color:#c8cbcd; margin-top:40px; }
.ft-grid{ display:grid; grid-template-columns:1.2fr 1fr 1.3fr; gap:40px; padding-block:56px; }
.ft h5{ margin:0 0 16px; font:800 12px/1 var(--font-display); letter-spacing:.16em; text-transform:uppercase; color:#fff; }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ft a{ color:#c8cbcd; text-decoration:none; font-size:14px; } .ft a:hover{ color:var(--orange); }
.ft .qr-row{ display:flex; gap:14px; align-items:center; margin-top:18px; }
.ft .qr-ph{ border-color:#3c3c3a; color:#8a8f94; }
.ft-bottom{ border-block-start:1px solid var(--line-dark); padding-block:18px; display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; text-align:center; font-size:12.5px; color:var(--steel); }
@media (max-width:840px){ .ft-grid{ grid-template-columns:1fr; gap:32px; } }

/* dark CTA band */
.cta-band{ background:var(--ink-2); color:#fff; }
.cta-band .in{ padding-block:64px; display:flex; flex-wrap:wrap; align-items:center; gap:26px; justify-content:space-between; }

/* utility */
.mt0{ margin-top:0; } .hide{ display:none!important; }
[data-view]{ animation:fadein .18s ease-out; }
@keyframes fadein{ from{ opacity:.35; } to{ opacity:1; } }

/* dual QR slots (WeChat / WhatsApp — drop <img> into #qr-wechat / #qr-whatsapp) */
.qr-duo{ display:flex; gap:18px; flex-wrap:wrap; }
.qr-slot{ margin:0; text-align:center; }
.qr-slot .qr-ph{ width:104px; height:104px; }
.qr-slot img{ width:104px; height:104px; object-fit:contain; background:#fff; padding:4px; }
.qr-slot figcaption{ margin-top:8px; font:700 10.5px/1.4 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--steel); }

.hero-photo .ph{
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}
.hero-photo .ph img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#smx-chat-window{
  /* ...existing rules... */
  resize: both;
  overflow: hidden; /* keep this on the outer wrapper */
  min-width: 320px;
  min-height: 420px;
}

#smx-resize-handle{
  position:absolute; top:0; left:-8px; width:8px; height:100%;
  cursor:ew-resize; z-index:10001;
}
#smx-chat-window{ position:fixed; /* already is */ }
/* ---------- SMARTECH brandmark (Company page) ----------
   Bare wordmark floating on the dark band — no card, no border,
   no background, no effects. */
.brandmark{ width:100%; min-height:380px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:56px 20px; text-align:center; }
.bm-word{ font-family:var(--font-logo); font-weight:400; line-height:1; color:#fff;
  font-size:clamp(28px, 4.2vw, 54px); letter-spacing:-.03em; white-space:nowrap;
  -webkit-text-stroke:.045em currentColor; }
.bm-word b{ color:var(--logo-red); font-weight:400; }
.bm-rule{ width:72px; height:3px; background:var(--logo-red); }
.bm-tag{ font:700 11.5px/1.7 var(--font-display); letter-spacing:.26em; text-transform:uppercase; color:#fff; max-width:34ch; }
@media (max-width:880px){
  .cat-hero-grid .brandmark{ order:-1; }   /* logo above copy when stacked, like the old image */
  .brandmark{ min-height:0; padding:26px 12px 6px; gap:18px; }
  .bm-word{ font-size:clamp(30px, 8.6vw, 44px); }
}

/* ---------- OPTIONAL: self-host Ethnocentric instead of the CDN ----------
   1. Get the font files (ethnocentric-rg.woff2 / .woff) — free desktop version
      from typodermicfonts.com; web-embedding license also sold there.
   2. Place them in fonts/ and uncomment:

@font-face{
  font-family:"Ethnocentric Rg";
  src:url("../fonts/ethnocentric-rg.woff2") format("woff2"),
      url("../fonts/ethnocentric-rg.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
   3. Then remove the cdnfonts <link> from index.html.                     */

/* ---------- contact page redesign (matches reference: hero + crumbs,
   two-col info/form, 2x2 info grid, map embed below) ---------- */
.contact-crumbs{ margin-top:22px; display:flex; gap:8px; align-items:center; font:600 12px/1 var(--font-display);
  letter-spacing:.08em; text-transform:uppercase; color:#c9cbcd; }
.contact-crumbs a{ color:#c9cbcd; text-decoration:none; } .contact-crumbs a:hover{ color:var(--orange); }
.contact-crumbs .sep{ color:#5c5c5a; }

.contact-lead{ max-width:52ch; }
.contact-lead h2{ font-size:clamp(26px,3.4vw,38px); margin:0 0 16px; }

.cinfo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px; align-items:start; }
.cinfo-col{ display:flex; flex-direction:column; gap:30px; }
.cinfo-item .k{ font:700 14.5px/1.7 var(--font-body); letter-spacing:0; text-transform:none; color:var(--ink); margin-bottom:8px; }
.cinfo-item .v{ font-size:14.5px; color:var(--ink); line-height:1.7; }
.cinfo-item .v a{ text-decoration:none; color:var(--ink); font-weight:600; } .cinfo-item .v a:hover{ color:var(--orange); }
.cinfo-social{ display:flex; gap:10px; margin-top:12px; }
.cinfo-social a{ width:34px; height:34px; border:1px solid var(--line); display:grid; place-items:center;
  text-decoration:none; color:var(--ink); font:700 12px/1 var(--font-display); }
.cinfo-social a:hover{ border-color:var(--orange); color:var(--orange); }

.git-panel{ background:var(--paper-2); padding:36px 32px; border:1px solid var(--line); }
.git-panel h2{ font-size:22px; margin:0 0 8px; }
.git-panel .sub{ font-size:14px; color:var(--steel); margin:0 0 24px; }

.contact-map-wrap{ margin-top:60px; border:1px solid var(--line); }
.contact-map-wrap iframe{ width:100%; height:420px; border:0; display:block; }

@media (max-width:640px){
  .cinfo-grid{ grid-template-columns:1fr; }
  .git-panel{ padding:28px 22px; }
}

/* ============================================================
   MOBILE EXPERIENCE — dedicated layout for screens below 768px
   ------------------------------------------------------------
   Everything below is scoped to @media (max-width:767px) so the
   desktop (and existing ≥768px tablet) layout is untouched.
   Design intent: an intentionally composed mobile app feel —
   slide-in drawer nav, stacked heroes with the product first,
   single-column cards, full-width primary actions, ≥44px touch
   targets, tightened rhythm, no dead space, no overflow.
   ============================================================ */
@media (max-width:767px){

  /* ---------- 0. foundations ---------- */
  html, body{ overflow-x:clip; }              /* hard stop for accidental sideways scroll */
  .wrap{ padding-inline:18px; }
  a, button{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  .sect{ padding-block:46px; }
  .sect-head{ margin-bottom:26px; }

  /* type scale: smaller but same hierarchy */
  h1.display{ font-size:clamp(30px,8.6vw,38px); }
  h2.display{ font-size:clamp(23px,6.4vw,28px); }
  .lead{ font-size:15.5px; }
  .rule{ margin:16px 0; margin-inline-start:0; }
  .eyebrow{ font-size:11px; }

  /* buttons: comfortable thumb targets everywhere */
  .btn{ min-height:48px; padding:13px 22px; justify-content:center; }
  .btn-sm{ min-height:44px; padding:11px 16px; }

  /* ---------- 1. header + slide-in drawer navigation ---------- */
  .hd-in{ min-height:64px; gap:12px; flex-wrap:nowrap; }
  .logo{ font-size:13px; }
  .icon-btn{ width:44px; height:44px; }
  .cmp-btn{ display:none; }                   /* compare lives in the drawer + tray on mobile */
  .lang-btn{ min-height:44px; padding:10px 10px; font-size:12px; }
  .lang-menu{ max-height:60vh; overflow-y:auto; }
  .burger{ font-size:18px; }
  .burger[aria-expanded="true"]{ border-color:var(--orange); color:var(--orange); }

  /* the plain dropdown becomes an off-canvas drawer */
  .mnav{
    display:block;                            /* always in the DOM so it can animate */
    position:fixed; top:64px; bottom:0; inset-inline-end:0;
    width:min(320px,86vw);
    background:var(--ink-2);
    border-inline-start:1px solid var(--line-dark);
    border-block-start:1px solid var(--line-dark);
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    z-index:58;                               /* under the sticky header (60) so ☰ stays tappable */
    padding-block:8px 34px;
    transform:translateX(102%); visibility:hidden; pointer-events:none;
    transition:transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s linear .3s;
  }
  html[dir="rtl"] .mnav{ transform:translateX(-102%); }
  .mnav.open{
    transform:translateX(0); visibility:visible; pointer-events:auto;
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
  }
  .mnav a{
    display:flex; align-items:center; min-height:52px;
    padding:0 22px; border-block-end:1px solid var(--line-dark);
    color:#e8e8e6; font:600 15px/1.3 var(--font-display);
    letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
  }
  .mnav a:active{ background:rgba(255,255,255,.06); }
  .mnav a:nth-child(4){ border-block-end:3px solid var(--line-dark); } /* categories | pages divider */

  /* dim the page + lock scroll while the drawer is open
     (progressive enhancement — browsers without :has just skip it) */
  html:has(.mnav.open){ overflow:hidden; }
  body:has(.mnav.open)::before{
    content:""; position:fixed; inset:0; z-index:57;
    background:rgba(0,0,0,.55); animation:fadein .25s ease-out;
  }

  /* search pane: full-width sheet, no iOS focus-zoom */
  .search-in{ padding:16px 18px; }
  .search-in input{ font-size:17px; }
  .search-res{ max-height:52vh; }
  .search-res a{ padding:13px 2px; }

  /* ---------- 2. home hero: image first, stacked, no dead space ---------- */
  .hero-grid{ gap:22px; padding-block:34px 44px; }
  .hero-num{ display:none; }                  /* decorative outline "57" — noise at phone width */
  .hero-photo img{ max-height:300px; object-fit:contain; }
  .hero-ctas{ flex-direction:column; align-items:stretch; gap:12px; margin-top:26px; }
  .hero-ctas .btn{ width:100%; }
  .why-grid{ gap:14px; padding-block:26px; }
  .why-item{ font-size:13.5px; }

  /* category tiles (home) */
  .cat-grid{ gap:16px; }
  .cat-tile .tx{ padding:20px 20px 4px; }
  .cat-tile h3{ font-size:20px; }
  .cat-tile img{ height:180px; max-height:180px; padding:0 18px 18px; }

  /* ---------- 3. category pages: hero + filter toolbar ---------- */
  .cat-hero-grid{ gap:20px; padding-block:30px 40px; }
  .cat-hero-grid img{ max-height:280px; }
  .brandmark{ padding:18px 8px 0; gap:16px; }
  .bm-word{ font-size:clamp(28px,8vw,38px); }

  /* toolbar: label row → swipeable pill rail → full-width sort */
  .toolbar{ flex-direction:column; align-items:stretch; gap:10px; margin-bottom:20px; }
  .toolbar .spacer{ display:none; }
  .pillset{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-block:2px; margin-inline:-18px; padding-inline:18px;
  }
  .pillset::-webkit-scrollbar{ display:none; }
  .pill{ flex:none; min-height:42px; padding:10px 16px; font-size:13px; }
  .toolbar select{ width:100%; min-height:48px; font-size:16px; }

  /* ---------- 4. product cards: single column ---------- */
  /* minmax(0,…) is critical: a bare 1fr lets the track grow to the photo's
     intrinsic width (auto min-sizing), blowing the page out sideways */
  .p-grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .p-card{ min-width:0; }
  /* explicit box + object-fit:contain — percentage sizes inside an
     aspect-ratio container resolve unreliably on iOS Safari and let
     photos escape the card, so the image window is a fixed 250px */
  /* compact photo window; top padding reserves the ribbon strip so the
     photo can never sit under it */
  .p-card .im{ aspect-ratio:auto; height:185px; padding:34px 16px 14px; overflow:hidden; }
  .p-card .im img{ width:100%; height:100%; object-fit:contain; }
  .p-card .bd{ padding:16px; }
  .p-card h3{ font-size:16.5px; }
  .p-card .acts{ gap:10px; }
  .p-card .acts .btn{ min-height:46px; }

  /* ---------- 5. product detail: photo → story → specs → actions ---------- */
  .crumbs{ padding-block:14px; font-size:12.5px; white-space:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .crumbs::-webkit-scrollbar{ display:none; }
  .pd-grid{ gap:26px; padding-block-end:46px; }
  .pd-photo{ position:static; }               /* sticky column makes no sense stacked */
  .pd-photo .ph{ padding:18px; }
  .pd-photo img{ aspect-ratio:auto; height:auto; max-height:320px; }
  .quick{ gap:10px; margin-top:10px; }
  .quick .q{ padding:12px 14px; }
  .quick .v{ font-size:15.5px; }
  .pd-head h1{ font-size:clamp(26px,7.6vw,34px); }
  .pd-model{ font-size:13.5px; }
  .pd-sec{ margin-top:26px; }
  .pd-head [data-cmp]{ width:100%; }          /* add-to-compare: full width */
  .pd-nav{ flex-direction:column; align-items:stretch; gap:12px; margin-top:30px; }
  .pd-nav .btn{ width:100%; }
  .warr{ flex-direction:column; align-items:flex-start; }

  /* ---------- 6. tables: swipeable with pinned row headers ---------- */
  .tbl-scroll{ -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  table.spec{ min-width:460px; font-size:13.5px; }
  table.spec thead th{ padding:11px 12px; }
  table.spec td, table.spec tbody th{ padding:10px 12px; }
  table.cmp td{ min-width:150px; }
  table.cmp .pimg{ width:96px; height:96px; }
  table.cmp th.rowh{                          /* first column stays visible while swiping */
    position:sticky; inset-inline-start:0; z-index:2; background:var(--paper-2);
    box-shadow:1px 0 0 var(--line);
  }
  html[dir="rtl"] table.cmp th.rowh{ box-shadow:-1px 0 0 var(--line); }
  .tbl-note{ font-size:12px; }

  /* ---------- 7. accessories / company / contact ---------- */
  .acc-grid{ gap:14px; }
  .acc-card{ padding:20px 18px; }
  .two-col{ gap:30px; }
  .cinfo-grid{ gap:22px; margin-top:26px; }
  .cinfo-social a{ width:44px; height:44px; }
  .git-panel{ padding:24px 18px; }
  form.cf input, form.cf textarea{ font-size:16px; padding:13px 14px; } /* 16px stops iOS focus-zoom */
  form.cf .btn{ width:100%; }
  .contact-map-wrap{ margin-top:40px; }
  .contact-map-wrap iframe{ height:300px; }

  /* ---------- 8. compare tray / CTA band / footer ---------- */
  .tray-in{ gap:10px; padding-block:12px; }
  .tray-in > .btn{ width:100%; }
  .tray-chip{ min-height:38px; }
  .tray-chip button{ font-size:16px; padding:4px 2px; } /* bigger ✕ target */
  .cta-band .in{ padding-block:42px; flex-direction:column; align-items:stretch; gap:18px; }
  .cta-band .btn{ width:100%; }
  .ft{ margin-top:26px; }
  .ft-grid{ gap:28px; padding-block:40px; }
  .ft ul{ gap:0; }
  .ft ul a{ display:block; padding-block:8px; }         /* list links become full touch rows */
  .ft-bottom{ flex-direction:column; gap:6px; padding-block:16px; }
}

/* ============================================================
   STACKED-LAYOUT OVERFLOW GUARDS (≤880px, where columns stack)
   ------------------------------------------------------------
   A grid child's automatic minimum size is its content's
   min-content width. The product page's spec table (min-width
   460px) was therefore forcing the stacked column wider than
   the screen — clipping the description, quick-spec tiles,
   application tags and buttons. min-width:0 lets stacked
   columns shrink to the viewport again; wide tables then
   scroll inside their own .tbl-scroll container as designed.
   Desktop (>880px) is unaffected.
   ============================================================ */
@media (max-width:880px){
  .pd-grid > *{ min-width:0; }
  .two-col > *{ min-width:0; }
  .hero-grid > *, .cat-hero-grid > *{ min-width:0; }
  .quick{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .pd-grid .lead{ max-width:none; }  /* 62ch cap is meaningless in a stacked column */
}

/* ============================================================
   COMPANY PAGE — dark editorial layout (reference redesign)
   New classes only; no existing selectors are touched.
   ============================================================ */
.co-page{ padding-block-end:26px; }
.co-sect{ padding-block:64px 30px; }
.co-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:60px; align-items:center; }
.co-copy h2.display{ margin-top:14px; font-size:clamp(28px,3.2vw,42px); }

/* bordered capability panel (thin brand-red keyline, like the reference) */
.co-panel{ border:1px solid rgba(216,32,40,.55); padding:38px 36px;
  display:grid; grid-template-columns:1fr 1fr; gap:30px 34px; }
.co-perk h3{ margin:0 0 7px; font:800 14.5px/1.3 var(--font-display); color:#fff; letter-spacing:.02em; }
.co-perk p{ margin:0; font-size:13px; line-height:1.65; color:#9c9c9a; }

/* centered story */
.co-story{ max-width:680px; margin-inline:auto; text-align:center; }
.co-story .eyebrow{ margin-bottom:18px; }
.co-story p{ margin:0 0 18px; font-size:14.5px; line-height:1.85; color:#b3b3b1; }

/* testimonials */
.co-qhead{ text-align:center; }
.co-qhead h2.display{ margin-top:12px; font-size:clamp(26px,3vw,38px); }
.co-quotes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:44px; }
.co-qsub{ margin:12px 0 0; text-align:center; color:#8b8b89; font-size:14px; }
.co-faq{ border:1px solid #3a3a3a; padding:26px 24px;
  transition:border-color .25s ease; }
.co-faq:hover, .co-faq:focus-within{ border-color:var(--logo-red); }
.co-faq h3{ margin:0 0 10px; font:800 15px/1.45 var(--font-display); color:#fff; letter-spacing:.02em; }
.co-faq p{ margin:0; font-size:13.5px; line-height:1.7; color:#b0b0ae; }

/* catalogue CTA */
.co-cta{ text-align:center; padding-block:26px 84px; }

@media (max-width:960px){
  .co-grid{ grid-template-columns:1fr; gap:38px; }
  .co-quotes{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
}
@media (max-width:767px){
  .co-sect{ padding-block:44px 20px; }
  .co-panel{ grid-template-columns:1fr; padding:26px 22px; gap:22px; }
  .co-story p{ font-size:14px; }
  .co-cta{ padding-block:18px 60px; }
  .co-cta .btn{ width:100%; }
}
/* ============================================================
   IMAGE FIT + RIBBON FIXES — paste this at the VERY END of
   css/styles.css (append-only; safe with any theme changes).
   Fixes:
   1. Product-card photos rendering cropped (object-fit:cover
      somewhere in the cascade) — forced back to contain.
   2. Red ribbon painting UNDER photos. Root cause: the photo's
      mix-blend-mode creates a stacking context, and stacking
      contexts paint in DOM order — the img comes after the
      badge, so it wins unless the badge has a z-index.
   3. Oversized photos on phones — compact, capped windows with
      a reserved strip so photos can never touch the ribbon.
   ============================================================ */

/* --- 2) ribbons always paint above photos, on cards AND product pages --- */
.p-card .badge,
.pd-photo .badge,
.badge{ z-index:2; }

/* --- 1) card photos: fill the window without cropping.
   Absolute positioning is used deliberately: a percentage height on an
   img inside a centered grid area resolves as `auto` in some mobile
   engines (intrinsic-size render, then clipped = the "cropped" bug).
   An absolutely-positioned child resolves percentages against the final
   laid-out box of its container — definite in every engine. --- */
.p-card .im{ position:relative; overflow:hidden; }
.p-card .im img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  padding:18px;                       /* breathing room lives on the img now */
  box-sizing:border-box !important;   /* object-fit fits inside the padding */
  object-fit:contain !important;
  object-position:center center !important;
  mix-blend-mode:multiply;
}

/* --- 1b) product-detail photo: contained, never cropped --- */
.pd-photo .ph{ position:relative; overflow:hidden; }
.pd-photo .ph img{
  width:100% !important;
  height:auto !important;
  max-height:520px !important;        /* generous on desktop */
  object-fit:contain !important;
  object-position:center center !important;
}

/* --- 3) phones: smaller windows + reserved ribbon strip --- */
@media (max-width:767px){
  .p-card .im{
    height:185px !important;
    aspect-ratio:auto !important;
  }
  .p-card .im img{
    padding:34px 16px 14px !important; /* top strip belongs to the ribbon */
  }
  .pd-photo .ph{
    padding:44px 16px 16px !important; /* ribbon strip on product page too */
  }
  .pd-photo .ph img{
    max-height:260px !important;       /* clean, readable, not a monolith */
  }
}