/* Sama’ati design system, ported from the Claude Design file (design-brief/design-standalone.html). */
/* ========== Design tokens ========== */
:root{
  --c-brand:#326EFF;
  --c-primary:#2A5FE6;
  --c-primary-hover:#1C47B8;
  --c-accent:#03A9FF;
  --c-ink:#0B1A3A;
  --c-muted:#46557A;
  --c-tint:#EEF3FF;
  --c-line:#DCE4F5;
  --c-line-strong:#C9D5EE;
  --c-white:#FFFFFF;
  --c-disabled:#E6EBF5;
  --gradient-brand:linear-gradient(90deg,#326EFF 0%,#03A9FF 100%);

  --font-latin:'Sofia Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-arabic:'Noto Sans Arabic','Sofia Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:var(--font-latin);

  --fs-xs:15px;
  --fs-sm:16px;
  --fs-base:18px;
  --fs-md:20px;
  --fs-lg:24px;
  --fs-xl:clamp(28px,3vw,36px);
  --fs-2xl:clamp(32px,4vw,46px);
  --fs-3xl:clamp(38px,5.6vw,66px);
  --lh-tight:1.12;
  --lh-snug:1.3;
  --lh-body:1.6;

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;

  --r-sm:12px;--r-md:16px;--r-lg:20px;--r-xl:28px;--r-pill:999px;

  --shadow-sm:0 1px 2px rgba(11,26,58,.05),0 2px 8px rgba(11,26,58,.05);
  --shadow-md:0 4px 12px rgba(11,26,58,.06),0 14px 32px rgba(11,26,58,.08);
  --shadow-lg:0 18px 48px rgba(11,26,58,.16);

  --container:1240px;
  --gutter:24px;
  --header-h:84px;
  --tap:48px;
  --dir:1;
  --ease:cubic-bezier(.2,.7,.2,1);
}
[dir="rtl"]{--dir:-1}
html[lang="ar"]{--font-body:var(--font-arabic);--lh-body:1.8}

/* ========== Base ========== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--c-ink);background:var(--c-white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;line-height:var(--lh-tight);font-weight:700;letter-spacing:-.015em;text-wrap:balance}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0;line-height:1.35}
p{margin:0;text-wrap:pretty}
a{color:var(--c-primary);text-underline-offset:3px}
a:hover{color:var(--c-primary-hover)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible{outline-color:var(--c-white)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;inset-inline-start:var(--sp-4);inset-block-start:-100px;z-index:200;background:var(--c-ink);color:var(--c-white);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);font-weight:700}
.skip-link:focus{inset-block-start:var(--sp-3);color:var(--c-white)}
html[lang="ar"] .l-en,html[lang="en"] .l-ar{display:none!important}
bdi.ltr{direction:ltr;unicode-bidi:isolate}

.icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon--lg{width:28px;height:28px}
[dir="rtl"] .icon--flip{transform:scaleX(-1)}

.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-9)}
.section--tint{background:var(--c-tint)}
.section--tight{padding-block:var(--sp-7)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;margin-block-end:var(--sp-6)}
.section-head__text{display:grid;gap:var(--sp-3);max-width:680px}
.section-head--center{justify-content:center;text-align:center}
.section-head--center .section-head__text{justify-items:center}
.h1{font-size:var(--fs-2xl)}
.h2{font-size:var(--fs-xl)}
.h3{font-size:var(--fs-md);line-height:var(--lh-snug)}
.lead{font-size:var(--fs-md);color:var(--c-muted);line-height:1.55}
.muted{color:var(--c-muted)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);align-self:start;justify-self:start;background:var(--c-tint);color:var(--c-primary);font-weight:700;font-size:var(--fs-sm);padding:6px 14px;border-radius:var(--r-pill)}
.section--tint .eyebrow{background:var(--c-white)}
.section-head--center .eyebrow{justify-self:center}
.link-arrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:700;color:var(--c-primary);text-decoration:none;min-height:var(--tap)}
.link-arrow:hover{color:var(--c-primary-hover);text-decoration:underline}
.prose{display:grid;gap:var(--sp-4);max-width:72ch}
.prose ul,.prose ol{margin:0;padding-inline-start:1.3em;display:grid;gap:var(--sp-2)}
.placeholder-text{color:var(--c-muted);font-style:italic}
html[lang="ar"] .placeholder-text{font-style:normal}

/* ========== Buttons ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 28px;border-radius:var(--r-pill);border:2px solid transparent;font-family:var(--font-body);font-size:var(--fs-base);font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--c-primary);color:var(--c-white)}
.btn--primary:hover{background:var(--c-primary-hover);color:var(--c-white)}
.btn--outline{background:var(--c-white);color:var(--c-primary);border-color:var(--c-line-strong)}
.btn--outline:hover{background:var(--c-tint);border-color:var(--c-primary);color:var(--c-primary-hover)}
.btn--white{background:var(--c-white);color:var(--c-primary)}
.btn--white:hover{background:var(--c-tint);color:var(--c-primary-hover)}
.btn--ghost-white{background:transparent;color:var(--c-white);border-color:rgba(255,255,255,.7)}
.btn--ghost-white:hover{background:rgba(255,255,255,.12);color:var(--c-white)}
.btn--lg{min-height:60px;padding-inline:32px;font-size:var(--fs-md)}
.btn--sm{min-height:var(--tap);padding:10px 20px;font-size:var(--fs-sm)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--c-disabled);color:var(--c-muted);border-color:transparent;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.label-short{display:none}

/* ========== Header ========== */
.site-header{position:sticky;inset-block-start:0;z-index:50;background:rgba(255,255,255,.97);border-block-end:1px solid var(--c-line);backdrop-filter:saturate(1.4) blur(8px)}
.site-header__inner{display:flex;align-items:center;gap:var(--sp-4);min-height:var(--header-h)}
.site-logo{display:block;flex:none;border-radius:8px}
.site-logo img{height:48px;width:auto}
.primary-nav{flex:1;min-width:0}
.primary-nav__list{display:flex;justify-content:center;gap:2px;list-style:none;margin:0;padding:0}
.primary-nav__link{display:flex;align-items:center;min-height:var(--tap);padding-inline:12px;border-radius:var(--r-pill);color:var(--c-ink);font-size:17px;font-weight:500;text-decoration:none;white-space:nowrap}
.primary-nav__link:hover{background:var(--c-tint);color:var(--c-primary)}
.primary-nav__link[aria-current="page"]{color:var(--c-primary);font-weight:700;background:var(--c-tint)}
.header-actions{display:flex;align-items:center;gap:var(--sp-1);margin-inline-start:auto}
.lang-switch{display:inline-flex;align-items:center;border:1px solid var(--c-line-strong);border-radius:var(--r-pill);padding:2px;margin-inline-end:var(--sp-2)}
.lang-switch__link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:52px;padding-inline:12px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:700;color:var(--c-ink);text-decoration:none}
.lang-switch__link:hover{background:var(--c-tint);color:var(--c-primary)}
.lang-switch__link[aria-current="true"]{background:var(--c-primary);color:var(--c-white)}
/* English pages use a system Arabic font for this one label, so the Arabic web font isn't downloaded. */
html:not([lang="ar"]) .lang-switch__link--ar{font-family:system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif}
html[lang="ar"] .lang-switch__link--ar{font-family:var(--font-arabic)}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;border:0;background:transparent;color:var(--c-ink);cursor:pointer;text-decoration:none}
.icon-btn:hover{background:var(--c-tint);color:var(--c-primary)}
.icon-btn .icon{width:26px;height:26px}
.cart-count{position:absolute;inset-block-start:0;inset-inline-end:-2px;min-width:24px;height:24px;padding-inline:6px;border-radius:var(--r-pill);background:var(--c-primary);color:var(--c-white);border:2px solid var(--c-white);font-size:14px;font-weight:700;line-height:20px;text-align:center}
.menu-toggle{display:none}

/* Mobile drawer */
.drawer-backdrop{position:fixed;inset:0;z-index:90;background:rgba(11,26,58,.45);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.drawer-backdrop.is-open{opacity:1;visibility:visible}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:100;width:min(380px,88%);display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-4) var(--sp-5) var(--sp-6);background:var(--c-white);box-shadow:var(--shadow-lg);overflow-y:auto;transform:translateX(calc(100% * var(--dir)));visibility:hidden;transition:transform .3s var(--ease),visibility .3s}
.drawer.is-open{transform:none;visibility:visible}
.drawer__head{display:flex;align-items:center;justify-content:space-between}
.drawer__head img{height:40px;width:auto}
.drawer__nav ul{list-style:none;margin:0;padding:0}
.drawer__nav a{display:flex;align-items:center;justify-content:space-between;min-height:58px;border-block-end:1px solid var(--c-line);color:var(--c-ink);font-size:var(--fs-md);font-weight:700;text-decoration:none}
.drawer__nav a:hover,.drawer__nav a[aria-current="page"]{color:var(--c-primary)}
.drawer__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.drawer__account{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);color:var(--c-ink);font-weight:700;text-decoration:none}

/* ========== Footer ========== */
.site-footer{background:var(--c-tint);padding-block:var(--sp-8) var(--sp-5)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--sp-6)}
.footer-brand{display:grid;gap:var(--sp-4);align-content:start;max-width:340px}
.footer-brand img{height:56px;width:auto}
.footer-brand p{color:var(--c-muted)}
.footer-col h2{font-size:var(--fs-base);margin-block-end:var(--sp-2)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col a{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);color:var(--c-ink);text-decoration:none}
.footer-col a:hover{color:var(--c-primary);text-decoration:underline}
.footer-col a .icon{color:var(--c-primary)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-block-start:var(--sp-7);padding-block-start:var(--sp-5);border-block-start:1px solid var(--c-line-strong);font-size:var(--fs-sm);color:var(--c-muted)}

/* Floating WhatsApp */
.wa-float{position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:80;display:inline-flex;align-items:center;gap:10px;min-height:60px;padding-inline:20px 24px;border-radius:var(--r-pill);background:var(--c-primary);color:var(--c-white);font-weight:700;text-decoration:none;box-shadow:var(--shadow-lg)}
.wa-float:hover{background:var(--c-primary-hover);color:var(--c-white)}
.wa-float .icon{width:28px;height:28px}

/* ========== Shared pieces ========== */
.ph{position:relative;display:grid;place-items:center;align-content:center;gap:var(--sp-2);aspect-ratio:1/1;width:100%;border-radius:var(--r-md);color:var(--c-primary);background-color:var(--c-tint);background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(50,110,255,.05) 14px 15px);overflow:hidden;text-align:center;padding:var(--sp-3)}
.ph--4x3{aspect-ratio:4/3}
.ph--16x9{aspect-ratio:16/9}
.ph .icon{width:44px;height:44px;stroke-width:1.6}
.ph__label{font-size:var(--fs-xs);font-weight:500;color:var(--c-muted);line-height:1.35}

.wave{display:block;width:100%;height:auto;overflow:visible}
.wave path{fill:none;stroke:url(#wave-gradient);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.wave--animated path{stroke-dasharray:1;stroke-dashoffset:1;animation:wave-draw 3.2s var(--ease) infinite}
@keyframes wave-draw{0%{stroke-dashoffset:1}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.wave--white path{stroke:rgba(255,255,255,.55)}

.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0;padding:0;font-size:var(--fs-sm);color:var(--c-muted)}
.breadcrumb li+li::before{content:"/";margin-inline-end:var(--sp-2);color:var(--c-line-strong)}
.breadcrumb a{color:var(--c-primary)}

.check-list{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);list-style:none;margin:0;padding:0}
.check-list li{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:500}
.check-list .icon{color:var(--c-primary)}
.check-list--stack{flex-direction:column}
.check-list--stack li{align-items:start}

.badge{display:inline-flex;align-items:center;min-height:30px;padding-inline:12px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;line-height:1}
.badge--sale{background:var(--c-accent);color:var(--c-ink)}
.badge--out{background:var(--c-ink);color:var(--c-white)}
.badge--consult{background:var(--c-white);color:var(--c-primary);box-shadow:inset 0 0 0 1px var(--c-line-strong)}

/* Page header */
.page-header{padding-block:var(--sp-7) var(--sp-7);background:var(--c-tint)}
.page-header__inner{display:grid;gap:var(--sp-4);max-width:760px}
.page-header--center .page-header__inner{margin-inline:auto;text-align:center;justify-items:center}

/* ========== Hero ========== */
.hero{padding-block:var(--sp-8) var(--sp-9);background:radial-gradient(900px 520px at 88% 0%,var(--c-tint),transparent 70%)}
[dir="rtl"] .hero{background:radial-gradient(900px 520px at 12% 0%,var(--c-tint),transparent 70%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-8);align-items:center}
.hero__content{display:grid;gap:var(--sp-5)}
.hero__title{font-size:var(--fs-3xl);letter-spacing:-.025em}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-block-start:var(--sp-2)}
.hero__visual{position:relative}
.hero__panel{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-xl);background-color:var(--c-tint);background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(50,110,255,.05) 14px 15px);overflow:hidden}
.hero__panel .wave{width:78%}
.hero__panel .ph__label{position:absolute;inset-block-end:var(--sp-4);inset-inline-start:var(--sp-5)}
.hero__card{position:absolute;inset-block-end:-28px;inset-inline-start:-28px;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);background:var(--c-white);border-radius:var(--r-lg);box-shadow:var(--shadow-md);color:var(--c-ink);text-decoration:none}
.hero__card:hover{color:var(--c-ink);box-shadow:var(--shadow-lg)}
.hero__card-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--c-primary);color:var(--c-white)}
.hero__card strong{display:block}
.hero__card span{color:var(--c-muted)}

/* ========== Category cards ========== */
.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5)}
.category-card{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-3) var(--sp-3) var(--sp-5);background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);color:var(--c-ink);text-decoration:none;transition:box-shadow .2s ease,transform .2s ease}
.category-card:hover{color:var(--c-ink);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.category-card__body{display:grid;gap:var(--sp-2);padding-inline:var(--sp-3)}
.category-card__body p{color:var(--c-muted);font-size:17px}
.category-card__link{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--c-primary);font-weight:700;margin-block-start:var(--sp-1)}

/* ========== Product cards ========== */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);list-style:none;margin:0;padding:0}
.product-card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.product-card__media{display:block;padding:var(--sp-3) var(--sp-3) 0;border-radius:var(--r-lg)}
.product-card__badge{position:absolute;inset-block-start:22px;inset-inline-start:22px;z-index:1}
.product-card__body{display:flex;flex-direction:column;gap:6px;flex:1;padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.product-card__cat{font-size:var(--fs-xs);font-weight:500;color:var(--c-muted)}
.product-card__title{font-size:var(--fs-base);line-height:var(--lh-snug);letter-spacing:0}
.product-card__title a{color:var(--c-ink);text-decoration:none}
.product-card__title a:hover{color:var(--c-primary);text-decoration:underline}
.product-card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2);font-size:var(--fs-md);font-weight:700;margin-block-end:var(--sp-3)}
.product-card__price del{font-size:17px;font-weight:400;color:var(--c-muted)}
.product-card__price ins{text-decoration:none}
.product-card__price--consult{font-size:var(--fs-base);color:var(--c-primary)}
.product-card__note{font-size:var(--fs-sm);font-weight:500;color:var(--c-muted);margin-block-start:-6px;margin-block-end:var(--sp-3)}
.product-card__actions{margin-block-start:auto}
.product-card__actions .btn{width:100%;min-height:52px;padding-inline:var(--sp-4);font-size:17px}
.product-card--out-of-stock .ph{opacity:.55}

/* ========== Steps & features ========== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-5);list-style:none;margin:0;padding:0}
.step{display:grid;gap:var(--sp-3);align-content:start;padding:var(--sp-6);background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg)}
.step__num{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--c-primary);color:var(--c-white);font-size:22px;font-weight:700}
.step p{color:var(--c-muted)}
.steps--compact{grid-template-columns:1fr;gap:0}
.steps--compact .step{grid-template-columns:44px 1fr;column-gap:var(--sp-4);row-gap:2px;padding:var(--sp-3) 0;border:0;border-radius:0;background:none}
.steps--compact .step__num{width:44px;height:44px;font-size:19px;grid-row:span 2}
.steps--compact .step h3{font-size:var(--fs-base);align-self:end}
.steps--compact .step p{font-size:17px}
.steps-cta{display:flex;justify-content:center;margin-block-start:var(--sp-6)}

.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6)}
.feature-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature{display:grid;gap:var(--sp-3);align-content:start}
.feature__icon{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--c-tint);color:var(--c-primary)}
.section--tint .feature__icon{background:var(--c-white)}
.feature p{color:var(--c-muted)}

/* CTA band */
.cta-band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6);align-items:center;padding:var(--sp-8);border-radius:var(--r-xl);background:var(--c-primary);color:var(--c-white);overflow:hidden}
.cta-band__text{position:relative;display:grid;gap:var(--sp-3);max-width:620px}
.cta-band__text p{font-size:var(--fs-md)}
.cta-band__actions{position:relative;display:grid;gap:var(--sp-2);justify-items:center}
.cta-band__number{font-weight:700;color:var(--c-white)}
.cta-band__wave{position:absolute;inset-inline-end:-40px;inset-block-end:-10px;width:520px;opacity:.9;pointer-events:none}

/* ========== Shop archive ========== */
.chip-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;min-height:var(--tap);padding-inline:20px;border-radius:var(--r-pill);border:1px solid var(--c-line-strong);background:var(--c-white);color:var(--c-ink);font-weight:500;text-decoration:none;white-space:nowrap}
.chip:hover{border-color:var(--c-primary);color:var(--c-primary)}
.chip[aria-current="page"]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-white);font-weight:700}
.shop-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-block:var(--sp-6) var(--sp-5)}
.result-count{color:var(--c-muted);font-weight:500}
.sort-field{display:flex;align-items:center;gap:var(--sp-3)}
.sort-field label{font-weight:700}
.pagination{margin-block-start:var(--sp-7)}
.pagination ul{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.pagination a,.pagination span{display:grid;place-items:center;min-width:var(--tap);height:var(--tap);padding-inline:var(--sp-3);border-radius:var(--r-pill);border:1px solid var(--c-line-strong);color:var(--c-ink);font-weight:700;text-decoration:none}
.pagination a:hover{border-color:var(--c-primary);color:var(--c-primary)}
.pagination [aria-current="page"]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-white)}

/* ========== Forms ========== */
.field{display:grid;gap:var(--sp-2);align-content:start}
.field label,.field__label{font-weight:700;font-size:17px}
.field__optional{font-weight:400;color:var(--c-muted)}
.field__req{color:var(--c-primary)}
.field__hint{font-size:var(--fs-sm);color:var(--c-muted)}
.input,.textarea,.select select{width:100%;min-height:54px;padding:12px 16px;border:1.5px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-white);font-size:var(--fs-base);color:var(--c-ink);transition:border-color .15s ease}
.textarea{min-height:120px;resize:vertical;line-height:1.5}
.input::placeholder,.textarea::placeholder{color:#5D6B8E}
.input:hover,.textarea:hover,.select select:hover{border-color:#9FB2DA}
.input:focus,.textarea:focus,.select select:focus{border-color:var(--c-primary);outline:3px solid rgba(42,95,230,.25);outline-offset:0}
.select{position:relative}
.select select{appearance:none;padding-inline-end:48px;cursor:pointer}
.select .icon{position:absolute;inset-inline-end:16px;inset-block-start:50%;margin-block-start:-11px;pointer-events:none;color:var(--c-primary)}
.select--inline select{min-width:240px;border-radius:var(--r-pill)}
.input-group{display:flex}
.input-group__prefix{display:flex;align-items:center;padding-inline:16px;border:1.5px solid var(--c-line-strong);border-inline-end:0;border-start-start-radius:var(--r-md);border-end-start-radius:var(--r-md);background:var(--c-tint);font-weight:700}
.input-group .input{border-start-start-radius:0;border-end-start-radius:0}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.field--full{grid-column:1/-1}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;margin-block-end:var(--sp-5)}

/* ========== Product page ========== */
.product-page{padding-block:var(--sp-6) var(--sp-9)}
.product-page .breadcrumb{margin-block-end:var(--sp-6)}
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.gallery{display:grid;gap:var(--sp-3);position:sticky;inset-block-start:calc(var(--header-h) + var(--sp-5))}
.gallery__main{border-radius:var(--r-xl)}
.gallery__main .ph{border-radius:var(--r-xl)}
.gallery__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);list-style:none;margin:0;padding:0}
.gallery__thumb{display:block;width:100%;padding:0;border:2px solid transparent;border-radius:var(--r-md);background:none;cursor:pointer}
.gallery__thumb .ph{border-radius:13px;padding:var(--sp-2)}
.gallery__thumb .ph .icon{width:28px;height:28px}
.gallery__thumb[aria-current="true"]{border-color:var(--c-primary)}
.product-summary{display:grid;gap:var(--sp-5)}
.product-summary__head{display:grid;gap:var(--sp-3)}
.product-summary__cat{font-weight:700;color:var(--c-primary);text-decoration:none;justify-self:start}
.product-summary__title{font-size:var(--fs-xl)}
.product-summary__sub{color:var(--c-muted);font-weight:500}
.product-summary__price{font-size:30px;font-weight:700}
.product-summary__price--consult{color:var(--c-primary);font-size:var(--fs-lg)}
.product-summary__price small{display:block;font-size:var(--fs-base);font-weight:500;color:var(--c-muted);margin-block-start:2px}
.stock{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:700}
.stock .icon{color:var(--c-primary)}
.cart-form{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.cart-form .btn{flex:1;min-width:200px;min-height:56px}
.qty{display:inline-flex;align-items:center;height:56px;border:1.5px solid var(--c-line-strong);border-radius:var(--r-pill);background:var(--c-white)}
.qty__btn{display:grid;place-items:center;width:52px;height:100%;border:0;border-radius:var(--r-pill);background:none;color:var(--c-primary);cursor:pointer}
.qty__btn:hover{background:var(--c-tint)}
.qty__input{width:52px;height:100%;border:0;background:none;text-align:center;font-size:var(--fs-base);font-weight:700;-moz-appearance:textfield}
.qty__input::-webkit-outer-spin-button,.qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty--sm{height:var(--tap)}
.qty--sm .qty__btn{width:var(--tap)}
.qty--sm .qty__input{width:40px}
.reassure{display:grid;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);background:var(--c-tint)}
.reassure__item{display:flex;align-items:center;gap:var(--sp-3);font-weight:500}
.reassure__item .icon{color:var(--c-primary)}
.product-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);padding-block-start:var(--sp-4);border-block-start:1px solid var(--c-line);font-size:var(--fs-sm);color:var(--c-muted)}
.product-meta strong{color:var(--c-ink)}
.consult-note{display:flex;gap:var(--sp-3);align-items:start;font-size:17px;color:var(--c-muted)}
.consult-note .icon{color:var(--c-primary);margin-block-start:3px}
.explainer{padding:var(--sp-4) var(--sp-5);border:1px solid var(--c-line);border-radius:var(--r-lg)}
.explainer h2{font-size:var(--fs-base);margin-block-end:var(--sp-1)}
.offer-card{display:grid;gap:var(--sp-3);padding:var(--sp-5);border-radius:var(--r-lg);background:var(--c-tint)}
.offer-card>*{min-width:0}
.offer-card h2{font-size:var(--fs-md)}
.offer-card p{color:var(--c-muted)}
.offer-card .btn{padding-inline:var(--sp-5);text-align:center}
.help-box{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);padding:var(--sp-5);border-radius:var(--r-lg);background:var(--c-tint)}
.help-box__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--c-white);color:var(--c-primary);flex:none}
.help-box__text{flex:1;min-width:200px;display:grid;gap:2px}
.help-box__text h2{font-size:var(--fs-md)}
.help-box__text p{color:var(--c-muted)}

.tabs{margin-block-start:var(--sp-9)}
.tabs__list{display:flex;gap:var(--sp-2);border-block-end:1px solid var(--c-line);overflow-x:auto}
.tabs__tab{min-height:58px;padding-inline:var(--sp-5);border:0;border-block-end:3px solid transparent;margin-block-end:-1px;background:none;color:var(--c-muted);font-size:var(--fs-base);font-weight:700;cursor:pointer;white-space:nowrap}
.tabs__tab:hover{color:var(--c-ink)}
.tabs__tab[aria-selected="true"]{color:var(--c-ink);border-block-end-color:var(--c-primary)}
.tabs__panel{padding-block:var(--sp-6)}
.spec-table{width:100%;max-width:780px;border-collapse:collapse}
.spec-table th,.spec-table td{padding:16px;text-align:start;border-block-end:1px solid var(--c-line);vertical-align:top}
.spec-table th{width:40%;font-weight:700}
.spec-table tr:nth-child(odd){background:#F7F9FE}
.related{margin-block-start:var(--sp-8)}

/* ========== Hearing tests ========== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:center}
.split--top{align-items:start}
.card{padding:var(--sp-6);background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg)}
.card--shadow{box-shadow:var(--shadow-sm)}
.faq{display:grid;gap:var(--sp-3);max-width:860px;margin-inline:auto}
.faq-item{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:68px;padding:var(--sp-4) var(--sp-5);font-size:var(--fs-md);font-weight:700;cursor:pointer;list-style:none;border-radius:var(--r-lg)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .icon{color:var(--c-primary);transition:transform .2s ease}
.faq-item[open] summary .icon{transform:rotate(180deg)}
.faq-item__body{padding:0 var(--sp-5) var(--sp-5);color:var(--c-muted)}
.booking{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6);align-items:center}

/* ========== Cart ========== */
.cart-page,.checkout-page{padding-block:var(--sp-7) var(--sp-9)}
.cart-page h1,.checkout-page h1{margin-block-end:var(--sp-6)}
.cart-layout,.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--sp-7);align-items:start}
.cart-head{display:grid;grid-template-columns:96px minmax(0,1fr) 110px 150px 110px 48px;gap:var(--sp-4);padding-block-end:var(--sp-3);border-block-end:1px solid var(--c-line);font-size:var(--fs-sm);font-weight:700;color:var(--c-muted)}
.cart-head span:first-child{grid-column:span 2}
.cart-items{list-style:none;margin:0;padding:0}
.cart-item{display:grid;grid-template-columns:96px minmax(0,1fr) 110px 150px 110px 48px;grid-template-areas:"img name price qty sub remove";gap:var(--sp-4);align-items:center;padding-block:var(--sp-5);border-block-end:1px solid var(--c-line)}
.cart-item__img{grid-area:img}
.cart-item__img .ph{padding:var(--sp-2)}
.cart-item__img .ph .icon{width:32px;height:32px}
.cart-item__name{grid-area:name;display:grid;gap:2px}
.cart-item__name a{color:var(--c-ink);font-weight:700;text-decoration:none}
.cart-item__name a:hover{color:var(--c-primary);text-decoration:underline}
.cart-item__name span{font-size:var(--fs-sm);color:var(--c-muted)}
.cart-item__price{grid-area:price}
.cart-item__qty{grid-area:qty}
.cart-item__sub{grid-area:sub;font-weight:700}
.cart-item__remove{grid-area:remove}
.cart-item__label{display:none;font-size:var(--fs-sm);color:var(--c-muted);font-weight:500}
.cart-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:end;justify-content:space-between;margin-block-start:var(--sp-5)}
.coupon{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:end}
.coupon .field{min-width:220px}
.summary-card{position:sticky;inset-block-start:calc(var(--header-h) + var(--sp-5));display:grid;gap:var(--sp-4);padding:var(--sp-6);background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.summary-card h2{font-size:var(--fs-lg)}
.summary-rows{display:grid}
.summary-row{display:flex;justify-content:space-between;gap:var(--sp-4);padding-block:var(--sp-3);border-block-end:1px solid var(--c-line)}
.summary-row dt{color:var(--c-muted);font-weight:500}
.summary-row dd{margin:0;font-weight:700;text-align:end}
.summary-row--total{border-block-end:0;font-size:var(--fs-md)}
.summary-row--total dt{color:var(--c-ink);font-weight:700}
.summary-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding-block:var(--sp-3);border-block-end:1px solid var(--c-line)}
.summary-item .ph{padding:4px}
.summary-item .ph .icon{width:24px;height:24px}
.summary-item__name{font-weight:700;line-height:1.3}
.summary-item__name span{display:block;font-weight:500;font-size:var(--fs-sm);color:var(--c-muted)}
.summary-note{display:flex;gap:var(--sp-2);align-items:center;font-weight:500;font-size:17px}
.summary-note .icon{color:var(--c-primary)}
.empty-state{display:grid;justify-items:center;gap:var(--sp-4);text-align:center;max-width:560px;margin-inline:auto;padding-block:var(--sp-9)}
.empty-state__icon{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:var(--c-tint);color:var(--c-primary)}
.empty-state__icon .icon{width:48px;height:48px;stroke-width:1.7}
.empty-state p{color:var(--c-muted);font-size:var(--fs-md)}

/* Checkout */
.form-card{padding:var(--sp-6);background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg)}
.form-card h2{font-size:var(--fs-lg)}
.form-stack{display:grid;gap:var(--sp-5)}
.payment-method{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3);padding:var(--sp-4) var(--sp-5);border:2px solid var(--c-primary);border-radius:var(--r-md);background:var(--c-tint);cursor:pointer}
.payment-method input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--c-primary);grid-row:span 2}
.payment-method strong{font-size:var(--fs-base)}
.payment-method span{color:var(--c-muted);font-size:17px}
.legal{font-size:var(--fs-sm);color:var(--c-muted)}

/* Order received */
.thankyou{display:grid;justify-items:center;gap:var(--sp-4);text-align:center;padding-block:var(--sp-8) var(--sp-7)}
.thankyou__icon{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--c-primary);color:var(--c-white)}
.thankyou__icon .icon{width:48px;height:48px;stroke-width:2.4}
.thankyou .wave{width:200px}
.order-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0;border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-white);overflow:hidden}
.order-overview li{display:grid;gap:4px;padding:var(--sp-5)}
.order-overview li+li{border-inline-start:1px dashed var(--c-line-strong)}
.order-overview span{font-size:var(--fs-sm);color:var(--c-muted);font-weight:500}
.order-overview strong{font-size:var(--fs-md)}
.address{font-style:normal;line-height:1.7}

/* Contact / about */
.contact-list{display:grid;gap:var(--sp-3);list-style:none;margin:0;padding:0}
.contact-card{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-white);color:var(--c-ink);text-decoration:none}
a.contact-card:hover{border-color:var(--c-primary);color:var(--c-ink);box-shadow:var(--shadow-sm)}
.contact-card__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--c-tint);color:var(--c-primary);flex:none}
.contact-card__text{display:grid}
.contact-card__text span{color:var(--c-muted);font-size:var(--fs-sm);font-weight:500}
.contact-card__text strong{font-size:var(--fs-base)}

/* 404 */
.not-found{display:grid;justify-items:center;gap:var(--sp-5);text-align:center;max-width:640px;margin-inline:auto;padding-block:var(--sp-9)}
.not-found__code{font-size:clamp(80px,14vw,150px);font-weight:700;line-height:1;letter-spacing:-.04em;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.not-found .wave{width:260px}
.search-form{display:flex;gap:var(--sp-2);width:100%;max-width:480px}
.search-form .input{border-radius:var(--r-pill)}

/* ========== Responsive (container = site viewport) ========== */
/* 1190 rather than 1180: the Arabic nav needs ~730px, which only fits once the
   viewport (minus a 15px scrollbar) is 1187px or wider. */
@media (max-width:1190px){
  .primary-nav{display:none}
  .menu-toggle{display:inline-grid}
}
@media (max-width:1000px){
  .hero__grid,.product,.split,.cart-layout,.checkout-layout{grid-template-columns:minmax(0,1fr)}
  .hero__grid{gap:var(--sp-7)}
  .hero__card{inset-inline-start:var(--sp-4);inset-block-end:-24px}
  .gallery,.summary-card{position:static}
  .product-grid,.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-grid,.feature-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-band,.booking{grid-template-columns:minmax(0,1fr)}
  .cta-band__actions{justify-items:start}
  .order-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-overview li:nth-child(3){border-inline-start:0}
  .order-overview li:nth-child(n+3){border-block-start:1px dashed var(--c-line-strong)}
  .cart-head{display:none}
  .cart-item{grid-template-columns:84px minmax(0,1fr) auto;grid-template-areas:"img name remove" "img price price" "qty qty sub";row-gap:var(--sp-3)}
  .cart-item__label{display:inline}
  .cart-item__sub{text-align:end}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .site-header{--header-h:68px}
  .site-logo img{height:40px}
  .header-actions .lang-switch,.header-actions .account-link{display:none}
  .section{padding-block:var(--sp-8)}
  .hero{padding-block:var(--sp-6) var(--sp-8)}
  .category-grid,.feature-grid,.feature-grid--3,.form-grid{grid-template-columns:minmax(0,1fr)}
  .product-grid{gap:var(--sp-3)}
  .product-card__media{padding:var(--sp-2) var(--sp-2) 0}
  .product-card__body{padding:var(--sp-3) var(--sp-3) var(--sp-4)}
  .product-card__badge{inset-block-start:14px;inset-inline-start:14px}
  .product-card__title{font-size:17px}
  .product-card__price{font-size:var(--fs-base)}
  .product-card__price--consult{font-size:17px}
  .product-card__actions .btn{font-size:var(--fs-sm);padding-inline:var(--sp-2);gap:6px}
  .product-card__actions .btn .icon{width:18px;height:18px}
  .label-long{display:none}
  .label-short{display:inline}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .cta-band{padding:var(--sp-6) var(--sp-5)}
  .cta-band__actions .btn{width:100%}
  .cta-band__wave{width:320px;opacity:.6}
  .chip-list{flex-wrap:nowrap;overflow-x:auto;padding-block-end:var(--sp-2);margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
  .shop-toolbar{align-items:stretch;flex-direction:column}
  .sort-field{justify-content:space-between}
  .select--inline select{min-width:0}
  .hero__actions .btn,.btn-row .btn{flex:1 1 100%}
  .wa-float{width:60px;padding:0;justify-content:center;inset-block-end:16px;inset-inline-end:16px}
  .wa-float__label{display:none}
  .order-overview{grid-template-columns:minmax(0,1fr)}
  .order-overview li+li{border-inline-start:0;border-block-start:1px dashed var(--c-line-strong)}
  .form-card,.summary-card,.card{padding:var(--sp-5)}
  .tabs__tab{padding-inline:var(--sp-4)}
  .spec-table th,.spec-table td{padding:12px}
  .gallery__thumbs{gap:var(--sp-2)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .wave--animated path{animation:none;stroke-dashoffset:0}
  .product-card:hover,.category-card:hover{transform:none}
}