/* =====================================================================
   Maccar Medical — catalogue "Calibrated" (DESIGN-DIRECTION.md §4.3–4.5). Owner: WS3.
   Listing sheet (header, sub-category strip, sticky toolbar, filters, specimen cards, table view, load more),
   product page (gallery, info column, sheet nav, sections, rails, buy bar, print spec sheet), quick view sheet,
   compare table + bar, manufacturers register, search.
   Consumes base.css tokens and contracts only (plate, rail, ruler, .btn, .check, .drawer …); never redefines them.
   Logical properties throughout (RTL); physical values only on lines marked "physical: photo space".
   ===================================================================== */

.hp-field { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Plus / minus hairline glyph (filters, accordions): the vertical bar turns 90° when open */
.pmi { position: relative; flex: none; width: 12px; height: 12px; margin-inline-start: auto; color: var(--text); }
.pmi::before, .pmi::after { content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; }
.pmi::before { width: 12px; height: 1px; }
.pmi::after { width: 1px; height: 12px; transition: transform var(--t-ui) var(--ease-precise); }
details[open] > summary .pmi::after, [aria-expanded="true"] > .pmi::after { transform: rotate(90deg); }

/* ---------------------------------------------------------------- Sheet header (listing, search, brands, compare) */
.cat-sheet { padding-block: clamp(16px, 2vw, 24px) clamp(32px, 4vw, 56px); }
.cat-sheet .crumbs { margin-block-end: clamp(28px, 4vw, 56px); }
.cat-sheet-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) {
  .cat-sheet-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(var(--col-gap) * 2); align-items: end; }
}
.cat-title { margin: 0; max-width: 22ch; font-size: var(--fs-h1); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
:lang(ar) .cat-title { font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.cat-lead { margin: 20px 0 0; max-width: 60ch; color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.5; text-wrap: pretty; }
.cat-lead.prose { font-size: var(--fs-lead); }
.cat-lead.prose p { margin-block: 0 .6em; }
.cat-lead.prose > :last-child { margin-block-end: 0; }
.js .cat-lead[data-clamp]:not(.is-expanded) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat-lead-more { margin-block-start: 8px; padding: 0; font-size: var(--fs-small); }
.cat-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 16px 0 0; }
.cat-stats { display: flex; flex-wrap: wrap; margin: 0; }
.cat-stats > div { display: grid; gap: 6px; padding-inline: 0 24px; min-width: 96px; }
.cat-stats > div + div { padding-inline-start: 24px; border-inline-start: 1px solid var(--rule); }
.cat-stats dt { color: var(--text-muted); }
.cat-stats dt { white-space: nowrap; } /* labels never break inside a word: a stat that does not fit wraps to the next row */
@media (max-width: 599.98px) {
  .cat-stats { row-gap: 16px; }
  .cat-stats dt { letter-spacing: .02em; }
  .cat-stats > div { min-width: 0; padding-inline: 0 8px; }
  .cat-stats > div + div { padding-inline-start: 8px; }
}
.cat-stats dd { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1.111vw, 2.25rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums lining-nums; }

.cat-search { position: relative; display: flex; gap: 8px; margin-block-start: 28px; max-width: 640px; }
.cat-search > .icon { position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.cat-search .input { flex: 1; min-width: 0; padding-inline-start: 44px; }
.cat-search--lg .input { min-height: 56px; font-size: 1.0625rem; }
.cat-search--lg .btn { min-height: 56px; }
@media (max-width: 599.98px) { .cat-search { flex-wrap: wrap; } .cat-search .input { flex-basis: 100%; } .cat-search .btn { width: 100%; } .cat-search > .icon { top: 28px; } .cat-search--lg > .icon { top: 28px; } }

/* ---------------------------------------------------------------- Text tabs with a sliding 1 px indicator (.tabline)
   Used by the sub-category strip and the PDP sheet nav. shop.js measures the active (or hovered) tab into
   --tab-x / --tab-w and adds .has-ind; without JS the active tab draws its own rule. */
.tabline { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  --fade-s: 0px; --fade-e: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%); }
[dir="rtl"] .tabline {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
  mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%); }
.tabline::-webkit-scrollbar { display: none; }
.tabline.fade-s { --fade-s: 32px; }
.tabline.fade-e { --fade-e: 32px; }
.tabline-track { position: relative; display: inline-flex; min-width: 100%; }
.tabline-list { display: flex; gap: clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.tabline-list li { flex: none; scroll-snap-align: start; }
.tabline-tab { position: relative; display: inline-flex; align-items: baseline; gap: 6px; min-height: 48px; padding-block: 14px 13px; font-size: .9375rem; font-weight: 500; line-height: 1.3; color: var(--text-muted); white-space: nowrap; transition: color var(--t-hover) var(--ease-hover); }
.tabline-tab:hover, .tabline-tab.is-active, .tabline-tab[aria-current] { color: var(--text); }
.tabline-tab.is-active::after, .tabline-tab[aria-current]::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--text); }
.tabline.has-ind .tabline-tab::after { display: none; }
.tabline-count { font-size: var(--fs-data); color: var(--text-muted); }
.tabline-ind { position: absolute; bottom: 0; inset-inline-start: 0; width: var(--tab-w, 0px); height: 1px; background: var(--text); opacity: 0; pointer-events: none;
  transform: translateX(calc(var(--tab-x, 0px) * var(--dir))); transition: transform 280ms var(--ease-precise), width 280ms var(--ease-precise), opacity var(--t-hover) var(--ease-hover); }
.tabline.has-ind .tabline-ind { opacity: 1; }
.tabline.no-anim .tabline-ind { transition: none; }

.cat-strip { margin-block-end: clamp(24px, 3vw, 40px); }
.cat-strip .tabline { border-block-end: 1px solid var(--rule); }

/* ---------------------------------------------------------------- Listing layout */
.catalog { position: relative; }
.cat-layout { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--col-gap); padding-block: 0 clamp(72px, 8vw, 128px); align-items: start; }
.cat-results { position: relative; min-width: 0; }
.cat-results [data-catalog-grid], .cat-results .cat-more { transition: opacity var(--t-hover) var(--ease-hover); }
.cat-results.is-loading [data-catalog-grid], .cat-results.is-loading .cat-more { opacity: .4; pointer-events: none; }

@media (min-width: 1200px) {
  .cat-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cat-filters { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-offset, 0px) + 16px); max-height: calc(100vh - var(--header-offset, 0px) - 32px); max-height: calc(100svh - var(--header-offset, 0px) - 32px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-inline-end: 8px; transition: top var(--t-panel) var(--ease-standard); }
  .cat-results { grid-column: 4 / -1; }
  .catalog.is-collapsed .cat-filters { display: none; }
  .catalog.is-collapsed .cat-results { grid-column: 1 / -1; }
  .cat-filters-backdrop, .filters-close, .filters-foot, .filters-grip { display: none !important; }
}

/* Drawer (768–1199, inline start) and bottom sheet (< 768) */
@media (max-width: 1199.98px) {
  .cat-filters { position: fixed; inset: 0; z-index: var(--z-drawer, 80); visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--t-sheet); }
  .cat-filters.is-open { visibility: visible; pointer-events: auto; transition: none; }
  .cat-filters-backdrop { position: absolute; inset: 0; background: rgb(10 15 23 / .32); opacity: 0; transition: opacity var(--t-ui) var(--ease-standard); }
  .cat-filters.is-open .cat-filters-backdrop { opacity: 1; }
  .cat-filters-panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(400px, 92vw); display: flex; flex-direction: column; background: var(--paper); box-shadow: var(--elev-float);
    transform: translateX(calc(-100% * var(--dir))); transition: transform 220ms var(--ease-exit); }
  .cat-filters.is-open .cat-filters-panel { transform: none; transition: transform var(--t-sheet) var(--ease-precise); }
  .cat-filters-panel .filters { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .cat-filters-panel .filters-head { padding-inline: 24px 12px; min-height: 72px; border-block-end: 1px solid var(--rule); }
  .cat-filters-panel .filters-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline: 24px; }
  .filters-foot { padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--rule); background: var(--paper); }
  .fopt, .ftree-link { min-height: 44px; }
}
@media (max-width: 767.98px) {
  .cat-filters-panel { inset-block: auto 0; inset-inline: 0; width: auto; max-height: 86vh; max-height: 86svh; transform: translateY(100%); }
  .cat-filters.is-open .cat-filters-panel { transform: none; }
  .cat-filters-panel .filters-head { position: relative; padding-inline: var(--gutter) 8px; }
  .cat-filters-panel .filters-body { padding-inline: var(--gutter); }
  .filters-foot { padding-inline: var(--gutter); }
  .filters-grip { position: absolute; top: 8px; inset-inline-start: 50%; width: 32px; height: 3px; margin-inline-start: -16px; background: var(--rule-strong); }
}
.filters-grip { display: none; }
@media (max-width: 767.98px) { .filters-grip { display: block; } }

/* ---------------------------------------------------------------- Filters */
.filters { margin: 0; }
.filters-head { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.filters-title { margin: 0; font-size: .9375rem; font-weight: 560; color: var(--text); }
.filters-title .mono { color: var(--text-muted); font-weight: 400; }
.filters-clear { margin-inline-start: auto; font-size: var(--fs-small); }
.filters-close { margin-inline-start: auto; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text); }
.filters-clear + .filters-close { margin-inline-start: 4px; }
.filters-body { border-block-start: 1px solid var(--text); }
.cat-filters, .filters-body { scrollbar-color: var(--rule) transparent; }
/* Sticky sidebar (≥ 1200): no visible scrollbar in the middle of the layout — a hairline thumb appears only while the
   pointer or focus is inside, and a bottom fade (shop.js .has-more) says more filters follow. */
@media (min-width: 1200px) {
  .cat-filters { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .cat-filters:hover, .cat-filters:focus-within { scrollbar-color: var(--rule-strong) transparent; }
  body:has(.cmpbar:not([hidden])) .cat-filters { max-height: calc(100vh - var(--header-offset, 0px) - 88px); max-height: calc(100svh - var(--header-offset, 0px) - 88px); }
  .cat-filters.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); }
}

.fgroup { border-block-end: 1px solid var(--rule); }
.fgroup-title { display: flex; align-items: center; gap: 6px; min-height: 52px; cursor: pointer; list-style: none; font-size: .875rem; font-weight: 560; color: var(--text); user-select: none; }
.fgroup-title::-webkit-details-marker { display: none; }
.fgroup-title .fgroup-n { color: var(--text-muted); font-weight: 400; }
.fgroup-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fgroup-body { padding-block: 0 16px; }
html.motion-ok .fgroup[open] > .fgroup-body { animation: shop-fade-in var(--t-ui) var(--ease-precise) both; }
.fset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fopt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding-block: 4px; cursor: pointer; font-size: var(--fs-small); color: var(--text-body); }
.fopt .box { width: 18px; height: 18px; margin-top: 0; border-color: var(--rule-strong); border-radius: var(--r-1); }
.fopt input { width: 18px; height: 18px; }
.fopt-label { flex: 1; min-width: 0; line-height: 1.35; }
.fopt input:checked ~ .fopt-label { color: var(--text); }
.fopt-count { font-size: var(--fs-data); color: var(--text-muted); }
.fopt[hidden] { display: none; }
.fopts--scroll { max-height: 264px; overflow-y: auto; padding-inline-end: 4px; scrollbar-width: thin; }
.fsearch { position: relative; margin-block-end: 8px; }
.fsearch .icon { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; color: var(--text-muted); pointer-events: none; }
.fsearch .input { width: 100%; min-height: 40px; padding-inline-start: 36px; font-size: var(--fs-small); }

.ftree { list-style: none; margin: 0; padding: 0; }
.ftree--sub { margin-inline-start: 6px; padding-inline-start: 12px; border-inline-start: 1px solid var(--rule); }
.ftree-row { display: flex; align-items: center; gap: 4px; }
.ftree-link { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 36px; padding-block: 6px; color: var(--text-body); font-size: var(--fs-small); line-height: 1.3; transition: color var(--t-hover) var(--ease-hover); }
.ftree-link:hover { color: var(--text); }
.ftree-name { flex: 1; min-width: 0; }
.ftree-count { font-size: var(--fs-data); color: var(--text-muted); }
.ftree-item.is-active > .ftree-row .ftree-link { color: var(--text); font-weight: 560; }
.ftree-item.is-active > .ftree-row .ftree-count { color: var(--text-muted); }
.ftree-toggle { width: 32px; height: 32px; display: grid; place-items: center; flex: none; }
.ftree-toggle .pmi { margin: 0; width: 10px; height: 10px; }
.ftree-toggle .pmi::before { width: 10px; }
.ftree-toggle .pmi::after { height: 10px; }
.js .ftree-item:not(.is-open) > .ftree-children { display: none; }
.ftree-all { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-block-end: 4px; font-size: var(--fs-small); color: var(--text-muted); }
.ftree-all:hover { color: var(--text); }

.frange { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.frange .field { margin: 0; }
.frange .label { font-size: 13px; color: var(--text-muted); margin-block-end: 4px; }
.frange .input { width: 100%; min-height: 40px; }
.frange-sep { padding-block-end: 10px; color: var(--text-faint); }
.frange-apply { grid-column: 1 / -1; justify-self: start; }
.fset .field-hint { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }

/* ---------------------------------------------------------------- Toolbar (sticky; follows the header) */
.cat-toolbar { position: sticky; top: var(--header-offset, 0px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-height: 56px; margin-block-end: 24px;
  background: var(--paper); box-shadow: 0 1px 0 transparent; transition: top var(--t-panel) var(--ease-standard), box-shadow var(--t-hover) var(--ease-hover); }
.cat-toolbar.is-stuck { box-shadow: 0 1px 0 var(--rule); }
.cat-tool { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .875rem; font-weight: 500; color: var(--text); }
.cat-tool:hover { color: var(--signal-press); }
.cat-filter-n { color: var(--text-muted); font-size: var(--fs-data); }
:lang(ar) .cat-count, :lang(ar) .cat-more-count { font-family: var(--font-sans); }
.cat-count { margin: 0; margin-inline-end: auto; font-size: var(--fs-data); color: var(--text-muted); font-variant-numeric: tabular-nums lining-nums; }
.cat-sort { display: flex; align-items: center; gap: 10px; }
.cat-sort-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.select.cat-select { height: 40px; min-height: 40px; padding-block: 0; width: auto; min-width: 176px; font-size: .875rem; }
.vseg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-1); background: var(--paper-3); }
.vseg-btn { min-height: 34px; padding-inline: 14px; border-radius: var(--r-1); font-size: 13px; font-weight: 500; color: var(--text-muted); transition: background-color var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover); }
.vseg-btn:hover { color: var(--text); }
.vseg-btn.is-active { background: var(--paper); color: var(--text); box-shadow: 0 0 0 1px var(--rule); }
html:not(.js) .vseg { display: none; }
@media (max-width: 767.98px) {
  .cat-toolbar { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); gap: 0 12px; }
  .cat-count { order: 5; flex-basis: 100%; padding-block-end: 8px; }
  .cat-sort { flex: 1; min-width: 0; }
  .cat-sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .select.cat-select { width: 100%; min-width: 0; }
  .vseg-btn { padding-inline: 8px; font-size: 12px; }
}

.cat-chips { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 24px; padding: 0; }
.cat-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding-inline: 10px 8px; border-radius: var(--r-1); background: var(--paper-2); color: var(--text); font-size: 13px; transition: background-color var(--t-hover) var(--ease-hover); }
.cat-chip:hover { background: var(--paper-3); }
.cat-chip .icon { width: 16px; height: 16px; color: var(--text-muted); }
.cat-chips-clear { font-size: 13px; margin-inline-start: 4px; }

/* ---------------------------------------------------------------- Product grid */
.catalog-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
@media (min-width: 768px) { .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; } }
@media (min-width: 1200px) { .catalog.is-collapsed .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.catalog-cell { min-width: 0; display: flex; }
.catalog-cell > .pcard { flex: 1; }
html.motion-ok .catalog-cell.is-new { animation: shop-rise 480ms var(--ease-settle) both; animation-delay: calc(var(--i, 0) * 30ms); }

/* ---------------------------------------------------------------- Specimen card */
.pcard { position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--text-body); }
.pcard-media { position: relative; }
.pcard-plate { display: block; }
.pcard-plate .plate { width: 100%; }
.pcard-flags { position: absolute; top: 20px; inset-inline-start: 20px; z-index: 3; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.pcard-flags .badge { height: 20px; padding: 0 6px; border-radius: var(--r-1); background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--rule-strong);
  font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.pcard-flags .badge--sale { color: var(--danger); }
.pcard-flags .badge--teal { color: var(--measure-text); }
:lang(ar) .pcard-flags .badge { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.pcard-tools { display: none; }
.pcard-save { position: absolute; top: 4px; inset-inline-end: 4px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-muted); }
.pcard-save .icon { width: 20px; height: 20px; }
.pcard-save.is-active { color: var(--signal-press); }
.pcard-save.is-active .icon { fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .pcard-save { display: none; }
  .pcard-tools { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; display: flex; height: 40px; background: var(--paper); box-shadow: 0 -1px 0 var(--rule);
    opacity: 0; transform: translateY(6px); transition: opacity var(--t-ui) var(--ease-precise), transform var(--t-ui) var(--ease-precise); }
  .pcard:hover .pcard-tools, .pcard:focus-within .pcard-tools { opacity: 1; transform: none; }
}
.pcard-tool { flex: 1; min-width: 0; padding-inline: 4px; font-size: 13px; font-weight: 500; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--t-hover) var(--ease-hover), background-color var(--t-hover) var(--ease-hover); }
.pcard-tool + .pcard-tool { border-inline-start: 1px solid var(--rule); }
.pcard-tool:hover { color: var(--text); background: var(--paper-2); }
.pcard-tool.is-active { color: var(--signal-press); }
.pcard-tool:focus-visible { outline-offset: -2px; }

.pcard-body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding-block-start: 16px; }
.pcard-brand { margin: 0; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-title { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.pcard-title a { color: inherit; --ul-from: 0%; background: linear-gradient(currentColor 0 0) no-repeat var(--ul-from) 100% / 0 1px; transition: background-size 360ms var(--ease-precise); }
[dir="rtl"] .pcard-title a { --ul-from: 100%; }
.pcard:hover .pcard-title a, .pcard-title a:focus-visible { background-size: 100% 1px; }
.pcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.pcard-title a:focus-visible { outline: none; }
.pcard:has(.pcard-title a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.pcard-ref { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-na { color: var(--text-faint); }
.pcard-brand.is-empty { visibility: hidden; }
.pcard-ref.is-empty { visibility: hidden; }
.catalog-grid.is-table .pcard-brand.is-empty, .catalog-grid.is-table .pcard-ref.is-empty { visibility: visible; }
.pcard-cat, .pcard-pick { display: none; }
/* Footer: a fixed two-row block on every card (price row, then action row) so the hairline, the price and the action
   share one baseline across a row. The compare price stays inside the price row (nowrap); the saving is already the
   plate's "−12%" flag. Narrow cards (container query) drop the compare price and use the short action label. */
.pcard { container: pcard / inline-size; }
.pcard-foot { margin-block-start: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 28px 44px; align-items: center; padding-block-start: 12px; box-shadow: 0 -1px 0 var(--rule); }
.pcard-price { min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.pcard-price .price-now { flex: none; }
.pcard-price .price-old { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.pcard-price .price-off, .pcard-price .price-vat { display: none; }
.pcard-price .price-request, .pcard-price .price-login { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-cta { position: relative; z-index: 3; min-width: 0; }
.pcard-act { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; font-size: .875rem; font-weight: 500; color: var(--text); white-space: nowrap; transition: color var(--t-hover) var(--ease-hover); }
.pcard-act > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pcard-act-short { display: none; }
@container pcard (max-width: 239px) {
  .pcard-price .price-old { display: none; }
  .pcard-act-long { display: none; }
  .pcard-act-short { display: inline; }
}
.pcard-act:hover { color: var(--signal-press); }
.pcard-act .icon { width: 16px; height: 16px; transition: transform var(--t-ui) var(--ease-precise); }
.pcard-act:hover .icon { transform: rotate(90deg); }
.pcard-act.is-loading { opacity: .6; pointer-events: none; }
.pcard-act.is-done { color: var(--success); pointer-events: none; }
.pcard.is-unavailable .plate-obj { opacity: .6; }
@media (max-width: 767.98px) { .pcard-brand { display: none; } }
@media (max-width: 599.98px) {
  .pcard-title { font-size: .9375rem; }
  .pcard-foot { padding-block-start: 8px; }
}

/* Table view (procurement): the same cards laid out as rows */
.cat-thead { display: none; }
.cat-results { --tcols: 56px minmax(0, 2fr) minmax(0, .6fr) minmax(0, 1.25fr) minmax(0, 1.4fr) minmax(120px, .9fr) 120px 80px; }
/* desktop: the mostly short Model column gives way, so the Manufacturer header and the category names fit */
@media (min-width: 1024px) { .cat-results { --tcols: 56px minmax(0, 2fr) minmax(56px, .55fr) minmax(132px, 1.2fr) minmax(0, 1.5fr) minmax(120px, .9fr) 120px 80px; } }
@media (min-width: 768px) {
  .catalog.view-table .cat-thead { display: grid; grid-template-columns: var(--tcols); column-gap: 16px; align-items: center; min-height: 40px;
    position: sticky; top: calc(var(--header-offset, 0px) + 56px); z-index: 15; background: var(--paper); box-shadow: 0 1px 0 var(--text);
    font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); transition: top var(--t-panel) var(--ease-standard); }
  :lang(ar) .catalog.view-table .cat-thead { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; }
  .catalog.view-table .cat-thead span { min-width: 0; line-height: 1.3; overflow-wrap: normal; } /* headers wrap at word boundaries, never cut */
  .catalog.view-table .cat-thead span:last-child { text-align: center; }
}
.catalog-grid.is-table { grid-template-columns: minmax(0, 1fr); gap: 0; }
.catalog-grid.is-table .pcard { display: grid; grid-template-columns: var(--tcols); column-gap: 16px; align-items: center; min-height: 72px; padding-block: 8px; box-shadow: 0 1px 0 var(--rule); transition: background-color var(--t-hover) var(--ease-hover); }
.catalog-grid.is-table .pcard:hover { background: var(--paper-2); }
.catalog-grid.is-table .pcard-body, .catalog-grid.is-table .pcard-foot { display: contents; }
.catalog-grid.is-table .pcard-media { grid-row: 1; grid-column: 1; width: 56px; }
.catalog-grid.is-table .pcard-flags, .catalog-grid.is-table .pcard-tools, .catalog-grid.is-table .pcard-save { display: none; }
.catalog-grid.is-table .plate.has-marks::before { display: none; }
.catalog-grid.is-table .pcard-title { grid-row: 1; grid-column: 2; font-size: .9375rem; }
.catalog-grid.is-table .pcard-ref { grid-row: 1; grid-column: 3; margin: 0; }
.catalog-grid.is-table .pcard-brand { grid-row: 1; grid-column: 4; display: block; font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-body); }
.catalog-grid.is-table .pcard-cat { grid-row: 1; grid-column: 5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin: 0; font-size: var(--fs-small); line-height: 1.35; color: var(--text-body); overflow: hidden; }
.catalog-grid.is-table .pcard-price { grid-row: 1; grid-column: 6; }
.catalog-grid.is-table .price-request, .catalog-grid.is-table .price-now { white-space: nowrap; }
.catalog-grid.is-table .pcard-cta { grid-row: 1; grid-column: 7; justify-self: end; margin: 0; }
.catalog-grid.is-table .pcard-pick { grid-row: 1; grid-column: 8; display: flex; justify-content: center; position: relative; z-index: 3; }
@media (max-width: 767.98px) {
  .catalog-grid.is-table .pcard { grid-template-columns: 56px minmax(0, 1fr) auto 44px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; padding-block: 12px; }
  .catalog-grid.is-table .pcard-media { grid-row: 1 / 3; align-self: start; }
  .catalog-grid.is-table .pcard-title { grid-row: 1; grid-column: 2 / 4; }
  .catalog-grid.is-table .pcard-pick { grid-row: 1; grid-column: 4; }
  .catalog-grid.is-table .pcard-ref { grid-row: 2; grid-column: 2; }
  .catalog-grid.is-table .pcard-price { grid-row: 2; grid-column: 3; justify-self: end; }
  .catalog-grid.is-table .pcard-cta { grid-row: 2; grid-column: 4; }
  .catalog-grid.is-table .pcard-act span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .catalog-grid.is-table .pcard-act { min-width: 44px; justify-content: center; }
  .catalog-grid.is-table .pcard-brand, .catalog-grid.is-table .pcard-cat { display: none; }
}
.pcard-check { display: grid; place-items: center; width: 44px; height: 44px; }
.pcard-check .box { position: relative; width: 18px; height: 18px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--paper); transition: background-color var(--t-hover) var(--ease-hover), border-color var(--t-hover) var(--ease-hover); }
.pcard-check .box::after { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 5px; border: 1.5px solid #fff; border-block-start: 0; border-inline-end: 0; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 160ms var(--ease-precise); }
.pcard-check.is-active .box { background: var(--signal); border-color: var(--signal); }
.pcard-check.is-active .box::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.pcard-check:hover .box { border-color: var(--text-muted); }

/* ---------------------------------------------------------------- Price */
.price-now { font-family: var(--font-mono); font-weight: 400; color: var(--text); letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; }
.price-old { font-family: var(--font-mono); color: var(--text-muted); }
.price-off { font-family: var(--font-mono); color: var(--danger); font-weight: 400; }
.price-from { font-family: var(--font-sans); color: var(--text-muted); }
.price-request { font-size: .875rem; font-weight: 400; color: var(--text-muted); }
.pcard-price .price-now { font-size: .9375rem; }
.price--lg .price-now { font-size: 1.75rem; font-weight: 400; letter-spacing: -.01em; }
.price--lg .price-request { font-size: var(--fs-h4); font-weight: 400; color: var(--text); }
.price-login { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; }
.price-login .icon { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Stars (only real, approved ratings) */
.stars { display: inline-flex; align-items: center; gap: 6px; color: var(--text); line-height: 1; text-decoration: none; }
.stars-track { position: relative; display: inline-flex; color: var(--rule); }
.stars-track svg, .stars-fill svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.stars-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--pct, 0%); display: inline-flex; overflow: hidden; color: var(--text); white-space: nowrap; }
.stars--md .stars-track svg, .stars--md .stars-fill svg { width: 18px; height: 18px; }
.stars--lg .stars-track svg, .stars--lg .stars-fill svg { width: 22px; height: 22px; }
.stars-value { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.stars-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* ---------------------------------------------------------------- Load more + pagination */
.cat-more { display: grid; justify-items: center; gap: 14px; margin-block-start: clamp(48px, 6vw, 80px); }
.cat-more-count { margin: 0; font-size: var(--fs-data); color: var(--text-muted); }
.cat-more-ruler { position: relative; display: block; width: min(240px, 64%); height: 8px;
  background:
    linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--rule-strong) 0 1px, transparent 1px 40px) bottom / 100% 8px no-repeat,
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 8px) bottom / 100% 4px no-repeat; }
[dir="rtl"] .cat-more-ruler {
  background:
    linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(to left, var(--rule-strong) 0 1px, transparent 1px 40px) bottom / 100% 8px no-repeat,
    repeating-linear-gradient(to left, var(--rule) 0 1px, transparent 1px 8px) bottom / 100% 4px no-repeat; }
.cat-more-fill { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: var(--pct, 0%); background: var(--text); transition: width var(--t-panel) var(--ease-precise); }
.cat-more-btn { min-width: 200px; }
.cat-results .pagination { margin-block-start: 24px; }
.js .cat-results .pagination { display: none; }
.pagination a, .pagination span { font-family: var(--font-mono); border-radius: var(--r-1); }
.pagination [aria-current="page"], .pagination .is-current { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }

/* ---------------------------------------------------------------- Empty states (an empty plate with marks) */
.cat-empty { display: grid; gap: 32px; align-items: center; padding-block: 8px 24px; }
@media (min-width: 768px) { .cat-empty { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap) 48px; } }
.cat-empty-plate .plate { width: 100%; }
.cat-empty-title { margin: 0 0 8px; font-size: var(--fs-h4); font-weight: 520; line-height: 1.3; color: var(--text); }
.cat-empty .muted { margin: 0; max-width: 52ch; color: var(--text-muted); }
.cat-empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 24px 0 0; }
.cat-empty-cats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 24px 0 0; padding: 0; font-size: var(--fs-small); }
.cat-suggest { margin-block-start: clamp(48px, 6vw, 80px); padding-block-start: 24px; border-block-start: 1px solid var(--rule); }
.cat-suggest-title { margin: 0 0 32px; color: var(--text-muted); }

/* ---------------------------------------------------------------- Product page */
.pdp { padding-block-start: clamp(12px, 1.5vw, 20px); }
.pdp-print-head { display: none; }
.pdp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: clamp(20px, 2.5vw, 32px) clamp(48px, 6vw, 96px); }
@media (min-width: 1024px) {
  .pdp-main { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .pdp-media { grid-column: 1 / span 7; position: sticky; top: calc(var(--header-offset, 0px) + 24px); transition: top var(--t-panel) var(--ease-standard); }
  .pdp-info { grid-column: 8 / -1; padding-inline-start: clamp(0px, 1.6vw, 32px); }
}

/* Gallery */
.pgallery { display: grid; gap: 12px; min-width: 0; }
.pgallery-stage { position: relative; min-width: 0; }
.pgallery-track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.pgallery-track::-webkit-scrollbar { display: none; }
.pgallery-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pgallery-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }
.pgallery-plate { display: block; cursor: zoom-in; }
.pgallery-plate .plate, .pgallery-plate .specimen { width: 100%; }
.pgallery-counter { position: absolute; bottom: 28px; inset-inline-end: 20px; z-index: 4; margin: 0; padding: 2px 6px; background: var(--plate-hi); font-size: var(--fs-data); color: var(--text-muted); pointer-events: none; }
.pgallery-thumbs { list-style: none; margin: 0; padding: 2px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pgallery-thumbs::-webkit-scrollbar { display: none; }
.pgallery-thumbs li { flex: none; }
.pgallery-thumb { display: block; width: 72px; padding: 0; box-shadow: 0 0 0 1px transparent; transition: box-shadow var(--t-hover) var(--ease-hover); }
.pgallery-thumb .plate { width: 72px; }
.pgallery-thumb:hover { box-shadow: 0 0 0 1px var(--text-faint); }
.pgallery-thumb.is-active { box-shadow: 0 0 0 1px var(--text); }
@media (max-width: 767.98px) {
  .pgallery--page { margin-inline: calc(var(--gutter) * -1); }
  .pgallery--page .pgallery-thumbs { display: none; }
}
@media (min-width: 768px) {
  .js .pgallery-track { display: grid; overflow: visible; scroll-snap-type: none; }
  .js .pgallery-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: calc(16px * var(--dir)) 0;
    transition: opacity 320ms var(--ease-hover), translate 320ms var(--ease-precise), visibility 0s linear 320ms; }
  .js .pgallery-slide.is-active { z-index: 1; opacity: 1; visibility: visible; translate: none; transition: opacity 320ms var(--ease-hover), translate 640ms var(--ease-precise), visibility 0s; }
  .js .pgallery-slide.is-leaving { translate: calc(-12px * var(--dir)) 0; }
  .js .pgallery.has-thumbs .pgallery-counter { display: none; }
}
@media (min-width: 1200px) {
  .pgallery--page.has-thumbs { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; }
  .pgallery--page.has-thumbs .pgallery-thumbs { grid-row: 1; grid-column: 1; flex-direction: column; max-height: 100%; overflow-y: auto; overflow-x: hidden; }
  .pgallery--page.has-thumbs .pgallery-stage { grid-row: 1; grid-column: 2; }
}
.pgallery-reticle { position: absolute; inset: 0 auto auto 0; /* physical: photo space */
  z-index: 5; width: 24px; height: 24px; margin: -12px 0 0 -12px; /* physical: photo space */
  pointer-events: none; opacity: 0; transition: opacity var(--t-hover) var(--ease-hover);
  background:
    linear-gradient(var(--text-faint), var(--text-faint)) 0 50% / 9px 1px no-repeat,
    linear-gradient(var(--text-faint), var(--text-faint)) 100% 50% / 9px 1px no-repeat,
    linear-gradient(var(--text-faint), var(--text-faint)) 50% 0 / 1px 9px no-repeat,
    linear-gradient(var(--text-faint), var(--text-faint)) 50% 100% / 1px 9px no-repeat; }
.pgallery-reticle span { position: absolute; top: 22px; inset-inline-start: 22px; padding: 1px 4px; background: var(--plate-hi); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--text-muted); }
.pgallery-stage.is-aiming .pgallery-reticle { opacity: 1; }
.pgallery-stage.is-aiming .pgallery-plate { cursor: zoom-in; }
.pgallery-plate[data-zoom="0"] { cursor: pointer; }
html.motion-reduced .pgallery-reticle { display: none; }

/* Info column */
.pdp-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 16px; }
.pdp-kicker a { color: var(--text-muted); transition: color var(--t-hover) var(--ease-hover); }
.pdp-kicker a:hover { color: var(--text); }
.pdp-kicker-sep { color: var(--text-faint); }
.pdp-title { margin: 0; font-size: clamp(1.75rem, 1.333rem + 1.852vw, 3rem); font-weight: 360; line-height: 1.08; letter-spacing: -.025em; color: var(--text); text-wrap: balance; }
:lang(ar) .pdp-title { font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.pdp-info .stars { margin-block-start: 16px; }
.pdp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 20px; }
.chip-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding-inline: 10px; border: 1px solid var(--rule); border-radius: var(--r-1); background: var(--paper); font-size: 13px; color: var(--text); transition: border-color var(--t-hover) var(--ease-hover); }
.chip-copy:hover { border-color: var(--rule-strong); }
.chip-copy[hidden] { display: none; }
.chip-copy-k { font-size: 12px; color: var(--text-muted); }
.chip-copy .icon { width: 14px; height: 14px; color: var(--text-muted); }
.chip-copy.is-copied { border-color: var(--text); }
.chip-copy.is-copied .icon { color: var(--success); }
@media (pointer: coarse) { .chip-copy { min-height: 44px; } }
/* Key data strip: the outer rules belong to the strip (always full width); rows are separated by a rule drawn on the
   cells of the second row onwards (no column gap, so it runs unbroken); an odd last cell — or a single one — spans the row. */
.pdp-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; margin: 28px 0 0; border-block: 1px solid var(--rule); }
.pdp-data > div { display: grid; align-content: start; gap: 2px; padding-block: 12px; padding-inline-end: var(--col-gap); min-width: 0; }
.pdp-data > div:nth-child(n+3) { box-shadow: 0 -1px 0 var(--rule); }
.pdp-data > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pdp-data dt { font-size: 13px; color: var(--text-muted); }
.pdp-data dd { margin: 0; font-size: .9375rem; color: var(--text); overflow-wrap: anywhere; }
.pdp-buy { margin-block-start: 32px; }
.pdp-facts { list-style: none; margin: 32px 0 0; padding: 0; box-shadow: 0 -1px 0 var(--rule); }
.pdp-facts li { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: 16px; padding-block: 14px; box-shadow: 0 1px 0 var(--rule); font-size: var(--fs-small); color: var(--text-body); }
.pdp-facts-k { color: var(--text-muted); }
@media (max-width: 599.98px) { .pdp-facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Purchase box (page + quick view) */
.pbuy { display: flex; flex-direction: column; gap: 20px; }
.pbuy-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.pbuy-price { display: flex; flex-direction: column; gap: 6px; }
.pbuy-vat, .pbuy-aed { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
.pbuy-quoted { max-width: 44ch; }
.pbuy-group { margin: 0; font-size: 13px; color: var(--success); }
.pbuy-group .icon { display: none; }
.ptiers { box-shadow: 0 -1px 0 var(--text); }
.ptiers-title { margin: 0; padding-block: 12px 8px; color: var(--text-muted); }
.ptiers-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ptiers-table th { padding: 8px 0; text-align: start; font-weight: 400; color: var(--text-muted); font-size: 13px; }
.ptiers-table td { padding: 8px 0; box-shadow: 0 -1px 0 var(--rule); font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }
.ptiers-table th:last-child, .ptiers-table td:last-child { text-align: end; }
.ptiers-table tr.is-active td { background: var(--signal-tint); color: var(--text); }
.popt { margin: 0; padding: 0; border: 0; min-width: 0; }
.popt-legend { padding: 0; margin: 0 0 10px; font-size: .875rem; font-weight: 500; color: var(--text); }
.popt-current { font-weight: 400; color: var(--text-muted); }
.popt-values { display: flex; flex-wrap: wrap; gap: 8px; }
.popt-chip { position: relative; cursor: pointer; }
.popt-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.popt-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--paper);
  font-family: var(--font-mono); font-size: .875rem; color: var(--text); transition: border-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover); }
.popt-chip:hover span { border-color: var(--text-muted); }
.popt-chip input:checked + span { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.popt-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.popt-chip.is-unavailable span { color: var(--text-muted); border-style: dashed; }
.popt-chip.is-unpriced span::after { content: ""; width: 4px; height: 4px; margin-inline-start: 6px; background: var(--measure); }
.popt.has-error .popt-chip span { border-color: var(--danger); }
.popt .field-error { margin: 6px 0 0; }
.pbuy-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.pbuy-qty .label { display: block; margin: 0 0 8px; font-size: .875rem; font-weight: 500; color: var(--text-body); }
.pbuy .qty { height: 48px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--paper); }
.pbuy .qty:focus-within { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.pbuy .qty-btn { width: 44px; display: grid; place-items: center; color: var(--text); }
.pbuy .qty-btn:disabled { color: var(--text-faint); cursor: not-allowed; }
.pbuy .qty-input { width: 56px; border: 0; border-inline: 1px solid var(--rule); text-align: center; font-family: var(--font-mono); font-size: 1rem; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.pbuy .qty-input::-webkit-outer-spin-button, .pbuy .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pbuy .qty-input:focus { outline: none; background: transparent; }
.pbuy-limits { margin: -8px 0 0; font-size: 13px; color: var(--text-muted); }
.pbuy-stock { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding-block-end: 14px; font-size: 13px; font-weight: 500; color: var(--text-body); }
.pbuy-stock-dot { width: 8px; height: 8px; background: var(--text-faint); }
.pbuy-stock.is-in_stock .pbuy-stock-dot, .pbuy-stock.is-low .pbuy-stock-dot { background: var(--success); }
.pbuy-stock.is-order .pbuy-stock-dot, .pbuy-stock.is-lead .pbuy-stock-dot { background: var(--measure); }
.pbuy-stock.is-backorder .pbuy-stock-dot { background: var(--warning); }
.pbuy-stock.is-out .pbuy-stock-dot { background: var(--danger); }
.pbuy-stock-detail { font-weight: 400; color: var(--text-muted); }
.pbuy-stock-detail:empty { display: none; }
.pbuy-actions { display: flex; flex-direction: column; gap: 10px; }
.pbuy-btn { width: 100%; }
.pbuy-btn.btn--primary { min-height: 56px; order: -1; }
.pbuy-btn[hidden] { display: none; }
.pbuy-volume { margin: -6px 0 0; font-size: 13px; color: var(--text-muted); }
.pbuy-volume .link { font-size: inherit; padding: 0; }
.pbuy-notice { padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-1); background: var(--paper-2); font-size: var(--fs-small); color: var(--text-body); }
.pbuy-notice[hidden] { display: none; }
.pbuy-notice p { margin: 0; }
.pbuy-notice-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-block-start: 8px !important; }
.pbuy-notice-links:empty { display: none; }
.pbuy-note { margin: 0; border-radius: var(--r-1); }
.pbuy-note p { margin: 0; }
.pbuy-note .alert-title { display: block; }
.pbuy-bnpl { margin: 0; font-size: 13px; color: var(--text-muted); }
.pbuy-alert { padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-1); background: var(--paper-2); }
.pbuy-alert[hidden] { display: none; }
.pbuy-alert-title { margin: 0 0 10px; font-size: .875rem; font-weight: 500; color: var(--text); }
.pbuy-alert .input-group { display: flex; gap: 8px; }
.pbuy-alert .input { flex: 1; min-width: 0; }
.pbuy-alert .field-hint { margin: 8px 0 0; font-size: 13px; }
.pbuy-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.pbuy-tool { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 500; color: var(--text-body); --ul-from: 0%;
  background: linear-gradient(currentColor 0 0) no-repeat var(--ul-from) calc(100% - 10px) / 0 1px; transition: color var(--t-hover) var(--ease-hover), background-size 360ms var(--ease-precise); }
[dir="rtl"] .pbuy-tool { --ul-from: 100%; }
.pbuy-tool:hover { color: var(--text); background-size: 100% 1px; }
.pbuy-tool.is-active { color: var(--signal-press); }
.pbuy-more { margin-inline-start: auto; }

/* Sheet nav (≥ 1024; replaces the tabs) */
.pnav { display: none; }
@media (min-width: 1024px) {
  .js .pnav { display: block; position: sticky; top: var(--header-offset, 0px); z-index: 30; background: var(--paper); box-shadow: 0 -1px 0 var(--rule), 0 1px 0 var(--rule); transition: top var(--t-panel) var(--ease-standard); }
}
.pnav-inner { display: flex; align-items: center; gap: 32px; min-height: 48px; }
.pnav-name { flex: none; margin: 0; text-align: match-parent; max-width: 26ch; font-size: .875rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnav-tabs { flex: 1; min-width: 0; }
.pnav .tabline-tab { min-height: 48px; padding-block: 14px 13px; font-size: .875rem; }
.pnav-cta { flex: none; opacity: 0; visibility: hidden; transition: opacity var(--t-ui) var(--ease-precise), visibility 0s linear var(--t-ui); }
.pnav.has-cta .pnav-cta { opacity: 1; visibility: visible; transition: opacity var(--t-ui) var(--ease-precise), visibility 0s; }

/* Sections (long scroll ≥ 1024; accordion below) */
.pdp-details { padding-block: 0; }
.psec { padding-block-start: clamp(48px, 6vw, 96px); scroll-margin-top: calc(var(--header-h) + 64px); }
.psec-head { position: relative; display: flex; align-items: baseline; gap: 16px; padding-block-start: 24px; margin-block-end: 32px; box-shadow: 0 -1px 0 var(--text); }
.psec-h { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-h2); font-weight: 360; line-height: 1.08; letter-spacing: -.024em; color: var(--text); }
:lang(ar) .psec-h { font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.psec-h .idx { flex: none; min-width: 2.5em; }
.psec-n { font-size: var(--fs-data); color: var(--text-muted); letter-spacing: 0; }
.psec-toggle { display: none; }
.psec-inner { min-width: 0; }
.pdp-short, .pdp-description { max-width: 680px; }
.pdp-short { margin-block-end: 24px; color: var(--text); font-size: var(--fs-lead); line-height: 1.5; }
.pdp-description img { max-width: 100%; height: auto; }
.pdp-description table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.pdp-description td, .pdp-description th { padding-block: 10px; padding-inline: 0 12px; box-shadow: 0 1px 0 var(--rule); text-align: start; }
.js .pdp-description[data-long-text].is-collapsed { max-height: calc(12 * 1.65em); overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.long-text-toggle { margin-block-start: 16px; padding: 0; }
@media (max-width: 1023.98px) {
  .js .psec { padding-block-start: 0; }
  .js .psec:first-child { margin-block-start: 8px; box-shadow: 0 -1px 0 var(--text); }
  .js .psec-head { min-height: 64px; align-items: center; margin: 0; padding-block: 0; padding-inline: 0 44px; box-shadow: 0 1px 0 var(--rule); }
  .js .psec-h { font-size: var(--fs-h4); font-weight: 520; letter-spacing: -.006em; }
  :lang(ar) .js .psec-h { font-weight: 600; }
  .js .psec-toggle { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; }
  .js .psec-toggle .pmi { position: absolute; top: 50%; inset-inline-end: 8px; margin-block-start: -6px; }
  .js .psec-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-panel) var(--ease-standard), visibility 0s; }
  .js .psec.is-closed .psec-body { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--t-panel) var(--ease-standard), visibility 0s linear var(--t-panel); }
  .js .psec-inner { min-height: 0; overflow: hidden; }
  .js .psec-inner::before, .js .psec-inner::after { content: ""; display: block; height: 24px; }
}

/* Specifications */
.pspecs { display: grid; gap: 24px; max-width: 920px; }
.pspecs-wrap { border: 0; border-radius: 0; box-shadow: 0 -1px 0 var(--text); overflow-y: hidden; }
.pspecs-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.pspecs-table th, .pspecs-table td { padding-block: 12px; padding-inline: 12px 16px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--rule); }
.pspecs-table th[scope="row"] { width: 40%; font-weight: 400; color: var(--text-muted); border-inline-start: 1px solid transparent; transition: border-color var(--t-hover) var(--ease-hover); }
.pspecs-table td { color: var(--text); overflow-wrap: anywhere; }
.pspecs-table tbody tr:hover th, .pspecs-table tbody tr:hover td { background-color: var(--paper-2); }
.pspecs-table tbody tr:hover th[scope="row"] { border-inline-start-color: var(--measure); }
.pspecs-group th { padding-block: 24px 8px; color: var(--text-muted); border-block-end-color: var(--rule); }
.pspecs-group:hover th { background-color: transparent !important; }
html.motion-ok .pspecs-table.is-drawing th, html.motion-ok .pspecs-table.is-drawing td { border-block-end-color: transparent; --ul-from: 0%;
  background-image: linear-gradient(var(--rule), var(--rule)); background-repeat: no-repeat; background-position: var(--ul-from) 100%; background-size: 0% 1px; }
html.motion-ok[dir="rtl"] .pspecs-table.is-drawing th, html.motion-ok[dir="rtl"] .pspecs-table.is-drawing td { --ul-from: 100%; }
html.motion-ok .pspecs-table.is-drawn th { background-size: 100% 1px; transition: background-size 420ms var(--ease-measure) var(--d, 0ms); }
html.motion-ok .pspecs-table.is-drawn td { background-size: 100% 1px; transition: background-size 640ms var(--ease-measure) calc(var(--d, 0ms) + 300ms); }
.pspecs-request { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-block: 20px; box-shadow: 0 -1px 0 var(--rule), 0 1px 0 var(--rule); }
.pspecs-request-text { margin: 0; font-size: var(--fs-h4); font-weight: 400; color: var(--text); }
.pspecs-actions { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; }

/* Documents */
.pdocs { list-style: none; margin: 0; padding: 0; max-width: 920px; box-shadow: 0 -1px 0 var(--text); }
.pdoc { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto 24px; gap: 4px 20px; align-items: center; min-height: 64px; padding-block: 12px; padding-inline: 4px; box-shadow: 0 1px 0 var(--rule); color: var(--text); transition: background-color var(--t-hover) var(--ease-hover); }
.pdoc:hover { background: var(--paper-2); }
.pdoc-tag { justify-self: start; padding: 2px 6px; border-radius: var(--r-1); box-shadow: inset 0 0 0 1px var(--rule-strong); font-size: 11px; letter-spacing: .04em; }
.pdoc-title { font-weight: 500; }
.pdoc-meta { font-size: 13px; color: var(--text-muted); }
.pdoc-size { font-size: var(--fs-data); color: var(--text-muted); }
.pdoc-dl { display: grid; place-items: center; color: var(--text); transition: transform var(--t-ui) var(--ease-precise); }
.pdoc:hover .pdoc-dl { transform: translateY(2px); }
@media (max-width: 599.98px) {
  .pdoc { grid-template-columns: 52px minmax(0, 1fr) 24px; }
  .pdoc-meta, .pdoc-size { grid-column: 2; }
  .pdoc-dl { grid-row: 1; grid-column: 3; }
}

/* Delivery & returns */
.pdelivery { display: grid; gap: 32px; }
@media (min-width: 768px) { .pdelivery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); } }
.pdelivery > section { padding-block-start: 16px; box-shadow: 0 -1px 0 var(--rule); }
.pdelivery h3 { margin: 0 0 12px; color: var(--text-muted); }
.pdelivery-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 10px; font-size: var(--fs-small); color: var(--text-body); }
.pdelivery-list li { position: relative; padding-inline-start: 18px; }
.pdelivery-list li::before { content: "–"; position: absolute; inset-inline-start: 0; color: var(--text-faint); }

.pdp-disclaimer { max-width: 920px; margin: clamp(48px, 6vw, 88px) 0 0; padding-block-start: 16px; box-shadow: 0 -1px 0 var(--rule); font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); }

/* Reviews */
.previews { display: grid; gap: 32px; }
@media (min-width: 1024px) { .previews { grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: start; } .previews-summary { position: sticky; top: calc(var(--header-offset, 0px) + 72px); } }
.previews-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.previews-summary .muted { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
.previews-avg { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.previews-score { font-size: var(--fs-figure); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.previews-none { margin: 0; font-size: var(--fs-h4); color: var(--text); }
.previews-dist { list-style: none; width: 100%; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; }
.previews-dist li { display: grid; grid-template-columns: 64px 1fr 28px; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.previews-bar { position: relative; height: 1px; background: var(--rule); }
.previews-bar span { position: absolute; inset-block: -1px 0; inset-inline-start: 0; width: var(--pct, 0%); height: 2px; background: var(--text); }
.previews-dist-count { text-align: end; }
.previews-list { list-style: none; margin: 0; padding: 0; }
.previews-item { padding-block: 20px; box-shadow: 0 1px 0 var(--rule); }
.previews-item:first-child { padding-block-start: 0; }
.previews-item-head { display: flex; flex-direction: column; gap: 6px; margin-block-end: 8px; }
.previews-item-title { margin: 0; font-size: 1rem; font-weight: 520; color: var(--text); }
.previews-item-body { margin: 0 0 10px; color: var(--text-body); }
.previews-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--text-muted); }
.previews-author { color: var(--text-body); font-weight: 500; }
.previews-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--success); }
.previews-verified .icon { width: 14px; height: 14px; }
.previews-reply { margin-block-start: 14px; padding: 12px 16px; border-inline-start: 1px solid var(--text); background: var(--paper-2); font-size: var(--fs-small); }
.previews-reply p { margin: 0; }
.previews-reply-by { font-weight: 500; margin-block-end: 4px !important; }
.previews-form { padding: 24px; margin-block-end: 28px; border: 1px solid var(--rule); display: grid; gap: 16px; }
.js .previews-form:not(.is-open) { display: none; }
.previews-form .h4 { margin: 0; }
.previews-form .field { margin: 0; }
.previews-form .form-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .previews-form .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .previews-form .form-row > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.previews-form-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.req { color: var(--danger); }
.rate-input { margin: 0; padding: 0; border: 0; }
.rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-stars label { cursor: pointer; padding: 6px; color: var(--rule-strong); transition: color var(--t-hover) var(--ease-hover); }
.rate-stars label svg { width: 28px; height: 28px; fill: currentColor; }
.rate-stars label:hover, .rate-stars label:hover ~ label, .rate-stars input:checked ~ label { color: var(--text); }
.rate-stars input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.has-error .input, .has-error .textarea { border-color: var(--danger); }

/* Rails (native, §3.8) */
.prail-section { padding-block-start: clamp(64px, 8vw, 128px); }
.prail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-block-start: 24px; margin-block-end: 32px; box-shadow: 0 -1px 0 var(--rule); }
.prail-title { margin: 0; display: flex; align-items: baseline; gap: 16px; font-size: var(--fs-h3); font-weight: 440; line-height: 1.2; letter-spacing: -.014em; color: var(--text); }
:lang(ar) .prail-title { font-weight: 600; letter-spacing: 0; }
.prail-nav { display: flex; gap: 8px; }
.prail-section .rail-track { list-style: none; margin: 0; padding: 0; }
.prail-section .rail-cell { display: flex; }
.prail-section .rail-cell > .pcard { flex: 1; }
.precent { padding-block-start: clamp(56px, 7vw, 96px); }
.precent-title { margin: 0 0 20px; padding-block-start: 24px; color: var(--text-muted); box-shadow: 0 -1px 0 var(--rule); }
.precent-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.precent-list::-webkit-scrollbar { display: none; }
.precent-list li { flex: none; scroll-snap-align: start; }
.precent-item { display: grid; gap: 8px; width: 112px; color: var(--text-body); }
.precent-item .plate { width: 96px; }
.precent-name { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.precent-item:hover .precent-name { color: var(--text); }
.pdp { padding-block-end: clamp(72px, 8vw, 128px); }

/* Mobile sticky buy bar (< 1024; hides at the footer) */
.pdp-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; background: var(--paper); box-shadow: 0 -1px 0 var(--rule); padding-block: 10px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 220ms var(--ease-exit); }
.pdp-bar.is-visible { transform: none; transition: transform var(--t-panel) var(--ease-precise); }
.pdp-bar[hidden] { display: none; }
@media (min-width: 1024px) { .pdp-bar { display: none !important; } }
.pdp-bar-inner { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.pdp-bar-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.pdp-bar-thumb { flex: none; width: 44px; }
.pdp-bar-thumb .plate { width: 44px; }
.pdp-bar-info div { min-width: 0; }
.pdp-bar-name { margin: 0; text-align: match-parent; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-bar-price { margin: 0; font-size: 13px; color: var(--text-muted); }
.pdp-bar-btn { flex: none; min-height: 44px; padding-inline: 16px; }
/* While the buy bar is up (< 1024), the compare bar folds into a small "Compare (n)" chip above its inline end
   instead of stacking a second 56 px strip on top of it. */
@media (max-width: 1023.98px) {
  body:has(.pdp-bar.is-visible) .cmpbar:not([hidden]) { inset-inline: auto 0; bottom: calc(64px + env(safe-area-inset-bottom) + 8px); padding: 0; background: transparent; pointer-events: none; transition: none; animation: none; }
  body:has(.pdp-bar.is-visible) .cmpbar-inner { min-height: 0; width: auto; max-width: none; padding-inline: 0 var(--gutter); }
  body:has(.pdp-bar.is-visible) .cmpbar-title, body:has(.pdp-bar.is-visible) .cmpbar-items, body:has(.pdp-bar.is-visible) .cmpbar-clear { display: none; }
  body:has(.pdp-bar.is-visible) .cmpbar-go.btn { pointer-events: auto; min-height: 36px; padding-inline: 12px; background: var(--text); color: #fff; border-color: var(--text); box-shadow: var(--elev-float); transition: none; }
  html.motion-ok body:has(.pdp-bar.is-visible) .cmpbar-go.btn { animation: shop-chip-in var(--t-ui) var(--ease-precise) both; }
}
@keyframes shop-chip-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- Quick view sheet (inline end, drawer recipe) */
.qv-sheet .drawer-panel { width: min(560px, 100vw); border-radius: 0; }
.qv-head { min-height: 72px; }
.qv-head-title { margin: 0; color: var(--text-muted); }
.qv-body { padding: 0; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.qv-body.is-loading { padding: 24px; }
.qv-skel { display: grid; gap: 16px; }
.qv-skel span { display: block; background: var(--paper-3); }
.qv-skel span:first-child { aspect-ratio: 1 / 1; }
.qv-skel span:nth-child(2) { height: 28px; width: 70%; }
.qv-skel span:nth-child(3) { height: 16px; width: 40%; }
html.motion-ok .qv-skel span { animation: shop-pulse 1200ms ease-in-out infinite alternate; }
.quickview-media .plate { width: 100%; }
.quickview-info { display: flex; flex-direction: column; gap: 0; padding: 24px 24px calc(32px + env(safe-area-inset-bottom)); }
.quickview-brand { margin: 0 0 10px; }
.quickview-brand a { color: var(--text-muted); }
.quickview-title { margin: 0; font-size: var(--fs-h3); font-weight: 440; line-height: 1.2; letter-spacing: -.014em; color: var(--text); text-wrap: balance; }
:lang(ar) .quickview-title { font-weight: 600; letter-spacing: 0; }
.quickview-title a { color: inherit; }
.quickview-info .pdp-chips { margin-block-start: 16px; }
.quickview-info .pdp-data { margin-block-start: 20px; }
.quickview-info .pbuy { margin-block-start: 24px; }
.quickview-missing { padding: 48px 24px; color: var(--text-muted); }

/* ---------------------------------------------------------------- Compare bar */
.cmpbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; background: var(--text); color: #fff; padding-block-end: env(safe-area-inset-bottom); transition: bottom var(--t-panel) var(--ease-standard); }
.cmpbar[hidden] { display: none; }
/* the fixed bar must never cover the end of the page: reserve its height under the footer while it is shown */
body:has(.cmpbar:not([hidden])) .site-footer { padding-block-end: calc(56px + env(safe-area-inset-bottom)); }
.cmpbar.is-entering { animation: shop-bar-in var(--t-panel) var(--ease-precise) both; }
.cmpbar-inner { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.cmpbar-title { margin: 0; flex: none; color: rgb(255 255 255 / .72); }
.cmpbar-count { color: #fff; letter-spacing: 0; }
.cmpbar-items { list-style: none; display: flex; gap: 10px; margin: 0; padding: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cmpbar-item { position: relative; flex: none; width: 40px; height: 40px; background: var(--plate); }
.cmpbar-item a { display: block; width: 100%; height: 100%; padding: 3px; }
.cmpbar-item img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cmpbar-item.is-empty { background: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24); }
.cmpbar-remove { position: absolute; top: -4px; inset-inline-end: -4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.cmpbar-remove .icon { width: 12px; height: 12px; }
.cmpbar-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.cmpbar-clear { min-height: 44px; font-size: 13px; color: rgb(255 255 255 / .78); }
.cmpbar-clear:hover { color: #fff; }
.cmpbar-go.btn { background: #fff; color: var(--text); border-color: #fff; }
.cmpbar-go.btn:hover { background: var(--paper-2); }
.cmpbar :focus-visible { outline-color: #fff; }
@media (max-width: 599.98px) { .cmpbar-title, .cmpbar-item.is-empty { display: none; } }
.page-compare .cmpbar { display: none; }
body:has(.cmpbar:not([hidden])) .site-main { padding-block-end: 56px; }

/* ---------------------------------------------------------------- Compare page */
.compare-body { padding-block: 0 clamp(72px, 8vw, 128px); }
.compare-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; min-height: 56px; margin-block-end: 16px; }
.compare-toolbar-end { display: flex; flex-wrap: wrap; gap: 0 24px; margin-inline-start: auto; }
.cmp-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: var(--fs-small); color: var(--text); }
.cmp-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.cmp-switch-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--rule-strong); transition: background-color var(--t-hover) var(--ease-hover); }
.cmp-switch-thumb { position: absolute; top: 4px; inset-inline-start: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); transition: transform var(--t-ui) var(--ease-precise), background-color var(--t-hover) var(--ease-hover); }
.cmp-switch input:checked + .cmp-switch-track { background: var(--text); box-shadow: none; }
.cmp-switch input:checked + .cmp-switch-track .cmp-switch-thumb { background: var(--paper); transform: translateX(calc(16px * var(--dir))); }
.cmp-switch input:focus-visible + .cmp-switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.cmp-wrap { position: relative; overflow: auto; max-height: calc(100vh - var(--header-offset, 0px) - 24px); max-height: calc(100svh - var(--header-offset, 0px) - 24px); overscroll-behavior: contain; box-shadow: 0 -1px 0 var(--text); outline: none; }
.cmp-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cmp-table { width: 100%; min-width: calc(200px + var(--cmp-cols, 2) * 220px); border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--fs-small); }
.cmp-cols-1 { --cmp-cols: 1; } .cmp-cols-2 { --cmp-cols: 2; } .cmp-cols-3 { --cmp-cols: 3; } .cmp-cols-4 { --cmp-cols: 4; }
.cmp-table th, .cmp-table td { padding: 12px 16px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--rule); }
.cmp-table thead th { position: sticky; top: 0; z-index: 3; vertical-align: bottom; background: var(--paper); border-block-end-color: var(--text); padding-block: 20px 16px; }
.cmp-corner, .cmp-table tbody th[scope="row"] { position: sticky; inset-inline-start: 0; z-index: 2; width: 200px; background: var(--paper); border-inline-start: 1px solid transparent; }
.cmp-table thead .cmp-corner { z-index: 4; color: var(--text-muted); }
.cmp-table tbody th[scope="row"] { font-weight: 400; color: var(--text-muted); }
.cmp-table td { color: var(--text); overflow-wrap: anywhere; }
.cmp-card { position: relative; display: grid; gap: 8px; padding-inline-end: 28px; }
.cmp-plate { display: block; width: 96px; }
.cmp-plate .plate { width: 96px; }
.cmp-name { font-size: .9375rem; font-weight: 500; line-height: 1.35; color: var(--text); }
.cmp-name:hover { color: var(--signal-press); }
.cmp-model { font-size: 12px; color: var(--text-muted); }
.cmp-remove { position: absolute; top: -12px; inset-inline-end: -12px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-muted); }
.cmp-remove:hover { color: var(--danger); }
.cmp-group th { padding-block: 28px 8px; color: var(--text-muted); background: var(--paper); }
.cmp-na { color: var(--text-faint); }
.cmp-table.is-highlight tr[data-differs] td { background: var(--signal-tint); }
.cmp-table.is-highlight tr[data-differs] th[scope="row"] { border-inline-start-color: var(--measure); color: var(--text); }
.cmp-table.is-only-diff tr.cmp-row:not([data-differs]):not(.cmp-row--price):not(.cmp-row--cta) { display: none; }

/* ---------------------------------------------------------------- Manufacturers register / search registers */
.brands-body { padding-block: 0 clamp(72px, 8vw, 128px); }
.az-index { position: sticky; top: var(--header-offset, 0px); z-index: 10; margin-block-end: 24px; padding-block: 8px; background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.az-index ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; }
.az-index a, .az-index span { display: inline-grid; place-items: center; min-width: 32px; height: 32px; font-size: 13px; }
.az-index a { color: var(--text); }
.az-index a:hover { background: var(--paper-2); }
.az-index span { color: var(--text-faint); }
.breg-group + .breg-group { margin-block-start: 40px; }
.breg-letter { margin: 0 0 12px; font-size: var(--fs-data); color: var(--text-muted); }
.breg, .sreg { list-style: none; margin: 0; padding: 0; box-shadow: 0 -1px 0 var(--rule); }
.breg-row { display: grid; grid-template-columns: 32px 48px minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; min-height: 96px; padding-block: 16px; padding-inline: 4px;
  box-shadow: 0 1px 0 var(--rule); color: var(--text); transition: background-color var(--t-hover) var(--ease-hover); }
.breg-row:hover, .sreg-row:hover { background: var(--paper-2); }
.breg-logo { display: grid; place-items: center; width: 48px; height: 48px; }
.breg-logo img { width: 48px; height: 48px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter var(--t-ui) var(--ease-hover), opacity var(--t-ui) var(--ease-hover); }
.breg-logo .mono { font-size: 13px; color: var(--text-muted); }
.breg-row:hover .breg-logo img { filter: none; opacity: 1; }
.breg-name { font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; letter-spacing: -.014em; transition: translate var(--t-ui) var(--ease-precise); }
:lang(ar) .breg-name { letter-spacing: 0; }
.breg-row:hover .breg-name, .breg-row:focus-visible .breg-name { translate: calc(8px * var(--dir)) 0; }
.breg-country { display: none; }
.breg-count { font-size: var(--fs-data); color: var(--text-muted); justify-self: end; }
.breg-arrow { display: none; }
@media (min-width: 768px) {
  .breg-row { grid-template-columns: 56px 48px minmax(0, 1fr) minmax(0, 200px) 64px 24px; }
  .breg-country { display: block; }
  .breg-arrow { display: block; justify-self: end; width: 24px; height: 12px; transition: transform var(--t-ui) var(--ease-precise); }
  .breg-row:hover .breg-arrow { transform: translateX(calc(4px * var(--dir))); }
  [dir="rtl"] .breg-row:hover .breg-arrow { transform: translateX(-4px) scaleX(-1); }
}
.search-browse { padding-block: 0 clamp(72px, 8vw, 128px); display: grid; gap: clamp(48px, 6vw, 88px); }
@media (min-width: 1024px) { .search-browse { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col-gap) * 2); align-items: start; } }
.search-section-title { margin: 0 0 16px; color: var(--text-muted); }
.sreg-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 24px; gap: 16px; align-items: center; min-height: 64px; padding-inline: 4px; box-shadow: 0 1px 0 var(--rule); color: var(--text); transition: background-color var(--t-hover) var(--ease-hover); }
.sreg-name { font-size: var(--fs-h4); font-weight: 400; transition: translate var(--t-ui) var(--ease-precise); }
.sreg-row:hover .sreg-name { translate: calc(8px * var(--dir)) 0; }
.sreg-count { font-size: var(--fs-data); color: var(--text-muted); }
.sreg-arrow { width: 24px; height: 12px; }
.search-section .link-arrow { margin-block-start: 20px; }

/* ---------------------------------------------------------------- PhotoSwipe theme (paper-2 background) */
.pswp { --pswp-bg: #F4F6F8; --pswp-placeholder-bg: #ECEFF3; --pswp-icon-color: #0D1726; --pswp-icon-color-secondary: #F4F6F8; --pswp-icon-stroke-color: #F4F6F8; --pswp-icon-stroke-width: 0; --pswp-error-text-color: #0D1726; }
.pswp__img { mix-blend-mode: multiply; }
.pswp__counter { font-family: var(--font-mono); font-size: 13px; color: var(--text); text-shadow: none; opacity: .8; }

/* ---------------------------------------------------------------- Keyframes */
@keyframes shop-fade-in { from { opacity: 0; } }
@keyframes shop-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes shop-bar-in { from { transform: translateY(100%); } }
@keyframes shop-pulse { from { opacity: .6; } to { opacity: 1; } }

/* ---------------------------------------------------------------- Reduced motion (OS setting or the footer switch) */
@media (prefers-reduced-motion: reduce) {
  .js .pgallery-slide, .js .pgallery-slide.is-leaving { translate: none !important; }
  .tabline-ind, .cat-filters-panel, .pdp-bar, .cmpbar { transition-duration: 0s !important; }
}
html.motion-reduced .js .pgallery-slide, html.motion-reduced .pgallery-slide { translate: none !important; }
html.motion-reduced .tabline-ind { transition: none; }

/* ---------------------------------------------------------------- Print: product spec sheet (A4) and compare */
@media print {
  @page { size: A4; margin: 14mm 14mm 18mm; }
  .cat-filters, .cat-toolbar, .pcard-tools, .pcard-save, .cmpbar, .pdp-bar, .compare-toolbar, .cmp-remove, .cmp-row--cta, .pbuy-tools, .pbuy-alert, .prail-section, .precent { display: none !important; }
  .cmp-wrap { overflow: visible; max-height: none; box-shadow: none; }
  .cmp-table { min-width: 0; }
  .cmp-corner, .cmp-table tbody th[scope="row"], .cmp-table thead th { position: static; }

  .page-product .crumbs, .pnav, .pgallery-thumbs, .pgallery-counter, .pgallery-reticle, .pdp-buy, .pdp-facts, .pdp-chips, .pdp-info .stars,
  .psec--overview, .psec--documents, .psec--delivery, .psec--reviews, .psec-toggle, .pspecs-actions, .pspecs-request .btn, .callout-legend { display: none !important; }
  .pdp { padding: 0; }
  .pdp-print-head { display: flex !important; justify-content: space-between; align-items: flex-end; gap: 8mm; padding-block-end: 4mm; margin-block-end: 6mm; border-block-end: 1px solid #000; }
  .pdp-print-head img { height: 7mm; width: auto; }
  .pdp-print-meta { display: grid; gap: 1mm; justify-items: end; font-size: 8pt; color: #000; }
  .pdp-main { display: grid !important; grid-template-columns: 80mm minmax(0, 1fr) !important; gap: 8mm; padding: 0; break-inside: avoid; }
  .pdp-media { position: static !important; grid-column: auto !important; width: 80mm; }
  .pdp-info { grid-column: auto !important; padding: 0 !important; }
  .pgallery--page { margin: 0; display: block; }
  .pgallery-track { display: block !important; overflow: visible !important; }
  .pgallery-slide { display: none !important; opacity: 1 !important; visibility: visible !important; translate: none !important; }
  .pgallery-slide:first-child { display: block !important; }
  .plate { background: none !important; }
  .plate::before, .plate::after, .plate-shadow { display: none !important; }
  .tb-callouts .tb-fact::before { background: #000; }
  .pdp-title { font-size: 20pt; }
  .pdp-data { margin-block-start: 6mm; }
  .pdp-details { padding: 0; }
  .psec { padding-block-start: 8mm; break-inside: auto; }
  .psec-head { margin-block-end: 4mm; box-shadow: none; border-block-start: 1px solid #000; }
  .psec-h { font-size: 14pt; }
  .psec-body { display: block !important; visibility: visible !important; }
  .psec-inner { overflow: visible !important; }
  .pspecs-table tr { break-inside: avoid; }
  .pspecs-table tbody tr:hover th, .pspecs-table tbody tr:hover td { background: none; }
  .pdp-disclaimer { margin-block-start: 8mm; font-size: 8pt; }
  html.motion-ok .pdp [data-reveal] { opacity: 1 !important; transform: none !important; }
}