:root{--paper:#f6f2ea;--paper-deep:#ece4d6;--ink:#23201c;--soft:#6b6459;--leather:#8a5a2b;--line:#ded7c9;--white:#fffdf8;--serif:"Fraunces",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--gutter:clamp(1.15rem,4vw,4rem);--page-gutter:clamp(1.25rem,5vw,6rem);--header-h:76px}/* Two different insets, on purpose. --page-gutter is the page shell: the single left/right edge that the header, the primary nav, every main section and the footer align to, applied once by the shell rule in wide.css. --gutter stays the small component inset (the 440px menu drawer, the 760px article column) — widening that one would pad a drawer by 96px. There is no --max any more: a centred max-width is what made the hero float in the middle of a full-bleed header. */*,*:before,*:after{box-sizing:border-box}/* The header is sticky, so an anchor jump lands the target under it. Without this every footer "#" link looked like it did nothing on mobile, where the section padding is too small to absorb the bar. Height and offset share --header-h so they cannot drift apart again. */html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}body{-webkit-user-select:none;user-select:none}input,textarea,select,[contenteditable],.legal-content,.post__body{-webkit-user-select:text;user-select:text}body.menu-open{overflow:hidden}h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;margin:0}p{margin-top:0}a{color:inherit;text-decoration:none}img,video{display:block;width:100%;height:auto}button{font:inherit}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.7rem;font-weight:600}.section-title{font-size:clamp(2.3rem,5vw,4.7rem);max-width:12ch}.section-copy{color:var(--soft);max-width:54ch}.site-header{position:sticky;top:0;z-index:30;height:var(--header-h);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.site-header__inner{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.site-logo{font:600 clamp(1.35rem,2vw,1.8rem) var(--serif);letter-spacing:.12em}.site-logo__mark{display:none;width:auto}.menu-toggle{border:0;background:none;padding:.5rem 0;display:flex;align-items:center;gap:.6rem;cursor:pointer}.menu-toggle__lines{display:flex;flex-direction:column;gap:5px;width:22px}.menu-toggle__lines span{height:1px;background:var(--ink)}.site-header__actions{justify-self:end;display:flex;align-items:center;gap:1.5rem;font-size:.85rem}.site-header__actions .config-link{border-bottom:1px solid var(--ink)}/* The open menu is a modal drawer, so it sits above the cookie banner (legal.css, 1000) and below only the cookie settings dialog (1010). At 40/50 the banner covered the bottom of the drawer on a first visit -- the language links and the sign-in link were visible but every click landed on the banner. The banner is back in front the moment the menu closes. */.menu-backdrop{position:fixed;inset:0;background:#17130e66;backdrop-filter:blur(4px);z-index:1004}.menu-backdrop[hidden],.menu-overlay[hidden]{display:none}.menu-overlay{position:fixed;inset:0 auto 0 0;width:min(440px,100%);padding:0 var(--gutter) 2rem;background:var(--paper);z-index:1005;display:flex;flex-direction:column}.menu-overlay__bar{height:76px;display:flex;align-items:center;justify-content:flex-end}.menu-close{border:0;background:none;font-size:2rem}.menu-overlay__nav{display:flex;flex-direction:column;flex:1}.menu-overlay__primary,.menu-overlay__secondary{list-style:none;padding:0;margin:0}.menu-overlay__primary{display:flex;flex-direction:column;gap:clamp(.7rem,2.2vh,1.4rem)}.menu-overlay__primary a{font:500 clamp(2rem,6vw,3.4rem) var(--serif);line-height:1.25}.menu-overlay__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:end;gap:2rem}.menu-overlay__secondary{color:var(--soft);font-size:.85rem}
.hero{padding-block:clamp(3rem,7vw,7rem);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,7rem);align-items:center}.hero__copy{position:relative;z-index:2}.hero__title{font-size:clamp(3.6rem,7vw,7rem);letter-spacing:-.035em;max-width:9ch}.hero__lead{font-size:clamp(1rem,1.5vw,1.25rem);color:var(--soft);max-width:44ch;margin:1.7rem 0 2rem}.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem}.button{display:inline-flex;justify-content:center;align-items:center;padding:.85rem 1.4rem;border:1px solid var(--ink);font-size:.85rem}.button--dark{background:var(--ink);color:var(--paper)}.button--light{background:transparent}.hero__visual{position:relative;padding:clamp(1rem,3vw,2.4rem);background:var(--paper-deep)}.hero__visual img{aspect-ratio:4/5;object-fit:cover}.hero__note{position:absolute;right:0;bottom:-2.2rem;background:var(--paper);border:1px solid var(--line);padding:1rem 1.2rem;font:500 1rem var(--serif);max-width:220px}.trust-strip{border-block:1px solid var(--line)}.trust-strip__inner{padding-block:1rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;text-align:center}.home-section{padding-block:clamp(4rem,9vw,8rem)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:clamp(2rem,5vw,4rem)}.families{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.family-card{position:relative;min-height:480px;overflow:hidden;background:var(--paper-deep)}.family-card img{height:100%;object-fit:cover;filter:brightness(.72)}.family-card__body{position:absolute;inset:auto 0 0;padding:1.5rem;color:white;background:linear-gradient(transparent,#17130ed9)}.family-card h3{font-size:clamp(2rem,4vw,3.2rem)}.family-card p{margin:.45rem 0 0;color:#ffffffc9}.process{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.process article{padding:2rem 2rem 2rem 0;border-bottom:1px solid var(--line)}.process article+article{padding-left:2rem;border-left:1px solid var(--line)}.process span{color:var(--leather);font:500 1.4rem var(--serif)}.process h3{font-size:1.7rem;margin:.8rem 0}.process p{color:var(--soft);margin:0}.feature{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:var(--paper)}.feature__visual img{height:100%;object-fit:cover;filter:sepia(.2) brightness(.7)}.feature__copy{padding:clamp(3rem,7vw,7rem);align-self:center}.feature__copy h2{font-size:clamp(2.6rem,5vw,5rem);max-width:10ch}.feature__copy p{color:#f6f2eab8;max-width:46ch;margin:1.5rem 0}.feature__list{list-style:none;padding:0;border-top:1px solid #ffffff2b}.feature__list li{padding:.8rem 0;border-bottom:1px solid #ffffff2b}.cta-band{margin:0 var(--page-gutter) clamp(4rem,8vw,7rem);padding:clamp(3rem,7vw,6rem);background:var(--leather);color:white;display:flex;justify-content:space-between;align-items:center;gap:2rem}.cta-band h2{font-size:clamp(2.4rem,5vw,5rem);max-width:11ch}.cta-band .button{border-color:white;color:white}
.products{padding-block:clamp(3rem,7vw,6rem)}.products__head{display:flex;justify-content:space-between;align-items:end;margin-bottom:2rem}.products__title{font-size:clamp(3rem,7vw,6rem)}.products__intro{color:var(--soft);max-width:40ch}.category-nav{overflow:auto;border-block:1px solid var(--line);margin-bottom:1.2rem}.category-nav__list{list-style:none;padding:0;margin:0;display:flex;gap:2rem;white-space:nowrap}.category-nav__item{display:block;padding:1rem 0;color:var(--soft)}.category-nav__item.is-active{color:var(--ink);border-bottom:2px solid var(--leather)}.products__count{color:var(--soft);font-size:.8rem}.products__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2.5rem)}.product-card__media{aspect-ratio:4/5;overflow:hidden;background:var(--paper-deep)}.product-card__media img{height:100%;object-fit:cover;transition:transform .45s}.product-card:hover img{transform:scale(1.025)}.product-card__info{padding:1rem 0}.product-card__top{display:flex;justify-content:space-between;gap:1rem}.product-card__title{font-size:1.5rem}.product-card__price{color:var(--leather);white-space:nowrap}.product-card__summary{color:var(--soft);font-size:.85rem}.product-card__action{display:inline-block;margin-top:.7rem;border-bottom:1px solid var(--ink);font-size:.8rem}.product-detail{padding-block:2rem 6rem}.product-detail__crumb{font-size:.8rem;color:var(--soft);margin-bottom:2rem}.product-detail__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,7vw,7rem)}.product-detail__main{aspect-ratio:4/5;background:var(--paper-deep);overflow:hidden}.product-detail__main img{height:100%;object-fit:cover}.product-detail__info{padding-top:2rem}.product-detail__title{font-size:clamp(3rem,6vw,5.5rem)}.product-detail__price{font:500 2rem var(--serif);color:var(--leather);margin:1rem 0}.product-detail__summary{color:var(--soft);font-size:1.1rem}.product-detail__meta{display:grid;grid-template-columns:auto 1fr;gap:.5rem 2rem;border-block:1px solid var(--line);padding:1.2rem 0;margin:2rem 0}.product-detail__meta dt{color:var(--soft)}.product-detail__meta dd{margin:0}.product-detail__buy{display:inline-flex;background:var(--ink);color:var(--paper);padding:1rem 1.8rem}.product-benefits{margin-top:3rem;border-top:1px solid var(--line)}.product-benefits div{display:flex;justify-content:space-between;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.85rem}
.magazine{padding-block:clamp(3rem,7vw,6rem)}.magazine__head{margin-bottom:3rem}.magazine__title{font-size:clamp(3rem,7vw,6rem)}.magazine__intro{color:var(--soft)}.magazine__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem 1.5rem}.post-card__cover{aspect-ratio:16/10;overflow:hidden;background:var(--paper-deep)}.post-card__cover img{height:100%;object-fit:cover}.post-card__title{font-size:2rem;margin-top:1rem}.post-card__summary{color:var(--soft)}.post-card__more{color:var(--leather);font-size:.85rem}.post{max-width:760px;margin:auto;padding:3rem var(--gutter) 7rem}.post__crumb,.post__date{color:var(--soft);font-size:.8rem}.post__title{font-size:clamp(3rem,7vw,5.5rem);margin:2rem 0 1rem}.post__cover{margin:2rem 0}.post__body{font:1.1rem/1.8 var(--serif)}.post__body h2{font-size:2rem;margin-top:2.5rem}.post__body a{color:var(--leather);text-decoration:underline}.site-footer{border-top:1px solid var(--line);padding-block:4rem 2rem}.site-footer__inner{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem}.site-footer__logo{font:600 2rem var(--serif);letter-spacing:.1em}.site-footer__tagline{color:var(--soft);max-width:30ch}.site-footer__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}.site-footer__copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.2rem;color:var(--soft);font-size:.75rem}
[dir=rtl] body{font-family:"Noto Kufi Arabic",var(--sans)}[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .site-logo{font-family:"Noto Kufi Arabic",var(--serif)}@media(max-width:900px){.hero,.feature,.product-detail__grid{grid-template-columns:1fr}.hero__copy{order:2}.hero__visual{order:1}.families,.products__grid{grid-template-columns:repeat(2,1fr)}.trust-strip__inner{grid-template-columns:repeat(2,1fr)}.family-card{min-height:400px}}@media(max-width:640px){:root{--header-h:64px}.menu-toggle__label,.site-header__actions>a:first-child{display:none}/* The child combinator is load-bearing. As a descendant selector this also matched the "Sign in" anchor inside .account-menu__dropdown -- it is the first child of its [data-auth-panel] -- so on phones the profile icon opened an empty 16px sliver while the burger menu's login still worked. Intended target is the .header-create button, which is a direct child. See tests/headerAccountMenu.test.mjs. */.hero{padding-top:1rem}.hero__title{font-size:3.3rem}.hero__note{bottom:-1rem}.section-head,.cta-band{display:block}.families,.products__grid,.magazine__grid,.process{grid-template-columns:1fr}.family-card{min-height:360px}.process article+article{padding-left:0;border-left:0}.products__head{display:block}.site-footer__inner{grid-template-columns:1fr}.site-footer__copy{grid-column:1}.product-detail{padding-top:1rem}.cta-band .button{margin-top:1.5rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.account-menu,.lang-switch{position:relative;flex:0 0 auto}.account-menu__toggle,.lang-switch__toggle{width:44px;height:44px;padding:0;border:1px solid color-mix(in srgb,var(--concept-brand,#0c596c) 28%,var(--line));border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--concept-brand,#0c596c);cursor:pointer}.account-menu__avatar{width:24px;height:24px;display:grid;place-items:center;font-weight:800;font-size:.82rem}.account-menu__avatar svg{width:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.account-menu__avatar.has-initial{border-radius:50%;background:#e6f0f2}.account-menu__dropdown,.lang-switch__list{position:absolute;top:calc(100% + .65rem);right:0;width:190px;padding:.45rem;border:1px solid var(--line);border-radius:14px;background:var(--white);box-shadow:0 18px 45px rgba(35,32,28,.14)}.account-menu__dropdown[hidden],.lang-switch__list[hidden]{display:none}.account-menu__dropdown>div{display:grid}.lang-switch__list a,.account-menu__dropdown a,.account-menu__dropdown button{width:100%;min-height:42px;padding:.55rem .7rem;border:0;border-radius:9px;background:none;color:var(--ink);font-size:.82rem;text-align:start;cursor:pointer}.account-menu__dropdown a:hover,.account-menu__dropdown button:hover,.lang-switch__list a:hover{background:var(--paper-deep)}.account-menu__dropdown button{border-top:1px solid var(--line);color:var(--soft)}.account-menu__toggle:focus-visible,.lang-switch__toggle:focus-visible,.lang-switch__list a:focus-visible,.account-menu__dropdown a:focus-visible,.account-menu__dropdown button:focus-visible,.menu-overlay__account a:focus-visible,.menu-overlay__account button:focus-visible{outline:3px solid color-mix(in srgb,var(--concept-brand,#0c596c) 45%,transparent);outline-offset:2px}.menu-overlay__account>div{display:grid;gap:.2rem;margin-bottom:.65rem}.menu-overlay__account a,.menu-overlay__account button{min-height:44px;display:flex;align-items:center}.menu-overlay__account button{padding:0;border:0;background:none;color:inherit;text-align:start;cursor:pointer}[dir=rtl] .account-menu__dropdown,[dir=rtl] .lang-switch__list{right:auto;left:0}
/* The language menu shares the account menu's round toggle and dropdown card through the selector lists above, so the two cannot drift apart. Only what differs is here. The toggle stacks a small globe over the language code: a bare "EN" in a circle read as a second avatar, since the signed-in account button shows an initial the same way. It keeps the round footprint on purpose -- a wider pill pushed Create out at 1024px and crowded the logo on 375px phones. */.lang-switch__toggle{align-content:center;gap:1px;font-size:.62rem;font-weight:700;letter-spacing:.06em;line-height:1}.lang-switch__icon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.lang-switch__list{width:auto;min-width:9rem;margin:0;list-style:none}.lang-switch__list a{display:flex;align-items:center}.lang-switch__list a[aria-current]{font-weight:700;color:var(--concept-brand,#0c596c)}
@media(max-width:760px){.site-header__actions{gap:.5rem}.site-header__actions>a:not(.header-create):not(.header-basket){display:none}}
@media(max-width:640px){.site-logo__word{display:none}.site-logo__mark{display:block}.site-logo .site-logo__mark{height:40px;max-width:100%}.site-footer__logo .site-logo__mark{height:56px}/* The mark centres in the space actually left between the menu button and Create, not at the header's geometric centre. The side columns used to be equal fractions, so the much wider right-hand group pushed the logo against Create and left a hole beside the hamburger — and moved it again whenever the basket badge appeared or the CTA label got longer. */.site-header__inner{padding-inline:.7rem;grid-template-columns:auto minmax(0,1fr) auto}/* Phones carry three round controls beside the centred mark: basket, language, account. At 44px for the account icon and a .35rem gap they came within 12px of the logo at 375px; all three at the 40px declared below with a .25rem gap leaves 19px, and the mark stays centred down to 375px. approved.css keeps 44px for the account icon from 641px up. */.site-header__actions{gap:.25rem}.site-logo{font-size:clamp(1rem,5vw,1.35rem);justify-self:center;min-width:0}.account-menu__toggle,.lang-switch__toggle{width:40px;height:40px}}
@media(max-width:390px){.header-create{padding-inline:.55rem;font-size:.67rem}.site-logo{letter-spacing:.08em}}
.header-basket{width:44px;height:44px;position:relative;flex:0 0 auto;border:1px solid color-mix(in srgb,var(--concept-brand,#0c596c) 28%,var(--line));border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--concept-brand,#0c596c)}.header-basket svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.header-basket__count{position:absolute;top:-4px;right:-5px;min-width:19px;height:19px;padding:0 4px;border:2px solid var(--paper);border-radius:999px;display:grid;place-items:center;background:var(--concept-brand,#0c596c);color:white;font-size:.62rem;font-weight:800;line-height:1}/* main.js sets hidden on an empty basket, but display:grid above outranks the browser's own [hidden] rule, so an empty basket showed a "0". Same pairing as .account-menu__dropdown[hidden]. */.header-basket__count[hidden]{display:none}.header-basket:focus-visible{outline:3px solid color-mix(in srgb,var(--concept-brand,#0c596c) 45%,transparent);outline-offset:2px}[dir=rtl] .header-basket__count{right:auto;left:-5px}@media(max-width:640px){.header-basket{width:40px;height:40px}/* Phone controls are 4px apart, so a badge 5px outside the cart reached the Account circle. 2px keeps it on the cart's edge and clear of its neighbour. */.header-basket__count{right:-2px}[dir=rtl] .header-basket__count{left:-2px}}@media(max-width:350px){.header-create{display:none}}

/* The account button shows your initial once you are signed in.
   Keyed off data-auth-state, which main.js already sets on the root, so the
   swap needs no extra class and cannot disagree with the dropdown below it.
   A guest keeps the generic figure: an empty circle would look like a
   half-loaded avatar rather than "not signed in". */
.account-menu__avatar-initial { display: none; font-weight: 800; font-size: .82rem; line-height: 1; }
.account-menu[data-auth-state="authenticated"] .account-menu__avatar svg { display: none; }
.account-menu[data-auth-state="authenticated"] .account-menu__avatar-initial { display: block; }
.account-menu[data-auth-state="authenticated"] .account-menu__avatar {
  width: 28px; height: 28px; border-radius: 50%; background: #e6f0f2;
}