/* Grand Trade Clean Frontend v3.1.6 Stabilized.
   Canonical component rules only: no secondary patch stylesheet or priority declarations. */

/* 00. Official Grand Trade webfonts — self-hosted from the Google Fonts
   downloads supplied for this project. WOFF2 keeps the source outlines and
   OpenType data while removing the external Google Fonts network dependency. */
@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("../assets/fonts/noto-kufi-arabic/NotoKufiArabic-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope/Manrope-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

/* 01. Browser reset and shared document defaults. */
:root {
  color-scheme: light;

  /* =========================================================
     DESIGN SYSTEM FOUNDATION — TYPOGRAPHY PRIMITIVES
     Values are deliberately equivalent to the approved 264 output.
     Components consume semantic roles or primitives instead of
     scattering raw font-size values across canonical stylesheets.
     ========================================================= */
  --font-size-10: .625rem;
  --font-size-11: .6875rem;
  --font-size-12: .75rem;
  --font-size-13: .8125rem;
  --font-size-14: .875rem;
  --font-size-15: .9375rem;
  --font-size-16: 1rem;
  --font-size-17: 1.0625rem;
  --font-size-18: 1.125rem;
  --font-size-19: 1.1875rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-25: 1.5625rem;
  --font-size-26: 1.625rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.875rem;
  --font-size-32: 2rem;
  --font-size-34: 2.125rem;
  --font-size-36: 2.25rem;
  --font-size-38: 2.375rem;
  --font-size-40: 2.5rem;
  --font-size-42: 2.625rem;
  --font-size-48: 3rem;
  --font-size-54: 3.375rem;
  --font-size-64: 4rem;

  /* Semantic typography roles. HTML heading level remains semantic/SEO-owned;
     these roles control appearance only. This separation prevents choosing
     h1/h2/h3 merely for visual size. */
  --type-meta: var(--font-size-12);
  --type-small: var(--font-size-13);
  --type-ui: var(--font-size-14);
  --type-label: var(--font-size-15);
  --type-body: var(--font-size-16);
  --type-card: var(--font-size-20);
  --type-card-heading: var(--font-size-20);
  --type-section-rule-title: var(--font-size-30);
  --type-section-rule-title-mobile: var(--font-size-24);
  --type-page-title: clamp(var(--font-size-30),3vw,var(--font-size-42));
  --type-product-title: clamp(var(--font-size-30),3.2vw,var(--font-size-42));
  --type-article-title: clamp(var(--font-size-28),2.65vw,var(--font-size-38));
  --type-product-title-mobile: clamp(var(--font-size-24),6.7vw,var(--font-size-30));
  --type-article-title-mobile: clamp(var(--font-size-25),7.4vw,var(--font-size-32));
  --type-section: clamp(var(--font-size-32),3vw,var(--font-size-40));

  /* =========================================================
     DESIGN SYSTEM FOUNDATION — 4PX SPACING PRIMITIVES
     Existing approved off-scale values stay untouched in phase 1; new
     semantic layout work must prefer this scale. This keeps 265 visually
     identical while establishing the canonical spacing vocabulary.
     ========================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;
  --space-13: 80px;
  --space-14: 96px;

  /* Semantic rhythm roles. The 14px intro value is intentionally retained
     for zero-visual-change compatibility; visual normalization is a later,
     separately reviewed phase. */
  --gap-page-title-helper: 14px;
  --gap-card-copy: var(--space-3);
  --gap-card-action: var(--space-6);

}
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; }
h1, h2, h3, h4, h5, h6, p { margin-block-start: 0; margin-block-end: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img, svg { display: block; }
[hidden] { display: none; }

/* Keyboard accessibility for both the document shell and detached public UI layers. */
:where(.gt-site,.gt-public-layer) :is(a,button,select,textarea):focus-visible {
  outline: 3px solid #55c5b866;
  outline-offset: 3px;
}

body.gt-overlay-open {
  overflow: hidden;
}

/* 02. Grand Trade design tokens: colors, type scale, layout, and spacing. */
/* Public design tokens are shared by the page shell and detached UI surfaces such as
   the mobile menu and product modal. Keeping them in one canonical public scope avoids
   leaking storefront tokens into Admin while ensuring portalled/sibling UI is not orphaned. */
:where(.gt-site,.gt-public-layer) {
  --navy: #234973;
  --deep: #173650;
  --aqua: #55c5b8;
  --aqua-dark: #329e94;
  --aqua-pale: #eef9f7;
  --aqua-panel: #e1f3f0;
  --navy-pale: #f3f6f9;
  --surface-soft: #f3f8f7;
  --line: #e5ecef;

  /* 268 — Semantic text roles. The brand palette remains authoritative;
     this layer only unifies equivalent text jobs across public components.
     The reviewed secondary neutral #697889 keeps the existing cool character
     while meeting WCAG AA for normal text on white (~4.52:1). */
  --text-heading: var(--navy);
  --text-primary: #231f20;
  --text-secondary: #697889;
  /* Metadata intentionally aliases the reviewed secondary neutral. Keeping
     the role separate lets hierarchy evolve later without adding a new hue. */
  --text-meta: var(--text-secondary);

  box-sizing: border-box;
  color: var(--text-primary);
  font-family: Noto Kufi Arabic,Tahoma,Arial,sans-serif;
}

.gt-site {
  --section-space: clamp(50px,4.55vw,70px);
  --section-content-gap: clamp(30px,2.6vw,40px);
  /* Product-area rhythm follows one bridge into the shelves, one gap between peer shelves,
     and one dedicated Special Offers gap. Tablet/mobile values are unified later in one owner. */
  --product-area-bridge: clamp(34px,2.8vw,44px);
  --product-shelf-gap: clamp(48px,3.8vw,60px);
  --product-shelf-content-gap: clamp(28px,2.35vw,36px);
  --special-offers-gap: clamp(42px,3.4vw,48px);
  --topbar-height: 44px;
  --site-header-height: 100px;
  --header-logo-width-desktop: 248px;
  background: #fff;
  min-height: 100vh;
  overflow-x: clip;
}

html[lang="en"] :where(.gt-site,.gt-public-layer) {
  font-family: Manrope,Arial,sans-serif;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* Public inner-page vertical shell.
   Short pages must still occupy the full viewport, while long pages remain content-driven.
   The footer stays in normal document flow and uses auto block-start margin to consume only
   genuinely unused viewport space; no fixed positioning, viewport math, or device patching. */
.gt-site.page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* The footer is the final direct child of every public page shell. Auto margin pushes it to
   the viewport bottom only when content is short; long content naturally pushes it lower. */
.gt-site.page-shell > .site-footer {
  margin-block-start: auto;
  flex: 0 0 auto;
}

/* Approved English typography system — Manrope Balanced / Drodo Air Plus.
   Kept in the main stylesheet as the canonical locale-specific typography system. */
html[lang="en"] .main-nav > a,
html[lang="en"] .main-nav-group__trigger,
html[lang="en"] .main-nav-submenu a,
html[lang="en"] .topbar-contact a,
html[lang="en"] .topbar-contact span,
html[lang="en"] .topbar-user button,
html[lang="en"] .topbar-user a {
  font-weight: 600;
}

html[lang="en"] .main-nav > .is-active,
html[lang="en"] .main-nav-group__trigger.is-active {
  font-weight: 600;
}


html[lang="en"] .promo-eyebrow { font-weight: 700; }
html[lang="en"] .promo-card h2 {
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.022em;
}
html[lang="en"] .promo-action,
html[lang="en"] .promo-bottom strong { font-weight: 600; }

html[lang="en"] .benefit-item b {
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -.012em;
}
html[lang="en"] .benefit-item small { font-weight: 500; line-height: 1.68; }

/* =========================================================
   PRIMARY SECTION TITLE — SINGLE CLEAN RENDERING SYSTEM
   Drodo geometry is preserved (8px title-to-rule spacing,
   100px accent, 1px divider), but both rule layers are painted
   by the same element. This removes legacy border/pseudo-element
   combinations and prevents visual thickness drift between sections.
   Grand Trade identity colors only: official navy + turquoise.
   ========================================================= */
.section-title {
  --section-title-gap:var(--space-9);
  --section-accent-width: 100px;
  --section-accent-position: left;
  --section-rule-color: rgb(35 73 115 / 14%);
  position: relative;
  margin: 0 0 var(--section-title-gap);
  padding-bottom:var(--space-2);
  background:
    linear-gradient(var(--aqua),var(--aqua)) var(--section-accent-position) bottom / var(--section-accent-width) 1px no-repeat,
    linear-gradient(var(--section-rule-color),var(--section-rule-color)) left bottom / 100% 1px no-repeat;
}

@media (min-width: 992px) {
  html[dir="rtl"] .section-title {
    --section-accent-position: right;
  }
}

.section-title h2 {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--type-section-rule-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.025em;
}

html[dir="rtl"] .section-title h2 { letter-spacing: 0; }

.home-heading-link {
  color: inherit;
  text-decoration: none;
}

.home-heading-link:hover,
.home-heading-link:focus-visible {
  color: var(--navy);
}

/* Only sections with a secondary action use a layout modifier.
   The divider/accent remain painted by the canonical component. */
.section-title--with-action {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap:var(--space-6);
}

.section-title__copy { min-width: 0; }


.section-title__action {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap:var(--space-2);
  margin: 0 0 2px;
  padding: 0;
  border: 0;
  color: var(--navy);
  font-size: var(--type-ui);
  font-weight: 600;
  line-height: 1.16;
  white-space: nowrap;
}

.section-title__action:hover { color: var(--aqua); }
.section-title__action svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* Supporting-copy groups only change the spacing token; they do not
   redefine the title component or its rule geometry. */
.section-heading-group {
  --section-title-gap: 14px;
  margin: 0 0 var(--section-content-gap);
}

.section-description {
  max-width: 680px;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-label);
  line-height: 1.72;
}

html[lang="en"] .section-heading h2 {
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.024em;
}
html[lang="en"] .section-heading p { font-weight: 400; line-height: 1.72; }

html[lang="en"] .product-card__category,
html[lang="en"] .product-media>span,
html[lang="en"] .product-media>small { font-weight: 600; }
html[lang="en"] .product-info h3 {
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.018em;
}
html[lang="en"] .product-card-footer small { font-weight: 400; }
html[lang="en"] .product-card-footer strong { font-weight: 800; }

html[lang="en"] .service-card h3 {
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -.022em;
}
html[lang="en"] .service-card p { font-weight: 400; line-height: 1.72; }
html[lang="en"] .service-card a { font-weight: 600; }

html[lang="en"] .lab-copy>span {
  font-family: Manrope,Arial,sans-serif;
  font-weight: 700;
  letter-spacing: .085em;
}
html[lang="en"] .lab-copy h2,
html[lang="en"] .contact-band h2,
html[lang="en"] .featured-news h3,
html[lang="en"] .news-card h3 {
  font-weight: 700;
  letter-spacing: -.022em;
}
html[lang="en"] .lab-copy h2 { line-height: 1.38; }
html[lang="en"] .lab-copy p,
html[lang="en"] .contact-band p,
html[lang="en"] .featured-news p,
html[lang="en"] .news-card p { font-weight: 400; line-height: 1.72; }
html[lang="en"] .section-title__action,
html[lang="en"] .lab-copy a,
html[lang="en"] .contact-band a,
html[lang="en"] .news-card a,
html[lang="en"] .featured-news a { font-weight: 600; }

html[dir="ltr"] .product-info,
html[dir="ltr"] .section-heading,
html[dir="ltr"] .service-card,
html[dir="ltr"] .lab-copy,
html[dir="ltr"] .news-card,
html[dir="ltr"] .featured-news__content,
html[dir="ltr"] .footer-brand {
  text-align: left;
}

html[dir="ltr"] .header-search-results>button {
  text-align: left;
}

/* Public UI sizing contract. Detached overlays use the same border-box model as the
   main page, so 100%/padding calculations cannot grow beyond their available inline size. */
:where(.gt-site,.gt-public-layer) * {
  box-sizing: border-box;
}

:where(.gt-site,.gt-public-layer) button,
:where(.gt-site,.gt-public-layer) input {
  font-family: inherit;
}

/* 02. Canonical page container.
   Geometry mirrors the actual Drodo container implementation: Bootstrap gutter
   behavior plus Drodo's 1230px desktop max-width and responsive widths. */
.site-container,
.section-container {
  width: 100%;
  max-width: 1230px;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 767px) {
  .site-container,
  .section-container {
    max-width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .site-container,
  .section-container {
    max-width: 540px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .site-container,
  .section-container {
    max-width: 720px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .site-container,
  .section-container {
    max-width: 960px;
  }
}

/* 03. Utility top bar. */
.topbar {
  height: var(--topbar-height);
  color: var(--deep);
  background: #f9fcfc;
  border-bottom: 1px solid #e7f0f0;
}

.topbar>.site-container {
  justify-content: space-between;
  align-items: center;
  height: 100%;
  display: flex;
}

.topbar-contact,.topbar-user,.topbar-contact a,.topbar-contact span,.topbar-user button,.topbar-user a {
  align-items: center;
  display: flex;
}

.topbar-contact {
  gap: 27px;
}

.topbar-contact a,.topbar-contact span {
  font-size: var(--type-ui);
  gap:var(--space-2);
  font-weight: 600;
}

.topbar-contact svg {
  width: 16px;
  color: var(--aqua-dark);
}

.topbar-user {
  gap: 13px;
}

.topbar-user button,.topbar-user a {
  color: var(--deep);
  font-size: var(--type-ui);
  background: 0 0;
  border: 0;
  gap: 5px;
  padding: 0;
  font-weight: 600;
}

.topbar-user button svg,.topbar-user a svg {
  width: 13px;
}

.topbar-user i {
  background: #dce8e8;
  width: 1px;
  height: 16px;
}

/* One language switch only: the visible switch always uses its own language font. */
.topbar-user .language-switch[lang="en"] {
  font-family: Manrope,Arial,sans-serif;
}

.topbar-user .language-switch[lang="ar"] {
  font-family: "Noto Kufi Arabic",Tahoma,Arial,sans-serif;
}


.site-header {
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid rgba(35,73,115,.08);
  height: var(--site-header-height);
  position: relative;
}

/* Drodo-inspired composition: natural-width brand and actions, nav owns the flexible middle. */
.site-header>.site-container {
  align-items: center;
  height: 100%;
  display: flex;
  gap: 0;
}

.site-logo {
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  display: flex;
  line-height: 0;
}

.site-logo.logo-landscape img {
  object-fit: contain;
  object-position: center;
}

.site-logo .brand-desktop-landscape {
  display: block;
  width: 100%;
  height: auto;
}
.site-logo .brand-mobile-mark { display: none; }

.main-nav {
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-width: 0;
  height: 100%;
  margin-inline: 0;
  display: flex;
}

.main-nav > a,
.main-nav-group__trigger {
  color: var(--navy);
  height: 100%;
  font-size: var(--type-ui);
  white-space: nowrap;
  align-items: center;
  gap: 3px;
  padding-inline: 0;
  font-weight: 600;
  transition: color .2s;
  display: flex;
  position: relative;
}

.main-nav > a svg,
.main-nav-group__trigger svg {
  stroke-width: 2px;
  width: 9px;
  height: 9px;
}

.main-nav > a:hover,
.main-nav-group__trigger:hover,
.main-nav > .is-active,
.main-nav-group__trigger.is-active {
  color: var(--aqua);
}

.main-nav .is-active {
  font-weight: 600;
}

/* Active navigation changes color and gains a fixed indicator without changing link geometry. */
.main-nav > .is-active::after,
.main-nav-group__trigger.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

/* Build Your Lab is one navigation parent with two separate destination pages. */
.main-nav-group {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.main-nav-group__trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: var(--type-ui);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.main-nav-group__trigger svg {
  transition: transform .18s ease;
}

.main-nav-group.is-open .main-nav-group__trigger svg {
  transform: rotate(180deg);
}

.main-nav-submenu {
  position: absolute;
  z-index: 90;
  inset-block-start: calc(100% - 12px);
  left: 50%;
  width: 220px;
  padding: 8px;
  border: 1px solid #e1eaec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(13,34,50,.14);
  transform: translateX(-50%);
}

.main-nav-submenu[hidden] { display: none; }

.main-nav-submenu a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--navy);
  font-size: var(--type-ui);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

.main-nav-submenu a:hover,
.main-nav-submenu a:focus-visible,
.main-nav-submenu a.is-current {
  background: var(--aqua-pale);
  color: var(--aqua-dark);
}

.header-actions {
  flex: 0 0 auto;
  direction: ltr;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin: 0 var(--space-5) 0 0;
  display: flex;
}

/* The actions group uses LTR internally to keep Search → Account → Cart ordering stable.
   Physical outer margins therefore follow the page direction explicitly: the group keeps
   its spacing toward the navigation and remains flush with the shared container edge. */
html[dir="ltr"] .header-actions {
  margin: 0 0 0 var(--space-5);
}

.header-actions>button,.header-actions>a {
  color: #111d27;
  background: 0 0;
  border: 0;
  place-items: center;
  width: 28px;
  height: 44px;
  padding: 0;
  display: grid;
  position: relative;
}

.header-actions svg {
  stroke-width: 1.9px;
  width: 22px;
  height: 22px;
}

.header-actions>button:hover,.header-actions>a:hover {
  color: var(--aqua-dark);
}

.header-actions #searchToggle { order: 1; }
.header-actions .customer-account-action { order: 2; }
.header-actions .cart-action { order: 3; }
html[dir="ltr"] .header-actions #searchToggle { order: 3; }
html[dir="ltr"] .header-actions .customer-account-action { order: 2; }
html[dir="ltr"] .header-actions .cart-action { order: 1; }

/* 348S — Header alignment comes from the shared container itself, not a visual offset.
   Search + Account + Cart stay one unit and the Search edge follows the same physical-left
   container line as the visible “English” switch on Arabic desktop. */

.customer-account-action::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aqua-dark);
  border: 2px solid #fff;
  top: 7px;
  right: 1px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
}

.customer-account-action.is-authenticated::after {
  opacity: 1;
  transform: scale(1);
}

/* Authenticated customer account popover. The panel is body-mounted and positioned
   from the account icon by ui.js so it works with both desktop and mobile headers. */
.customer-account-menu {
  position: fixed;
  z-index: 320;
  width: min(280px,calc(100vw - 24px));
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(35,73,115,.18);
  color: var(--text-primary);
}
.customer-account-menu[hidden] { display: none; }
.customer-session-notice { position: fixed; z-index: 500; inset-inline: 16px; bottom: max(18px,env(safe-area-inset-bottom)); width: min(440px,calc(100vw - 32px)); margin-inline: auto; padding: 11px 14px; border: 1px solid #e7bcbc; border-radius: 10px; background: #fff7f7; box-shadow: 0 14px 34px rgba(35,73,115,.18); color: #8b3030; font-size: var(--font-size-12); font-weight: 700; line-height: 1.7; text-align: center; }
.customer-session-notice[hidden] { display: none; }

.customer-account-menu__identity { display: grid; gap: 2px; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--line); }
.customer-account-menu__identity b { overflow: hidden; color: var(--text-heading); font-size: var(--font-size-12); text-overflow: ellipsis; white-space: nowrap; }
.customer-account-menu__identity small { overflow: hidden; color: var(--text-secondary); font-size: var(--font-size-10); text-overflow: ellipsis; white-space: nowrap; }
.customer-account-menu__actions { display: grid; gap: 2px; padding-top: var(--space-1); }
.customer-account-menu__actions a,.customer-account-menu__actions button { display: flex; align-items: center; min-height: 40px; padding-inline: var(--space-3); border: 0; border-radius: 7px; background: transparent; color: var(--navy); font: inherit; font-size: var(--font-size-11); font-weight: 700; line-height: 1.5; text-align: start; text-decoration: none; cursor: pointer; }
.customer-account-menu__actions a:hover,.customer-account-menu__actions a:focus-visible,.customer-account-menu__actions button:hover,.customer-account-menu__actions button:focus-visible { background: var(--navy-pale); color: var(--aqua-dark); outline: 0; }

.cart-action b:not([hidden]) {
  color: #fff;
  background: #ef3d4f;
  border-radius: 50%;
  place-items: center;
  width: 16px;
  height: 16px;
  font: 700 .625rem Manrope;
  display: grid;
  position: absolute;
  top: 2px;
  right: -7px;
}

.header-actions .menu-button {
  order: 4;
  display: none;
}

/* Match Drodo's visual desktop logo size without overlapping declarations. */
@media (width >= 1181px) {
  .site-logo.logo-landscape {
    width: var(--header-logo-width-desktop);
    margin-inline-end:var(--space-8);
  }
}

@media (width >= 1181px) and (width <= 1600px) {
  .main-nav {
    gap: 18px;
  }

  .header-actions {
    gap: 14px;
  }
}

@media (width >= 1601px) {
  .main-nav {
    gap: 22px;
  }
}

@media (width >= 992px) and (width <= 1180px) {
  .site-logo.logo-landscape { width: 184px; margin-inline-end: 30px; }
  .main-nav { gap: 10px; }
  .main-nav > a, .main-nav-group__trigger { font-size: var(--type-ui); }
  .header-actions { gap: 14px; }
}

/* 04. Expandable header search and live result panel. */
.header-search-panel {
  z-index: 70;
  border-top: 0;
  border-bottom: 1px solid #dfe9eb;
  background: #fffffff2;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  padding: 16px 0 20px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  box-shadow: 0 20px 46px #1736501a;
  animation: .24s cubic-bezier(.2,.72,.2,1) both header-search-in;
}

@keyframes header-search-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-search-inner {
  border: 1px solid #d9e5e7;
  border-radius: 16px;
  grid-template-columns: 54px minmax(0,1fr) 50px;
  align-items: center;
  width: min(760px,calc(100% - 64px));
  height: 58px;
  margin: auto;
  display: grid;
  position: relative;
  background: #fff;
  box-shadow: 0 12px 34px #17365017;
  transition: border-color .2s ease,box-shadow .2s ease;
}

.header-search-inner:focus-within {
  border-color: var(--aqua);
  box-shadow: 0 16px 40px #1736501c,0 0 0 4px #55c5b817;
}

.header-search-inner>svg {
  width: 20px;
  height: 20px;
  color: var(--aqua-dark);
  margin: auto;
  stroke-width: 2.1px;
}

.header-search-inner>input {
  width: 100%;
  min-width: 0;
  align-self: stretch;
  color: var(--deep);
  font-size:var(--font-size-16);
  font-weight: 500;
  line-height: 1.4;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px;
}

.header-search-inner>input::placeholder {
  color: var(--text-meta);
  opacity: 1;
}

.header-search-inner>input:focus-visible {
  outline: 0;
}

.header-search-inner>button {
  width: 36px;
  height: 36px;
  justify-self: center;
  align-self: center;
  color: #6e818b;
  background: #f4f8f8;
  border: 1px solid #edf2f3;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid;
  transition: color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease;
}

.header-search-inner>button:hover {
  color: var(--aqua-dark);
  background: #ecf7f5;
  border-color: #d8ebe8;
  transform: rotate(3deg);
}

.header-search-inner>button svg {
  width: 15px;
  height: 15px;
  stroke-width: 2px;
}

.header-search-results {
  border: 1px solid #dfe9eb;
  border-radius: 16px;
  background: #fff;
  position: absolute;
  top: 66px;
  left: 0;
  right: 0;
  max-height: min(420px,60vh);
  overflow-y: auto;
  padding: 6px;
  box-shadow: 0 24px 60px #13304626;
}

.header-search-results>button {
  width: 100%;
  min-height: 68px;
  color: var(--navy);
  text-align: right;
  background: #fff;
  border: 0;
  border-radius: 11px;
  grid-template-columns: 52px 1fr 20px;
  align-items: center;
  gap:var(--space-3);
  padding: 8px 10px;
  display: grid;
  transition: background-color .16s ease;
}

.header-search-results>button:hover,
.header-search-results>button:focus-visible {
  background: var(--aqua-pale);
}

.header-search-results img {
  object-fit: contain;
  width: 50px;
  height: 50px;
  padding: 4px;
  background: #f7faf9;
  border-radius: 9px;
}

.header-search-results b,.header-search-results small {
  display: block;
}

.header-search-results b {
  font-size: var(--type-ui);
  font-weight: 700;
}

.header-search-results small {
  color: var(--text-meta);
  font-size: var(--type-small);
  margin-top: 3px;
}

.header-search-results svg {
  width: 14px;
  color: var(--aqua-dark);
}

.header-search-results p {
  color: var(--text-secondary);
  text-align: center;
  font-size: var(--type-ui);
  margin: 0;
  padding: 20px 16px;
}

@media (width>=821px) {
  .site-header {
    z-index: 90;
    transition: background-color .24s,box-shadow .24s;
    position: sticky;
    top: 0;
  }

  .header-stuck {
    -webkit-backdrop-filter: saturate(140%)blur(10px);
    backdrop-filter: saturate(140%)blur(10px);
    background: #fffffff5;
    animation: .46s cubic-bezier(.2,.72,.2,1) both sticky-header-in;
    box-shadow: 0 10px 30px #1736501f;
  }

  @keyframes sticky-header-in {
    0% {
      opacity: .68;
      transform: translateY(-22px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* 05. Hero carousel: layout, shared typography, visuals, and motion. */
.hero {
  --hero-action-label: .9375rem;
  --hero-action-icon: 1.125rem;
  --hero-action-height: 3.25rem;
  --hero-composition-shift-x: -32px;
  --hero-text-shift-x: -40px;
  --hero-title-min: 44px;
  --hero-title-fluid: 4vw;
  --hero-title-max: 64px;
  --hero-title-fit-min: 34px;
  --hero-title-leading: 1.3;
  --hero-copy-safe-end: 0px;
  background: var(--aqua-pale);
  min-height: 0;
  position: relative;
  overflow: hidden;
  /* Horizontal slide gestures are owned by the Hero while vertical page scrolling and
     pinch zoom remain native browser behavior on touch devices. */
  touch-action: pan-y pinch-zoom;
}

/* Mirror the current desktop inset for the full English LTR version. */
html[dir="ltr"] .hero {
  --hero-composition-shift-x: 32px;
  --hero-text-shift-x: 40px;
}


.hero-stack {
  position: absolute;
  inset: 0;
}

.hero-slide-layer {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.hero-slide-layer.is-active,
.hero-slide-layer.is-incoming,
.hero-slide-layer.is-outgoing,
.hero-slide-layer.is-staged {
  visibility: visible;
}

/* Owl parity: the destination item lives underneath the outgoing item. */
.hero-slide-layer.is-active {
  z-index: 0;
  opacity: 1;
  pointer-events: auto;
}

/* Baseline state committed for one frame before active is added. */
.hero-slide-layer.is-staged {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.hero-slide-layer.is-incoming {
  z-index: 0;
  animation: var(--hero-transition-duration,1s) both gt-slide-fade-in;
}

.hero-slide-layer.is-outgoing {
  z-index: 1;
  opacity: 1;
  pointer-events: none;
  animation: var(--hero-transition-duration,1s) both gt-slide-fade-out;
}

.hero .hero-grid {
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  grid-template-areas: "visual copy";
  direction: ltr;
  align-items: center;
  gap: 34px;
  width: calc(100% - 170px);
  max-width: 1430px;
  height: 100%;
  min-height: 0;
  margin-inline: auto;
  display: grid;
}

.hero-copy {
  --hero-enter-x: 100%;
  grid-area: copy;
  min-width: 0;
  width: 100%;
  height: 100%;
  direction: rtl;
  z-index: 3;
  max-width: 680px;
  /* Safe-end is zero by default and increases only in the wide desktop contract. */
  padding: 32px 0 calc(32px + var(--hero-copy-safe-end));
  position: relative;
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 26px;
}

.hero-copy__body {
  display: grid;
  gap: 18px;
}

/* Keep the Latin brand name together when it appears inside Arabic running copy. */
.inline-brand {
  white-space: nowrap;
}


.hero-copy__body>.hero-eyebrow {
  color: var(--aqua);
  font-size: var(--type-body);
  text-align: right;
  direction: rtl;
  font-weight: 700;
  line-height: 1.7;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.hero-eyebrow i {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
  opacity: .65;
}

.hero-eyebrow i + span {
  font-weight: 600;
  opacity: 1;
}

.hero-copy .hero-title {
  color: var(--text-heading);
  letter-spacing: -.04em;
  margin: 0;
  font-size: var(--hero-title-size,clamp(var(--hero-title-min),var(--hero-title-fluid),var(--hero-title-max)));
  font-weight: 800;
  line-height: var(--hero-title-leading);
}

.hero-title-main,
.hero-title-highlight {
  display: block;
  line-height: inherit;
}

.hero-title-highlight:first-child {
  margin-top: 0;
}

.hero-copy .hero-title strong {
  color: var(--aqua);
  font-weight: 800;
  display: block;
}

html[lang="en"] .hero-copy .hero-title {
  font-weight: 800;
  letter-spacing: -.015em;
  word-spacing: 0;
}

html[lang="en"] .hero-copy .hero-title strong,
html[lang="en"] .hero-title-main,
html[lang="en"] .hero-title-highlight {
  font-weight: 800;
}

html[lang="en"] .hero-title-highlight {
  margin-top: .21em;
}

html[lang="en"] .hero-copy__body>.hero-eyebrow {
  font-weight: 700;
  line-height: 1.55;
}

html[lang="en"] .hero-copy__body>p {
  font-weight: 500;
  line-height: 1.72;
}

html[lang="en"] .hero-actions>:is(a,button) {
  font-weight: 600;
}

.hero-copy__body>p {
  color: var(--text-primary);
  max-width: 620px;
  margin: 0;
  font-size:var(--font-size-17);
  line-height: 1.95;
}

.hero-actions {
  align-items: center;
  gap: 26px;
  margin-top: 0;
  display: flex;
}

.hero-actions>:is(a,button) {
  height: var(--hero-action-height);
  background: var(--navy);
  color: #fff;
  font-size: var(--hero-action-label);
  border: 0;
  border-radius: 4px;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  font-weight: 700;
  line-height: 1;
  display: flex;
}

.hero-actions>:is(a,button):hover {
  background: var(--aqua-dark);
  color: #fff;
}

.hero-actions>:is(a,button) svg {
  width: var(--hero-action-icon);
  height: var(--hero-action-icon);
  stroke-width: 2px;
}

/* Entrance direction follows the physical column, not the language direction.
   RTL: copy is on the right and enters from the right; visual is on the left and enters from the left.
   LTR: copy is on the left and enters from the left; visual is on the right and enters from the right. */
.hero-visual-motion {
  --hero-enter-x: -100%;
  position: absolute;
  inset: 0;
}

html[dir="ltr"] .hero-copy {
  --hero-enter-x: -100%;
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .hero-visual-motion { --hero-enter-x: 100%; }

.hero-slide-layer.is-active .hero-copy__body>.hero-eyebrow {
  animation: 1s .3s both gt-fade-in-side;
}

.hero-slide-layer.is-active .hero-copy .hero-title {
  animation: 1s .7s both gt-fade-in-side;
}

.hero-slide-layer.is-active .hero-copy__body>p {
  animation: 1s .9s both gt-fade-in-side;
}

.hero-slide-layer.is-active .hero-actions {
  animation: 1s 1.1s both gt-fade-in-side;
}

@keyframes gt-fade-in-side {
  0% {
    opacity: 0;
    transform: translate3d(var(--hero-enter-x),0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@keyframes gt-slide-fade-in {
  0% { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gt-slide-fade-out {
  0% { opacity: 1; }
  to { opacity: 0; }
}

.hero-visual {
  grid-area: visual;
  width: 100%;
  align-self: stretch;
  place-items: center;
  min-width: 0;
  min-height: 0;
  display: grid;
  position: relative;
  overflow: visible;
}

/* Explicit physical mirroring keeps the Visual track identical in RTL/LTR. */
html[dir="ltr"] .hero .hero-grid {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-areas: "copy visual";
}

html[dir="ltr"] .hero-copy__body>.hero-eyebrow {
  direction: ltr;
  text-align: left;
}

/* The full visual composition moves together, matching Drodo's single banner image behavior. */
.hero-slide-layer.is-active .hero-visual-motion {
  animation: 1s .9s both gt-fade-in-side;
}

.hero-image-stage {
  z-index: 2;
  min-width: 0;
  min-height: 0;
  position: absolute;
  inset: 18px 4% 30px;
  overflow: visible;
}

/* Placement/scale is isolated from the animation transform. */
.hero-image-placement {
  position: absolute;
  inset: 0;
  transform: translateY(var(--slide-image-y,0%)) scale(var(--slide-image-scale,1));
  transform-origin: 50%;
}

.hero-image-stage picture {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-image-stage img {
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
  filter: none;
  width: 100%;
  height: 100%;
  display: block;
}

.visual-plain .hero-image-stage {
  inset: 16px 2% 30px;
}

.visual-circle .hero-image-stage {
  inset: 7% 8%;
}

.visual-panel .hero-image-stage {
  inset: 18px 7% 32px;
}

.visual-halo .hero-image-stage,
.visual-arch .hero-image-stage,
.visual-layers .hero-image-stage,
.visual-oval .hero-image-stage {
  inset: 18px 5% 30px;
}

/* Panel visual: one shared width keeps every current and future panel slide
   clear of the carousel arrows without changing its product image geometry. */
.hero-panel {
  z-index: 0;
  background: var(--aqua-panel);
  transform-origin: 50% 100%;
  border-radius: 0 110px 0 0;
  position: absolute;
  top: 9%;
  bottom: 0;
  left: var(--hero-panel-center-x,50%);
  width: var(--hero-panel-width,85%);
  transform: translateX(-50%);
}

.hero-circle {
  z-index: 1;
  aspect-ratio: 1;
  background: #e1f3f0ad;
  border: 2px solid #55c5b894;
  border-radius: 50%;
  width: auto;
  height: min(82%,560px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.hero-circle:before,
.hero-circle:after {
  content: "";
  background: var(--aqua-dark);
  border-radius: 50%;
  width: 11px;
  height: 11px;
  position: absolute;
}

.hero-circle:before {
  top: 26%;
  right: -6px;
}

.hero-circle:after {
  bottom: 19%;
  left: -6px;
}

.hero-effect {
  --effect-base: translate(-50%,-50%);
  z-index: 0;
  pointer-events: none;
  transform: var(--effect-base);
  position: absolute;
  top: 50%;
  left: 50%;
}

.effect-halo {
  aspect-ratio: 1;
  background: radial-gradient(circle,#55c5b840 0 34%,#55c5b81f 52%,#55c5b800 72%);
  border-radius: 50%;
  width: min(82%,590px);
}

.effect-arch {
  background: linear-gradient(#e1f3f0b8,#e1f3f02e);
  border: 2px solid #55c5b88c;
  border-bottom: 0;
  border-radius: 50% 50% 0 0/34% 34% 0 0;
  width: min(78%,560px);
  height: 76%;
  top: 54%;
}

.effect-layers {
  --effect-base: translate(-50%,-50%) rotate(-3deg);
  background: #e1f3f0d1;
  border-radius: 55px 12px;
  width: min(72%,530px);
  height: 70%;
}

.effect-layers:before {
  content: "";
  z-index: -1;
  background: #f3f9f8a8;
  border: 1px solid #329e947a;
  border-radius: 18px 65px;
  position: absolute;
  inset: 9% -10% -9% 10%;
}

.effect-oval {
  background: #e1f3f06b;
  border: 2px solid #55c5b894;
  border-radius: 50%;
  width: min(84%,620px);
  height: 68%;
}

.hero-arrow {
  z-index: 7;
  width: 50px;
  height: 50px;
  color: var(--deep);
  background: #ffffffb3;
  border: 1px solid #23497314;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 9px 24px #17365017;
}

.hero-arrow:hover {
  background: var(--navy);
  color: #fff;
}

.hero-arrow:disabled {
  cursor: default;
  opacity: .58;
}

.hero-arrow svg {
  width: 22px;
}

.hero-arrow-right {
  right: 18px;
}

.hero-arrow-left {
  left: 18px;
}

/* Hero responsive contract — layout changes are driven by content-fit thresholds, not device names.
   Wide preserves the current desktop composition. Medium reserves dedicated navigation gutters so
   arrows never collide with copy or artwork. Compact uses a bounded stacked composition instead
   of stretching to the full viewport height, preventing dead space on tall phones and tablets. */
@media (width>=1181px) {
  .hero {
    /* Long desktop copy keeps a small safe area below the CTA without altering
       tablet/mobile geometry or forcing a fixed content position. */
    --hero-copy-safe-end: 12px;
    height: min(650px,calc(100svh - var(--topbar-height) - var(--site-header-height)));
  }

  .hero .hero-grid {
    translate: var(--hero-composition-shift-x) 0;
  }

  .hero-copy {
    translate: var(--hero-text-shift-x) 0;
  }
}

@media (width>=992px) and (width<=1180px) {
  .hero {
    --hero-composition-shift-x: 0px;
    --hero-text-shift-x: 0px;
    --hero-title-min: 34px;
    --hero-title-fluid: 3.7vw;
    --hero-title-max: 44px;
    --hero-panel-width: 80%;
    --hero-panel-center-x: 50%;
    height: clamp(520px,54vw,620px);
  }

  /* The laboratory-event panel keeps the approved copy-side edge while extending only toward
     the outer visual edge. This is a slide variant variable, not a later property override. */
  html[dir="ltr"] .hero-slide-layer[data-slide-id="lab-event"] {
    --hero-panel-width: 84%;
    --hero-panel-center-x: 52%;
  }

  html[dir="rtl"] .hero-slide-layer[data-slide-id="lab-event"] {
    --hero-panel-width: 84%;
    --hero-panel-center-x: 48%;
  }

  .hero .hero-grid,
  html[dir="ltr"] .hero .hero-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap:var(--space-7);
    /* 84px minimum on each side clears the 44px arrows plus an optical safety gap. */
    width: calc(100% - 168px);
    max-width: 1080px;
    translate: 0 0;
  }

  .hero .hero-grid { grid-template-areas: "visual copy"; }
  html[dir="ltr"] .hero .hero-grid { grid-template-areas: "copy visual"; }

  .hero-copy {
    max-width: 470px;
    padding-block: 28px;
    gap:var(--space-5);
    translate: 0 0;
  }

  .hero-copy__body { gap: 14px; }
  .hero-copy__body>p {
    max-width: 450px;
    font-size:var(--font-size-15);
    line-height: 1.82;
  }

  .visual-plain .hero-image-stage { inset-inline: 5%; }
  .visual-circle .hero-image-stage,
  .visual-panel .hero-image-stage { inset-inline: 11%; }

  .hero-circle {
    width: auto;
    height: min(72%,390px);
  }

  .hero-panel {
    top: 8%;
  }

  .hero-arrow {
    width: 44px;
    height: 44px;
  }
}

/* Branded navigation-loading surface. Hidden by default; JavaScript reveals it only
   after a slow same-site navigation delay so first paint never gets covered afterward. */
.gt-page-loader {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.gt-page-loader.is-ready {
  animation: none;
  opacity: 0;
  visibility: hidden;
}
.gt-page-loader.is-visible {
  animation: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.gt-page-loader__mark {
  width: 58px;
  height: 66px;
  object-fit: contain;
  animation: gt-loader-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes gt-loader-pulse {
  from { opacity: .56; transform: translateY(1px) scale(.985); }
  to { opacity: 1; transform: translateY(-1px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .gt-page-loader,
  .gt-page-loader__mark { transition: none; animation: none; }
}


@media (width<=991px) {
  .product-shelf { --section-title-gap: 26px; }
}

/* Small-tablet Hero contract: 561–820px keeps the approved two-column anatomy, but uses
   its own smaller type/media scale. The earlier version reused near-Pro proportions at 768px,
   making both copy and artwork feel oversized even though the grid itself was valid. */
@media (width>=561px) and (width<=820px) {
  .hero {
    --hero-action-label: .71875rem;
    --hero-action-icon: .875rem;
    --hero-action-height: 2.5rem;
    --hero-title-min: 22px;
    --hero-title-fluid: 3.45vw;
    --hero-title-max: 26px;
    --hero-title-fit-min: 20px;
    --hero-title-leading: 1.36;
    --hero-panel-width: 80%;
    --hero-panel-center-x: 50%;
    height: clamp(490px,65vw,510px);
    min-height: 0;
    padding: 0;
    background: var(--aqua-pale);
  }

  .hero .hero-grid,
  html[dir="ltr"] .hero .hero-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
    width: calc(100% - 112px);
    max-width: 656px;
    height: 100%;
    min-height: 0;
    padding: 0;
    translate: 0 0;
  }

  .hero .hero-grid { grid-template-areas: "visual copy"; }
  html[dir="ltr"] .hero .hero-grid { grid-template-areas: "copy visual"; }

  .hero-visual {
    min-height: 0;
    overflow: visible;
  }

  .hero-copy {
    max-width: 294px;
    height: 100%;
    padding: 22px 0;
    align-self: stretch;
    align-content: center;
    gap: 13px;
    translate: 0 0;
    background: transparent;
  }

  .hero-copy__body { gap: 10px; }

  .hero-copy__body>.hero-eyebrow {
    margin-bottom: 0;
    font-size:var(--font-size-10);
    line-height: 1.55;
    gap: 4px 6px;
  }

  .hero-copy .hero-title {
    max-width: 100%;
    margin: 0;
  }

  html[lang="en"] .hero-copy .hero-title {
    letter-spacing: -.012em;
    line-height: 1.26;
  }

  html[lang="en"] .hero-title-highlight { margin-top: 5px; }

  .hero-copy__body>p {
    max-width: 280px;
    margin: 0;
    font-size: .70rem;
    line-height: 1.68;
  }

  .hero-actions {
    justify-content: flex-start;
    gap:var(--space-2);
  }

  html[dir="rtl"] .hero-actions { justify-content: flex-start; }

  .hero-actions>:is(a,button) {
    width: auto;
    min-width: 122px;
    justify-content: center;
    padding-inline: 13px;
    border-radius: 5px;
  }

  .hero-actions>a svg {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    display: block;
  }

  .visual-plain .hero-image-stage { inset: 28px 9% 30px; }
  .visual-circle .hero-image-stage,
  .visual-panel .hero-image-stage { inset: 28px 12% 30px; }
  .visual-halo .hero-image-stage,
  .visual-arch .hero-image-stage,
  .visual-layers .hero-image-stage,
  .visual-oval .hero-image-stage { inset: 28px 10% 30px; }

  .hero-circle {
    width: auto;
    height: min(70%,270px);
  }

  .hero-panel {
    top: 10%;
    border-radius: 0 76px 0 0;
  }

  .hero-arrow {
    width: 36px;
    height: 36px;
    top: 50%;
    transform: translateY(-50%);
  }

  .hero-arrow-right { right: 8px; }
  .hero-arrow-left { left: 8px; }
  .hero-arrow svg { width: 16px; }
}

/* Medium Hero contract: 821–991px keeps two columns with explicit navigation-safe gutters.
   Geometry is width-driven so tall tablet viewports cannot introduce vertical stretching. */
@media (width>=821px) and (width<=991px) {
  .hero {
    --hero-action-label: .8125rem;
    --hero-action-icon: 1rem;
    --hero-action-height: 2.75rem;
    --hero-title-min: 30px;
    --hero-title-fluid: 3.8vw;
    --hero-title-max: 36px;
    --hero-title-leading: 1.42;
    --hero-panel-width: 84%;
    --hero-panel-center-x: 50%;
    height: clamp(500px,58vw,580px);
    min-height: 0;
    padding: 0;
    background: var(--aqua-pale);
  }

  .hero .hero-grid,
  html[dir="ltr"] .hero .hero-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap:var(--space-6);
    /* 76px minimum on each side clears the 40px arrows and keeps copy/artwork off the edge. */
    width: calc(100% - 152px);
    max-width: 900px;
    height: 100%;
    min-height: 0;
    padding: 0;
    translate: 0 0;
  }

  .hero .hero-grid { grid-template-areas: "visual copy"; }
  html[dir="ltr"] .hero .hero-grid { grid-template-areas: "copy visual"; }

  .hero-visual {
    min-height: 0;
    overflow: visible;
  }

  .hero-copy {
    max-width: 410px;
    height: 100%;
    padding: 28px 0;
    align-self: stretch;
    align-content: center;
    gap: 18px;
    translate: 0 0;
  }

  .hero-copy__body { gap: 14px; }
  .hero-copy__body>p {
    max-width: 400px;
    font-size:var(--font-size-13);
    line-height: 1.78;
  }

  .visual-plain .hero-image-stage { inset-inline: 4%; }
  .visual-circle .hero-image-stage,
  .visual-panel .hero-image-stage { inset-inline: 8%; }

  .hero-circle {
    width: auto;
    height: min(78%,380px);
  }

  .hero-panel {
    top: 8%;
  }

  .hero-arrow {
    width: 40px;
    height: 40px;
  }

  .hero-arrow svg { width: 18px; }
}

/* Phone Hero viewport contract: <=560px uses the browser-provided small viewport instead of
   a device/browser-specific height. The approved 53/47 rhythm remains the preferred distribution,
   while the copy row may claim its intrinsic minimum space before the visual row is compressed.
   This removes the former 640px floor that could extend the CTA behind mobile browser chrome. */
@media (width<=560px) {
  .hero {
    --hero-action-label: .8125rem;
    --hero-action-icon: 1rem;
    --hero-action-height: 2.75rem;
    --hero-title-min: 24px;
    --hero-title-fluid: 6.9vw;
    --hero-title-max: 29px;
    --hero-title-leading: 1.48;
    --hero-panel-width: 81%;
    --hero-panel-center-x: 50%;
    block-size: calc(100svh - var(--site-header-height));
    min-block-size: 0;
    padding: 0;
    background: var(--aqua-pale);
  }

  /* The slide consumes the complete safe phone Hero canvas. The copy row keeps its intrinsic
     minimum height; only the visual track yields space when a slide needs extra text/CTA room.
     When the copy fits within its preferred share, the established 53/47 balance is preserved. */
  .hero .hero-grid,
  html[dir="ltr"] .hero .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0,53fr) minmax(min-content,47fr);
    grid-template-areas: "visual" "copy";
    align-content: stretch;
    gap: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    translate: 0 0;
  }

  /* Upper visual stage: full slide width, with the product artwork centered inside it. */
  .hero-visual {
    min-height: 0;
    overflow: hidden;
  }

  /* Lower copy stage follows the 243 hierarchy while keeping the current typography system. */
  .hero-copy {
    max-width: none;
    height: auto;
    min-height: min-content;
    padding: 17px 18px 22px;
    align-self: stretch;
    align-content: start;
    gap: 18px;
    translate: 0 0;
    text-align: center;
    background: linear-gradient(180deg,rgba(238,249,247,.94),var(--aqua-pale) 22%,var(--aqua-pale));
  }

  .hero-copy__body { gap: 0; }

  .hero-copy__body>.hero-eyebrow,
  .hero-copy .hero-title,
  .hero-copy .hero-title strong,
  .hero-copy__body>p { text-align: center; }

  .hero-copy__body>.hero-eyebrow {
    justify-content: center;
    margin-bottom:var(--space-3);
    font-size:var(--font-size-12);
    line-height: 1.7;
    gap: 5px 7px;
  }

  .hero-copy .hero-title {
    max-width: 390px;
    margin: 0 auto 16px;
  }

  html[lang="en"] .hero-copy .hero-title {
    letter-spacing: -.012em;
    line-height: 1.25;
  }

  html[lang="en"] .hero-title-highlight { margin-top:var(--space-2); }

  .hero-copy__body>p {
    max-width: 370px;
    margin-inline: auto;
    font-size: .78125rem;
    line-height: 1.85;
  }

  .hero-actions {
    justify-content: center;
    gap: 9px;
  }

  .hero-actions>:is(a,button) {
    width: auto;
    min-width: 142px;
    justify-content: center;
    padding: 0 17px;
    border-radius: 5px;
  }

  .hero-actions>a svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: block;
  }

  /* Equipment artwork remains complete and centered. The visual area is full width; only the
     artwork itself is bounded, matching the proportion that worked well in experiment 243. */
  .hero-image-stage,
  .visual-plain .hero-image-stage,
  .visual-circle .hero-image-stage,
  .visual-panel .hero-image-stage,
  .visual-halo .hero-image-stage,
  .visual-arch .hero-image-stage,
  .visual-layers .hero-image-stage,
  .visual-oval .hero-image-stage {
    width: min(73%,303px);
    height: min(75%,324px);
    inset: 50% auto auto 50%;
    transform: translate(-50%,-50%);
  }

  .hero-panel {
    top: 7%;
    width: var(--hero-panel-width);
    border-radius: 0 72px 0 0;
  }

  .hero-circle {
    width: min(68%,313px);
    height: auto;
  }

  /* Phone arrows are centered against the complete Hero canvas, not the upper image stage.
     This keeps both controls on the true vertical midpoint of the full-screen slide. */
  .hero-arrow {
    width: 36px;
    height: 36px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background: rgba(255,255,255,.88);
    box-shadow: 0 7px 20px rgba(23,54,80,.10);
  }

  .hero-arrow-right { right: 10px; }
  .hero-arrow-left { left: 10px; }
  .hero-arrow svg { width: 16px; }
}

.mobile-overlay {
  z-index: 120;
  position: fixed;
  inset: 0;
  min-inline-size: 0;
  overflow: hidden;
  background: rgba(13,34,50,.58);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* The mobile navigation occupies its own canvas. It deliberately does not inherit desktop
   navigation geometry, which avoids the compressed-drawer appearance seen in earlier builds. */
.mobile-overlay aside {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  inline-size: auto;
  max-inline-size: 100%;
  height: 100dvh;
  min-inline-size: 0;
  padding: 0;
  overflow: hidden;
  background: var(--navy);
  box-shadow: none;
  animation: .22s cubic-bezier(.2,.72,.2,1) both mobile-menu-enter;
}

@keyframes mobile-menu-enter {
  from { opacity: .72; transform: translateX(3%); }
  to { opacity: 1; transform: translateX(0); }
}

html[dir="rtl"] .mobile-overlay aside { animation-name: mobile-menu-enter-rtl; }
@keyframes mobile-menu-enter-rtl {
  from { opacity: .72; transform: translateX(-3%); }
  to { opacity: 1; transform: translateX(0); }
}

.mobile-overlay aside>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 66px;
  height: 66px;
  min-inline-size: 0;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid rgba(35,73,115,.10);
  background: #fff;
}

.mobile-overlay aside>header img {
  display: block;
  width: 170px;
  height: auto;
  max-height: 41px;
  object-fit: contain;
}

.mobile-overlay aside>header button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

.mobile-overlay aside>header button:hover { background: var(--aqua-pale); color: var(--aqua-dark); }
.mobile-overlay aside>header button svg { width: 18px; height: 18px; stroke-width: 2; }

.mobile-overlay nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  inline-size: auto;
  min-inline-size: 0;
  min-height: 0;
  padding-block: 14px calc(24px + env(safe-area-inset-bottom));
  padding-inline: 20px;
  overflow-y: auto;
  background: var(--navy);
  overscroll-behavior: contain;
}

.mobile-overlay nav a,
.mobile-overlay nav .mobile-login-entry,
.mobile-overlay nav .mobile-nav-group__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  inline-size: 100%;
  min-inline-size: 0;
  min-height: 52px;
  padding: 0 6px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.11);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size:var(--font-size-14);
  font-weight: 700;
  line-height: 1.55;
  text-align: start;
  text-decoration: none;
}

.mobile-overlay nav .mobile-login-entry { cursor: pointer; }
html[lang="ar"] .mobile-overlay nav a,
html[lang="ar"] .mobile-overlay nav .mobile-login-entry,
html[lang="ar"] .mobile-overlay nav .mobile-nav-group__trigger { line-height: 1.8; }
.mobile-overlay nav a:hover,
.mobile-overlay nav .mobile-login-entry:hover,
.mobile-overlay nav .mobile-nav-group__trigger:hover { color: #fff; }
.mobile-overlay nav svg { width: 13px; height: 13px; color: var(--aqua); stroke-width: 1.8; }

.mobile-nav-group {
  flex: 0 0 auto;
  align-self: stretch;
  inline-size: 100%;
  min-inline-size: 0;
}
.mobile-nav-group__trigger {
  inline-size: 100%;
  min-inline-size: 0;
  cursor: pointer;
}
.mobile-nav-group__trigger svg {
  flex: 0 0 auto;
  transition: transform .18s ease;
}
.mobile-nav-group.is-open .mobile-nav-group__trigger svg { transform: rotate(180deg); }
.mobile-nav-submenu[hidden] { display: none; }
.mobile-nav-submenu {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-2);
  inline-size: 100%;
  min-inline-size: 0;
  padding: var(--space-2) 0 var(--space-3);
}
.mobile-overlay nav .mobile-nav-submenu a {
  inline-size: 100%;
  min-inline-size: 0;
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  justify-content: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  font-size: var(--font-size-12);
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}
.mobile-overlay nav .mobile-nav-submenu a[aria-current="page"] {
  border-color: rgba(73,194,181,.52);
  background: rgba(73,194,181,.10);
  color: var(--aqua);
}

/* Language switch remains a secondary utility, visually separated from primary navigation. */
.mobile-overlay nav a[lang] {
  min-height: 44px;
  margin-top: 18px;
  padding-inline: 13px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  font-size:var(--font-size-13);
}

.mobile-overlay nav a[lang="en"] { font-family: "Manrope",Arial,sans-serif; }
.mobile-overlay nav a[lang="ar"] { font-family: "Noto Kufi Arabic",Tahoma,Arial,sans-serif; }


/* 07. Secondary promotional banners.
   The section uses an intrinsic grid; each Admin-driven card adapts to its own inline size.
   Container queries are intentionally used here because the same card can live at different
   widths even when the viewport is unchanged. */
.promo-section {
  background: #fff;
  padding: 70px 0 40px;
}

.promo-section>.section-container {
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 30px;
  display: grid;
}

.promo-section>.promo-single {
  grid-template-columns: minmax(0,600px);
  justify-content: center;
}

.promo-card-shell {
  width: 100%;
  max-width: 600px;
  min-width: 0;
  justify-self: center;
  container-type: inline-size;
  container-name: promo-card-shell;
}

.promo-card {
  aspect-ratio: 600 / 253;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 44% 56%;
  background: #eef8f6;
  overflow: hidden;
  isolation: isolate;
}

.promo-visual {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 18px 14px 18px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.promo-visual img {
  display: block;
  width: 80%;
  height: 80%;
  max-width: 100%;
  max-height: 100%;
  object-fit: var(--promo-fit,contain);
  object-position: var(--promo-focus-x,50%) var(--promo-focus-y,50%);
  transform: translate3d(var(--promo-x,0px),var(--promo-y,0px),0) scale(var(--promo-scale,1));
  transform-origin: center;
  transition: transform .35s ease;
}

.promo-card[data-image-mode="illustration"] .promo-visual img {
  width: 68%;
  height: 72%;
}

.promo-card[data-image-mode="full"] .promo-visual { padding: 0; }
.promo-card[data-image-mode="full"] .promo-visual img { width: 100%; height: 100%; }

.promo-card:hover .promo-visual img {
  transform: translate3d(var(--promo-x,0px),var(--promo-y,0px),0) scale(var(--promo-hover-scale,var(--promo-scale,1)));
}

.promo-content {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 28px;
  box-sizing: border-box;
  text-align: start;
}

.promo-message { width: 100%; min-width: 0; }

.promo-eyebrow {
  display: block;
  margin: 0 0 7px;
  color: var(--aqua-dark);
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 1.4;
}

.promo-card h2 {
  max-width: 330px;
  margin: 0;
  color: var(--text-heading);
  font-size: clamp(22px,1.5vw,24px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.promo-meta {
  max-width: 300px;
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size:var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.promo-action-zone {
  width: 100%;
  height: auto;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.promo-action {
  min-height: 46px;
  border: 0;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  background: var(--navy);
  color: #fff;
  font-size: var(--type-ui);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease,color .2s ease;
}

.promo-action:hover {
  background: var(--aqua-dark);
  color: #fff;
}

.promo-action svg { width: 16px; height: 16px; flex: 0 0 auto; }

.promo-card.promo-image-right { grid-template-columns: 56% 44%; }
.promo-card.promo-image-right .promo-visual { grid-column: 2; grid-row: 1; padding: 18px 20px 18px 14px; }
.promo-card.promo-image-right .promo-content { grid-column: 1; grid-row: 1; }
.promo-card.promo-no-image { grid-template-columns: 1fr; }
.promo-card.promo-no-image .promo-content { width: min(100%,420px); justify-self: center; }

html[dir="rtl"] .promo-content { direction: rtl; }
html[dir="rtl"] .promo-action-zone { justify-content: flex-start; }

@container promo-card-shell (max-width: 500px) {
  .promo-card {
    aspect-ratio: auto;
    min-height: 158px;
    grid-template-columns: minmax(116px,38%) minmax(0,62%);
    grid-template-rows: 1fr;
    border: 1px solid #dcebea;
    border-radius: 12px;
    box-shadow: 0 8px 22px #1736500a;
  }

  .promo-card.promo-image-right {
    grid-template-columns: minmax(0,62%) minmax(116px,38%);
  }

  .promo-card[data-image-mode="illustration"] { background: #f0f7fb; }

  .promo-content,
  .promo-card.promo-image-right .promo-content {
    min-height: 158px;
    padding: 18px 16px;
  }

  .promo-visual,
  .promo-card.promo-image-right .promo-visual {
    min-height: 158px;
    padding: 16px 10px 16px 14px;
  }

  .promo-eyebrow {
    margin-bottom: 5px;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1.35;
  }

  .promo-card h2 {
    max-width: 100%;
    font-size: clamp(15px,4cqw,17px);
    line-height: 1.34;
    letter-spacing: -.015em;
  }

  .promo-meta {
    max-width: 100%;
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: .68rem;
    line-height: 1.5;
  }

  .promo-action-zone { margin-top: 10px; }
  .promo-action {
    min-height: 36px;
    border-radius: 7px;
    gap: 7px;
    padding-inline: 11px;
    font-size: .67rem;
  }
  .promo-action svg { width: 13px; height: 13px; }

  .promo-visual img {
    width: 100%;
    height: 100%;
    max-width: 132px;
    max-height: 116px;
    object-position: var(--promo-mobile-focus-x,50%) var(--promo-mobile-focus-y,50%);
    transform: translate3d(var(--promo-mobile-x,0px),var(--promo-mobile-y,0px),0) scale(var(--promo-mobile-scale,1));
  }

  .promo-card[data-image-mode="illustration"] .promo-visual img {
    width: 88%;
    height: 88%;
    max-width: 116px;
    max-height: 108px;
  }

  .promo-card:hover .promo-visual img {
    transform: translate3d(var(--promo-mobile-x,0px),var(--promo-mobile-y,0px),0) scale(var(--promo-mobile-hover-scale,var(--promo-mobile-scale,1)));
  }

}

@container promo-card-shell (max-width: 380px) {
  .promo-content,
  .promo-card.promo-image-right .promo-content { padding: 16px 13px; }

  .promo-visual,
  .promo-card.promo-image-right .promo-visual { padding: 14px 8px 14px 10px; }

  .promo-card h2 { font-size: 14.5px; }
  .promo-meta { font-size: .64rem; }
  .promo-action { min-height: 34px; padding-inline: 9px; font-size: .63rem; }
}

/* 07B. Selling Brands.
   Visual treatment follows Drodo's clean brand row; movement uses Drodo's Owl product-carousel engine.
   Owl's original stylesheet is not imported because it contains a disallowed priority declaration; the minimal structural
   rules required by this component are defined here in the canonical site stylesheet. */
.selling-brands {
  padding-block: var(--section-space);
  background: #fff;
}

.selling-brands-carousel {
  display: none;
  width: 100%;
  position: relative;
}

.selling-brands-carousel.is-static {
  display: grid;
  grid-template-columns: minmax(0,1fr);
}

.selling-brands-carousel .owl-stage {
  position: relative;
  touch-action: manipulation;
  backface-visibility: hidden;
}

.selling-brands-carousel .owl-stage::after {
  content: "";
  display: block;
  clear: both;
}

.selling-brands-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  transform: translate3d(0,0,0);
}

.selling-brands-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  backface-visibility: hidden;
}

 .selling-brands-carousel.owl-rtl { direction: rtl; }
.selling-brands-carousel.owl-rtl .owl-item { float: right; }
.selling-brands-carousel .owl-nav.disabled,
.selling-brands-carousel .owl-dots.disabled { display: none; }
.selling-brands-carousel .owl-prev,
.selling-brands-carousel .owl-next {
  cursor: pointer;
  user-select: none;
}
.selling-brands-carousel.owl-drag .owl-item {
  touch-action: pan-y;
  user-select: none;
}
.selling-brands-carousel.owl-grab { cursor: grab; }

.selling-brand-item {
  min-height: 108px;
  display: grid;
  place-items: center;
  text-align: center;
  border-inline-end: 1px solid var(--line);
}

.selling-brand-item > :is(a,.selling-brand-content) {
  width: 100%;
  min-height: 108px;
  display: grid;
  place-items: center;
  padding: 12px 22px;
}

.selling-brand-item img {
  width: 100%;
  max-width: 150px;
  height: 72px;
  object-fit: contain;
  filter: saturate(.92);
  transition: transform .25s ease,filter .25s ease;
}

.selling-brand-wordmark {
  max-width: 150px;
  color: #6d7d85;
  font: 700 17px/1.3 Manrope,Arial,sans-serif;
  letter-spacing: .02em;
}

.selling-brand-item a:hover img {
  transform: scale(1.04);
  filter: saturate(1);
}

.selling-brand-item a:hover .selling-brand-wordmark { color: var(--deep); }

/* Shared Drodo-style carousel navigation.
   Selling Brands and Best Selling intentionally use one canonical arrow treatment so
   the controls stay visually and behaviorally identical without component overrides. */
:is(.selling-brands-carousel,.best-selling-carousel) .owl-nav {
  position: absolute;
  inset-inline-end: 0;
  top: var(--carousel-nav-top,-78px);
  display: flex;
  gap:var(--space-2);
  margin: 0;
}

:is(.selling-brands-carousel,.best-selling-carousel) .owl-nav button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #ebebeb;
  border-radius: 50%;
  background: transparent;
  color: var(--deep);
  cursor: pointer;
  user-select: none;
  transition: background-color .2s ease,border-color .2s ease,color .2s ease;
}

:is(.selling-brands-carousel,.best-selling-carousel) .owl-nav button span {
  display: block;
  font: 400 24px/1 Arial,sans-serif;
  transform: translateY(-1px);
}

:is(.selling-brands-carousel,.best-selling-carousel) .owl-nav button:hover,
:is(.selling-brands-carousel,.best-selling-carousel) .owl-nav button:focus-visible {
  background: var(--aqua-dark);
  border-color: var(--aqua-dark);
  color: #fff;
}

:is(.selling-brands-carousel,.best-selling-carousel) .owl-dots { display: none; }

/* 08. Trust and service benefits strip. */
.benefits {
  background: #f7faf9;
  border-block: 1px solid #e7efed;
  padding: 48px 0 42px;
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: stretch;
}

.benefits__grid[data-count="3"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
.benefits__grid[data-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.benefits__grid[data-count="1"] { grid-template-columns: minmax(0,1fr); }

.benefit-item {
  position: relative;
  min-height: 92px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  padding: 6px 32px 18px;
}

.benefit-item::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 20px;
  inset-inline-end: 0;
  width: 1px;
  background: #dfe8e6;
}

.benefit-item:last-child::after { display: none; }

.benefit-item svg {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: var(--aqua-dark);
  stroke-width: 1.65;
  margin-top: 1px;
}

.benefit-item span,
.benefit-item b,
.benefit-item small { display: block; }

.benefit-item span {
  flex: 0 1 175px;
  min-width: 0;
  padding-top: 1px;
}

.benefit-item b {
  color: var(--text-heading);
  font-size:var(--font-size-17);
  font-weight: 700;
  line-height: 1.55;
}

.benefit-item small {
  color: var(--text-secondary);
  font-size:var(--font-size-13);
  line-height: 1.72;
  margin-top: 5px;
}

/* Benefits CTA: the Services disclosure control uses the same primary action-button language as approved site CTAs. */
.benefits__cta-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* Canonical site actions.
   Primary and Secondary share exactly one geometry; only emphasis changes. */
.site-primary-action,
.site-secondary-action {
  width: max-content;
  height: 46px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 19px;
  border-radius: 4px;
  font-size: var(--type-ui);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}

.site-primary-action {
  border: 0;
  background: var(--navy);
  color: #fff;
}

.site-secondary-action {
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--navy);
}

.benefits__services-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform .25s ease;
}

.benefits__services-link.is-open svg { transform: rotate(90deg); }
html[dir="rtl"] .benefits__services-link.is-open svg { transform: rotate(-90deg); }

@media (hover:hover) and (pointer:fine) {
  .site-primary-action:hover {
    background: var(--aqua-dark);
    color: #fff;
    box-shadow: 0 8px 20px #1736501f;
  }
  .site-secondary-action:hover {
    border-color: var(--aqua-dark);
    background: var(--aqua-pale);
    color: var(--navy);
    box-shadow: 0 8px 20px #17365012;
  }
}

.site-primary-action:focus-visible,
.site-secondary-action:focus-visible {
  outline: 3px solid #55c5b84d;
  outline-offset: 2px;
}

/* 10. Product-family catalog. The catalog and product shelves form one product area. */
.catalog-section {
  background: #fff;
  padding-top: var(--section-space);
  padding-bottom: var(--product-area-bridge);
}

.section-heading>span {
  color: var(--aqua-dark);
  display: block;
  font-family: Manrope,Arial,sans-serif;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: .12em;
}

.section-heading h2 {
  color: var(--text-heading);
  font-size: var(--type-section);
  letter-spacing: -.04em;
  margin: 10px 0 8px;
  line-height: 1.55;
}

.section-heading p {
  color: var(--text-secondary);
  max-width: 650px;
  font-size: var(--type-label);
  margin: 0;
  line-height: 2;
}

.section-heading.is-centered,.section-heading.is-centered span,.section-heading.is-centered h2,.section-heading.is-centered p {
  text-align: center;
}

.section-heading.is-centered p {
  margin-inline: auto;
}

/* 10. Main catalog category grid.
   Category artwork follows the same principle as product cards: one media frame,
   one centered image, and a generic fit mode. No per-image geometry is stored. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 18px;
}

.category-card {
  min-width: 0;
  display: grid;
  grid-template-rows: 150px minmax(48px,auto);
  align-items: stretch;
  overflow: hidden;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .22s ease, box-shadow .22s ease;
}

.category-card__media {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-soft);
}

.category-card__media img {
  display: block;
  flex: 0 0 auto;
  object-position: center center;
}

/* Category image rendering modes. Geometry of the card/media frame never changes.
   Contain/Cover use the corrected flex media frame from EXP 308.
   Original is an explicit legacy-rendering mode and reproduces the pre-308
   category-image layout rules only inside that mode. */
.category-card[data-image-fit="contain"] .category-card__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.category-card[data-image-fit="cover"] .category-card__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* Exact pre-308 category rendering contract, scoped to Original only. */
.category-card[data-image-fit="original"] .category-card__media {
  display: grid;
  place-items: center;
}

.category-card[data-image-fit="original"] .category-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center center;
}

.category-card__title {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 13px 10px 14px;
  color: var(--text-heading);
  text-align: center;
  font-size: var(--font-size-17);
  line-height: 1.45;
  font-weight: 700;
}

@media (hover:hover) and (pointer:fine) {
  .category-card:hover {
    border-color: #b6d6d1;
    box-shadow: 0 14px 34px #17365014;
  }
}

.category-card:focus-visible {
  outline: 3px solid #55c5b83d;
  outline-offset: 3px;
  border-color: var(--aqua);
}

@media (max-width:1180px) {
  .category-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width:720px) {
  .category-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }

  .category-card {
    grid-template-rows: minmax(142px,38vw) minmax(48px,auto);
    border-radius: 11px;
  }

  .category-card__media {
    min-height: 142px;
  }

  /* Mobile fit is independent when explicitly selected in Admin.
     "inherit" intentionally falls through to the Desktop fit above. */
  .category-card[data-mobile-image-fit="contain"] .category-card__media,
  .category-card[data-mobile-image-fit="cover"] .category-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .category-card[data-mobile-image-fit="contain"] .category-card__media img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }

  .category-card[data-mobile-image-fit="cover"] .category-card__media img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
  }

  .category-card[data-mobile-image-fit="original"] .category-card__media {
    display: grid;
    place-items: center;
  }

  .category-card[data-mobile-image-fit="original"] .category-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center center;
  }

  .category-card__title {
    padding: 11px 8px 12px;
    font-size: var(--font-size-14);
    line-height: 1.45;
  }

  .category-grid > .category-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 10px) / 2);
    justify-self: center;
  }
}

@media (max-width:350px) {
  .category-grid {
    grid-template-columns: 1fr;
  }

  .category-grid > .category-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
  }
}

/* 11. Product shelves generated from the shared catalog state.
   Instruments, Supplies, and Reagents are one continuous product area.
   The first shelf uses one bridge from the catalog; following shelves use one margin only,
   avoiding the former margin + padding combination that doubled vertical whitespace. */
#productShelves {
  background: #fff;
}

.product-shelf {
  --section-title-gap: var(--product-shelf-content-gap);
  background: #fff;
  padding-top: var(--product-area-bridge);
  scroll-margin-top: 110px;
}

.product-shelf + .product-shelf {
  margin-top: var(--product-shelf-gap);
  padding-top: 0;
}

/* 12. Display-first commerce cards.
   The shelf card is intentionally lightweight (Jumia/Amazon-style discovery):
   no large purchase/quote CTA is rendered here. Grid rows stretch cards to one outer height,
   while title and price remain in natural document flow so short titles never create fake gaps. */
.product-grid-shell {
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  container-name: product-grid-shell;
}

.product-grid {
  --product-title-lines: 2;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap:var(--space-6);
  align-items: stretch;
  display: grid;
}

/* 12A. Best Selling — Drodo Products Slides behavior.
   This is a dedicated carousel component, not an override of the shared product card.
   Geometry and movement match Drodo's `.products-slides`: Owl loop/autoplay/pause,
   30px spacing, 1/2/3/4 responsive items, and 32px circular title-level arrows.
   Grand Trade identity tokens replace Drodo's colors without changing the interaction. */
.best-selling-carousel {
  display: none;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Owl lifecycle mirrors the original core stylesheet. Keeping the carousel
   measurable while it is initializing prevents the first-frame single-card
   width flash, while opacity keeps that measuring pass invisible. */
:is(.selling-brands-carousel,.best-selling-carousel).owl-loading {
  display: block;
  opacity: 0;
}

:is(.selling-brands-carousel,.best-selling-carousel).owl-loaded {
  display: block;
  opacity: 1;
}

:is(.selling-brands-carousel,.best-selling-carousel).owl-refresh .owl-item {
  visibility: hidden;
}

:is(.selling-brands-carousel,.best-selling-carousel).owl-hidden {
  opacity: 0;
}

.best-selling-carousel .owl-stage {
  position: relative;
  touch-action: manipulation;
  backface-visibility: hidden;
}

.best-selling-carousel .owl-stage::after {
  content: "";
  display: block;
  clear: both;
}

.best-selling-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  transform: translate3d(0,0,0);
}

.best-selling-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}

.best-selling-carousel.owl-rtl { direction: rtl; }
.best-selling-carousel.owl-rtl .owl-item { float: right; }
.best-selling-carousel .owl-nav.disabled,
.best-selling-carousel .owl-dots.disabled { display: none; }

.best-selling-carousel.owl-drag .owl-item {
  touch-action: pan-y;
  user-select: none;
}


.best-selling-carousel.owl-grab { cursor: grab; }


/* 12B. Dynamic promotional campaigns under Best Selling.
   Admin-managed Special Offers component:
   - The Admin may publish 1, 2, or 3 cards; the visible count changes layout only.
   - Card anatomy, typography, image geometry, and text budgets stay consistent.
   - Copy is bounded to keep Arabic/English content stable across responsive states.
   - Image scale/offset remain data-driven Admin controls, never per-card CSS hacks. */
.best-selling-promo-section {
  margin-top: var(--special-offers-gap);
}

.best-selling-promo-heading {
  --section-title-gap:var(--space-6);
  margin-bottom: var(--section-title-gap);
}

.best-selling-promo-heading h2 {
  font-size:var(--font-size-28);
  font-weight: 600;
}

html[dir="rtl"] .best-selling-promo-heading h2 {
  font-weight: 600;
  line-height: 1.5;
}

.best-selling-promo-trio {
  --promo-gap:var(--space-6);
  --promo-card-min-h: 224px;
  --promo-visual-track: 38%;
  --promo-copy-track: 62%;
  --promo-copy-pad-block: 22px;
  --promo-copy-pad-inline: 20px;
  --promo-title-size: clamp(1.14rem,1.22vw,1.32rem);
  --promo-offer-size: .88rem;
  --promo-eyebrow-size: .74rem;
  --promo-cta-size: .84rem;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: stretch;
  gap: var(--promo-gap);
  margin-top: 0;
}

/* Visible-card count controls placement only; it never restyles the card itself. */
.best-selling-promo-trio[data-count="2"] {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.best-selling-promo-trio[data-count="1"] {
  grid-template-columns: minmax(0,min(100%,680px));
  justify-content: center;
}

.best-selling-promo-card {
  --best-promo-bg: #eef8f6;
  --best-promo-title-bg: #d5efea;
  min-width: 0;
  min-height: var(--promo-card-min-h);
  display: grid;
  grid-template-columns: var(--promo-visual-track) var(--promo-copy-track);
  grid-template-areas: "visual content";
  align-items: stretch;
  background: var(--best-promo-bg);
  border: 1px solid rgb(35 73 115 / 7%);
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}

/* Grand Trade brand-derived surfaces only. */
.best-selling-promo-card[data-tone="aqua"] {
  --best-promo-bg: #eaf8f6;
  --best-promo-title-bg: #d1eeea;
}

.best-selling-promo-card[data-tone="soft"] {
  --best-promo-bg: #f4f8f8;
  --best-promo-title-bg: #e2f1ef;
}

.best-selling-promo-card[data-tone="navy"] {
  --best-promo-bg: #edf3f8;
  --best-promo-title-bg: #d7e5f1;
}

/* Arabic keeps artwork on the right and copy on the left while preserving true RTL text. */
html[dir="rtl"] .best-selling-promo-card {
  grid-template-columns: var(--promo-copy-track) var(--promo-visual-track);
  grid-template-areas: "content visual";
}

.best-selling-promo-card__visual {
  grid-area: visual;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18px 12px 18px 18px;
}

html[dir="rtl"] .best-selling-promo-card__visual {
  padding: 18px 18px 18px 12px;
}

.best-selling-promo-card__visual img {
  width: 78%;
  height: 78%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-position: center;
  transform: translate3d(var(--best-image-x,0px),var(--best-image-y,0px),0) scale(var(--best-image-scale,1));
  transform-origin: center;
  transition: transform .32s ease;
}

.best-selling-promo-card[data-image-fit="contain"] .best-selling-promo-card__visual img { object-fit: contain; }
.best-selling-promo-card[data-image-fit="cover"] .best-selling-promo-card__visual { padding: 0; }
.best-selling-promo-card[data-image-fit="cover"] .best-selling-promo-card__visual img { width: 100%; height: 100%; object-fit: cover; }

.best-selling-promo-card:hover .best-selling-promo-card__visual img {
  transform: translate3d(var(--best-image-x,0px),var(--best-image-y,0px),0) scale(calc(var(--best-image-scale,1) * 1.025));
}

/* Copy and CTA form one vertically centered composition rather than two competing zones. */
.best-selling-promo-card__content {
  grid-area: content;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  align-items: stretch;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--promo-copy-pad-block) var(--promo-copy-pad-inline);
  color: var(--navy);
}

/* The copy stays vertically balanced in the flexible upper track, while the CTA owns one
   stable bottom row. This aligns actions across mixed offer lengths without fixed copy heights. */
.best-selling-promo-card__copy {
  width: 100%;
  max-width: 18rem;
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.best-selling-promo-card__eyebrow,
.best-selling-promo-card h3,
.best-selling-promo-card__offer,
.best-selling-promo-card__prices {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  text-align: left;
}

.best-selling-promo-card__eyebrow {
  margin-block: 0 7px;
  overflow: hidden;
  color: var(--text-meta);
  font-size: var(--promo-eyebrow-size);
  font-weight: 700;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.best-selling-promo-card h3 {
  min-height: 2.4em;
  margin: 0;
  overflow: hidden;
  color: var(--text-heading);
  font-size: var(--promo-title-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.018em;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.best-selling-promo-card h3 span {
  padding: .14em .48em .18em;
  border-radius: 999px;
  background: var(--best-promo-title-bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.best-selling-promo-card__offer {
  margin-block: 9px 0;
  overflow: hidden;
  color: #20354c;
  font-size: var(--promo-offer-size);
  font-weight: 600;
  line-height: 1.52;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.best-selling-promo-card__prices {
  margin-block: 9px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1.25;
}

.best-selling-promo-card__prices strong {
  order: 1;
  color: var(--navy);
  font-size: 1.04rem;
  font-weight: 800;
}

.best-selling-promo-card__prices del {
  order: 2;
  color: var(--text-meta);
  font-size: .8rem;
  font-weight: 500;
}

.best-selling-promo-card__prices bdi {
  direction: ltr;
  unicode-bidi: isolate;
}

.best-selling-promo-card__action {
  margin: 0;
  align-self: end;
  justify-self: start;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap:var(--space-2);
  padding: 8px 12px;
  border: 1px solid rgb(35 73 115 / 10%);
  border-radius: 999px;
  background: rgb(255 255 255 / 36%);
  color: var(--navy);
  font-size: var(--promo-cta-size);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: color .2s ease,gap .2s ease,background-color .2s ease,border-color .2s ease;
}

.best-selling-promo-card__action span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.best-selling-promo-card__action:hover {
  color: #fff;
  gap: 11px;
  border-color: var(--aqua-dark);
  background: var(--aqua-dark);
}

.best-selling-promo-card__action svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

html[dir="rtl"] .best-selling-promo-card__content {
  direction: rtl;
  justify-items: end;
}

html[dir="rtl"] .best-selling-promo-card__copy {
  margin-inline-start: auto;
  align-items: flex-end;
  text-align: start;
}

html[dir="rtl"] .best-selling-promo-card__eyebrow,
html[dir="rtl"] .best-selling-promo-card h3,
html[dir="rtl"] .best-selling-promo-card__offer,
html[dir="rtl"] .best-selling-promo-card__prices {
  width: 100%;
  text-align: right;
}

html[dir="rtl"] .best-selling-promo-card__eyebrow {
  font-weight: 600;
  line-height: 1.55;
}

html[dir="rtl"] .best-selling-promo-card h3 {
  min-height: 3em;
  letter-spacing: 0;
  line-height: 1.5;
}

html[dir="rtl"] .best-selling-promo-card h3 span {
  padding: .12em .42em .18em;
}

html[dir="rtl"] .best-selling-promo-card__offer {
  font-weight: 500;
  line-height: 1.65;
}

html[dir="rtl"] .best-selling-promo-card__prices {
  align-items: flex-end;
}

html[dir="rtl"] .best-selling-promo-card__action {
  justify-self: end;
  justify-content: flex-end;
  font-weight: 600;
}

.best-selling-promo-card--no-image {
  grid-template-columns: 1fr;
  grid-template-areas: "content";
}

.best-selling-promo-card--no-image .best-selling-promo-card__content {
  justify-items: center;
  text-align: center;
}

.best-selling-promo-card--no-image .best-selling-promo-card__copy {
  margin-inline: auto;
  justify-self: center;
  align-items: center;
  text-align: center;
}

.best-selling-promo-card--no-image .best-selling-promo-card__action {
  justify-self: center;
}

.best-selling-promo-card--no-image :is(.best-selling-promo-card__eyebrow,.best-selling-promo-card h3,.best-selling-promo-card__offer,.best-selling-promo-card__prices,.best-selling-promo-card__action) {
  margin-inline: auto;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.product-card {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  transition: border-color .25s ease,box-shadow .25s ease;
}

.product-card:hover {
  border-color: #cfdedb;
  box-shadow: 0 12px 28px #17365012;
}

.product-card:focus-within {
  border-color: #cfdedb;
  box-shadow: 0 12px 28px #17365012;
}

/* The link owns the card's vertical structure: media keeps its own geometry and the
   information panel fills the remaining row without pushing Price away from the title. */
.product-card__details-link {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  color: inherit;
  text-decoration: none;
}

.product-card__details-link:focus-visible {
  outline: 3px solid #55c5b84d;
  outline-offset: -3px;
}

.product-media {
  background: var(--surface-soft);
  aspect-ratio: 1;
  place-items: center;
  width: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
}

.product-media>img {
  z-index: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: none;
  width: 78%;
  height: 78%;
  transition: transform .4s ease;
  position: relative;
}

.product-card:hover .product-media>img,
.product-card:focus-within .product-media>img {
  transform: scale(1.035);
}

.product-media>span {
  z-index: 2;
  color: var(--navy);
  font-size: var(--type-meta);
  background: #fff;
  border-radius: 4px;
  padding: 6px 9px;
  font-weight: 800;
  position: absolute;
  top: 12px;
  inset-inline-end: 13px;
  box-shadow: 0 7px 18px #17365012;
}

/* Quick View stays a lightweight secondary action; the card itself opens full product details. */
.product-card__quick-view {
  position: absolute;
  z-index: 4;
  top: 12px;
  inset-inline-start: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #dbe7e8;
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  color: var(--navy);
  box-shadow: 0 6px 16px #17365010;
  font: inherit;
  cursor: pointer;
  transition: border-color .2s ease,color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.product-card__quick-view svg { width: 17px; height: 17px; }
.product-card__quick-view:hover { border-color: #9fcfc9; color: var(--aqua-dark); background: #fff; box-shadow: 0 8px 18px #17365017; transform: translateY(-1px); }
.product-card__quick-view:focus-visible { outline: 3px solid #55c5b84d; outline-offset: 2px; }

/* 348I — Compact product-card ordering action.
   Replaces the passive purchase-mode badge in the same media corner without affecting
   card height. Dual-mode products disclose two real actions in an anchored menu. */
.card-order{position:absolute;z-index:5;top:12px;inset-inline-end:13px;max-width:calc(100% - 78px)}
.card-order__trigger,.card-order__menu button{font:inherit;color:var(--navy);font-size:var(--type-meta);font-weight:800;line-height:1.35}
.card-order__trigger{min-height:36px;max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px;border:1px solid #dbe7e8;border-radius:6px;background:rgba(255,255,255,.97);box-shadow:0 7px 18px #17365012;cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease,box-shadow .2s ease}
.card-order__trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-order__trigger svg{width:13px;height:13px;flex:0 0 auto;transition:transform .2s ease}
.card-order__trigger--icon{position:relative;width:40px;min-width:40px;min-height:40px;padding:0;border-radius:8px;gap:0}
.card-order__trigger--icon .card-order__action-icon{width:19px;height:19px}
.card-order__trigger--icon .card-order__menu-chevron{position:absolute;inset-inline-end:3px;bottom:3px;width:9px;height:9px}
.card-order__sr-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.card-order.is-open .card-order__trigger--menu:not(.card-order__trigger--icon)>svg,
.card-order.is-open .card-order__trigger--icon .card-order__menu-chevron{transform:rotate(180deg)}
.card-order__trigger:hover,.card-order__trigger:focus-visible{border-color:#9fcfc9;color:var(--aqua-dark);background:#fff;box-shadow:0 8px 18px #17365017}
.card-order__trigger:focus-visible,.card-order__menu button:focus-visible{outline:3px solid #55c5b84d;outline-offset:2px}
.card-order__trigger.is-cart-added,.card-order__trigger.is-quote-added,.card-order__menu button.is-cart-added,.card-order__menu button.is-quote-added{border-color:#8ecfc7;color:var(--aqua-dark);background:#f4fbfa}
.card-order__menu{position:absolute;top:calc(100% + 7px);inset-inline-end:0;width:max-content;min-width:100%;max-width:min(220px,calc(100vw - 32px));display:grid;gap:var(--space-1);padding:5px;border:1px solid #dbe7e8;border-radius:8px;background:#fff;box-shadow:0 14px 32px rgb(23 54 80 / 14%)}
.card-order__menu[hidden]{display:none}
.card-order__menu button{width:100%;min-height:38px;padding:8px 11px;border:0;border-radius:5px;background:#fff;text-align:start;cursor:pointer;white-space:nowrap}
.card-order__menu button:hover{background:var(--aqua-pale);color:var(--navy)}
@media (width<=540px){.card-order{max-width:calc(100% - 72px)}.card-order__trigger:not(.card-order__trigger--icon){min-height:34px;padding:6px 9px}.card-order__trigger--icon{width:38px;min-width:38px;min-height:38px}}
/* 348AP — Homepage action mode is responsive by policy: full text on desktop, compact icon on mobile only. */
.card-order--home-mobile,.card-order--device-mobile{display:none}
@media (width<=540px){
  .card-order--home-desktop,.card-order--device-desktop{display:none}
  .card-order--home-mobile,.card-order--device-mobile{display:block}
}

/* Product copy stays top-packed inside the equal-height card. English family shelves keep
   their natural title flow, while Arabic homepage shelves use the same approved compact
   two-line title balance as Best Selling/New Arrivals. This keeps RTL names aligned without
   shrinking Arabic type or introducing a separate per-section spacing patch. */
.product-info {
  min-width: 0;
  gap: 7px;
  padding: 15px 15px 16px;
  display: grid;
  align-content: start;
  text-align: start;
}

/* 348I: card metadata keeps category at inline-start and rating at inline-end.
   This places rating on the left in Arabic and the right in English without per-language
   positional patches. When rating is hidden, category remains at its natural start edge. */
.product-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  width: 100%;
}

.product-card__category {
  min-width: 0;
  color: var(--aqua-dark);
  font-size: var(--type-meta);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-info h3 {
  color: var(--text-heading);
  font-size: var(--type-card);
  margin: 0;
  line-height: 1.6;
  font-weight: 800;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--product-title-lines,2);
}

/* Balanced homepage product-title contract (2+ cards visible). The H3 owns exactly two
   current line-heights and vertically centers the real title inside that compact area.
   Best Selling/New Arrivals use it in both languages; Arabic family shelves opt in as well.
   `start` follows RTL/LTR automatically, and the nested span keeps the two-line clamp. */
@media (width >= 576px) {
  :is(.best-selling-carousel,.product-shelf--balanced-title .product-grid) .product-info h3 {
    block-size: 2lh;
    display: grid;
    align-items: center;
    width: 100%;
    text-align: start;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
  }

  :is(.best-selling-carousel,.product-shelf--balanced-title .product-grid) .product-card__title-text {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--product-title-lines,2);
  }
}

.product-card-footer {
  border-top: 0;
  margin-top:var(--space-1);
  padding-top: 0;
  display: block;
  width: 100%;
}

.product-card-footer small,.product-card-footer strong {
  display: block;
  text-align: start;
}

.product-card-footer small {
  color: var(--text-meta);
  font-size: var(--type-meta);
}

.product-card-footer strong {
  color: var(--navy);
  font-size: var(--type-ui);
  margin-top: 3px;
}

/* Product Grid responsive contract.
   The 2-column tablet layout keeps the readable card width from EXP 237, while the
   821-991px tier tightens only the card rhythm: a shallower media frame, bounded
   product artwork, compact row gaps, and a shorter shelf bridge. No product-specific
   rules or JavaScript sizing are used. */
@media (width>=992px) and (width<=1100px) {
  .product-grid {
    /* Two title lines remain the readable commerce-card content budget. */
    --product-title-lines: 2;
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (width>=821px) and (width<=991px) {
  .product-grid {
    --product-title-lines: 2;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px 20px;
  }


  .product-grid .product-media {
    aspect-ratio: 4 / 3;
  }

  .product-grid .product-media > img {
    width: min(72%,240px);
    height: min(72%,240px);
  }

  .product-grid .product-info {
    gap: 6px;
    padding: 13px 14px 14px;
  }

  .product-grid .product-info h3 {
    line-height: 1.5;
  }

  .product-grid .product-card-footer {
    margin-top: 2px;
  }

  .product-grid .product-card__quick-view {
    top: 10px;
    inset-inline-start: 10px;
    width: 34px;
    height: 34px;
  }

  .product-grid .product-media > span {
    top: 10px;
    inset-inline-end: 10px;
    padding: 5px 8px;
  }

  .product-shelf + .product-shelf {
    margin-top: var(--product-shelf-gap);
  }
}

/* Mobile product-grid contract: two discovery cards remain the default across the phone
   range. Collapse to one column only when the grid's own available inline size can no longer
   provide two 150px cards plus the approved 11px gap. The decision is component-driven,
   independent of device name, DPR, or viewport-brand quirks. */
@media (width<=820px) {
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@container product-grid-shell (max-width: 310px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* 13. Product Quick View Popup.
   The popup reuses the canonical product record and selected product attributes; no preview-only duplicate data. */
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: clamp(18px,3vw,38px);
  font-family: "Noto Kufi Arabic",Tahoma,Arial,sans-serif;
}
html[lang="en"] .product-modal { font-family: "Manrope",Arial,sans-serif; }
.product-modal[hidden] { display: none; }
.product-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(13,34,50,.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.product-modal__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,42fr) minmax(0,58fr);
  width: min(940px,94vw);
  max-height: min(620px,calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid #dfe8ea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 86px rgba(13,34,50,.24);
  animation: product-preview-enter .2s ease-out both;
}
@keyframes product-preview-enter { from { opacity:.7; transform:translateY(7px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
.product-modal__dialog > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;
  padding: 48px 38px;
  box-sizing: border-box;
  border-inline-end: 1px solid #e7eef0;
  background: linear-gradient(180deg,#f8fbfa 0%,#f4f8f7 100%);
  object-fit: contain;
}
.product-modal__dialog > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: min(620px,calc(100dvh - 48px));
  padding: 29px 32px 28px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cfdbde transparent;
}
.product-modal__dialog [data-modal-category] {
  display: inline-block;
  margin-bottom: 5px;
  color: #329e94;
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.5;
}
.product-modal__dialog h2 {
  margin: 0 0 10px;
  color: var(--text-heading);
  font-size: clamp(1.48rem,2.15vw,1.88rem);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.015em;
}
html[lang="ar"] .product-modal__dialog h2 { letter-spacing: 0; }
.product-modal__dialog p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .86rem;
  line-height: 1.7;
  text-align: start;
}
.product-modal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin-bottom: 10px;
}
.product-modal__meta > span { display: inline-flex; align-items: baseline; gap: 6px; }
.product-modal__meta > span + span::before {
  content: "";
  width: 1px;
  height: 13px;
  margin-inline: 13px;
  background: #dbe5e8;
}
.product-modal__meta b { color: #234973; font-size: .71rem; font-weight: 800; }
.product-modal__meta em { color: var(--text-meta); font-size: .71rem; font-style: normal; }
.product-modal__summary-text {
  display: -webkit-box;
  max-width: 54ch;
  overflow: hidden;
  color: var(--text-secondary);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.product-modal__specs {
  display: grid;
  gap:var(--space-2);
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #e9eff1;
}
.product-modal__specs[hidden] { display: none; }
.product-modal__specs h3 {
  margin: 0 0 2px;
  color: var(--text-heading);
  font-size: .76rem;
  font-weight: 800;
}
.product-modal__specs > div {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: 22px;
  row-gap: 0;
}
.product-modal__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap:var(--space-3);
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid #edf2f3;
}
.product-modal__spec small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-meta);
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-modal__spec b {
  min-width: 0;
  overflow: hidden;
  color: #234973;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-modal__dialog > div > strong {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 17px 0 0;
  padding-top: 14px;
  border-top: 1px solid #e9eff1;
  color: #234973;
}
.product-modal__dialog > div > strong small {
  margin-bottom: 2px;
  color: var(--text-meta);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.4;
}
.product-modal__dialog > div > strong span {
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.35;
}
/* 348AM — Quick View reuses the canonical purchase action components used on the product page.
   The modal owns only the responsive row layout; button geometry, emphasis, hover and focus
   come from site-primary-action/site-secondary-action above. */
.product-modal__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-3);
}
.product-modal__actions.is-single { grid-template-columns: 1fr; }
.product-modal__actions > button {
  width: 100%;
  min-width: 0;
}
.product-modal__actions button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.product-modal__details {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap:var(--space-2);
  width: max-content;
  max-width: 100%;
  margin-top:var(--space-4);
  color: #214c72;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
  transition: color .18s ease;
}
.product-modal__details:hover { color: #329e94; }
.product-modal__details:focus-visible { outline: 2px solid #55c5b8; outline-offset: 3px; }
.product-modal__details svg { width: 14px; flex: 0 0 auto; }
.product-modal__close {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dce6e8;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: #234973;
  box-shadow: 0 6px 18px rgba(23,54,80,.08);
  cursor: pointer;
  transition: background-color .18s ease,border-color .18s ease,color .18s ease;
}
.product-modal__close:hover { border-color: #8fc7c1; background: #fff; color: #329e94; }
.product-modal__close:focus-visible { outline: 2px solid #55c5b8; outline-offset: 3px; }
.product-modal__close svg { width: 16px; }

@media (max-width: 760px) {
  .product-modal {
    align-items: center;
    padding-block: max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-bottom));
    padding-inline: max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right));
  }

  /* The dialog is capped by the currently visible browser viewport. The shell never
     scrolls behind mobile browser chrome; only the content pane owns overflow. */
  .product-modal__dialog {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px,31dvh) minmax(0,1fr);
    width: min(430px,100%);
    max-height: calc(100dvh - max(20px,env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    overflow: hidden;
    border-radius: 16px;
  }

  .product-modal__dialog > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 22px 38px 16px;
    border-inline-end: 0;
    border-bottom: 1px solid #e7eef0;
  }

  .product-modal__dialog > div {
    min-height: 0;
    max-height: none;
    padding: 17px 18px max(20px,env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .product-modal__dialog [data-modal-category] { font-size:var(--font-size-11); }
  .product-modal__dialog h2 { margin: 4px 0 7px; font-size:var(--font-size-20); line-height: 1.38; }
  html[lang="ar"] .product-modal__dialog h2 { line-height: 1.7; }
  .product-modal__meta { gap: 6px 12px; }
  .product-modal__summary-text { margin-top:var(--space-2); font-size:var(--font-size-12); line-height: 1.72; }
  .product-modal__specs { margin-top: 13px; padding-top:var(--space-3); }
  .product-modal__specs h3 { margin-bottom:var(--space-2); font-size:var(--font-size-12); }
  .product-modal__specs > div { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; }
  .product-modal__spec { min-height: 40px; padding: 7px 0; }
  .product-modal__dialog > div > strong { margin-top: 13px; padding-top: 11px; }
  .product-modal__dialog > div > strong span { font-size: 1.05rem; }
  .product-modal__actions { margin-top: 11px; }
  .product-modal__details { margin-top: 15px; font-size:var(--font-size-12); }
  .product-modal__close { top: 10px; inset-inline-start: 10px; width: 36px; height: 36px; }
}

@media (max-width: 360px) {
  .product-modal__specs > div { grid-template-columns: 1fr; }
}


/* 14. Services panel controlled only by the Benefits CTA.
   The top gap is intentionally compact after the toggle; the shared section token remains the bottom rhythm. */
.services {
  background: #fff;
  padding: 16px 0 var(--section-space);
}


.service-grid {
  grid-template-columns: repeat(4,1fr);
  gap:var(--space-4);
  margin-top: 0;
  margin-bottom: 0;
  display: grid;
}

html[dir="rtl"] .service-card {
  direction: rtl;
  text-align: right;
}

.service-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  min-height: 285px;
  padding: 29px 25px;
  position: relative;
  overflow: hidden;
}


/* Card metadata row — icon starts the reading direction, number sits opposite it.
   Flex respects LTR/RTL automatically, avoiding hard-coded left/right positioning. */
.service-card__meta {
  min-height: 54px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  display: flex;
}

.service-card__icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  color: var(--aqua-dark);
  background: var(--aqua-pale);
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.service-card__icon svg {
  width: 27px;
}

/* The number is intentionally restrained: it identifies sequence without competing with the icon/title. */
.service-card__number {
  color: #c4d0d4;
  font: 700 1.5rem/1 "Manrope";
  letter-spacing: -.03em;
  padding-top: 3px;
  direction: ltr;
  unicode-bidi: isolate;
}

.service-card h3 {
  color: var(--text-heading);
  font-size: var(--type-body);
  margin: 23px 0 9px;
}

.service-card p {
  color: var(--text-secondary);
  font-size: var(--type-small);
  margin: 0;
  line-height: 2;
}

.service-card a {
  width: max-content;
  color: var(--navy);
  font-size: var(--type-small);
  align-items: center;
  gap: 9px;
  margin-top:var(--space-5);
  font-weight: 800;
  display: flex;
}

.service-card a svg {
  width: 13px;
}

/* 15. General homepage promotional banner; content is managed under Admin > Advertisements. */
.lab-builder {
  background: #fff;
  padding: calc(var(--section-space) + 8px) 0;
  overflow: hidden;
}

.lab-promo {
  min-height: 400px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(390px,.94fr);
  align-items: center;
  gap: clamp(32px,3.6vw,54px);
  padding: clamp(38px,4vw,58px) clamp(38px,4.8vw,68px);
  border: 1px solid #d9e9e5;
  border-radius: 10px;
  background: linear-gradient(118deg,#f8fbfa 0%,#f3f8f7 50%,#edf7f5 100%);
  box-shadow: 0 14px 28px #17365008;
  overflow: hidden;
}

/* 348-E: the former Build Your Lab block is now a general promotional banner.
   Its default appearance remains unchanged, while no-image and cover campaigns
   have explicit component-owned geometry instead of ad-hoc page overrides. */
.lab-promo--no-image {
  grid-template-columns: minmax(0,720px);
  justify-content: start;
}
.lab-promo[data-image-fit="cover"] .lab-visual {
  min-height: 300px;
  overflow: hidden;
  border-radius: 8px;
}
.lab-promo[data-image-fit="cover"] .lab-visual::after { display: none; }
.lab-promo[data-image-fit="cover"] .lab-visual>img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  mix-blend-mode: normal;
  filter: none;
}

.lab-copy {
  max-width: 590px;
  align-self: center;
}

.lab-copy>span {
  color: var(--aqua-dark);
  font: 700 var(--type-ui) "Manrope";
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[dir="rtl"] .lab-copy>span {
  font-family: Noto Kufi Arabic,Tahoma,Arial,sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.lab-copy h2 {
  max-width: 560px;
  margin: 12px 0 18px;
  color: var(--text-heading);
  font-size: clamp(2rem,3.18vw,3.18rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.025em;
}

html[dir="rtl"] .lab-copy h2 {
  line-height: 1.45;
  letter-spacing: 0;
}

.lab-copy p {
  max-width: 540px;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-body);
  line-height: 1.82;
}

html[dir="rtl"] .lab-copy p {
  line-height: 2;
}

.lab-copy .site-primary-action {
  margin-top: 30px;
}

.lab-copy .site-primary-action svg {
  width: 15px;
  height: 15px;
}

.lab-visual {
  width: min(100%,540px);
  min-height: 320px;
  justify-self: end;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}

.lab-visual::after {
  content: "";
  width: min(82%,440px);
  height: 54px;
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  z-index: 0;
  border-radius: 999px;
  background: radial-gradient(ellipse at center,rgba(95,193,183,.27) 0%,rgba(95,193,183,.15) 34%,rgba(95,193,183,.07) 57%,rgba(95,193,183,0) 80%);
  filter: blur(8px);
  opacity: .94;
  pointer-events: none;
}

.lab-visual>img {
  width: min(100%,535px);
  max-height: 350px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 22px 28px #17365016) drop-shadow(0 6px 12px #17365012);
}

/* 16. News and events. */
/* News title keeps the secondary action on the exact h2 row at the far edge. */
.news {
  background: #fff;
  padding: 0 0 var(--section-space);
}

.news-heading {
  margin: 0 0 18px;
}

.news-heading__title {
  --section-title-gap: 0;
}

.news-grid {
  grid-template-rows: repeat(2,1fr);
  grid-template-columns: 1.25fr .75fr;
  gap: 17px;
  display: grid;
}

.featured-news {
  border: 1px solid var(--line);
  background: #eef8f6;
  border-radius: 9px;
  grid-row: 1/3;
  min-height: 480px;
  position: relative;
  overflow: hidden;
}

.featured-news>img {
  object-fit: contain;
  filter: saturate(.76);
  background: #eef8f6;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.featured-news:after {
  content: "";
  background: linear-gradient(to bottom,rgba(247,251,250,0) 38%,rgba(247,251,250,.34) 58%,rgba(247,251,250,.88) 74%,#f7fbfa 94%);
  position: absolute;
  inset: 0;
}

.news-date {
  z-index: 2;
  border: 1px solid var(--line);
  width: 68px;
  height: 73px;
  color: var(--navy);
  background: #fff;
  border-radius: 7px;
  align-content: center;
  place-items: center;
  display: grid;
  position: absolute;
  top: 22px;
  left: 22px;
}

.news-date b {
  font: 700 2rem/1 Manrope;
}

.news-date span {
  color: var(--aqua-dark);
  font: 700 var(--type-small) "Manrope";
}

.featured-news__content {
  z-index: 2;
  color: var(--deep);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: 58%;
  bottom: 30px;
  left: 28px;
  right: 28px;
}

.featured-news__copy {
  --featured-scrim-direction: 90deg;
  width: fit-content;
  max-width: min(100%,620px);
  padding-block: 11px 15px;
  padding-inline: 10px 52px;
  margin-inline-start: -10px;
  border-radius: 18px;
  background: linear-gradient(var(--featured-scrim-direction),rgba(247,251,250,.97) 0%,rgba(247,251,250,.94) 54%,rgba(247,251,250,.72) 75%,rgba(247,251,250,.34) 90%,rgba(247,251,250,0) 100%);
}

html[dir="rtl"] .featured-news__copy {
  --featured-scrim-direction: 270deg;
}

.featured-news small {
  color: var(--aqua-dark);
  font-size: var(--type-small);
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(255,255,255,.98), 0 2px 7px rgba(255,255,255,.82), 0 1px 2px rgba(23,54,80,.06);
}

.featured-news h3 {
  color: var(--text-heading);
  max-width: 540px;
  margin: 5px 0 12px;
  font-size: 1.42rem;
  line-height: 1.48;
  text-shadow: 0 1px 1px rgba(255,255,255,.98), 0 2px 9px rgba(255,255,255,.86), 0 1px 2px rgba(23,54,80,.07);
}

.featured-news p {
  color: var(--text-meta);
  font-size: var(--type-small);
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  display: flex;
  text-shadow: 0 1px 1px rgba(255,255,255,.98), 0 2px 7px rgba(255,255,255,.80), 0 1px 2px rgba(23,54,80,.05);
}

.featured-news p svg {
  width: 14px;
  height: 14px;
  color: var(--aqua-dark);
  flex: 0 0 auto;
}

.featured-news p i {
  background: #c6d7d5;
  width: 1px;
  height: 11px;
}

.featured-news a {
  z-index: 3;
  width: max-content;
  color: var(--navy);
  opacity: 1;
  font-size: var(--type-small);
  border-bottom: 1px solid #9bb7b3;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding-bottom: 5px;
  display: flex;
  position: relative;
  text-shadow: none;
}

.featured-news a:hover {
  color: var(--aqua-dark);
}

.featured-news a svg {
  width: 14px;
  height: 14px;
}

.news-card {
  border: 1px solid var(--line);
  background: #f9fbfb;
  border-radius: 9px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 30px;
  display: flex;
  overflow: hidden;
}

.news-card--with-image {
  grid-template-columns: minmax(0,1fr) minmax(126px,34%);
  grid-template-areas: "copy media";
  padding: 0;
  display: grid;
}

html[dir="rtl"] .news-card--with-image {
  grid-template-columns: minmax(126px,34%) minmax(0,1fr);
  grid-template-areas: "media copy";
}

.news-card__content {
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}

.news-card--with-image .news-card__content {
  grid-area: copy;
  padding: 28px 24px 26px 30px;
}

html[dir="rtl"] .news-card--with-image .news-card__content {
  padding: 28px 30px 26px 24px;
}

.news-card__media {
  grid-area: media;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  border-inline-start: 1px solid var(--line);
  background: #f2f7f6;
  place-items: center;
  display: grid;
  overflow: hidden;
}

html[dir="rtl"] .news-card__media {
  border-inline-start: 0;
  border-inline-end: 1px solid var(--line);
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-position: var(--news-card-focus-x,50%) var(--news-card-focus-y,50%);
  display: block;
}

.news-card__media--contain img {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain;
}

.news-card__media--cover img {
  object-fit: cover;
}

.news-card span {
  color: var(--aqua-dark);
  font-size: var(--type-meta);
  font-weight: 800;
}

.news-card h3 {
  color: var(--text-heading);
  font-size: var(--type-body);
  margin: 9px 0 9px;
  line-height: 1.62;
}

.news-card p {
  color: var(--text-secondary);
  font-size: var(--type-small);
  margin: 0;
  line-height: 1.82;
}

.news-card a {
  width: max-content;
  color: var(--navy);
  font-size: var(--type-small);
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  font-weight: 800;
  display: flex;
}

.news-card a:hover {
  color: var(--aqua-dark);
}

.news-card a svg {
  width: 13px;
  height: 13px;
}

/* 17. Contact conversion band. */
.contact-band {
  background: var(--aqua-pale);
  padding: 68px 0;
}

.contact-band>.section-container {
  justify-content: space-between;
  align-items: center;
  gap: 45px;
  display: flex;
}

/* The copy column is the flexible side of the band; min-width:0 prevents long localized
   headings from forcing the action track outside the canonical container. */
.contact-band>.section-container>div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.contact-band__eyebrow {
  color: var(--aqua-dark);
  font-size: var(--type-ui);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}

html[lang="en"] .contact-band__eyebrow {
  font-family: "Manrope",Arial,sans-serif;
  letter-spacing: .13em;
}

.contact-band h2 {
  max-width: 760px;
  color: var(--text-heading);
  margin: 9px 0 6px;
  font-size:var(--font-size-28);
  line-height: 1.6;
}

.contact-band p {
  color: var(--text-secondary);
  font-size: var(--type-ui);
  margin: 0;
}

/* Contact uses the same canonical Primary / Secondary buttons used across the site.
   This wrapper owns layout only; it does not redefine button geometry or colours. */
.contact-band>.section-container>div:last-child {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.contact-band .contact-band__action {
  flex: 0 0 auto;
}

.contact-band .contact-band__action svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
}

.contact-band .contact-band__whatsapp-icon {
  fill: currentColor;
  stroke: none;
}

/* 18. Footer navigation and company information. */
.site-footer {
  --footer-surface: #234973;
  background: var(--footer-surface);
  color: #fff;
}

.footer-main {
  display: grid;
  row-gap:var(--space-7);
  padding-block: 52px 42px;
}

.footer-logo {
  --footer-logo-render-width: var(--footer-logo-width,180px);
  --footer-logo-crop-factor: 1;
  display: inline-block;
  width: calc(var(--footer-logo-render-width) * var(--footer-logo-crop-factor));
  max-width: 100%;
  line-height: 0;
}


/* The footer uses web-cropped derivatives of the official master artwork.
   These factors preserve the previous visible logo size while the cropped canvas
   lets the artwork itself align exactly with the text track. */
html[lang="ar"] .footer-logo[data-logo-variant="short"] { --footer-logo-crop-factor: .505; }
html[lang="en"] .footer-logo[data-logo-variant="short"] { --footer-logo-crop-factor: .554; }
html[lang="ar"] .footer-logo[data-logo-variant="full"] { --footer-logo-crop-factor: .505; }
html[lang="en"] .footer-logo[data-logo-variant="full"] { --footer-logo-crop-factor: .683; }

.footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.footer-contact-list {
  display: grid;
  gap:var(--space-2);
  margin: 0;
}

.footer-contact-list p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size:var(--font-size-14);
  line-height: 1.62;
}

.footer-contact-list strong {
  color: #fff;
  font-weight: 700;
}

.footer-contact-list a,
.footer-contact-list span {
  margin: 0;
  color: rgba(255,255,255,.76);
  text-decoration: none;
  transition: color .2s ease;
}

.footer-contact-list a:hover,
.footer-simple-inline-links a:hover,
.footer-links a:hover,
.footer-socials a:hover {
  color: #55c5b8;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.footer-socials a {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.footer-socials a:hover { transform: translateY(-1px); }
.footer-socials svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }

.site-footer h3 {
  margin: 0 0 15px;
  color: #fff;
  font-size:var(--font-size-19);
  line-height: 1.4;
}

/* Simple footer alignment contract. Three equal tracks define the page geometry; each content
   block keeps its natural width and is centered inside its track for true optical alignment. */
.site-footer--simple .footer-main--simple {
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: center;
  column-gap: clamp(24px,4vw,48px);
  padding-block: 48px;
}

.footer-simple-brand,
.footer-simple-contact,
.footer-simple-meta {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  justify-self: center;
}

.footer-simple-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}

.footer-simple-contact,
.footer-simple-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-simple-meta {
  gap: 0;
}

.footer-simple-contact h3,
.footer-simple-meta h3 {
  width: 100%;
  margin-bottom: 15px;
}

.footer-simple-meta .footer-socials {
  margin-top: 0;
}

.footer-simple-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 2px;
}

.footer-simple-inline-links a,
.footer-links a {
  color: rgba(255,255,255,.76);
  font-size:var(--font-size-14);
  line-height: 1.72;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.site-footer--detailed .footer-main--detailed {
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: stretch;
  column-gap: 36px;
  row-gap: 36px;
  padding-block: 58px 52px;
}

.footer-panel {
  width: min(100%,240px);
  min-width: 0;
  justify-self: center;
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.footer-contact,
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer--detailed h3 {
  padding-bottom: 7px;
  position: relative;
}

.site-footer--detailed h3::before {
  content: "";
  width: 72px;
  height: 1px;
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  background: #55c5b8;
}

.site-footer--detailed .footer-links a {
  display: block;
  position: relative;
  margin-bottom:var(--space-1);
  padding-inline-start: 13px;
}

.site-footer--detailed .footer-links a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  background: rgba(255,255,255,.42);
  transition: background-color .2s ease;
}

.site-footer--detailed .footer-links a:hover::before {
  background: #55c5b8;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
}

.footer-bottom>.section-container {
  min-height: 58px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-block: 10px;
}

.footer-bottom span {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size:var(--font-size-12);
}

html[dir="ltr"] .site-footer {
  --footer-link-shift: 7px;
}

html[dir="rtl"] .site-footer {
  --footer-link-shift: -7px;
}

@media (width<=991px) {
  /* The detailed footer may reduce to two columns; the simple footer deliberately keeps
     its three equal tracks at tablet widths because its content is compact enough to fit. */
  .site-footer--detailed .footer-main--detailed {
    grid-template-columns: repeat(2,minmax(0,1fr));
    column-gap:var(--space-8);
  }
}

@media (width<=575px) {
  /* Phone footer has its own compact composition; tablet/desktop tracks above remain untouched. */
  .footer-main,
  .site-footer--simple .footer-main--simple,
  .site-footer--detailed .footer-main--detailed {
    grid-template-columns: 1fr;
    row-gap: 26px;
    padding-block: 36px 30px;
  }

  /* The brand is centered, while information blocks use the available reading width instead of
     collapsing to fit-content. This prevents the tall narrow column introduced in experiment 250. */
  .footer-panel,
  .footer-simple-contact,
  .footer-simple-meta {
    width: min(100%,320px);
    max-width: 100%;
    justify-self: center;
  }

  .footer-simple-brand {
    width: 100%;
    max-width: 100%;
    justify-self: center;
    justify-content: center;
  }

  .footer-simple-contact {
    align-items: flex-start;
  }

  .footer-simple-meta {
    align-items: center;
  }

  .footer-simple-meta h3 {
    text-align: center;
  }

  .footer-simple-meta .footer-socials {
    justify-content: center;
  }

  /* Phone-only logo and legal-row sizing live here so no later responsive block can re-style the footer. */
  .footer-logo {
    --footer-logo-render-width: 144px;
  }

  .footer-bottom>.section-container {
    min-height: 66px;
    flex-direction: column;
    justify-content: center;
    gap:var(--space-1);
    text-align: center;
  }
}

.mobile-cart {
  display: none;
}

/* 19. Responsive component adaptations. Each rule changes only breakpoint-specific behavior.
   Hero geometry is intentionally absent here; it has one owner in the Hero contract above. */
@media (width>=821px) and (width<=991px) {
  /* The canonical container is still 720px in this range, so news keeps a medium composition. */
  .news-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: auto auto;
  }

  .featured-news {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 440px;
  }

  .news-card {
    min-height: 240px;
  }

  .news-card--with-image .news-card__content,
  html[dir="rtl"] .news-card--with-image .news-card__content {
    padding: 22px 20px;
  }
}


@media (width<=991px) {
  .promo-section { padding-block: 32px; }
  .catalog-section--after-promos { padding-top: 0; }

  /* Compact header remains active while the canonical content container is 720px. */
  .gt-site {
    --topbar-height: 0px;
    --site-header-height: 72px;
  }

  .topbar { display: none; }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 95;
    height: 72px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 1px 0 rgba(35,73,115,.08);
  }
  /* 282B centered-header contract: preserve the approved centered composition, but
     reserve a real side-safe zone for Search + Cart (and the mirrored Menu side).
     The logo keeps its normal maximum and only shrinks when the inline space is genuinely tight. */
  .gt-site { --mobile-header-side-safe: 102px; }
  .site-header>.site-container { position: relative; justify-content: center; }
  .site-logo.logo-landscape {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(194px,calc(100% - var(--mobile-header-side-safe) - var(--mobile-header-side-safe)));
    height: 72px;
    margin: 0;
    transform: translateX(-50%);
    z-index: 2;
  }
  .site-logo.logo-landscape img {
    width: 100%;
    height: auto;
    max-height: 48px;
    object-fit: contain;
  }
  .site-logo .brand-desktop-landscape { display: block; }
  .site-logo .brand-mobile-mark { display: none; }
  .main-nav { display: none; }

  .header-actions {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .header-actions>button,.header-actions>a {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
  }
  .header-actions svg { width: 19px; height: 19px; }
  .header-actions #searchToggle { left: 10px; }
  .header-actions .cart-action { left: 50px; }
  .header-actions .customer-account-action { right: 50px; }
  .header-actions .menu-button { display: grid; right: 10px; }
  html[dir="ltr"] .header-actions #searchToggle { left: auto; right: 10px; }
  html[dir="ltr"] .header-actions .cart-action { left: auto; right: 50px; }
  html[dir="ltr"] .header-actions .customer-account-action { right: auto; left: 50px; }
  html[dir="ltr"] .header-actions .menu-button { right: auto; left: 10px; }

  .header-search-panel {
    top: 100%;
    padding: 12px 0 14px;
  }

  .header-search-inner {
    width: calc(100% - 28px);
    height: 54px;
    border-radius: 14px;
    grid-template-columns: 48px minmax(0,1fr) 46px;
  }

  .header-search-inner>input {
    font-size:var(--font-size-15);
  }

  .header-search-results {
    top: 61px;
    border-radius: 14px;
  }
}

.product-shelf-title-link {
  color: inherit;
  display: inline;
}

.product-shelf-title-link:hover {
  color: var(--navy);
}



@media (width<=480px) {
  .gt-site { --mobile-header-side-safe: 98px; }
  .site-logo.logo-landscape {
    width: min(186px,calc(100% - var(--mobile-header-side-safe) - var(--mobile-header-side-safe)));
  }
  .site-logo.logo-landscape img { width: 100%; }
  .header-actions #searchToggle { left: 8px; }
  .header-actions .cart-action { left: 46px; }
  .header-actions .customer-account-action { right: 46px; }
  .header-actions .menu-button { right: 8px; }
  html[dir="ltr"] .header-actions #searchToggle { left: auto; right: 8px; }
  html[dir="ltr"] .header-actions .cart-action { left: auto; right: 46px; }
  html[dir="ltr"] .header-actions .customer-account-action { right: auto; left: 46px; }
  html[dir="ltr"] .header-actions .menu-button { right: auto; left: 8px; }
}

@media (width<=1100px) {
  /* Responsive homepage rhythm uses one major gap between peer product blocks.
     Catalog owns no trailing gap; the first shelf owns the single bridge into products. */
  .gt-site {
    /* One 56px major cadence at responsive widths keeps Categories → Shelves → Special Offers
       → following shelves visually consistent in Arabic and English. */
    --product-area-bridge: 56px;
    --product-shelf-gap:var(--space-11);
    --special-offers-gap:var(--space-11);
  }

  .catalog-section { padding-bottom: 0; }

  .best-selling-promo-trio[data-count="2"],
  .best-selling-promo-trio[data-count="3"] {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .best-selling-promo-trio[data-count="3"]>.best-selling-promo-card:last-child {
    grid-column: 1 / -1;
    width: calc((100% - var(--promo-gap)) / 2);
    justify-self: center;
  }

  .best-selling-promo-trio[data-count="1"] {
    grid-template-columns: minmax(0,min(100%,680px));
    justify-content: center;
  }

  .lab-promo {
    grid-template-columns: minmax(0,1fr) minmax(300px,.82fr);
    gap:var(--space-7);
    padding: 34px 30px;
  }

  .lab-copy h2 {
    font-size: clamp(1.9rem,5vw,2.55rem);
  }

  .lab-visual {
    width: 100%;
    min-height: 280px;
    justify-self: center;
  }

  .lab-visual::after {
    width: min(80%,345px);
    height: 46px;
    bottom: 7px;
  }

  .lab-visual>img {
    width: min(100%,420px);
    max-height: 295px;
  }

  .service-grid {
    grid-template-columns: repeat(2,1fr);
  }

}

@media (width<=820px) {

  .benefits {
    padding: 40px 0 32px;
  }

  .benefits__grid,
  .benefits__grid[data-count="3"],
  .benefits__grid[data-count="4"] {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .benefits__grid[data-count="1"] { grid-template-columns: 1fr; }

  .benefit-item {
    min-height: 86px;
    justify-content: flex-start;
    gap: 15px;
    padding: 4px 28px 20px;
  }

  .benefit-item:nth-child(2n)::after { display: none; }

  .benefit-item svg {
    width: 39px;
    height: 39px;
  }

  .benefit-item b { font-size:var(--font-size-15); }
  .benefit-item small { font-size:var(--font-size-12); }

  .gt-site {
    --section-space: 48px;
    --product-shelf-content-gap:var(--space-6);
  }

  .section-heading h2 {
    font-size:var(--font-size-25);
  }

  .product-grid {
    /* Compact discovery cards keep a two-line clamp; outer card stretching provides alignment. */
    --product-title-lines: 2;
    gap: 11px;
  }

  .product-grid .product-media {
    height: clamp(158px,23vw,190px);
    aspect-ratio: auto;
  }

  .product-card__quick-view {
    top: 8px;
    inset-inline-start: 8px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .product-card__quick-view svg { width: 15px; height: 15px; }
  .product-media>span { top: 8px; inset-inline-end: 8px; padding: 5px 7px; font-size: .6rem; }
  .product-info { gap: 5px; padding: 12px 11px 13px; }
  .product-card__category { font-size: .67rem; }
  .product-info h3 { font-size: .95rem; line-height: 1.52; }
  .product-card-footer small { font-size: .62rem; }
  .product-card-footer strong { font-size: .82rem; }

  /* Best Selling uses a dedicated featured-product rail on mobile: one compact card,
     a visible edge of the next item, swipe/snap through Owl, autoplay, and quiet dots. */
  .best-selling-carousel {
    margin-inline: -12px;
    padding-inline: 0;
  }
  .best-selling-carousel .owl-stage-outer { padding-block: 2px 5px; }
  .best-selling-carousel .product-media {
    height: 192px;
    aspect-ratio: auto;
  }
  .best-selling-carousel .product-info {
    padding: 13px 13px 14px;
  }
  .best-selling-carousel .product-info h3 {
    min-height: 0;
    font-size:var(--font-size-16);
    line-height: 1.5;
  }
  .best-selling-carousel .owl-nav { display: none; }


  .service-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .news-grid {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .featured-news {
    grid-row: auto;
    min-height: 440px;
  }

  .featured-news__content {
    top: 55%;
    bottom: 26px;
  }

  .news-card {
    min-height: 205px;
  }

  .news-card--with-image {
    grid-template-columns: minmax(0,1fr) minmax(150px,30%);
  }

  html[dir="rtl"] .news-card--with-image {
    grid-template-columns: minmax(150px,30%) minmax(0,1fr);
  }

  /* Compact-tablet Contact keeps the canonical action components and changes layout only. */
  .contact-band { padding-block: 36px; }
  .contact-band>.section-container {
    flex-direction: column;
    align-items: flex-start;
    gap:var(--space-5);
    padding-inline: 20px;
  }
  .contact-band__eyebrow { font-size:var(--font-size-11); }
  html[lang="en"] .contact-band__eyebrow { letter-spacing: .1em; }
  .contact-band h2 { margin: 6px 0 5px; font-size: 1.28rem; line-height: 1.48; }
  .contact-band p { max-width: 36rem; font-size: .78125rem; line-height: 1.7; }


  .section-create-form {
    grid-template-columns: 1fr;
  }

}

/* Tablet Special Offers contract: 561–820px keeps the landscape card anatomy but bounds
   each offer to the visual width of one card in the two-column larger-tablet layout. */
@media (width>=561px) and (width<=820px) {
  .best-selling-promo-trio,
  .best-selling-promo-trio[data-count="1"],
  .best-selling-promo-trio[data-count="2"],
  .best-selling-promo-trio[data-count="3"] {
    --promo-card-min-h: 230px;
    --promo-tablet-card-max: 480px;
    --promo-visual-track: 38%;
    --promo-copy-track: 62%;
    --promo-copy-pad-block: 18px;
    --promo-copy-pad-inline: 18px;
    --promo-title-size: 1.12rem;
    --promo-offer-size: .8rem;
    --promo-eyebrow-size: .68rem;
    --promo-cta-size: .76rem;
    grid-template-columns: minmax(0,var(--promo-tablet-card-max));
    justify-content: center;
    gap:var(--space-4);
    margin-top:var(--space-6);
  }

  .best-selling-promo-trio[data-count="3"]>.best-selling-promo-card:last-child,
  .best-selling-promo-card {
    width: 100%;
    margin-inline: auto;
  }
}

@media (width<=560px) {
  .featured-news {
    min-height: 500px;
  }

  .featured-news__content {
    top: 53%;
    bottom: 24px;
    left: 20px;
    right: 20px;
  }

  .featured-news__copy {
    max-width: 100%;
    padding-block: 10px 14px;
    padding-inline: 8px 34px;
    margin-inline-start: -8px;
  }

  .featured-news h3 {
    max-width: 30rem;
    font-size: 1.22rem;
    line-height: 1.48;
  }

  .news-card {
    padding: 24px;
  }

  .news-card--with-image {
    grid-template-columns: minmax(0,1fr) 124px;
    padding: 0;
  }

  html[dir="rtl"] .news-card--with-image {
    grid-template-columns: 124px minmax(0,1fr);
  }

  .news-card--with-image .news-card__content,
  html[dir="rtl"] .news-card--with-image .news-card__content {
    padding: 22px 20px;
  }
  .product-shelf { --section-title-gap:var(--space-6); }

  .benefits {
    padding: 40px 0 36px;
  }

  .benefits__grid,
  .benefits__grid[data-count="2"],
  .benefits__grid[data-count="3"],
  .benefits__grid[data-count="4"] {
    grid-template-columns: 1fr;
  }

  .benefit-item,
  .benefit-item:nth-child(2n) {
    min-height: 72px;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 8px 20px;
    border-bottom: 1px solid #e2ebe9;
  }

  .benefit-item::after,
  .benefit-item:nth-child(2n)::after { display: none; }
  .benefit-item:last-child { border-bottom: 0; }

  .benefit-item svg {
    width: 36px;
    height: 36px;
  }

  /* Mobile promo section spacing has one owner; card geometry is component-owned above. */
  .promo-section { padding-block: 40px; }
  .catalog-section--after-promos { padding-top: 0; }
  .promo-section>.section-container { gap:var(--space-4); padding-inline: 24px; }


  /* Special Offers on phones — compact horizontal card system.
     Admin still owns 1–3 independent offers; responsive CSS changes composition only.
     One offer is static. Two or three offers use native horizontal scroll-snap with a
     small next-card cue and no JavaScript carousel/runtime layout work. */
  .best-selling-promo-section { margin-top: var(--special-offers-gap); }
  .best-selling-promo-heading { --section-title-gap: 18px; }
  .best-selling-promo-heading h2 { font-size:var(--font-size-24); }

  .best-selling-promo-trio,
  .best-selling-promo-trio[data-count="1"],
  .best-selling-promo-trio[data-count="2"],
  .best-selling-promo-trio[data-count="3"] {
    --promo-card-min-h: 176px;
    --promo-title-size: .98rem;
    --promo-offer-size: .69rem;
    --promo-eyebrow-size: .61rem;
    --promo-cta-size: .67rem;
    --promo-mobile-visual-track: 38%;
    --promo-mobile-copy-track: 62%;
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 0;
    padding-bottom:var(--space-1);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
  }

  .best-selling-promo-trio[data-count="1"] {
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .best-selling-promo-trio::-webkit-scrollbar { display: none; }

  .best-selling-promo-card {
    flex: 0 0 calc(100% - 28px);
    width: calc(100% - 28px);
    min-height: var(--promo-card-min-h);
    margin-inline: 0;
    grid-template-columns: minmax(104px,var(--promo-mobile-visual-track)) minmax(0,var(--promo-mobile-copy-track));
    grid-template-areas: "visual content";
    scroll-snap-align: start;
    border-radius: 11px;
  }

  .best-selling-promo-trio[data-count="1"]>.best-selling-promo-card {
    flex-basis: 100%;
    width: 100%;
  }

  .best-selling-promo-trio[data-count="3"]>.best-selling-promo-card:last-child {
    flex-basis: calc(100% - 28px);
    width: calc(100% - 28px);
  }

  html[dir="rtl"] .best-selling-promo-card {
    grid-template-columns: minmax(0,var(--promo-mobile-copy-track)) minmax(104px,var(--promo-mobile-visual-track));
    grid-template-areas: "content visual";
  }

  .best-selling-promo-card__visual {
    min-width: 0;
    min-height: var(--promo-card-min-h);
    padding: 14px 8px 14px 14px;
  }

  html[dir="rtl"] .best-selling-promo-card__visual {
    padding: 14px 14px 14px 8px;
  }

  .best-selling-promo-card[data-image-fit="contain"] .best-selling-promo-card__visual img {
    width: 82%;
    height: 82%;
    max-width: 128px;
    max-height: 128px;
  }

  .best-selling-promo-card__content {
    min-width: 0;
    min-height: var(--promo-card-min-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap:var(--space-2);
    padding: 14px 14px 14px 8px;
  }

  html[dir="rtl"] .best-selling-promo-card__content {
    align-items: flex-end;
    padding: 14px 8px 14px 14px;
  }

  .best-selling-promo-card__action,
  html[dir="rtl"] .best-selling-promo-card__action {
    align-self: auto;
    justify-self: auto;
  }

  .best-selling-promo-card__copy { width: 100%; }
  .best-selling-promo-card__eyebrow,
  .best-selling-promo-card h3,
  .best-selling-promo-card__offer,
  .best-selling-promo-card__prices { max-width: 100%; }

  .best-selling-promo-card__eyebrow { margin-bottom:var(--space-1); }
  .best-selling-promo-card h3 { min-height: 2.4em; }
  .best-selling-promo-card__offer { margin-top: 5px; }
  .best-selling-promo-card__prices { margin-top: 5px; gap: 2px; }
  .best-selling-promo-card__prices strong { font-size: .9rem; }
  .best-selling-promo-card__prices del { font-size: .68rem; }
  .best-selling-promo-card__action { width: auto; padding: 6px 10px; }
  .best-selling-promo-card__action svg { width: 14px; height: 14px; }

  .best-selling-promo-card--no-image,
  html[dir="rtl"] .best-selling-promo-card--no-image {
    grid-template-columns: 1fr;
    grid-template-areas: "content";
  }

  /* Services cards retain their approved content and appearance; only the
     mobile rail changes from a vertical stack to a one-at-a-time swipe track. */
  .service-grid {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .service-grid::-webkit-scrollbar { display: none; }
  .service-grid > .service-card {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Phone Contact preserves the same Primary / Secondary button system. */
  .contact-band { padding-block: 32px; }
  .contact-band>.section-container { gap:var(--space-4); padding-inline: 20px; }
  .contact-band>.section-container>div:last-child { width:100%; }
  .contact-band__eyebrow { font-size: .62rem; }
  html[lang="en"] .contact-band__eyebrow { letter-spacing: .08em; }
  .contact-band h2 { margin: 4px 0 4px; font-size: 1.16rem; line-height: 1.48; }
  .contact-band p { font-size: .72rem; line-height: 1.65; }

  .product-shelf + .product-shelf { margin-top: var(--product-shelf-gap); }



  .featured-news {
    min-height: 470px;
  }

  .featured-news h3 {
    font-size: var(--type-card);
  }

  .lab-builder { padding: 42px 0; }
  .lab-promo {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 20px 20px;
    background: linear-gradient(145deg,#f8fbfa 0%,#eef8f6 100%);
  }
  .lab-copy>span { font-size: .68rem; }
  .lab-copy h2 {
    margin: 7px 0 10px;
    font-size: clamp(1.5rem,6.8vw,1.9rem);
  }
  .lab-copy p { font-size: .8rem; line-height: 1.75; }
  html[dir="rtl"] .lab-copy p { line-height: 1.85; }
  .lab-copy .site-primary-action { margin-top: 17px; }

  .lab-visual {
    width: 100%;
    min-height: 184px;
    justify-self: center;
  }

  .lab-visual::after {
    width: min(70vw,260px);
    height: 34px;
    bottom: 5px;
    filter: blur(7px);
  }

  .lab-visual>img {
    width: min(76vw,330px);
    max-height: 205px;
  }
}



/* Quick contact: premium floating customer-care hub shared across public pages. */
.quick-contact { position: fixed; left: 24px; bottom: var(--quick-contact-bottom,24px); z-index: 91; width: 56px; height: 56px; font-family: inherit; }
.quick-contact__panel { position: absolute; left: 0; bottom: calc(100% + 12px); width: 286px; overflow: hidden; border: 1px solid rgba(35,73,115,.12); border-radius: 18px; background: #fff; box-shadow: 0 20px 52px rgba(18,54,88,.20); }
.quick-contact__panel[hidden] { display: none; }
.quick-contact__panel-head { display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: center; gap:var(--space-3); padding: 16px 16px 14px; border-bottom: 1px solid rgba(35,73,115,.09); background: linear-gradient(180deg,#fbfdfd 0%,#f7fbfa 100%); }
.quick-contact__panel-copy strong,.quick-contact__panel-copy small { display: block; }
.quick-contact__panel-copy strong { color: var(--navy); font-size:var(--font-size-14); font-weight: 800; line-height: 1.35; }
.quick-contact__panel-copy small { margin-top: 3px; color: var(--text-secondary); font-size:var(--font-size-11); font-weight: 600; line-height: 1.55; }
.quick-contact__glyph { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-contact__glyph--solid { fill: currentColor; stroke: none; }
.quick-contact__glyph--brand { fill: currentColor; stroke: none; }
.quick-contact__close { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(35,73,115,.10); border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; transition: background-color .18s ease,border-color .18s ease,transform .18s ease; }
.quick-contact__close:hover,.quick-contact__close:focus-visible { transform: rotate(4deg); border-color: rgba(54,189,178,.34); background: rgba(54,189,178,.07); }
.quick-contact__close:focus-visible { outline: 3px solid rgba(54,189,178,.20); outline-offset: 2px; }
.quick-contact__close .quick-contact__glyph { width: 17px; height: 17px; stroke-width: 1.9; }
.quick-contact__actions { padding: 7px 10px 9px; }
.quick-contact__action { min-height: 60px; display: grid; grid-template-columns: 28px minmax(0,1fr) 16px; align-items: center; gap:var(--space-3); padding: 9px 8px; border-radius: 11px; color: var(--navy); text-decoration: none; transition: background-color .18s ease; }
.quick-contact__action + .quick-contact__action { border-top: 1px solid rgba(35,73,115,.07); }
.quick-contact__action:hover,.quick-contact__action:focus-visible { background: rgba(35,73,115,.035); }
.quick-contact__action:focus-visible { outline: 3px solid rgba(54,189,178,.16); outline-offset: -1px; }
.quick-contact__action-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--navy); }
.quick-contact__action-icon .quick-contact__glyph { width: 21px; height: 21px; }
.quick-contact__action-icon--whatsapp { color: var(--aqua); }
.quick-contact__action-icon--whatsapp .quick-contact__glyph { width: 22px; height: 22px; }
.quick-contact__action-copy { min-width: 0; }
.quick-contact__action-copy b,.quick-contact__action-copy small { display: block; }
.quick-contact__action-copy b { color: var(--navy); font-size: 12.5px; font-weight: 800; line-height: 1.35; }
.quick-contact__action-copy small { margin-top: 2px; overflow: hidden; color: var(--text-secondary); font-size: 10.5px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.quick-contact__action-arrow { display: grid; place-items: center; color: var(--navy); opacity: .42; }
.quick-contact__action-arrow .quick-contact__glyph { width: 14px; height: 14px; stroke-width: 1.7; }
.quick-contact__trigger { position: relative; width: 56px; height: 56px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 12px 30px rgba(18,54,88,.24); cursor: pointer; transition: box-shadow .18s ease,background-color .18s ease; }
.quick-contact__trigger:hover,.quick-contact__trigger:focus-visible { background: #1f456d; box-shadow: 0 16px 34px rgba(18,54,88,.28); }
.quick-contact__trigger:focus-visible { outline: 3px solid rgba(54,189,178,.24); outline-offset: 3px; }
.quick-contact__trigger .quick-contact__glyph { width: 24px; height: 24px; stroke-width: 1.75; }
.quick-contact__icon-open { display: none; }
.quick-contact.is-open .quick-contact__icon-closed { display: none; }
.quick-contact.is-open .quick-contact__icon-open { display: grid; place-items: center; }
.quick-contact.is-open .quick-contact__icon-open .quick-contact__glyph { width: 21px; height: 21px; }
.quick-contact__trigger-label { position: absolute; left: calc(100% + 10px); top: 50%; width: max-content; max-width: 180px; padding: 7px 10px; border: 1px solid rgba(35,73,115,.10); border-radius: 8px; background: #fff; color: var(--navy); box-shadow: 0 8px 24px rgba(18,54,88,.12); font-size:var(--font-size-11); font-weight: 800; line-height: 1.3; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .16s ease; }
.quick-contact__trigger:hover .quick-contact__trigger-label,.quick-contact__trigger:focus-visible .quick-contact__trigger-label { opacity: 1; }
.quick-contact.is-open .quick-contact__trigger-label { display: none; }
@media (max-width: 767px) {
  /* Mobile quick contact: keep a 44px touch target with a calmer 16px side inset
     and safe-area-aware bottom spacing so the control never hugs the device edge. */
  .quick-contact {
    left: 16px;
    bottom: var(--quick-contact-mobile-bottom,calc(20px + env(safe-area-inset-bottom,0px)));
    width: 44px;
    height: 44px;
  }
  .quick-contact__trigger { width: 44px; height: 44px; }
  .quick-contact__trigger .quick-contact__glyph { width: 19px; height: 19px; }
  .quick-contact__panel { width: min(282px,calc(100vw - 32px)); }
  .quick-contact__trigger-label { display: none; }
}

/* Back-to-top control: shared across all public pages. */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 10px 28px rgba(18,54,88,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, background-color .22s ease, visibility .22s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--aqua);
}

.back-to-top:focus-visible {
  outline: 3px solid rgba(54,189,178,.28);
  outline-offset: 3px;
}

.back-to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

/* 20. Reduced-motion accessibility behavior. */

/* Section-title responsive behavior. No alternate rule renderer is introduced. */
@media (min-width: 768px) and (max-width: 991px) {
  .section-title {
    --section-accent-position: center;
    text-align: center;
  }

  .section-title--with-action {
    flex-direction: column;
    align-items: center;
    gap:var(--space-2);
  }

  .section-title__action { margin-bottom: 0; }
  .section-description { margin-inline: auto; text-align: center; }
}

@media (max-width: 767px) {
  .section-title {
    --section-title-gap: 30px;
    --section-accent-width: 70px;
    --section-accent-position: center;
    text-align: center;
  }

  .section-title h2 { font-size: var(--type-section-rule-title-mobile); }

  .section-title--with-action {
    flex-direction: column;
    align-items: center;
    gap:var(--space-2);
  }

  .section-title__action { margin-bottom: 0; }
  .section-heading-group { --section-title-gap:var(--space-3); margin-bottom: 30px; }
  .section-description { margin-inline: auto; text-align: center; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-slide-layer,.hero-copy,.hero-visual-motion,.header-stuck,.back-to-top,.quick-contact__trigger,.quick-contact__action,.quick-contact__trigger-chevron {
    animation: none;
  }

  .gt-site a,.gt-site button {
    transition: none;
  }
}


/* Selling Brands responsive adjustments keep the same carousel behavior while
   tightening only the section's intrinsic vertical rhythm on compact screens. */
@media (max-width: 820px) {
  .best-selling-carousel { --carousel-nav-top: -70px; }
  .selling-brands-carousel { --carousel-nav-top: -62px; }
  .selling-brands-heading { --section-title-gap:var(--space-6); }
  .selling-brand-item,
  .selling-brand-item > :is(a,.selling-brand-content) { min-height: 92px; }
}

@media (max-width: 560px) {
  .selling-brands { padding-block: 40px; }
  .best-selling-carousel { --carousel-nav-top: -66px; }
  .selling-brands-carousel { --carousel-nav-top: -58px; }
  .selling-brands-heading { --section-title-gap: 22px; }
  .selling-brand-item,
  .selling-brand-item > :is(a,.selling-brand-content) { min-height: 84px; }
  .selling-brand-item { border-inline-end: 0; }
  .selling-brand-item img { max-width: 120px; height: 54px; }
  .selling-brand-wordmark { font-size:var(--font-size-14); }
}

/* 24. Storefront action feedback.
   One transient live region confirms cart mutations without forcing navigation away from the product. */
.storefront-feedback {
  position: fixed;
  z-index: 280;
  inset-inline-start: 50%;
  inset-block-end: max(22px,calc(env(safe-area-inset-bottom) + 14px));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(420px,calc(100vw - 32px));
  padding: 11px 16px;
  border: 1px solid rgba(85,197,184,.42);
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 14px 34px rgba(35,73,115,.22);
  font-size: var(--font-size-13);
  font-weight: 700;
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  translate: -50% 12px;
  transition: opacity .18s ease,translate .18s ease;
}
.storefront-feedback.is-visible { opacity: 1; translate: -50% 0; }
.storefront-feedback svg { width: 17px; height: 17px; color: var(--aqua); flex: 0 0 auto; }
html[dir="rtl"] .storefront-feedback { translate: 50% 12px; }
html[dir="rtl"] .storefront-feedback.is-visible { translate: 50% 0; }

/* 25. Customer authentication.
   Compact storefront authentication with stable typography and no reserved
   security-widget whitespace when Turnstile is disabled or not rendered. */
.customer-auth-page {
  min-height: 100dvh;
  background: var(--navy-pale);
}
.customer-auth-shell {
  display: grid;
  align-items: safe center;
  justify-items: center;
  min-height: 100dvh;
  padding: max(var(--space-5),env(safe-area-inset-top)) var(--space-4) max(var(--space-5),env(safe-area-inset-bottom));
}
.customer-auth-card {
  width: min(100%,500px);
  padding: clamp(22px,3vw,30px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(35,73,115,.10);
}
.customer-auth-card--message { width: min(100%,540px); }
.customer-auth-brand { display: block; width: min(205px,60%); margin-inline: auto; margin-bottom: 18px; }
.customer-auth-brand img { display: block; width: 100%; height: auto; }
.customer-auth-copy { margin-bottom: 18px; text-align: center; }
.customer-auth-copy > span { display: block; margin-bottom: var(--space-1); color: var(--aqua-dark); font-size: var(--font-size-10); font-weight: 800; letter-spacing: .07em; }
.customer-auth-copy h1 { margin: 0 0 6px; color: var(--text-heading); font-size: clamp(var(--font-size-24),5vw,var(--font-size-30)); line-height: 1.35; }
.customer-auth-copy p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-12); line-height: 1.7; }
.customer-auth-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); margin-bottom:18px; }
.customer-auth-tabs .site-primary-action,.customer-auth-tabs .site-secondary-action { width:100%; }
.customer-auth-form { display: grid; gap: var(--space-3); }
.customer-auth-name-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
.customer-auth-form[hidden],.customer-auth-verification[hidden],.customer-auth-session[hidden],[data-customer-auth-forms][hidden] { display: none; }
.customer-auth-form label { display: grid; gap: 6px; color: var(--text-primary); font-size: var(--font-size-11); font-weight: 700; }
.customer-auth-form input,.customer-auth-form select {
  width: 100%;
  min-height: 44px;
  padding-inline: 12px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-12);
  outline: 0;
}
.customer-auth-form select { appearance: auto; }
.customer-auth-form input:focus,.customer-auth-form select:focus { border-color: var(--aqua-dark); box-shadow: 0 0 0 3px rgba(85,197,184,.16); }
.customer-auth-form small { color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.7; font-weight: 500; }
.customer-auth-form .customer-auth-check { display: flex; align-items: flex-start; gap: var(--space-2); line-height: 1.7; font-weight: 600; }
.customer-auth-check input { width: 18px; min-height: 18px; height: 18px; padding: 0; margin-top: 2px; flex: 0 0 auto; }
.customer-auth-terms a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.customer-auth-forgot { justify-self: start; margin-top: -3px; color: var(--navy); font-size: var(--font-size-10); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
html[dir="ltr"] .customer-auth-forgot { justify-self: end; }
.customer-password-reset-success { display: grid; gap: var(--space-3); text-align: center; }
.customer-password-reset-success[hidden] { display: none; }
.customer-password-reset-success h2 { color: var(--text-heading); font-size: var(--font-size-20); line-height: 1.5; }
.customer-password-reset-success p { color: var(--text-secondary); font-size: var(--font-size-12); line-height: 1.8; }
.customer-auth-security { display: grid; gap: 6px; padding-block: 2px; }
.customer-auth-security[hidden] { display: none; }
.customer-auth-security > span { color: var(--text-secondary); font-size: var(--font-size-10); font-weight: 600; line-height: 1.55; }
.customer-auth-turnstile { width: 100%; overflow: hidden; }
.customer-auth-turnstile:empty { min-height: 0; }
.customer-auth-turnstile:not(:empty) { min-height: 65px; }
.customer-auth-primary,.customer-auth-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: var(--space-4); border-radius: 8px; font: inherit; font-size: var(--font-size-12); font-weight: 800; line-height: 1.4; text-decoration: none; cursor: pointer; }
.customer-auth-primary { border: 1px solid var(--navy); background: var(--navy); color: #fff; }
.customer-auth-secondary { border: 1px solid var(--line); background: #fff; color: var(--navy); }
.customer-auth-primary:disabled,.customer-auth-secondary:disabled { opacity: .6; cursor: wait; }
/* Login/register submit buttons reuse the canonical site primary action geometry. */
.customer-auth-submit { width: 100%; }
.customer-auth-submit:disabled { opacity: .6; cursor: wait; }
.customer-auth-status { min-height: 0; color: var(--text-secondary); font-size: var(--font-size-11); line-height: 1.7; }
.customer-auth-status:empty { display: none; }
.customer-auth-status[data-tone="error"] { display: block; padding: 10px 12px; border: 1px solid #e7bcbc; border-radius: 8px; background: #fff5f5; color: #8b3030; font-size: var(--font-size-13); font-weight: 700; }
.customer-auth-status[data-tone="success"] { display: block; padding: 10px 12px; border: 1px solid #b9ddd5; border-radius: 8px; background: #f2fbf8; color: #1f665e; font-weight: 700; }
.customer-auth-status[data-tone="neutral"] { display: block; color: var(--text-secondary); }
/* Customer password visibility control — one canonical component across sign-in,
   registration, reset and account security forms. */
.customer-password-control { position: relative; display: block; width: 100%; }
.customer-password-control > input { width: 100%; padding-inline-end: 46px; }
.customer-password-toggle { position: absolute; inset-block: 0; inset-inline-end: 4px; display: grid; place-items: center; width: 38px; margin-block: 4px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.customer-password-toggle:hover,.customer-password-toggle:focus-visible { background: var(--navy-pale); color: var(--navy); outline: 0; }
.customer-password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.customer-auth-verification { display: grid; gap: var(--space-4); }
.customer-auth-verification__copy { text-align: center; }
.customer-auth-verification__copy h2 { margin-bottom: var(--space-2); color: var(--text-heading); font-size: var(--font-size-20); line-height: 1.5; }
.customer-auth-verification__copy p { color: var(--text-secondary); font-size: var(--font-size-12); line-height: 1.8; }
.customer-auth-verification__copy strong { color: var(--text-primary); font-weight: 800; }
.customer-auth-code { text-align: center; letter-spacing: .38em; font-size: var(--font-size-18); font-weight: 800; }
.customer-auth-resend { display: grid; gap: var(--space-2); }
.customer-auth-link-button { justify-self: center; border: 0; background: transparent; color: var(--navy); font: inherit; font-size: var(--font-size-10); font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.customer-auth-session { display: grid; gap: var(--space-3); text-align: center; }
.customer-auth-session h2 { color: var(--text-heading); font-size: var(--font-size-20); }
.customer-auth-session p { color: var(--text-secondary); font-size: var(--font-size-12); line-height: 1.75; }
.customer-auth-session__type { color: var(--navy); font-weight: 800; }
.customer-auth-session__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.customer-auth-links { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--navy); font-size: var(--font-size-10); font-weight: 800; }
.customer-email-change-result { display: grid; justify-items: center; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfd; color: var(--text-secondary); text-align: center; }
.customer-email-change-result[data-tone="success"] { border-color: #b9ddd5; background: #f2fbf8; color: #1f665e; }
.customer-email-change-result[data-tone="error"] { border-color: #e7bcbc; background: #fff5f5; color: #8b3030; }
.customer-email-change-result p { margin: 0; font-size: var(--font-size-12); font-weight: 700; line-height: 1.8; }
.customer-email-change-spinner { width: 24px; height: 24px; border: 3px solid #d7e0e5; border-top-color: var(--navy); border-radius: 50%; animation: customer-email-spin .8s linear infinite; }
@keyframes customer-email-spin { to { rotate: 360deg; } }
.customer-email-change-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.customer-email-change-actions[hidden] { display: none; }

@media (width<=420px) {
  .customer-auth-shell { align-items: start; justify-items: center; padding: max(12px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom)); }
  .customer-auth-card { padding: 18px 15px; border-radius: 14px; }
  .customer-auth-brand { width: min(180px,58%); margin-bottom: 14px; }
  .customer-auth-copy { margin-bottom: 14px; }
  .customer-auth-tabs { margin-bottom: 14px; }
  .customer-auth-name-grid,.customer-auth-session__actions,.customer-email-change-actions { grid-template-columns: 1fr; }
  .customer-auth-links { margin-top: 14px; }
}

/* 25A. Storefront customer account center.
   Desktop uses a stable sidebar; tablet and mobile progressively flatten the
   navigation without changing content order or relying on per-device patches. */
.customer-account-page { min-height: 100dvh; background: #f5f7f9; }
.customer-account-page .customer-account-shell {
  width: min(100%,1230px);
  min-height: 100dvh;
  margin-inline: auto;
  padding: max(18px,env(safe-area-inset-top)) clamp(14px,2.5vw,28px) max(34px,env(safe-area-inset-bottom));
}
.customer-account-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 66px; margin-bottom: 18px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(35,73,115,.05); }
.customer-account-brand { display: block; width: min(200px,42vw); }
.customer-account-brand img { display: block; width: 100%; height: auto; }
.customer-account-topbar__actions { display: flex; align-items: center; gap: var(--space-3); }
.customer-account-topbar__actions a { color: var(--navy); font-size: var(--font-size-10); font-weight: 800; text-decoration: none; }
.customer-account-topbar__actions a:hover,.customer-account-topbar__actions a:focus-visible { color: var(--aqua-dark); text-decoration: underline; text-underline-offset: 3px; }
.customer-account-back { display: inline-flex; align-items: center; min-height: 36px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.customer-account-loading { margin: 16vh auto 0; width: min(100%,520px); padding: var(--space-4); border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text-secondary); font-size: var(--font-size-12); line-height: 1.7; text-align: center; box-shadow: 0 10px 28px rgba(35,73,115,.06); }
.customer-account-loading[hidden] { display: none; }
.customer-account-layout { display: grid; grid-template-columns: 255px minmax(0,1fr); align-items: start; gap: clamp(18px,2.2vw,28px); }
.customer-account-layout[hidden] { display: none; }
.customer-account-sidebar { position: sticky; top: 16px; display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(35,73,115,.055); }
.customer-account-summary { display: grid; gap: var(--space-1); padding-bottom: 14px; border-bottom: 1px solid var(--line); text-align: start; }
.customer-account-summary__eyebrow { color: var(--aqua-dark); font-size: var(--font-size-10); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.customer-account-summary h2 { margin: 0; color: var(--text-heading); font-size: var(--font-size-17); line-height: 1.5; overflow-wrap: anywhere; }
.customer-account-summary p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.7; overflow-wrap: anywhere; }
.customer-account-summary p.customer-account-summary__type { width: max-content; max-width: 100%; margin-top: 3px; padding: 3px 8px; border-radius: 999px; background: var(--navy-pale); color: var(--navy); font-weight: 800; }
.customer-account-nav { display: grid; gap: 3px; }
.customer-account-nav a { display: grid; gap: 1px; padding: 9px 10px; border-radius: 8px; color: var(--navy); text-decoration: none; transition: background-color .16s ease,color .16s ease; }
.customer-account-nav a span { font-size: var(--font-size-10); font-weight: 800; line-height: 1.5; }
.customer-account-nav a small { color: var(--text-secondary); font-size: var(--font-size-10); font-weight: 600; line-height: 1.5; }
.customer-account-nav a:hover,.customer-account-nav a:focus-visible { background: var(--navy-pale); color: var(--aqua-dark); outline: 0; }
.customer-account-nav a[aria-current="page"] { background: var(--navy-pale); color: var(--aqua-dark); }
.customer-account-nav a[aria-current="page"] small { color: var(--navy); }
[data-customer-account-panel][hidden] { display: none; }
.customer-account-sidebar__footer { display: grid; gap: 7px; }
.customer-account-inline-status { color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.6; }
.customer-account-inline-status:empty { display: none; }
.customer-account-inline-status[data-tone="error"] { padding: 8px 9px; border: 1px solid #e7bcbc; border-radius: 7px; background: #fff5f5; color: #8b3030; font-weight: 700; }
.customer-account-logout { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy); font: inherit; font-size: var(--font-size-10); font-weight: 800; cursor: pointer; }
.customer-account-logout:hover,.customer-account-logout:focus-visible { border-color: var(--navy); background: var(--navy-pale); }
.customer-account-logout:disabled { opacity: .6; cursor: wait; }
.customer-account-main { display: grid; gap: var(--space-4); min-width: 0; }
.customer-account-heading { padding: 4px 2px 2px; text-align: start; }
.customer-account-heading > span { display: block; margin-bottom: var(--space-1); color: var(--aqua-dark); font-size: var(--font-size-10); font-weight: 800; letter-spacing: .06em; }
.customer-account-heading h1 { margin: 0 0 5px; color: var(--text-heading); font-size: clamp(26px,3vw,35px); line-height: 1.35; }
.customer-account-heading p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-11); line-height: 1.75; }
.customer-account-panel { scroll-margin-top: var(--space-5); display: grid; gap: var(--space-4); padding: clamp(17px,2.1vw,23px); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(35,73,115,.04); text-align: start; }
.customer-account-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.customer-account-section-head h2 { margin: 0; color: var(--text-heading); font-size: var(--font-size-17); line-height: 1.5; }
.customer-account-section-head p { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.75; }
.customer-account-profile { display: grid; gap: var(--space-3); }
.customer-account-field { display: grid; gap: 6px; color: var(--text-primary); font-size: var(--font-size-10); font-weight: 700; }
.customer-account-field > span { line-height: 1.6; }
.customer-account-field input:not([type="checkbox"]),.customer-account-field textarea { width: 100%; min-height: 44px; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text-primary); font: inherit; font-size: var(--font-size-11); outline: 0; }
.customer-account-field textarea { min-height: 94px; resize: vertical; line-height: 1.75; }
.customer-account-field input:not([type="checkbox"]):focus,.customer-account-field textarea:focus { border-color: var(--aqua-dark); box-shadow: 0 0 0 3px rgba(85,197,184,.16); }
.customer-account-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
.customer-account-field-grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.customer-account-checkline { display: flex; align-items: flex-start; gap: 9px; width: fit-content; max-width: 100%; color: var(--text-primary); font-size: var(--font-size-10); font-weight: 700; line-height: 1.75; cursor: pointer; }
.customer-account-checkline[hidden] { display: none; }
.customer-account-checkline input[type="checkbox"] { flex: 0 0 auto; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 3px 0 0; padding: 0; accent-color: var(--navy); }
.customer-account-form-actions { display: flex; justify-content: flex-start; gap: 9px; flex-wrap: wrap; padding-top: 2px; }
.customer-account-form-actions .customer-auth-primary,.customer-account-form-actions .customer-auth-secondary { min-width: 150px; }
.customer-account-form-help { margin: -4px 0 0; color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.7; }
.customer-account-add { flex: 0 0 auto; min-height: 38px; padding-inline: 13px; border: 1px solid var(--navy); border-radius: 8px; background: #fff; color: var(--navy); font: inherit; font-size: var(--font-size-10); font-weight: 800; cursor: pointer; }
.customer-account-add:hover,.customer-account-add:focus-visible { background: var(--navy-pale); }
.customer-account-text-action { justify-self: start; border: 0; padding: 0; background: transparent; color: var(--navy); font: inherit; font-size: var(--font-size-10); font-weight: 800; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.customer-identity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
.customer-identity-card { display: grid; align-content: start; gap: 7px; min-width: 0; min-height: 126px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfd; }
.customer-identity-card--static { background: #fff; }
.customer-identity-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.customer-identity-card__label { color: var(--text-secondary); font-size: var(--font-size-10); font-weight: 800; }
.customer-identity-card strong { color: var(--text-heading); font-size: var(--font-size-12); line-height: 1.65; overflow-wrap: anywhere; }
.customer-identity-card small { color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.65; }
.customer-identity-badge { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: #edf8f5; color: #276f65; font-size: var(--font-size-10); font-weight: 800; }
.customer-identity-badge--neutral { background: var(--navy-pale); color: var(--navy); }
.customer-identity-badge--warning { background: #fff5df; color: #8a661e; }
.customer-account-inline-form { display: grid; gap: 13px; padding: 16px; border: 1px solid #cbd8df; border-radius: 11px; background: #f8fafb; }
.customer-account-inline-form[hidden] { display: none; }
.customer-account-inline-form__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.customer-account-inline-form__head h3 { margin: 0; color: var(--text-heading); font-size: var(--font-size-13); line-height: 1.5; }
.customer-account-inline-form__head p { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.7; }
.customer-account-inline-form__head > button { flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--navy); font: inherit; font-size: var(--font-size-18); line-height: 1; cursor: pointer; }

.customer-orders-count { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: var(--navy-pale); color: var(--navy); font-size: var(--font-size-10); font-weight: 800; white-space: nowrap; }
.customer-orders-list { display: grid; gap: 10px; }
.customer-orders-loading { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 10px; color: var(--text-secondary); font-size: var(--font-size-10); text-align: center; }
.customer-orders-empty { display: grid; justify-items: center; gap: var(--space-1); padding: 22px 16px; border: 1px dashed var(--line); border-radius: 10px; background: #fafcfd; text-align: center; }
.customer-orders-empty b { color: var(--text-heading); font-size: var(--font-size-11); }
.customer-orders-empty span { color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.7; }
.customer-orders-empty--error { border-color: #e7bcbc; background: #fff7f7; }
.customer-order-card { display: grid; gap: 9px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.customer-order-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.customer-order-card__head > div { display: grid; gap: 2px; min-width: 0; }
.customer-order-card__head > div > span { color: var(--text-secondary); font-size: var(--font-size-10); font-weight: 700; }
.customer-order-card__head strong { color: var(--text-heading); font-family: Manrope,Arial,sans-serif; font-size: var(--font-size-11); line-height: 1.5; overflow-wrap: anywhere; }
.customer-order-status { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: var(--navy-pale); color: var(--navy); font-size: var(--font-size-10); font-weight: 800; }
.customer-order-status[data-tone="success"] { background: #edf8f5; color: #276f65; }
.customer-order-status[data-tone="cancelled"] { background: #fff0f0; color: #8b3030; }
.customer-order-status[data-tone="active"] { background: #eef5fb; color: #315d86; }
.customer-order-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-secondary); font-size: var(--font-size-10); }
.customer-order-card__meta span + span::before { content: "•"; margin-inline-end: 10px; color: #aeb9c0; }
.customer-order-items { display: grid; gap: 5px; padding-top: var(--space-2); border-top: 1px solid #edf1f3; }
.customer-order-items > div { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); color: var(--text-primary); font-size: var(--font-size-10); line-height: 1.65; }
.customer-order-items span { min-width: 0; overflow-wrap: anywhere; }
.customer-order-items b { flex: 0 0 auto; color: var(--navy); font-family: Manrope,Arial,sans-serif; font-weight: 800; }

.customer-location-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
.customer-location-empty { grid-column: 1/-1; margin: 0; padding: 20px; border: 1px dashed var(--line); border-radius: 10px; background: #fafcfd; color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.7; text-align: center; }
.customer-location-card { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: start; }
.customer-location-card__head { display: grid; gap: var(--space-1); }
.customer-location-card__head > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.customer-location-card__head b { color: var(--text-heading); font-size: var(--font-size-10); }
.customer-location-card__head span { padding: 2px 7px; border-radius: 999px; background: var(--navy-pale); color: var(--navy); font-size: var(--font-size-10); font-weight: 800; }
.customer-location-card__head small,.customer-location-card > small { color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.6; }
.customer-location-card p { margin: 0; color: var(--text-primary); font-size: var(--font-size-10); line-height: 1.75; overflow-wrap: anywhere; }
.customer-location-card__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-1); }
.customer-location-card__actions button { border: 0; padding: 0; background: transparent; color: var(--navy); font: inherit; font-size: var(--font-size-10); font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.customer-location-form { display: grid; gap: var(--space-3); margin-top: 2px; padding: 16px; border: 1px solid #cdd8df; border-radius: 11px; background: #f8fafb; }
.customer-location-form[hidden] { display: none; }
.customer-location-form__heading h3 { margin: 0; color: var(--text-heading); font-size: var(--font-size-13); }
.customer-location-form__heading p { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.7; }
.customer-location-form__actions { display: flex; justify-content: flex-start; gap: var(--space-2); }
.customer-location-form__actions .customer-auth-primary,.customer-location-form__actions .customer-auth-secondary { min-width: 130px; }

.customer-security-stack { display: grid; gap: var(--space-3); }
.customer-security-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfd; }
.customer-security-row h3 { margin: 0; color: var(--text-heading); font-size: var(--font-size-11); line-height: 1.55; }
.customer-security-row p { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--font-size-10); line-height: 1.7; }
.customer-account-switch { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: var(--space-3); padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfd; cursor: pointer; }
.customer-account-switch input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.customer-account-switch__track { position: relative; flex: 0 0 auto; width: 42px; height: 24px; margin-top: 2px; border: 1px solid #9eaeb9; border-radius: 999px; background: #dfe5e9; transition: background-color .16s ease,border-color .16s ease; }
.customer-account-switch__track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(35,73,115,.24); transition: transform .16s ease; }
.customer-account-switch input:checked + .customer-account-switch__track { border-color: var(--navy); background: var(--navy); }
.customer-account-switch input:checked + .customer-account-switch__track::after { transform: translateX(18px); }
html[dir="rtl"] .customer-account-switch input:checked + .customer-account-switch__track::after { transform: translateX(-18px); }
.customer-account-switch input:focus-visible + .customer-account-switch__track { outline: 3px solid rgba(85,197,184,.24); outline-offset: 2px; }
.customer-account-switch__copy { display: grid; gap: 3px; min-width: 0; }
.customer-account-switch__copy b { color: var(--text-heading); font-size: var(--font-size-10); line-height: 1.6; }
.customer-account-switch__copy small { color: var(--text-secondary); font-size: var(--font-size-10); font-weight: 500; line-height: 1.75; }

.customer-account-danger { grid-template-columns: minmax(0,1fr) auto; align-items: center; border-color: #ead4d4; background: #fffafa; box-shadow: none; }
.customer-account-danger__copy h2 { margin: 0 0 5px; color: #7d2525; font-size: var(--font-size-15); line-height: 1.5; }
.customer-account-danger__copy p { max-width: 760px; margin: 0; color: #775d5d; font-size: var(--font-size-10); line-height: 1.8; }
.customer-account-danger__side { display: grid; justify-items: end; gap: 5px; min-width: 150px; }
.customer-account-danger__action { min-height: 40px; padding: 8px 14px; border: 1px solid #a54848; border-radius: 8px; background: #fff; color: #8b3030; font: inherit; font-size: var(--font-size-10); font-weight: 800; cursor: pointer; }
.customer-account-danger__action:hover,.customer-account-danger__action:focus-visible { background: #fff1f1; border-color: #873737; }
.customer-account-danger__action:disabled { opacity: .58; cursor: wait; }
.customer-account-page .customer-auth-status { min-height: 0; }

@media (width<=980px) {
  .customer-account-layout { grid-template-columns: 1fr; }
  .customer-account-sidebar { position: static; grid-template-columns: minmax(200px,.72fr) minmax(0,2fr); align-items: start; gap: 12px 18px; padding: 15px; }
  .customer-account-summary { grid-row: 1 / span 2; padding: 2px 16px 2px 0; border-bottom: 0; border-inline-end: 1px solid var(--line); }
  html[dir="rtl"] .customer-account-summary { padding: 2px 0 2px 16px; }
  .customer-account-nav { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-1); }
  .customer-account-nav a { background: #fafcfd; }
  .customer-account-sidebar__footer { grid-column: 2; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
  .customer-account-logout { min-width: 130px; }
  .customer-account-field-grid--three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .customer-account-field-grid--three .customer-account-field:last-child { grid-column: 1/-1; }
}
@media (width<=700px) {
  .customer-account-page .customer-account-shell { padding-inline: 12px; padding-top: max(12px,env(safe-area-inset-top)); }
  .customer-account-topbar { min-height: 58px; margin-bottom: var(--space-3); padding: 9px 11px; border-radius: 12px; }
  .customer-account-brand { width: min(170px,47vw); }
  .customer-account-topbar__actions { gap: var(--space-2); }
  .customer-account-topbar__actions a { font-size: var(--font-size-10); }
  .customer-account-back { min-height: 34px; padding-inline: 9px; }
  .customer-account-sidebar { display: grid; grid-template-columns: 1fr; gap: 10px; border-radius: 12px; box-shadow: none; }
  .customer-account-summary { grid-row: auto; padding: 0 0 10px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  html[dir="rtl"] .customer-account-summary { padding: 0 0 10px; }
  .customer-account-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; scroll-snap-type: inline proximity; }
  .customer-account-nav a { flex: 0 0 145px; min-height: 55px; padding: 8px 9px; scroll-snap-align: start; }
  .customer-account-nav a small { display: block; }
  .customer-account-sidebar__footer { grid-column: auto; grid-template-columns: 1fr; }
  .customer-account-logout { width: 100%; min-width: 0; }
  .customer-account-heading h1 { font-size: var(--font-size-26); }
  .customer-account-panel { padding: 15px; border-radius: 12px; box-shadow: none; }
  .customer-account-section-head--action { align-items: stretch; flex-direction: column; }
  .customer-account-add { align-self: flex-start; }
  .customer-account-field-grid,.customer-account-field-grid--three,.customer-identity-grid,.customer-location-list { grid-template-columns: 1fr; }
  .customer-account-field-grid--three .customer-account-field:last-child { grid-column: auto; }
  .customer-identity-card { min-height: 0; }
  .customer-location-form,.customer-account-inline-form { padding: 14px; }
  .customer-location-form__actions,.customer-account-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .customer-account-profile .customer-account-form-actions { grid-template-columns: 1fr; }
  .customer-location-form__actions .customer-auth-primary,.customer-location-form__actions .customer-auth-secondary,.customer-account-form-actions .customer-auth-primary,.customer-account-form-actions .customer-auth-secondary { min-width: 0; width: 100%; }
  .customer-security-row { align-items: stretch; flex-direction: column; }
  .customer-security-row .customer-account-add { width: 100%; }
  .customer-account-danger { grid-template-columns: 1fr; }
  .customer-account-danger__side { justify-items: stretch; min-width: 0; }
  .customer-account-danger__action { width: 100%; }
}
@media (width<=440px) {
  .customer-account-topbar { align-items: flex-start; }
  .customer-account-topbar__actions { flex-direction: column-reverse; align-items: flex-end; gap: 3px; }
  .customer-account-back { min-height: auto; padding: 0; border: 0; }
  .customer-account-panel { padding: 14px; }
  .customer-account-section-head { gap: 10px; }
  .customer-account-section-head h2 { font-size: var(--font-size-16); }
  .customer-account-inline-form__head { gap: 9px; }
  .customer-location-form__actions,.customer-account-form-actions { grid-template-columns: 1fr; }
  .customer-order-card__head { gap: var(--space-2); }
  .customer-order-card__meta { gap: 6px; }
  .customer-order-card__meta span + span::before { margin-inline-end: 6px; }
  .customer-order-items > div { gap: var(--space-2); }
  .customer-account-switch { padding: 13px; }
}

/* 348A. Public product-rating summary.
   Cards expose a compact, read-only trust signal; the product-page variant links
   to the full ratings/reviews section. Rating input remains exclusive to the
   authenticated feedback editor. */
.product-rating-summary{
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:max-content;
  max-width:100%;
  color:var(--text-meta);
  font-size:var(--type-meta);
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
}
.product-rating-summary[hidden]{display:none}
.product-rating-summary__star{color:var(--aqua-dark);font-family:Arial,sans-serif;font-size:1.18em;line-height:1}
.product-rating-summary b{color:var(--navy);font-family:Manrope,Arial,sans-serif;font-size:1em;font-weight:800;font-variant-numeric:tabular-nums}
.product-rating-summary--card{pointer-events:none;user-select:none;flex:0 0 auto}
.product-card__meta-row .product-rating-summary--card{font-size:var(--type-meta);white-space:nowrap}
.product-rating-summary--header{margin:-2px 0 13px;color:var(--text-meta);font-size:var(--font-size-13);font-weight:700}
.product-rating-summary--header:hover{color:var(--aqua-dark);text-decoration:underline;text-underline-offset:3px}
.product-rating-summary--header:focus-visible{outline:2px solid var(--aqua-dark);outline-offset:4px;border-radius:3px}
.product-rating-summary--header.is-empty{color:var(--text-meta);font-weight:600;text-decoration:none}
.product-rating-summary__separator{color:#a7b4b8}