/* =====================================================================
   Maccar Medical — storefront shell (layout.css). Owner: WS1. Spec: DESIGN-DIRECTION.md §4.1, §4.11.
   Announcement · header (one 72 / 60 px bar, hide on scroll, Studio theme) · mega menu · locale + account
   dropdowns · search sheet · mobile menu · flash · breadcrumbs · page hero · supply facts · footer (Studio) ·
   newsletter column · motion switch · checkout header.
   Tokens from base.css only; logical properties throughout (physical values only on "physical: photo space" lines).
   ===================================================================== */

/* ---------------------------------------------------------------- Announcement (36 px, paper-2, mono) */
.announce { background: var(--paper-2); color: var(--text-body); font-family: var(--font-mono); font-size: var(--fs-data); line-height: 1.4; letter-spacing: var(--tr-data); border-bottom: 1px solid var(--rule); }
:lang(ar) .announce { font-family: var(--font-sans); font-size: .8125rem; letter-spacing: 0; }
html.announce-off .announce { display: none; }
.announce-inner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 36px; padding-inline: calc(var(--gutter) + 44px); }
.announce-text { min-width: 0; text-align: center; }
.announce-text > span, .announce-text a > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce-text .link-arrow { font: inherit; letter-spacing: inherit; color: var(--text-body); max-width: 100%; }
.announce-close { position: absolute; inset-inline-end: calc(var(--gutter) - 14px); top: 50%; transform: translateY(-50%); width: 44px; height: 36px; display: grid; place-items: center; color: var(--text-muted); transition: color var(--t-hover) var(--ease-hover); }
.announce-close:hover { color: var(--text); }
/* Phones: the whole offer stays readable — up to two lines, the 44 px close target reserved at the inline end only */
@media (max-width: 599.98px) {
  .announce-inner { padding-block: 6px; padding-inline: var(--gutter) calc(var(--gutter) + 30px); }
  .announce-text > span, .announce-text a > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ---------------------------------------------------------------- Header (one bar; the height never changes) */
.site-header {
  --hdr-fg: var(--text-body); --hdr-fg-strong: var(--text); --hdr-bg: var(--paper); --hdr-rule: var(--rule);
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h); background: var(--hdr-bg); color: var(--hdr-fg);
  transition: transform var(--t-panel) var(--ease-standard), background-color var(--t-ui) var(--ease-hover), color var(--t-ui) var(--ease-hover);
}
.site-header::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--hdr-rule); opacity: 0; transition: opacity var(--t-hover) var(--ease-hover), background-color var(--t-ui) var(--ease-hover); pointer-events: none; }
.site-header.is-scrolled::after, .site-header.has-mega::after { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-studio { --hdr-fg: var(--s-ink-2); --hdr-fg-strong: var(--s-ink); --hdr-bg: var(--s-bg); --hdr-rule: var(--s-rule); --focus: #FFFFFF; }
.site-header.is-studio.has-mega { --hdr-fg: var(--text-body); --hdr-fg-strong: var(--text); --hdr-bg: var(--paper); --hdr-rule: var(--rule); --focus: var(--signal); }
.hdr-bar { position: static; display: flex; align-items: center; height: var(--header-h); gap: 4px; }
.hdr-spacer { flex: 1; }

/* logo: ink and white versions stacked, cross-faded with the header theme (240 ms) */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.brand-logos { position: relative; display: block; }
.brand .logo { height: 40px; width: auto; }
.brand-logos .logo--studio { position: absolute; inset-block-start: 0; inset-inline-start: 0; opacity: 0; }
.brand-logos .logo { transition: opacity var(--t-ui) var(--ease-hover); }
.site-header.is-studio:not(.has-mega) .logo--ink { opacity: 0; }
.site-header.is-studio:not(.has-mega) .logo--studio { opacity: 1; }

/* buttons in the bar (44 px targets) */
.hdr-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; padding-inline: 10px; color: var(--hdr-fg-strong);
  font-size: .9375rem; font-weight: 500; white-space: nowrap; transition: color var(--t-hover) var(--ease-hover);
}
.hdr-btn > .icon { width: 20px; height: 20px; }
.hdr-btn:hover { color: var(--hdr-fg-strong); }
.hdr-btn .nav-caret { width: 12px; height: 12px; color: currentColor; opacity: .7; transition: transform var(--t-ui) var(--ease-precise); }
.hdr-label, .hdr-kbd { display: none; }
.hdr-kbd { margin-inline-start: 2px; color: var(--hdr-fg); background: transparent; border-color: var(--hdr-rule); }
.hdr-burger { margin-inline-start: -10px; }
.hdr-burger-lines { position: relative; display: block; width: 20px; height: 9px; border-block: 1px solid currentColor; }
.hdr-locale-btn .mono { font-size: var(--fs-data); letter-spacing: var(--tr-data); }
.hdr-quote { color: var(--hdr-fg-strong); }
.hdr-quote .hdr-label { font-weight: 560; }
:lang(ar) .hdr-quote .hdr-label { font-weight: 600; }

/* count: ink pill on mobile, inline mono "(3)" next to the label on desktop; the digits roll (app.js) */
.hdr-btn .count-badge { position: absolute; top: 3px; inset-inline-end: 0; }
.site-header.is-studio:not(.has-mega) .count-badge { background: var(--s-ink); color: var(--s-bg); }

.hdr-utils { display: flex; align-items: center; gap: 0; }
.hdr-nav, .hdr-locale, .hdr-account { display: none; }

@media (min-width: 1200px) {
  .hdr-bar { gap: 0; }
  .hdr-burger { display: none; }
  .brand .logo { height: 46px; }
  .hdr-nav { display: block; margin-inline-start: 64px; height: 100%; }
  .hdr-utils { gap: 24px; }
  .hdr-locale, .hdr-account { display: block; }
  .hdr-btn { padding-inline: 0; min-width: 24px; }
  .hdr-label { display: inline; }
  .hdr-btn .count-badge, .site-header.is-studio:not(.has-mega) .hdr-btn .count-badge { position: static; display: inline-flex; align-items: baseline; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-size: var(--fs-data); line-height: 1.2; }
  .hdr-btn .count-badge .digit-roll { height: 1.2em; line-height: 1.2em; }
  .hdr-btn .count-badge::before { content: "("; }
  .hdr-btn .count-badge::after { content: ")"; }
}
@media (min-width: 1280px) { .hdr-kbd { display: inline-block; } }
@media (max-width: 1199.98px) { .hdr-search .hdr-label { display: none; } .hdr-quote .hdr-label, .hdr-cart .hdr-label { display: none; } }
@media (max-width: 359.98px) { .brand .logo { height: 34px; } .hdr-btn { min-width: 40px; padding-inline: 8px; } }

/* primary navigation */
.nav-list { display: flex; align-items: stretch; gap: 32px; height: 100%; }
.nav-item { display: flex; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 100%; font-size: .9375rem; font-weight: 500; color: var(--hdr-fg); white-space: nowrap; transition: color var(--t-hover) var(--ease-hover); }
.nav-text { position: relative; }
.nav-text::after { content: ""; position: absolute; inset-inline: 0; top: calc(100% + 6px); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: var(--ul-origin, 0% 50%); transition: transform var(--t-ui) var(--ease-precise); }
[dir="rtl"] .nav-text::after { --ul-origin: 100% 50%; }
.nav-link:hover, .nav-item.is-open > .nav-link { color: var(--hdr-fg-strong); }
.nav-link[aria-current="page"], .nav-link[data-current="true"] { color: var(--hdr-fg-strong); }
.nav-link[aria-current="page"] .nav-text::after, .nav-link[data-current="true"] .nav-text::after, .nav-item.is-open > .nav-link .nav-text::after { transform: none; }
.nav-caret { width: 12px; height: 12px; opacity: .7; transition: transform var(--t-ui) var(--ease-precise); }
.nav-item.is-open .nav-caret, .hdr-drop.is-open .nav-caret { transform: rotate(180deg); }
.nav-link:focus-visible { outline-offset: 4px; }

/* dropdowns (account, locale) */
.hdr-drop { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 14px); inset-inline-end: 0; z-index: var(--z-mega); width: 320px; padding: 20px;
  background: var(--paper); color: var(--text-body); box-shadow: var(--elev-float); border-radius: 0;
  animation: mc-drop var(--t-ui) var(--ease-precise);
}
.dropdown--locale { width: 280px; }
@keyframes mc-drop { from { opacity: 0; transform: translateY(-6px); } }
.dropdown-label { display: block; color: var(--text-muted); margin-bottom: 10px; }
.dropdown-sep { height: 1px; background: var(--rule); margin-block: 16px; }
.dropdown-title { font-size: var(--fs-h4); font-weight: var(--fw-h4); color: var(--text); margin-bottom: 6px; }
.dropdown-text { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; }
.dropdown-hello { display: grid; gap: 4px; font-size: var(--fs-small); color: var(--text-muted); padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); overflow: hidden; text-overflow: ellipsis; }
.dropdown-hello strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-actions { display: grid; gap: 8px; }
.dropdown-list a, .dropdown-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; border-bottom: 1px solid var(--rule); font-size: .9375rem; color: var(--text-body); text-align: start; transition: color var(--t-hover) var(--ease-hover); }
.dropdown-list li:last-child a { border-bottom: 0; }
.dropdown-list a:hover, .dropdown-link:hover { color: var(--text); }
.dropdown-count { color: var(--text-muted); font-size: var(--fs-data); }
.dropdown-list--sep { margin-top: 16px; border-top: 1px solid var(--rule); }
.dropdown-foot { margin-top: 4px; border-top: 1px solid var(--rule); }
.dropdown-foot .dropdown-link { border-bottom: 0; }

/* language & currency */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); }
.lang-switch a { min-height: 44px; display: inline-flex; align-items: center; color: var(--text-muted); transition: color var(--t-hover) var(--ease-hover); }
.lang-switch a:hover, .lang-switch a.is-active { color: var(--text); }
.lang-switch a[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-sans); }
.lang-sep { color: var(--text-faint); }
.lang-list { display: grid; }
.lang-list a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-bottom: 1px solid var(--rule); color: var(--text-body); font-size: .9375rem; }
.lang-list li:last-child a { border-bottom: 0; }
.lang-list a:hover { color: var(--text); }
.lang-list a.is-active { color: var(--text); font-weight: 500; }
.lang-list a[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-sans); }
.cur-switch { display: inline-flex; align-items: center; gap: 8px; }
.cur-switch.is-busy { opacity: .5; pointer-events: none; }
.cur-field { position: relative; display: inline-flex; align-items: center; }
.cur-select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; min-height: 44px;
  font-size: var(--fs-data); color: var(--text-muted); padding-block: 0; padding-inline: 0 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E8A9B' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat;
  background-position: calc(100% - 1px) 50%;   /* physical: photo space — chevron glyph inside the select */
}
[dir="rtl"] .cur-select { background-position: 1px 50%; }   /* physical: photo space */
.cur-select:hover { color: var(--text); }
.cur-switch--list { display: grid; gap: 8px; width: 100%; }
.cur-switch--list .cur-field, .cur-switch--list .select { width: 100%; }

/* segmented controls (mobile menu foot) */
.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--paper); }
.seg-item { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 16px; font-size: var(--fs-small); color: var(--text-body); }
.seg-item + .seg-item { border-inline-start: 1px solid var(--rule); }
.seg-item.is-active { background: var(--text); color: var(--paper); }
.seg-item[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-sans); }
.cur-switch--seg { border: 1px solid var(--rule-strong); border-radius: var(--r-1); padding-inline: 14px; min-height: 46px; }
.cur-switch--seg .cur-select { color: var(--text); min-height: 44px; }

/* ---------------------------------------------------------------- Mega menu "Products" (disclosure) */
.mega {
  position: absolute; inset-inline: 0; top: 100%; z-index: var(--z-mega);
  background: var(--paper); color: var(--text-body); border-top: 1px solid var(--rule);
  max-height: calc(100vh - var(--header-h)); max-height: calc(100svh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0);
  transition: opacity 200ms var(--ease-exit), visibility 0s linear 200ms, clip-path 0s linear 200ms;
}
.nav-item.is-open > .mega {
  visibility: visible; opacity: 1; clip-path: inset(0);
  transition: clip-path var(--t-sheet) var(--ease-precise), opacity 0s, visibility 0s;
}
.nav-item.no-anim > .mega { transition: none; }
html:not(.js) .has-mega:hover > .mega, html:not(.js) .has-mega:focus-within > .mega { visibility: visible; opacity: 1; clip-path: none; }
.mega-scrim { position: absolute; inset-inline: 0; top: 100%; height: 100vh; z-index: calc(var(--z-mega) - 1); background: rgb(10 15 23 / .28); opacity: 0; visibility: hidden; transition: opacity var(--t-ui) var(--ease-hover), visibility 0s linear var(--t-ui); }
.site-header.has-mega .mega-scrim { opacity: 1; visibility: visible; transition: opacity var(--t-ui) var(--ease-hover), visibility 0s; }
.mega-sheet { padding-block: 40px 0; }
.mega-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-bottom: 32px; }
.mega-groups { grid-column: 1 / 4; }
.mega-kicker { color: var(--text-muted); margin-bottom: 12px; }
.mega-group-list { border-top: 1px solid var(--rule); }
.mega-tab {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding-inline: 8px;
  border-bottom: 1px solid var(--rule); color: var(--text-body); font-size: .9375rem; font-weight: 500;
  transition: background-color var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover);
}
.mega-tab-name { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; padding-block: 6px; }
.mega-tab-count { font-size: var(--fs-data); color: var(--text-muted); }
.mega-tab:hover, .mega-tab.is-active { background: var(--paper-2); color: var(--text); }
.mega-tab.is-active .mega-tab-idx { color: var(--signal); }
.mega-tab:focus-visible { outline-offset: -2px; }
.mega-pane { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--col-gap); padding-inline-start: 24px; align-content: start; }
.mega-pane[hidden] { display: none; }
.mega-pane.is-fading { animation: mc-pane 140ms var(--ease-hover); }
@keyframes mc-pane { from { opacity: 0; } }
.mega-pane-main { grid-column: 1 / 6; display: flex; flex-direction: column; min-width: 0; }
.mega-pane-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.mega-pane-title { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); color: var(--text); }
.mega-pane-desc { margin-top: 8px; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 24px; border-top: 1px solid var(--rule); }
.mega-links li { border-bottom: 1px solid var(--rule); }
.mega-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding-block: 8px; font-size: .9375rem; line-height: 1.35; color: var(--text-body); transition: color var(--t-hover) var(--ease-hover); }
.mega-links a:hover { color: var(--text); }
.mega-link-name { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-wrap: pretty; }   /* two lines, never an ellipsis on one */
.mega-link-count { flex-shrink: 0; font-size: var(--fs-data); color: var(--text-muted); }
.mega-specimen { grid-column: 6 / 10; justify-self: end; width: 100%; max-width: 340px; display: grid; gap: 10px; align-content: start; color: var(--text-body); }
.mega-specimen .plate { --mk: 12px; }
.mega-fig { max-width: none; }
.mega-specimen-name { font-size: .9375rem; font-weight: 500; color: var(--text); line-height: 1.35; }
.mega-specimen:hover .mega-specimen-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mega-specimen-price .price-now { font-size: .9375rem; font-weight: 400; color: var(--text); }
.mega-foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 32px; min-height: 56px; padding-block: 8px; border-top: 1px solid var(--rule); }
.mega-foot-mid { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 32px; }
.mega-foot-end { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-small); }
.mega-foot-note { font-size: .8125rem; color: var(--text-muted); }
.mega-foot .link { font-size: var(--fs-small); }
/* motion: columns fade in and rise 8 px from 120 ms (stagger 40 ms) */
html.motion-ok .nav-item.is-open:not(.no-anim) .mega-groups,
html.motion-ok .nav-item.is-open:not(.no-anim) .mega-pane:not([hidden]) > *,
html.motion-ok .nav-item.is-open:not(.no-anim) .mega-foot { animation: mc-col var(--t-panel) var(--ease-precise) both; animation-delay: 120ms; }
html.motion-ok .nav-item.is-open:not(.no-anim) .mega-pane:not([hidden]) > :nth-child(1) { animation-delay: 160ms; }
html.motion-ok .nav-item.is-open:not(.no-anim) .mega-pane:not([hidden]) > :nth-child(2) { animation-delay: 200ms; }
html.motion-ok .nav-item.is-open:not(.no-anim) .mega-foot { animation-delay: 240ms; }
@keyframes mc-col { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 1439.98px) { .mega-foot-note { display: none; } }

/* ---------------------------------------------------------------- Checkout header */
.site-header--minimal { position: relative; height: auto; border-bottom: 1px solid var(--rule); }
.site-header--minimal::after { display: none; }
.hdr-min { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.hdr-min .brand .logo { height: 40px; }
.hdr-secure { display: none; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 500; color: var(--text-body); }
.hdr-min-end { display: flex; align-items: center; gap: 16px; }
.hdr-support { display: none; flex-direction: column; text-align: end; line-height: 1.3; }
.hdr-support-label { font-size: .8125rem; color: var(--text-muted); }
.hdr-support-num { font-size: var(--fs-data); color: var(--text); }
@media (min-width: 768px) { .hdr-secure { display: inline-flex; } .hdr-support { display: flex; } }
@media (max-width: 479.98px) { .hdr-back span { display: none; } }

/* ---------------------------------------------------------------- Search sheet */
.search-overlay { position: fixed; inset: 0; z-index: var(--z-modal); }
.search-backdrop { position: absolute; inset: 0; background: rgb(10 15 23 / .32); opacity: 0; transition: opacity var(--t-ui) var(--ease-hover); }
.search-overlay.is-open .search-backdrop { opacity: 1; }
.search-panel {
  position: relative; background: var(--paper); box-shadow: var(--elev-float); min-height: 60vh; min-height: 60svh;
  max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0); transition: clip-path 220ms var(--ease-exit);
}
.search-overlay.is-open .search-panel { clip-path: inset(0); transition: clip-path 480ms var(--ease-precise); }
.search-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.search-kicker { color: var(--text-muted); }
.search-close { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-data); color: var(--text-body); margin-inline-end: -4px; }
.search-close:hover { color: var(--text); }
.search-close kbd { font-size: 11px; }
@media (max-width: 767.98px) { .search-close kbd { display: none; } }
.search-form { position: relative; display: flex; align-items: center; gap: 8px; }
.search-input {
  flex: 1; min-width: 0; height: 56px; border: 0; padding: 0; background: transparent; color: var(--text);
  font-size: var(--fs-h3); font-weight: 300; letter-spacing: var(--tr-h3);
}
:lang(ar) .search-input { font-weight: 400; }
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { outline: none; }
.search-input::-webkit-search-decoration, .search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-form:focus-within .search-rule { background: var(--signal); }
.search-rule { position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--text); transform-origin: var(--ul-origin, 0% 50%); transform: scaleX(0); transition: transform 0s linear 220ms; }
[dir="rtl"] .search-rule { --ul-origin: 100% 50%; }
.search-overlay.is-open .search-rule { transform: none; transition: transform 900ms var(--ease-measure) 120ms, background-color var(--t-hover) var(--ease-hover); }
.search-busy { position: absolute; inset-inline: 0; bottom: 0; height: 1px; overflow: hidden; opacity: 0; }
.search-busy::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 30%; background: var(--signal); animation: mc-bar 1200ms linear infinite; }
.search-overlay.is-loading .search-busy { opacity: 1; }
.search-clear, .search-submit { width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-muted); flex-shrink: 0; }
.search-clear:hover, .search-submit:hover { color: var(--text); }
.search-submit .icon { width: 24px; height: 12px; }
.search-body { padding: 32px 0 48px; }
.sr-title { color: var(--text-muted); margin-bottom: 12px; }
.search-idle { display: grid; gap: 40px; }
@media (min-width: 900px) { .search-idle { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 64px; } }
.search-specs { display: grid; border-top: 1px solid var(--rule); }
@media (min-width: 600px) { .search-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); } }
.search-specs a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--rule); color: var(--text-body); font-size: .9375rem; transition: color var(--t-hover) var(--ease-hover), background-color var(--t-hover) var(--ease-hover); }
.search-specs a:hover { color: var(--text); background: var(--paper-2); }
.search-spec-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-spec-count { font-size: var(--fs-data); color: var(--text-muted); }
.search-recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.search-recent-clear { font-size: var(--fs-small); }
.search-recent-list { display: grid; border-top: 1px solid var(--rule); }
.search-recent-list a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); font-size: .9375rem; color: var(--text-body); }
.search-recent-list a:hover { color: var(--text); }
/* results (app.js builds them) */
.sr-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .sr-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 64px; } }
.sr-list { display: grid; border-top: 1px solid var(--rule); }
.sr-option { display: flex; align-items: center; gap: 16px; color: var(--text-body); scroll-margin: 8px; transition: background-color var(--t-hover) var(--ease-hover); }
.sr-option.is-active, .sr-option:hover { background: var(--paper-2); }
.sr-product { min-height: 64px; padding-block: 8px; padding-inline: 8px; border-bottom: 1px solid var(--rule); }
.sr-thumb { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; background: radial-gradient(130% 100% at 50% 30%, var(--plate-hi) 0%, var(--plate) 52%, var(--plate-lo) 100%); overflow: hidden; }
.sr-thumb img { width: 84%; height: 84%; object-fit: contain; }
.sr-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sr-name { text-align: match-parent; color: var(--text); font-weight: 400; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-name mark, .sr-cat mark { background: none; color: inherit; font-weight: 600; padding: 0; }
.sr-sku { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-data); color: var(--text-muted); }
.sr-sku mark { background: var(--signal-tint); color: var(--text); padding: 0 1px; }
.sr-price { flex-shrink: 0; font-size: var(--fs-small); color: var(--text-muted); text-align: end; font-variant-numeric: tabular-nums; }
.sr-price del, .sr-price s { color: var(--text-muted); margin-inline-start: 6px; }
/* Phones: the full model name wraps to two lines and the price moves under it (variants differ only at the end) */
@media (max-width: 599.98px) {
  .sr-product { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; }
  .sr-product .sr-thumb { grid-row: 1 / span 2; }
  .sr-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sr-product .sr-price { grid-column: 2; text-align: start; }
}
.sr-cats { display: grid; border-top: 1px solid var(--rule); }
.sr-cat { min-height: 44px; padding-inline: 8px; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.sr-foot { margin-top: 24px; }
.sr-all { display: inline-flex; gap: 10px; min-height: 44px; padding-inline: 8px; margin-inline: -8px; font-weight: 500; color: var(--text); }
.sr-all .icon { width: 16px; height: 8px; transition: transform var(--t-ui) var(--ease-precise); }
.sr-all.is-active .icon, .sr-all:hover .icon { transform: translateX(calc(4px * var(--dir))); }
[dir="rtl"] .sr-all.is-active .icon, [dir="rtl"] .sr-all:hover .icon { transform: scaleX(-1) translateX(4px); }
.sr-empty { display: grid; gap: 6px; padding: 8px 0; color: var(--text-muted); font-size: .9375rem; }
.sr-empty-title { font-size: var(--fs-h4); color: var(--text); }
html.motion-ok .search-results .sr-option.is-new { animation: mc-sr 240ms var(--ease-precise) both; animation-delay: calc(min(var(--i, 0), 7) * 24ms); }
@keyframes mc-sr { from { opacity: 0; transform: translateY(4px); } }

/* ---------------------------------------------------------------- Mobile menu (.mm, below 1200 px) */
.mm .drawer-panel { width: min(480px, 100vw); transition-duration: var(--t-sheet); }
.mm.is-open .drawer-panel { transition: transform var(--t-sheet) var(--ease-precise); }
.mm-head { min-height: var(--header-h); }
.mm-head .logo { height: 40px; width: auto; }
.mm-viewport { position: relative; flex: 1; overflow: hidden; }
.mm-level {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) 24px;
  background: var(--paper); transform: translateX(calc(100% * var(--dir))); visibility: hidden;
  transition: transform 420ms var(--ease-precise), visibility 0s linear 420ms;
}
.mm-level.is-active { transform: none; visibility: visible; transition: transform 420ms var(--ease-precise), visibility 0s; }
.mm-level.is-before { transform: translateX(calc(-24% * var(--dir))); }
.mm-list { display: grid; }
.mm-link {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; border-bottom: 1px solid var(--rule);
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; letter-spacing: var(--tr-h3); color: var(--text); text-align: start;
}
.mm-name { flex: 1; min-width: 0; }
.mm-link > .icon { color: var(--text-muted); }
.mm-link--strong .mm-name { font-weight: 500; }
.mm-idx { flex: 0 0 24px; }
.mm-count { font-size: var(--fs-data); color: var(--text-muted); letter-spacing: 0; }
.mm-hint { font-size: var(--fs-small); color: var(--text-muted); letter-spacing: 0; }
.mm-level:not([data-mm-panel="root"]) .mm-link { min-height: 52px; font-size: 1.0625rem; letter-spacing: 0; }
.mm-list--quiet { margin-top: 24px; }
.mm-list--quiet .mm-link { min-height: 48px; font-size: 1rem; letter-spacing: 0; color: var(--text-body); }
.mm-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-data); color: var(--text-muted); }
.mm-back:hover { color: var(--text); }
.mm-title { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); margin: 4px 0 12px; }
.mm-title:focus { outline: none; }
.mm-foot { display: grid; gap: 14px; padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--paper); }
.mm-segs { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-contact { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--fs-small); }
.mm-contact a { min-height: 44px; display: inline-flex; align-items: center; color: var(--text-body); }

/* ---------------------------------------------------------------- Flash messages */
.flash-stack { display: grid; gap: 8px; padding-top: 16px; }
.flash { align-items: center; animation: mc-toast-in var(--t-ui) var(--ease-precise); }
.flash-close { margin-inline-start: auto; width: 44px; height: 44px; margin-block: -12px; margin-inline-end: -12px; display: grid; place-items: center; color: var(--text-muted); flex-shrink: 0; }
.flash-close:hover { color: var(--text); }
.flash-close .icon { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Breadcrumb holder & page hero */
.crumbs { margin-bottom: 24px; }
.page-hero { padding-block: clamp(32px, 2rem + 3vw, 72px) clamp(40px, 2.5rem + 3vw, 88px); }
.page-hero--alt { background: var(--paper-2); }
.page-hero--plain { border-bottom: 1px solid var(--rule); }
.page-hero-inner { display: grid; gap: 32px; align-items: end; }
.page-hero-copy { min-width: 0; max-width: 880px; }
.page-hero-copy > .eyebrow { display: block; margin-bottom: 16px; }
.page-hero-title { font-weight: 300; max-width: 22ch; }
:lang(ar) .page-hero-title { font-weight: 400; }
.page-hero-lead { margin-top: 24px; max-width: 60ch; color: var(--text-muted); }
.page-hero-meta { margin-top: 16px; }
.page-hero-actions { margin-top: 40px; }
.page-hero-dl { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0; }
.page-hero-dl > div { display: grid; gap: 4px; padding-inline-start: 12px; border-inline-start: 1px solid var(--rule); }
.page-hero-dl dt { color: var(--text-muted); }
.page-hero-dl dd { margin: 0; font-size: var(--fs-data); color: var(--text); }
@media (min-width: 1024px) {
  .page-hero-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .page-hero-copy { grid-column: 1 / 9; }
  .page-hero-dl { grid-column: 9 / -1; justify-content: flex-end; }
  .page-hero--media .page-hero-copy { grid-column: 1 / 7; }
  .page-hero--media .page-hero-media { grid-column: 7 / -1; }
  .page-hero--media .page-hero-dl { grid-column: 1 / 7; justify-content: flex-start; }
}

/* ---------------------------------------------------------------- Supply facts (hairline text row, no icons) */
.trust { border-block: 1px solid var(--rule); background: var(--paper); }
.trust-list { display: grid; grid-template-columns: 1fr; }
.trust-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding-block: 20px; border-bottom: 1px solid var(--rule); }
.trust-item:last-child { border-bottom: 0; }
.trust-copy { display: grid; gap: 4px; min-width: 0; }
.trust-title { font-size: .9375rem; font-weight: 500; color: var(--text); }
.trust-text { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }
@media (min-width: 768px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .trust-item:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 1200px) {
  .trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-item { border-bottom: 0; padding-inline-end: 16px; }
  .trust-item + .trust-item { border-inline-start: 1px solid var(--rule); padding-inline-start: 16px; }
}
.trust--compact .trust-item { padding-block: 16px; }

/* ---------------------------------------------------------------- Rail controls in title blocks (native [data-rail] rails: base.css) */
.rail-nav { display: inline-flex; gap: 8px; }
.rail-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule-strong); border-radius: var(--r-1); color: var(--text); background: transparent; transition: border-color var(--t-hover) var(--ease-hover), opacity var(--t-hover) var(--ease-hover); }
.rail-btn:hover { border-color: var(--text); }
.rail-btn .icon { width: 16px; height: 8px; }
.rail-btn.is-disabled, .rail-btn:disabled { opacity: .35; pointer-events: none; }

/* ---------------------------------------------------------------- Footer (Studio) */
.site-footer { font-size: .9375rem; content-visibility: auto; contain-intrinsic-size: auto 720px; }
.site-footer a { color: inherit; }
.footer-top { padding-block: clamp(56px, 3rem + 4vw, 112px) clamp(40px, 2rem + 3vw, 72px); border-bottom: 1px solid var(--s-rule); }
.footer-cta { display: inline-flex; align-items: baseline; gap: clamp(16px, 2vw, 32px); color: var(--s-ink); font-size: var(--fs-h1); font-weight: 300; line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
:lang(ar) .footer-cta { font-weight: 400; }
.footer-cta-text { background: linear-gradient(currentColor 0 0) no-repeat var(--ul-from, 0%) 100% / 0% 1px; padding-bottom: .08em; transition: background-size var(--t-reveal) var(--ease-precise); }
[dir="rtl"] .footer-cta-text { --ul-from: 100%; }
.footer-cta:hover .footer-cta-text, .footer-cta:focus-visible .footer-cta-text { background-size: 100% 1px; }
.footer-cta .icon { width: clamp(28px, 3vw, 48px); height: auto; aspect-ratio: 2 / 1; flex-shrink: 0; transition: transform var(--t-ui) var(--ease-precise); }
.footer-cta:hover .icon { transform: translateX(calc(8px * var(--dir))); }
[dir="rtl"] .footer-cta:hover .icon { transform: scaleX(-1) translateX(8px); }
.footer-cta-note { margin-top: 16px; max-width: 52ch; color: var(--s-ink-2); font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: var(--lh-lead); }
.footer-main { display: grid; gap: 48px; padding-block: clamp(48px, 2.5rem + 3vw, 88px); }
@media (min-width: 768px) { .footer-main { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--col-gap); } .footer-brand { grid-column: 1 / 4; } .footer-cols { grid-column: 4 / -1; } .footer-news { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .footer-main { grid-template-columns: repeat(12, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / 4; } .footer-cols { grid-column: 4 / 10; } .footer-news { grid-column: 10 / -1; } }
.footer-logo { display: inline-flex; }
.footer-logo .logo { height: 56px; width: auto; }
.footer-tagline { margin-top: 20px; color: var(--s-ink-2); max-width: 32ch; line-height: 1.55; }
.footer-contact { display: grid; margin-top: 24px; }
.footer-contact a, .footer-social a { display: inline-flex; align-items: center; min-height: 36px; color: var(--s-ink); }
.footer-hours { margin-top: 8px; font-size: var(--fs-small); color: var(--s-ink-3); }
.footer-social { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 20px; font-size: var(--fs-small); }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--col-gap); }
@media (min-width: 600px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-title { color: var(--s-ink-3); margin-bottom: 16px; }
.footer-col ul { display: grid; list-style: none; margin: 0; padding: 0; }
.footer-col a, .footer-cookie-btn { display: inline-flex; align-items: center; min-height: 36px; color: var(--s-ink-2); font-size: .9375rem; text-align: start; line-height: 1.35; }
.footer-col a:hover, .footer-cookie-btn:hover { color: var(--s-ink); }
.footer-col .footer-strong { color: var(--s-ink); }
/* underline draw on footer links */
.ulink { background: linear-gradient(currentColor 0 0) no-repeat var(--ul-to, 100%) 100% / 0% 1px; transition: background-size var(--t-panel) var(--ease-precise), color var(--t-hover) var(--ease-hover); }
.ulink:hover, .ulink:focus-visible { background-size: 100% 1px; background-position-x: var(--ul-from, 0%); }
[dir="rtl"] .ulink { --ul-from: 100%; --ul-to: 0%; }
.footer-col .ulink, .footer-contact .ulink, .footer-social .ulink, .footer-links .ulink { display: inline-block; min-height: 0; padding-block: 12px; line-height: 1.35; background-position-y: calc(100% - 10px); }
@media (min-width: 1024px) { .footer-col .ulink, .footer-contact .ulink, .footer-social .ulink, .footer-links .ulink { padding-block: 8px; background-position-y: calc(100% - 6px); } }
.footer-col li, .footer-contact li, .footer-links li { display: flex; align-items: center; }
/* newsletter column */
.nl { display: grid; gap: 0; }
.nl-text { color: var(--s-ink-2); font-size: var(--fs-small); line-height: 1.55; margin-bottom: 20px; }
.nl-label { color: var(--s-ink-2); font-size: var(--fs-small); margin-bottom: 8px; }
.nl-row { display: flex; align-items: stretch; border: 1px solid var(--s-rule-strong); border-radius: var(--r-1); transition: border-color var(--t-hover) var(--ease-hover); }
.nl-row:focus-within { border-color: var(--s-ink); }
.nl-input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; color: var(--s-ink); box-shadow: none !important; }
.nl-input:hover { border: 0; }
.nl-input:focus { border: 0; }
.nl-submit { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; padding-inline: 14px; color: var(--s-ink); font-size: var(--fs-small); font-weight: 500; }
.nl-submit .icon { width: 16px; height: 8px; transition: transform var(--t-ui) var(--ease-precise); }
.nl-submit:hover .icon { transform: translateX(calc(4px * var(--dir))); }
[dir="rtl"] .nl-submit:hover .icon { transform: scaleX(-1) translateX(4px); }
.nl-submit.is-loading { opacity: .6; pointer-events: none; }
.nl-consent { margin-top: 14px; color: var(--s-ink-2); font-size: .8125rem; }
.nl-consent a { color: var(--s-ink); text-decoration: underline; text-underline-offset: 3px; }
.nl-status { margin-top: 12px; font-size: var(--fs-small); color: var(--s-ink); }
.nl-status.is-ok::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; background: var(--s-measure); }
.nl-status.is-error::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; background: #FF8A91; }
/* offices row */
.footer-offices { padding-block: 32px; border-top: 1px solid var(--s-rule); }
.fo-list { display: grid; gap: 24px; }
@media (min-width: 600px) { .fo-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); } }
.fo { display: grid; gap: 4px; align-content: start; }
.fo-city { display: flex; align-items: baseline; gap: 10px; color: var(--s-ink); font-size: 1.25rem; font-weight: 400; }
.fo-hq { font-size: 11px; color: var(--s-ink-3); text-decoration: none; letter-spacing: .04em; }
.fo-time { display: flex; align-items: baseline; gap: 10px; color: var(--s-ink); font-size: var(--fs-small); }
.fo-zone { color: var(--s-ink-3); font-size: var(--fs-data); }
.fo-phone { justify-self: start; color: var(--s-ink-2); font-size: var(--fs-data); }
/* bottom row */
.footer-bottom { display: grid; gap: 24px; padding-block: 28px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--s-rule); }
@media (min-width: 1024px) { .footer-bottom { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; } .footer-legal { grid-column: 1 / 7; } .footer-tools { grid-column: 7 / -1; justify-items: end; } }
.footer-legal { display: grid; gap: 6px; font-size: .8125rem; line-height: 1.55; }
.footer-copy { color: var(--s-ink-2); }
.footer-reg { color: var(--s-ink-3); }
.footer-sep { margin-inline: 8px; color: var(--s-ink-3); }
.footer-disclaimer { max-width: 80ch; color: var(--s-ink-3); font-size: 12px; }
.footer-tools { display: grid; gap: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; font-size: .8125rem; }
@media (min-width: 1024px) { .footer-links { justify-content: flex-end; } }
.footer-links a, .footer-links .footer-cookie-btn { color: var(--s-ink-2); font-size: .8125rem; }
.footer-links a:hover, .footer-links .footer-cookie-btn:hover { color: var(--s-ink); }
.footer-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.site-footer .lang-switch a, .site-footer .cur-select { color: var(--s-ink-2); }
.site-footer .lang-switch a.is-active, .site-footer .lang-switch a:hover, .site-footer .cur-select:hover { color: var(--s-ink); }
.site-footer .cur-select option { color: var(--text); background: var(--paper); }
.pay-list { display: flex; flex-wrap: wrap; gap: 14px; }
.pay { display: inline-flex; align-items: center; height: 20px; color: var(--s-ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; filter: grayscale(1); opacity: .6; }
.pay svg { height: 14px; width: auto; display: block; }
.pay-text--tabby { font-weight: 700; letter-spacing: -.01em; }
/* minimal (checkout) footer — Lab room */
.site-footer.site-footer--minimal { --bg: var(--paper); --text: #0D1726; --text-body: #3A4658; --text-muted: #5B6678; --rule: #DCE1E7; --focus: var(--signal); background: var(--paper); color: var(--text-muted); border-top: 1px solid #DCE1E7; font-size: var(--fs-small); content-visibility: visible; }
.footer-min { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 24px; }
.site-footer--minimal .footer-copy { color: var(--text-muted); }
.footer-min-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-min-links a, .site-footer--minimal .footer-cookie-btn { color: var(--text-body); font-size: var(--fs-small); min-height: 44px; display: inline-flex; align-items: center; }
.footer-min-links a:hover, .site-footer--minimal .footer-cookie-btn:hover { color: var(--text); }

/* "Reduce motion" switch (footer; 999 px track, 44 px target) */
.motion-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--s-ink-2); font-size: .8125rem; }
.motion-switch:hover { color: var(--s-ink); }
.motion-switch__track { position: relative; width: 32px; height: 18px; border: 1px solid var(--s-rule-strong); border-radius: var(--r-pill); flex-shrink: 0; transition: background-color var(--t-hover) var(--ease-hover), border-color var(--t-hover) var(--ease-hover); }
.motion-switch__thumb { position: absolute; top: 3px; inset-inline-start: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--s-ink-2); transition: transform var(--t-hover) var(--ease-standard), background-color var(--t-hover) var(--ease-hover); }
.motion-switch[aria-pressed="true"] .motion-switch__track { background: var(--s-ink); border-color: var(--s-ink); }
.motion-switch[aria-pressed="true"] .motion-switch__thumb { background: var(--s-bg); transform: translateX(calc(14px * var(--dir))); }