/* ==========================================================================
   ARK ELECTRONIC — Components
   ========================================================================== */

/* ==========================================================================
   BUTTONS  (5 variants from the identity board)
   ========================================================================== */
.btn {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-block-size: 46px;
  padding-inline: var(--s-5); padding-block: var(--s-3);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: 15px; font-weight: 500; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { inline-size: 18px; block-size: 18px; flex: none; }

.btn-primary   { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
.btn-primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); }

.btn-secondary { --btn-bd: var(--border-strong); --btn-fg: var(--text); }
.btn-secondary:hover { --btn-bd: var(--text); background: var(--surface-inset); }

.btn-tech      { --btn-bd: var(--tech); --btn-fg: var(--tech-ink); }
.btn-tech:hover { background: var(--tech-soft); }

.btn-ghost     { --btn-fg: var(--text-muted); }
.btn-ghost:hover { --btn-fg: var(--text); background: var(--surface-inset); }

.btn-text {
  min-block-size: auto; padding: var(--s-1) 0;
  --btn-fg: var(--accent-ink); font-weight: 500;
}
.btn-text:hover { text-decoration: underline; text-underline-offset: 4px; }

.btn-lg  { min-block-size: 54px; padding-inline: var(--s-6); font-size: 16px; }
.btn-sm  { min-block-size: 38px; padding-inline: var(--s-4); font-size: 14px; }
.btn-block { inline-size: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none;
}

/* directional arrow flips with RTL */
.btn .arrow { transition: transform var(--dur-micro) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-4px); }

/* ==========================================================================
   BADGES / CHIPS
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 3px var(--s-2); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500; line-height: 1.6;
  background: var(--surface-inset); color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.badge-tech   { background: var(--tech-soft);   color: var(--tech-ink);   border-color: transparent; }
.badge-ok     { background: var(--ok-soft);     color: var(--ok);         border-color: transparent; }
.badge-warn   { background: var(--warn-soft);   color: var(--warn);       border-color: transparent; }

/* selectable chip (model / amp selector) */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; min-inline-size: 68px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: all var(--dur-micro) var(--ease);
}
.chip:hover { border-color: var(--text-muted); }
/* `aria-pressed` for a button that toggles a filter in place; `is-on` for a link
   that navigates to the filtered page. The panel uses links — the filter is in the
   URL, so a filtered list can be bookmarked and shared. */
.chip[aria-pressed="true"],
.chip.is-on {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-ink); font-weight: 600;
}
a.chip { text-decoration: none; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card-hover:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.card-flush { padding: 0; overflow: hidden; }

/* feature card (icon + title + text + link) */
.feature { display: flex; flex-direction: column; gap: var(--s-3); block-size: 100%; }
.feature .icon-box {
  inline-size: 48px; block-size: 48px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--tech-soft); color: var(--tech-ink);
  margin-block-end: var(--s-2);
}
.feature .icon-box svg { inline-size: 24px; block-size: 24px; }

/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */
.p-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; block-size: 100%;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.p-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg); transform: translateY(-3px);
}
.p-card .media {
  position: relative;
  aspect-ratio: 4 / 3;
  min-block-size: 0;
  overflow: hidden;
  display: grid; place-items: center;
  padding: var(--s-5);
  background:
    radial-gradient(ellipse at 50% 35%, var(--surface-2) 0%, var(--surface-inset) 100%);
  border-block-end: 1px solid var(--border);
}
.p-card .media img {
  max-block-size: 100%; inline-size: auto; object-fit: contain;
  transition: transform 420ms var(--ease);
}
.p-card:hover .media img { transform: scale(1.045); }
.p-card .media .badge { position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); }
.p-card .body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.p-card .title { font-size: 18px; font-weight: 600; }
.p-card .sub { font-size: 14px; color: var(--text-muted); }
.p-card .foot {
  margin-block-start: auto; padding-block-start: var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.p-card .price { font-size: 14px; font-weight: 500; color: var(--text-muted); }
/* Enquiry and details side by side, equal width — the enquiry is the card's main action. */
.p-card .foot-actions { display: flex; gap: var(--s-2); inline-size: 100%; }
.p-card .foot-actions .btn { flex: 1 1 0; padding-inline: var(--s-3); white-space: nowrap; }

/* mini spec row inside a product card */
.p-specs {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1px dashed var(--border);
  font-size: 13px; color: var(--text-muted);
}
.p-specs b { color: var(--text); font-weight: 500; }

/* ==========================================================================
   TECHNICAL DASHBOARD — the spec pattern (never a dry table)
   small muted label on top, large value beneath
   ========================================================================== */
.dash {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dash-cell {
  background: var(--surface);
  padding: var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-1);
  min-block-size: 92px;
  transition: background-color var(--dur-micro) var(--ease);
}
.dash-cell:hover { background: var(--surface-2); }
.dash-label {
  font-size: 12.5px; font-weight: 400; color: var(--text-muted);
  letter-spacing: .01em; line-height: 1.5;
}
.dash-value {
  font-size: 21px; font-weight: 700; color: var(--text);
  line-height: 1.3; letter-spacing: -.01em;
}
.dash-value .unit {
  font-size: 13px; font-weight: 400; color: var(--text-muted);
  margin-inline-start: 3px;
}
.dash-cell.wide { grid-column: 1 / -1; }
.dash-cell.wide .dash-value { font-size: 16px; font-weight: 500; line-height: 1.7; }

/* on the dark band */
.band .dash { background: var(--band-border); border-color: var(--band-border); }
.band .dash-cell { background: var(--band-2); }
.band .dash-cell:hover { background: #17293C; }
.band .dash-label { color: #8FA0B4; }
.band .dash-value { color: #fff; }
.band .dash-value .unit { color: #8FA0B4; }

/* metric strip (the stats bar) */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.metric { background: var(--surface); padding: var(--s-5) var(--s-4); text-align: center; }
.metric-value { font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: var(--text); line-height: 1.2; }
.metric-label { font-size: 13px; color: var(--text-muted); margin-block-start: var(--s-1); }
.band .metrics { background: var(--band-border); }
.band .metric { background: var(--band); }
.band .metric-value { color: #fff; }
.band .metric-label { color: #8FA0B4; }
@media (max-width: 700px) { .metrics { grid-template-columns: repeat(2, 1fr); } }

/* a value the client still has to supply */
.tbd {
  color: var(--text-faint); font-weight: 500;
  border-block-end: 2px dotted var(--text-faint);
  cursor: help;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--border);
}
.header-inner {
  block-size: var(--header-h);
  display: flex; align-items: center; gap: var(--s-5);
}
.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.brand img { block-size: 36px; inline-size: auto; }
.brand .logo-dark { display: none; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark  { display: block; }
/* Dark is the site's default; only the switch in the header turns it light. */
:root:not([data-theme="light"]) .brand .logo-light { display: none; }
:root:not([data-theme="light"]) .brand .logo-dark  { display: block; }

.nav { display: flex; align-items: center; gap: var(--s-1); margin-inline-start: auto; }
.nav a {
  position: relative;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  font-size: 15px; color: var(--text-muted);
  transition: color var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface-inset); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 500; }
.nav a[aria-current="page"]::after {
  content: ''; position: absolute;
  inset-inline: var(--s-3); inset-block-end: 2px;
  block-size: 2px; background: var(--accent); border-radius: 2px;
}
.header-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.site-search-pop { position: relative; }
.site-search-pop > summary { list-style: none; cursor: pointer; }
.site-search-pop > summary::-webkit-details-marker { display: none; }
.site-search-pop[open] > summary { color: var(--accent); background: var(--accent-soft); }
.site-search-panel {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% + 12px);
  inset-inline-end: 0;
  inline-size: min(92vw, 470px);
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.site-search-panel label { font-size: .8rem; font-weight: 700; }
.site-search-panel > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); }
.site-search-panel small { color: var(--text-faint); line-height: 1.7; }
@media (max-width: 520px) {
  .site-search-panel { position: fixed; inset-inline: var(--s-3); inset-block-start: calc(var(--header-h) + var(--s-2)); inline-size: auto; }
}

.icon-btn {
  inline-size: 44px; block-size: 44px; border-radius: var(--radius);
  display: grid; place-items: center;
  color: var(--text-muted); border: 1px solid transparent;
  transition: all var(--dur-micro) var(--ease);
}
.icon-btn:hover { color: var(--text); background: var(--surface-inset); border-color: var(--border); }
.icon-btn svg { inline-size: 20px; block-size: 20px; }
.icon-btn .cart-count {
  position: absolute; transform: translate(-14px, -14px);
  min-inline-size: 18px; block-size: 18px; padding-inline: 4px;
  border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
}
[dir="rtl"] .icon-btn .cart-count { transform: translate(14px, -14px); }

.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-block-end: 1px solid var(--border);
    padding: var(--s-3); margin: 0;
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: var(--s-3) var(--s-4); font-size: 16px; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] {
    background: var(--accent-soft); color: var(--accent-ink);
  }
  .nav-toggle { display: grid; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 82% -8%, var(--tech-soft) 0%, transparent 62%),
    var(--bg);
  border-block-end: 1px solid var(--border);
}
[dir="rtl"] .hero { background-position: 18% -8%, 0 0; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--s-8); align-items: center;
  padding-block: clamp(48px, 6.5vw, 92px);
}
.hero-copy { display: flex; flex-direction: column; gap: var(--s-5); }
.hero-copy .h-display { max-inline-size: 15ch; }
.hero-media { position: relative; display: grid; place-items: center; }
.hero-media img {
  max-block-size: 460px; inline-size: auto;
  filter: drop-shadow(0 24px 48px rgba(13, 27, 42, .18));
}
:root[data-theme="dark"] .hero-media img { filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .6)); }

/* faint technical grid behind the hero product */
.hero-media::before {
  content: ''; position: absolute; inset: 8% 4%;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .5;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
  border-radius: var(--radius-lg);
}
.hero-trust {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  padding-block-start: var(--s-4); border-block-start: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-muted);
}
.hero-trust span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero-trust svg { inline-size: 16px; block-size: 16px; color: var(--ok); flex: none; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-media { order: -1; }
  .hero-media img { max-block-size: 280px; }
  .hero-copy .h-display { max-inline-size: none; }
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: 13.5px; color: var(--text-muted);
  padding-block: var(--s-4);
}
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep { color: var(--text-faint); }
.crumbs [aria-current="page"] { color: var(--text); }

/* ==========================================================================
   FILTERS (product listing)
   ========================================================================== */
.layout-side {
  display: grid; grid-template-columns: 268px 1fr; gap: var(--s-7);
  align-items: start;
}
@media (max-width: 900px) { .layout-side { grid-template-columns: 1fr; gap: var(--s-5); } }

.filters {
  position: sticky; inset-block-start: calc(var(--header-h) + 16px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-5);
}
@media (max-width: 900px) { .filters { position: static; } }
.filter-group { display: flex; flex-direction: column; gap: var(--s-3); }
.filter-group > h3 {
  font-size: 14px; font-weight: 600; color: var(--text);
  padding-block-end: var(--s-2); border-block-end: 1px solid var(--border);
}
.check {
  display: flex; align-items: center; gap: var(--s-3);
  min-block-size: 34px; cursor: pointer;
  font-size: 14px; color: var(--text-muted);
  transition: color var(--dur-micro) var(--ease);
}
.check:hover { color: var(--text); }
.check input {
  inline-size: 18px; block-size: 18px; flex: none;
  accent-color: var(--accent); cursor: pointer;
}
.check .count { margin-inline-start: auto; font-size: 12px; color: var(--text-faint); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label { font-size: 14px; font-weight: 500; color: var(--text); }
.field .req { color: var(--accent-ink); }
.field .hint { font-size: 12.5px; color: var(--text-muted); }
.field .err  { font-size: 12.5px; color: var(--accent-ink); display: flex; align-items: center; gap: var(--s-1); }

.input, .select, .textarea {
  inline-size: 100%; min-block-size: 46px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-size: 15px;
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--tech);
  box-shadow: 0 0 0 3px var(--tech-soft);
}
.input[aria-invalid="true"] { border-color: var(--accent); }
.textarea { min-block-size: 112px; resize: vertical; line-height: 1.7; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px;
  background-position: left var(--s-4) center;
  padding-inline-end: var(--s-4); padding-inline-start: var(--s-8);
}
[dir="ltr"] .select { background-position: right var(--s-4) center; padding-inline: var(--s-4) var(--s-8); }

/* ==========================================================================
   TABLES (comparison, orders, admin)
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
}
table.tbl { inline-size: 100%; border-collapse: collapse; min-inline-size: 640px; }
table.tbl th, table.tbl td {
  padding: var(--s-3) var(--s-4);
  text-align: start; font-size: 14px;
  border-block-end: 1px solid var(--border);
  vertical-align: middle;
}
table.tbl thead th {
  background: var(--surface-inset);
  font-weight: 600; color: var(--text);
  white-space: nowrap;
  position: sticky; inset-block-start: 0; z-index: 1;
}
table.tbl tbody tr:last-child td { border-block-end: 0; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td.num { font-variant-numeric: tabular-nums; }
.yes { color: var(--ok); font-weight: 600; }
.no  { color: var(--text-muted); }

/* comparison table: first column pinned */
.cmp th:first-child, .cmp td:first-child {
  position: sticky; inset-inline-start: 0;
  background: var(--surface); z-index: 2;
  font-weight: 500; border-inline-end: 1px solid var(--border);
}
.cmp thead th:first-child { z-index: 3; background: var(--surface-inset); }

/* ==========================================================================
   WIZARD (Product Finder)
   ========================================================================== */
.steps { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.step {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 13.5px; color: var(--text-faint);
}
.step .dot {
  inline-size: 28px; block-size: 28px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 13px; font-weight: 600;
}
.step.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.step.done { color: var(--text-muted); }
.step.active .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.active { color: var(--text); font-weight: 500; }
.step-line { inline-size: 28px; block-size: 1px; background: var(--border-strong); }
@media (max-width: 700px) { .step-line { inline-size: 12px; } .step span.lbl { display: none; } }

/* big selectable option card */
.opt {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); text-align: start;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); cursor: pointer;
  transition: all var(--dur-micro) var(--ease);
}
.opt:hover { border-color: var(--text-muted); transform: translateY(-2px); box-shadow: var(--shadow); }
.opt[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}
.opt .opt-title { font-size: 16px; font-weight: 600; color: var(--text); }
.opt .opt-desc  { font-size: 13.5px; color: var(--text-muted); line-height: 1.65; }
.opt .icon-box {
  inline-size: 42px; block-size: 42px; border-radius: var(--radius);
  display: grid; place-items: center; margin-block-end: var(--s-2);
  background: var(--tech-soft); color: var(--tech-ink);
}
.opt[aria-pressed="true"] .icon-box { background: var(--accent); color: #fff; }

/* match result */
.match-bar {
  block-size: 8px; border-radius: 4px; background: var(--surface-inset);
  overflow: hidden; margin-block: var(--s-2);
}
.match-bar > i { display: block; block-size: 100%; background: var(--ok); border-radius: 4px; }

/* ==========================================================================
   GALLERY (product detail)
   ========================================================================== */
.gallery { display: flex; flex-direction: column; gap: var(--s-3); }
.gallery .stage {
  position: relative;
  aspect-ratio: 1 / 1; min-block-size: 0; overflow: hidden;
  display: grid; place-items: center;
  padding: var(--s-6);
  background: radial-gradient(ellipse at 50% 35%, var(--surface) 0%, var(--surface-inset) 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.gallery .stage img { max-block-size: 100%; inline-size: auto; object-fit: contain; }
.thumbs { display: flex; gap: var(--s-2); overflow-x: auto; padding-block-end: var(--s-1); }
.thumbs button {
  flex: none; inline-size: 78px; block-size: 78px; padding: var(--s-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); display: grid; place-items: center;
  transition: border-color var(--dur-micro) var(--ease);
}
.thumbs button img { max-block-size: 100%; inline-size: auto; object-fit: contain; }
.thumbs button:hover { border-color: var(--border-strong); }
.thumbs button[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* mobile swipe gallery */
@media (max-width: 760px) {
  .gallery .stage { aspect-ratio: 4 / 3; padding: var(--s-4); }
  .swipe {
    display: flex; gap: var(--s-3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: calc(var(--s-5) * -1);
    padding-inline: var(--s-5);
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 82%; scroll-snap-align: center; }
}

/* ==========================================================================
   STICKY MOBILE CTA BAR
   ========================================================================== */
.sticky-cta {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90;
  display: none; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  padding-block-end: max(var(--s-3), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--border);
}
.sticky-cta .btn { flex: 1; }
.sticky-cta .sticky-menu { display: none; }
@media (max-width: 760px) {
  .sticky-cta { display: flex; align-items: center; }
  body.has-sticky-cta { padding-block-end: 84px; }
}
/* Where the header is gone (a phone), this bar is the only navigation on a product page,
   so it carries the way into the menu. 48px: a thumb target, not an icon. */
@media (max-width: 720px) {
  .sticky-cta .sticky-menu {
    display: grid; place-items: center; flex: none;
    inline-size: 48px; block-size: 48px;
    padding: 0; border-radius: 14px;
    border: 1px solid var(--border); background: var(--surface-inset);
    color: var(--text); cursor: pointer;
  }
  .sticky-cta .sticky-menu svg { inline-size: 22px; block-size: 22px; }
  .sticky-cta .sticky-menu[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
}

/* ==========================================================================
   CERTIFICATES — the laboratory test reports, as sheets of paper
   ========================================================================== */
.certs-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 48px);
}
.cert {
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: var(--s-5); align-items: center;
}
.cert-paper {
  position: relative; display: block;
  padding: 6px; border-radius: 6px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(13, 27, 42, .12), 0 14px 34px rgba(13, 27, 42, .20);
  transform: rotate(-1.5deg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cert:nth-child(even) .cert-paper { transform: rotate(1.5deg); }
.cert-paper:hover, .cert-paper:focus-visible {
  transform: rotate(0) translateY(-4px);
  box-shadow: 0 2px 4px rgba(13, 27, 42, .14), 0 22px 44px rgba(13, 27, 42, .26);
}
.cert-paper img { display: block; inline-size: 100%; block-size: auto; border-radius: 3px; }
.cert-zoom {
  position: absolute; inset-block-end: 12px; inset-inline-end: 12px;
  inline-size: 38px; block-size: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(13, 27, 42, .82); color: #FFFFFF;
  opacity: .85; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cert-zoom svg { inline-size: 18px; block-size: 18px; }
.cert-paper:hover .cert-zoom, .cert-paper:focus-visible .cert-zoom { opacity: 1; transform: scale(1.06); }
.cert-name { font-size: 17px; font-weight: 600; line-height: 1.6; margin-block-end: var(--s-3); }
.cert-facts { display: grid; gap: 8px; margin-block-end: var(--s-3); }
.cert-facts > div {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-block-end: 8px; border-block-end: 1px dashed var(--border); font-size: 14px;
}
.cert-facts dt { color: var(--text-muted); }
.cert-facts dd { margin: 0; font-weight: 500; }
.cert-meta { display: flex; align-items: center; gap: var(--s-2); font-size: 13px; }

/* the compact row inside the home page's dark About band */
.certs-band {
  margin-block-start: clamp(40px, 6vw, 72px);
  padding-block-start: clamp(28px, 4vw, 48px);
  border-block-start: 1px solid var(--band-border);
}
.certs-head { margin-block-end: var(--s-6); }
.certs-title { color: #FFFFFF; font-size: 20px; font-weight: 600; margin-block-end: var(--s-1); }
.certs-sub { color: #9AA9BC; font-size: 14px; }
.certs-band .cert { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
.certs-band .cert-name { color: #FFFFFF; font-size: 15px; }
.certs-band .cert-meta { color: #9AA9BC; }

@media (max-width: 860px) {
  .certs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .cert, .certs-band .cert { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: var(--s-4); }
  .cert-name { font-size: 15px; }
}

/* one dialog for every [data-lightbox] link.
   `margin: auto` is the centring the UA gives a modal dialog; the reset had taken it
   away, and the viewer opened pinned to the top right with half the sheet off-screen.
   It opens on the whole sheet fitted to the screen; .is-zoomed enlarges it to reading
   size inside a scrolling body. */
.lightbox {
  margin: auto;
  inline-size: fit-content; max-inline-size: min(96vw, 1100px); max-block-size: 94vh;
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: rgba(7, 14, 21, .84); }
.lightbox-bar {
  --lightbox-bar: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-block-size: var(--lightbox-bar);
  padding: var(--s-2) var(--s-4); border-block-end: 1px solid var(--border);
}
.lightbox-caption { font-size: 14px; font-weight: 500; min-inline-size: 0; }
.lightbox-actions { display: flex; gap: var(--s-2); flex-shrink: 0; }
.lightbox-body { overflow: auto; overscroll-behavior: contain; background: #FFFFFF; }
.lightbox-body img {
  display: block; margin-inline: auto;
  inline-size: auto; block-size: auto;
  max-inline-size: 100%; max-block-size: calc(94vh - 60px);
  cursor: zoom-in;
}
.lightbox.is-zoomed { inline-size: min(96vw, 1100px); }
.lightbox.is-zoomed .lightbox-body img {
  inline-size: max(100%, 820px); max-inline-size: none; max-block-size: none;
  cursor: zoom-out;
}
@media (max-width: 480px) {
  .lightbox-bar { flex-wrap: wrap; }
  .lightbox-caption { font-size: 13px; }
  .lightbox-body img { max-block-size: calc(94vh - 104px); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--band); color: var(--text-on-dark); padding-block: var(--s-8) var(--s-5); }
.footer a { color: #9AA9BC; transition: color var(--dur-micro) var(--ease); }
.footer a:hover { color: #fff; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 1.3fr;
  gap: var(--s-6); padding-block-end: var(--s-7);
  border-block-end: 1px solid var(--band-border);
}
.footer h4 { font-size: 14px; font-weight: 600; color: #fff; margin-block-end: var(--s-4); }
.footer ul { display: flex; flex-direction: column; gap: var(--s-2); font-size: 14px; }
.footer .contact-item { display: flex; align-items: center; gap: var(--s-2); font-size: 14px; color: #9AA9BC; }
.footer .contact-item svg { inline-size: 16px; block-size: 16px; flex: none; color: #74869E; }
/* Several office lines under one icon, one per line. */
.footer .contact-item:has(.contact-phones) { align-items: flex-start; }
.footer .contact-item:has(.contact-phones) svg { margin-block-start: 3px; }
.footer .contact-phones { display: grid; gap: 4px; }
.footer .brand img { block-size: 34px; }
.footer-bottom {
  padding-block-start: var(--s-5);
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-size: 13px; color: #74869E;
}

/* The legal line is a sentence and a half, not the four words it replaced: it needs a
   measure of its own so it does not run the full width of a desktop footer, and it
   keeps its place beside the links rather than pushing them onto their own row. */
.footer-legal { max-inline-size: 62ch; line-height: 1.9; }
.socials { display: flex; gap: var(--s-2); }
.socials a {
  inline-size: 38px; block-size: 38px; border-radius: var(--radius);
  display: grid; place-items: center;
  border: 1px solid var(--band-border);
  transition: all var(--dur-micro) var(--ease);
}
.socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.socials svg { inline-size: 17px; block-size: 17px; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); } }

/* enamad placeholder */
.enamad {
  inline-size: 84px; block-size: 84px; border-radius: var(--radius);
  border: 1px dashed var(--band-border); color: #74869E;
  display: grid; place-items: center; text-align: center;
  font-size: 11px; line-height: 1.4; padding: var(--s-2);
}

/* ==========================================================================
   (The prototype's admin chrome used to live here.)

   It defined `.admin` as a two-column grid with a 232px dark sidebar, plus
   `.admin-side`, `.admin-top` and its own `.admin-main`. The panel that was
   actually built does not use any of that — it uses `.admin-shell` and
   `.admin-nav` from admin.css — but the panel's <body> still carries
   class="admin", so this rule was silently turning the panel body into a
   two-column grid and dealing the top bar and the shell one column each. On
   the login page, whose body is `admin admin-login-page`, the form landed in
   the 232px sidebar track and hung off the edge of the screen.

   Removed rather than renamed: nothing referenced these classes.
   ========================================================================== */

/* stat tile */
.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.tile .t-label { font-size: 13px; color: var(--text-muted); }
.tile .t-value { font-size: 28px; font-weight: 700; line-height: 1.25; }
.tile .t-delta { font-size: 12.5px; color: var(--text-muted); }

/* ==========================================================================
   NOTICE / CALLOUT
   ========================================================================== */
.notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-inset);
  font-size: 14px; line-height: 1.75;
}
.notice svg { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 2px; }
.notice-warn { background: var(--warn-soft); border-color: transparent; color: var(--text); }
.notice-warn svg { color: var(--warn); }
.notice-tech { background: var(--tech-soft); border-color: transparent; }
.notice-tech svg { color: var(--tech-ink); }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-9) var(--s-5); text-align: center;
}
.empty .icon-box {
  inline-size: 64px; block-size: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-inset); color: var(--text-faint);
}
.empty .icon-box svg { inline-size: 28px; block-size: 28px; }

/* ==========================================================================
   ACCORDION (mobile specs)
   ========================================================================== */
.acc { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.acc details { border-block-end: 1px solid var(--border); }
.acc details:last-child { border-block-end: 0; }
.acc summary {
  padding: var(--s-4) var(--s-5); cursor: pointer;
  font-size: 15px; font-weight: 500; background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  list-style: none; min-block-size: 52px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ''; inline-size: 9px; block-size: 9px; flex: none;
  border-inline-end: 2px solid var(--text-muted); border-block-end: 2px solid var(--text-muted);
  transform: rotate(45deg); transition: transform var(--dur-micro) var(--ease);
}
.acc details[open] summary::after { transform: rotate(-135deg); }
.acc .acc-body { padding: 0 var(--s-5) var(--s-5); background: var(--surface); }

/* ==========================================================================
   PROTOTYPE CHROME — the review banner, not part of the product UI
   ========================================================================== */
.proto-bar {
  background: var(--band-2); color: #9AA9BC;
  border-block-end: 1px solid var(--band-border);
  font-size: 12.5px;
}
.proto-bar .container { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-2); }
.proto-bar b { color: #fff; font-weight: 600; }
.proto-bar a { color: #F0857D; text-decoration: underline; text-underline-offset: 3px; }

/* design-system icon swatch row */
.icon-swatches svg { inline-size: 26px; block-size: 26px; }

/* ==========================================================================
   IMAGE FITTING
   Product shots have varied aspect ratios, so let the container own the box
   and make the image contain itself inside it. Prevents intrinsic height
   from leaking past a fixed-aspect parent.
   ========================================================================== */
/* Product shots vary a lot in aspect ratio (a slim ARCUBE is 147x560, a wide
   ARCODE panel is 443x560). Percentage sizing inside an aspect-ratio grid
   resolves circularly — it either stretched the card or clipped the shot — so
   pin the image to the box and let object-fit do the scaling. */
.p-card .media img,
.gallery .stage img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: var(--s-5);
}
.thumbs button img {
  inline-size: 100%; block-size: 100%; object-fit: contain;
}

.thumb-36 { inline-size: 36px; block-size: 36px; object-fit: contain; flex: none; }
.thumb-96 { inline-size: 96px; block-size: 96px; object-fit: contain; flex: none; }

.thumbs { align-items: center; overflow-y: hidden; }

/* ==========================================================================
   RESPONSIVE SPLITS
   Two-column layouts declared as classes (not inline styles) so they can
   actually collapse on small screens. `minmax(0,…)` stops a wide child —
   a spec table, a long model code — from blowing the track out.
   ========================================================================== */
.split      { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.split-side { grid-template-columns: minmax(0, 1fr) 360px; }
.split-toc  { grid-template-columns: minmax(0, 1fr) 300px; }

@media (max-width: 900px) {
  .split, .split-main, .split-side, .split-toc {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* grid and split children must be allowed to shrink below their content */
.grid > *, .layout-side > * { min-inline-size: 0; }

/* Table rendered on the dark technical band. Selectors are qualified with
   `table.tbl` so they outrank the base `table.tbl thead th` rule. */
.tbl-dark-wrap { background: var(--band-2); border-color: var(--band-border); }
table.tbl.tbl-dark thead th { background: #16263A; color: #FFFFFF; }
table.tbl.tbl-dark td { color: #C4D0DE; }
table.tbl.tbl-dark td:first-child { color: #FFFFFF; font-weight: 500; }
table.tbl.tbl-dark th,
table.tbl.tbl-dark td { border-block-end-color: var(--band-border); }
table.tbl.tbl-dark tbody tr:hover { background: #17293C; }

/* The real Enamad seal, once a code is in the panel. Enamad serves a square logo on
   a white ground, so it gets a white plate of its own rather than sitting directly on
   the dark footer where its own background would read as a misplaced rectangle. */
.enamad-seal {
  display: block;
  inline-size: 100px;
  background: #fff;
  border-radius: var(--radius);
  padding: 4px;
  line-height: 0;
}
.enamad-seal img { inline-size: 100%; block-size: auto; border-radius: 4px; }

/* Confirmation, as distinct from the warning variant. `.notice` on its own is
   neutral; this is the one that says a thing the reader asked for has happened. */
.notice-ok { background: var(--ok-soft); border-color: transparent; color: var(--text); }
.notice-ok::before { content: "✓"; color: var(--ok); font-weight: 700; margin-inline-end: 6px; }

/* ── the newsletter band ─────────────────────────────────────────────────
   A phone number, because that is what this trade uses. One required field: every
   extra box on a signup form costs subscribers, and the name is here only because it
   makes the message that follows read like it was written to somebody. */
.newsletter-band { background: var(--surface-2); border-block: 1px solid var(--border); }

.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s-7);
  align-items: center;
}

.newsletter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block: var(--s-3);
}
.newsletter-fields .field { flex: 1 1 180px; min-inline-size: 0; }
.newsletter-fields .btn { flex: 0 0 auto; align-self: stretch; }

@media (max-width: 860px) {
  .newsletter { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ═══════════════════════════════════════════ THE HEADER'S CONTROL ROW
   One height for everything in it.

   The icons, the language pill and the call to action were 44px, 32px and 40px, and
   each centred whatever box it happened to have: the theme icon sat three pixels
   above the cart, the language pill one and a half above that. The cause was not the
   alignment but the boxes — an <svg> inside an inline <span> centres its line box,
   and a line box carries the font's descender under the glyph.

   So: one control height, no inline wrappers, and glyphs that are block-level. */
.header-inner .icon-btn,
.header-inner .lang-current,
.header-inner .theme-switch,
.header-inner .btn-sm {
  block-size: 40px;
}

.header-inner .icon-btn { inline-size: 40px; }
.header-inner .icon-btn > span { display: grid; place-items: center; line-height: 0; }
.header-inner .icon-btn svg,
.header-inner .lang-current svg { display: block; }

.header-inner .lang-current {
  padding-block: 0;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════ THE THEME SWITCH
   Both states on the track, the thumb over the one in force. */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  flex: none;
}

.theme-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  inline-size: 60px;
  block-size: 32px;
  padding-inline: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-inset);
  transition: border-color var(--dur-micro) var(--ease);
}

.theme-thumb {
  position: absolute;
  inset-block: 3px;
  inset-inline-start: 3px;
  inline-size: 24px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  /* The thumb travels toward the state in force. `translateX` is physical, so the
     direction it should travel is a token the RTL rule flips — a logical property
     would need a second rule for every state instead of one for the page. */
  --travel: 1;
  transform: translateX(calc(24px * var(--travel)));
  transition: transform var(--dur) var(--ease);
}

[dir="rtl"] .theme-thumb { --travel: -1; }
:root[data-theme="light"] .theme-thumb { --travel: 0; }

.theme-ico {
  position: relative;
  inline-size: 15px;
  block-size: 15px;
  display: block;
  flex: none;
  transition: color var(--dur-micro) var(--ease);
}

/* Whichever state is in force is the lit one. */
.theme-sun  { color: var(--text-faint); }
.theme-moon { color: var(--text); }
:root[data-theme="light"] .theme-sun  { color: var(--text); }
:root[data-theme="light"] .theme-moon { color: var(--text-faint); }

.theme-switch:hover .theme-track { border-color: var(--border-strong); }
.theme-switch:focus-visible { outline: none; }
.theme-switch:focus-visible .theme-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The words belong in the drawer, where there is room for them and where a row of
   settings is read rather than scanned. In the header the track says it already. */
.theme-label { display: none; font-size: 14px; color: var(--text-muted); }

@media (max-width: 1080px) {
  .nav-tools .theme-switch { inline-size: 100%; justify-content: space-between; }
  .theme-label { display: block; }
}

/* ─── sign in with a password ───────────────────────────────────────────
   The second way in, one tap away under the code form rather than beside it: most
   people sign in with a code, and two equal forms side by side is a choice to make
   before anybody knows which one they need. */
.login-alt {
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--s-4);
}
.login-alt > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
}
.login-alt > summary::-webkit-details-marker { display: none; }

/* The answer to a price enquiry: the price, set apart from the thread in the
   colour that means "go ahead". It is the reason the customer opened the page. */
.quote-ready {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 7%, var(--surface));
}
.quote-ready .h3 { margin-block: 4px; }

/* ─── reviews ────────────────────────────────────────────────────────────
   Five stars, filled in the brand's warm accent; a card per review; on a product page
   the list and the form side by side on a desk, stacked on a phone. */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars svg { inline-size: 16px; block-size: 16px; fill: var(--border); }
.stars svg.is-on { fill: #F5A524; }

.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--s-4); }
.review-grid-narrow { grid-template-columns: 1fr; }
.review-card {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.review-body { margin: 0; line-height: 1.9; white-space: pre-line; }
.review-author { margin: 0; color: var(--text-muted); }

.review-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 900px) { .review-layout { grid-template-columns: 1fr; } }

/* The rating input: five stars, radios underneath. Written highest-first in the
   markup and laid out reversed, so a hover lights that star and every one before it
   using only the sibling selector. */
.rating-input { border: 0; margin: 0; padding: 0; }
.rating-input legend { font-size: 0.875rem; margin-block-end: 6px; padding: 0; }
.rating-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rating-stars input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.rating-stars label { cursor: pointer; padding: 4px; line-height: 0; }
.rating-stars svg { inline-size: 30px; block-size: 30px; fill: var(--border); transition: fill .12s ease; }
.rating-stars input:checked ~ label svg,
.rating-stars label:hover svg,
.rating-stars label:hover ~ label svg { fill: #F5A524; }
.rating-stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ==========================================================================
   FILTERS ON A PHONE
   A button that opens the filters, with how many are on. The sheet is a <details>,
   which is open on a wide screen (the script keeps it so) and for anybody without
   JavaScript, so nothing about the filters depends on the script. */
.filters-toggle { display: none; list-style: none; cursor: pointer; }
.filters-toggle::-webkit-details-marker { display: none; }

@media (max-width: 720px) {
  .filters-toggle {
    display: flex; align-items: center; gap: var(--s-3);
    min-block-size: 52px; padding-inline: var(--s-4);
    border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
    background: var(--surface); color: var(--text);
    font-size: 15px; font-weight: 600;
  }
  .filters-toggle svg { inline-size: 20px; block-size: 20px; flex: none; }
  .filters-count {
    margin-inline-start: auto;
    min-inline-size: 24px; padding: 1px 8px; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; text-align: center;
  }
  .filters-sheet[open] > .filters-toggle { margin-block-end: var(--s-4); border-color: var(--accent); }
  /* The title inside repeats the button's. */
  .filters-sheet .between > .h4 { display: none; }
}

/* The "price on request" badge sat across the corner of the photograph — on a wide
   picture the two overlapped, and the badge's tint over a white photo read as a smudge.
   A card with a badge gives the picture room under it. */
.p-card .media:has(> .badge) img {
  inset-block-start: calc(var(--s-3) + 30px);
  block-size: calc(100% - var(--s-3) - 30px);
}

/* When the filters are shut on a phone, the card they sit in is only a button: take the
   frame off and let the button be the frame. */
@media (max-width: 720px) {
  .filters:has(> .filters-sheet:not([open])) { padding: 0; border: 0; background: transparent; box-shadow: none; }
}

/* A row of filter chips on a phone is one row you swipe along, not a column of lozenges
   of every width. */
@media (max-width: 720px) {
  .chip-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-block-end: var(--s-1);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .chip-scroll::-webkit-scrollbar { display: none; }
  .chip-scroll > * { flex: none; white-space: nowrap; }
}

/* Thirty-one provinces: two to a row on a phone, each a line tall, not thirty-one
   screens of card. */
@media (max-width: 720px) {
  .grid.g-4:has(> [data-province-tile]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  a[data-province-tile] {
    flex-direction: row !important;
    min-block-size: 56px;
    padding: var(--s-2) var(--s-3);
    font-size: 14px;
  }
}