/* The shop and the cart have one fixed place in every header (05.10.2026): at the end of the bar (the left in Hebrew
   and Arabic), the shop first and the cart right next to it. Same place on the home page, in the shop, the product,
   the cart and the checkout, in every language. */
.nav-tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav-tools .store-link,.nav-tools .cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 18px;border-radius:100px;
  font-weight:700;font-size:16px;line-height:1;white-space:nowrap;text-decoration:none;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.nav-tools .store-link{background:var(--ink,#0E2A47);color:var(--cream,#FBF8F2);border:1.5px solid var(--ink,#0E2A47)}
.nav-tools .store-link:hover{background:var(--magenta,#E11A86);border-color:var(--magenta,#E11A86);color:#fff}
.nav-tools .store-link[aria-current="page"]{box-shadow:0 0 0 3px rgba(225,26,134,.28)}
.nav-tools .cart-btn{border:1.5px solid var(--ink,#0E2A47);color:var(--ink,#0E2A47);background:rgba(255,255,255,.6)}
.nav-tools .cart-btn:hover{background:var(--ink,#0E2A47);color:var(--cream,#FBF8F2)}
.nav-tools svg{width:21px;height:21px;flex:0 0 auto}
.nav-tools .cart-count{min-width:22px;height:22px;border-radius:11px;padding:0 6px;display:inline-grid;place-items:center;font-size:12.5px;font-weight:800;
  background:var(--ink,#0E2A47);color:#fff}
.nav-tools .cart-btn:hover .cart-count{background:#fff;color:var(--ink,#0E2A47)}
.nav-tools .cart-count[data-n="0"]{background:rgba(14,42,71,.12);color:var(--ink,#0E2A47)}
.nav-tools a:focus-visible{outline:3px solid var(--magenta,#E11A86);outline-offset:3px}
/* the home page bar over the dark hero */
header.nav.on-dark .nav-tools .cart-btn{border-color:rgba(255,255,255,.75);color:#fff;background:rgba(0,0,0,.18)}
header.nav.on-dark .nav-tools .cart-count[data-n="0"]{background:rgba(255,255,255,.22);color:#fff}
header.nav.on-dark .nav-tools .store-link{background:#fff;color:var(--ink,#0E2A47);border-color:#fff}
/* narrow screens: the links go into the menu, the shop and the cart stay */
@media (max-width:1180px) and (min-width:881px){.nav-tools .store-link,.nav-tools .cart-btn{padding:8px 13px;font-size:15px}.nav-tools .cb-label{display:none}}
@media (max-width:880px){.nav-tools{gap:8px}.nav-tools .store-link,.nav-tools .cart-btn{padding:8px 12px;min-height:44px}.nav-tools .cb-label{display:none}}
@media (max-width:340px){.nav-tools .sl-label{display:none}.nav-tools .store-link{padding:8px 11px}}
@media (prefers-reduced-motion:reduce){.nav-tools .store-link,.nav-tools .cart-btn{transition:none}}

/* the loading film already played in this visit (see the head script of the home pages): the film, the water fill and
   the progress stay out, the cover with the brand mark stays, and the page opens with the same wipe as after the film */
html.kos-seen #loader .lvid,html.kos-seen #loader .l-meta,html.kos-seen #loaderFill,html.kos-seen #loaderColor{display:none!important}
html.kos-seen #loaderLogo{opacity:1;filter:none!important}   /* a return visit shows the logo in full colour (the grey base is only for the fill effect) */
/* room for the shop and the cart: the links never break into two lines; on mid-size screens the "leave details"
   button leaves the bar (the same button is in the hero and at the end of the page) */
header.nav .nav-links a{white-space:nowrap}
/* the logo never gives way to the links: a fixed round mark */
header.nav .brand{flex:0 0 auto}
header.nav #headerLogo{flex:0 0 auto;aspect-ratio:1/1;max-width:none;object-fit:contain}
@media (min-width:881px) and (max-width:1680px){header.nav .nav-links .nav-cta{display:none}}
@media (min-width:881px) and (max-width:1100px){header.nav .nav-links{gap:12px}header.nav .nav-links a{font-size:15px}}

/* ---- the home hero composition (05.10.2026): the header has its own calm strip and the photograph starts under it,
   so nothing in the bar sits on Alma's head or face. The strip is the same soft mist as the photograph, fading into it. */
.page-home .hero{background:linear-gradient(180deg,#F4F2EC 0%,#EEF1EE 60%,#E9EEEC 100%)}
.page-home .hero-media{inset:var(--hero-top,132px) 0 0 0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px);mask-image:linear-gradient(180deg,transparent 0,#000 120px)}
.page-home .hero-media img,.page-home .hero-media video{object-position:50% 0}
@media (max-width:1180px) and (min-width:761px){.page-home .hero-media{--hero-top:118px}}
@media (max-width:760px){.page-home .hero-media{--hero-top:86px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 64px);mask-image:linear-gradient(180deg,transparent 0,#000 64px)}}
/* wide screens: the wordmark and the text keep clear of her hair (the copy moves toward the edge of the frame) */
@media (min-width:1181px){html[dir="rtl"] body.page-home .hero-copy .inner{margin-inline-start:calc(-1 * min(5vw,96px))}}
/* desktop: the photograph keeps its full height under the strip (top to river), and the hero grows by the strip, so the
   whole picture shows and the data bar comes after it */
@media (min-width:761px){.page-home .hero{height:calc(100svh + var(--hero-top,132px));min-height:calc(620px + var(--hero-top,132px))}
  .page-home .hero-media{bottom:auto;height:100svh;min-height:620px}
  .page-home .hero-media img,.page-home .hero-media video{object-position:50% 50%}}
@media (max-width:1180px) and (min-width:761px){.page-home .hero{--hero-top:118px}}
/* portrait tablets (iPad 768-1024 wide): like the phone, the copy sits at the bottom of the first screen, under her
   face, never across it; the wordmark is a little smaller */
@media (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  .page-home .hero{align-items:flex-end;padding-bottom:calc(var(--hero-top,118px) + 3.5vh)}
  .page-home .hero-logo img{width:min(430px,54vw)}
}
/* landscape tablets (1024-1180 wide): her face takes the middle of the frame, so the wordmark and the text keep to a
   narrower column at the edge, clear of her eyes and hair */
@media (min-width:761px) and (max-width:1180px) and (orientation:landscape){
  .page-home .hero-logo img{width:min(390px,35vw)}
  .page-home .hero-copy .inner{max-width:min(470px,45vw)}
}

/* ---- Alma's face stays clear on every screen (11.10.2026). One rule per screen SHAPE, not per device: the wordmark
   and the copy are placed from where her face actually lands, measured on the photographs themselves - the chin sits
   at <=34% of the tall set (top-anchored), the profile ends at <=52% of the wide set (centred). The header strip
   height is the one width-based value. */
.page-home .hero{--hero-top:132px}
@media (max-width:1180px){.page-home .hero{--hero-top:118px}}
@media (max-width:760px){.page-home .hero{--hero-top:86px}}
/* portrait (phones, upright tablets): the photograph keeps one screen's height under the strip; the copy starts under
   her chin and sits at the foot of the first screen when there is room - on a short screen the hero grows instead */
@media (orientation:portrait){
  .page-home .hero{--ph-h:max(calc(100vw * 1672 / 941),calc(100svh - var(--hero-top)));
    height:auto;min-height:100svh;align-items:flex-end;
    padding-top:calc(var(--hero-top) + var(--ph-h) * .34 + 20px);padding-bottom:78px}
  .page-home .hero-media{bottom:auto;height:calc(100svh - var(--hero-top));min-height:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 64px,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 64px,#000 82%,transparent)}
  .page-home .hero-media img,.page-home .hero-media video{object-position:50% 0}
  .page-home .hero-scrim{background:linear-gradient(0deg,rgba(247,244,238,.94),rgba(247,244,238,.55) 45%,rgba(247,244,238,.15) 75%)}
  .page-home .hero-copy{justify-content:center}
  .page-home .hero-copy .inner{text-align:center}
  .page-home .hero-logo img{width:min(70vw,430px,calc(13svh * 1556 / 650));margin-inline:auto}
  .page-home .hero-actions{justify-content:center}
  .page-home .hero-sub{margin-inline:auto}
}
/* a short portrait screen (iPhone SE and the like): the copy tightens so it still fits between her chin and the
   accessibility button on the first screen, instead of growing the hero under the button */
@media (orientation:portrait) and (max-height:740px){
  .page-home .hero-logo img{width:min(70vw,calc(12svh * 1556 / 650))}
  .page-home .hero-sub{font-size:13.5px;line-height:1.42;margin-top:8px}
  .page-home .hero-sub .m-br{display:none}
  .page-home .hero-actions{margin-top:12px;flex-wrap:nowrap;gap:10px}
  .page-home .hero-actions .btn{padding:12px 18px;font-size:15px;white-space:nowrap}
}
/* the narrowest phones (under 360 wide): both hero buttons still fit on one row in every language, and the contact
   heading's long words ("Заинтересовались") wrap instead of widening the form past the screen (11.10.2026) */
@media (orientation:portrait) and (max-width:359px){
  .page-home .hero-actions{gap:8px}
  .page-home .hero-actions .btn{padding:11px 12px;font-size:13.5px;gap:6px}
}
@media (max-width:359px){
  .contact h2{font-size:30px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
  .contact-grid>*{min-width:0}
}
/* landscape (desktop, landscape tablets and phones): the photograph is centred, so her profile ends 2% of its width
   past the middle of the screen; the copy keeps to a column right of it (both reading directions) */
@media (orientation:landscape){
  .page-home .hero{--pw:max(100vw,calc(max(100svh,620px) * 16 / 9))}
  .page-home .hero-copy .inner{margin-left:auto;margin-right:0;
    max-width:min(600px,calc(min(100vw,var(--maxw)) / 2 - clamp(22px,5.2vw,64px) - var(--pw) * .02 - 28px))}
  .page-home .hero-logo img{max-width:100%}
}
/* a short landscape screen (a phone on its side): the copy starts under the strip instead of the middle of a tall hero */
@media (orientation:landscape) and (max-height:500px){.page-home .hero{align-items:flex-start;padding-top:calc(var(--hero-top) + 12px)}}
/* a landscape phone (<=760 wide) gets the landscape composition too, not the phone's stacked one */
@media (orientation:landscape) and (max-width:760px){
  .page-home .hero{height:calc(100svh + var(--hero-top));min-height:calc(620px + var(--hero-top));align-items:center;padding-block:0}
  .page-home .hero-media{bottom:auto;height:max(100svh,620px)}
  .page-home .hero-media img,.page-home .hero-media video{object-position:50% 50%}
  .page-home .hero-scrim{background:linear-gradient(to left,rgba(247,244,238,.95) 0%,rgba(247,244,238,.88) 26%,rgba(247,244,238,.76) 45%,rgba(247,244,238,.40) 56%,transparent 68%)}
  .page-home .hero-copy .inner,.page-home .hero-sub{text-align:start}
  .page-home .hero-logo img{margin-inline:0}
  .page-home .hero-actions{justify-content:flex-start}
}

/* "My orders" (0053) in the static header of every store page (05.10 integration: drawn by the page, not inserted by
   shopper.js after the first paint, so the header never shifts). The link is an icon so the delivery chip keeps
   its room next to the menu (the label is for screen readers; the link keeps its name, aria-label, at every width). */
.nav-tools .acc-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;border-radius:100px;color:var(--ink,#0E2A47);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.nav-tools .acc-link svg{width:22px;height:22px;flex:0 0 auto}
.nav-tools .acc-link:hover,.nav-tools .acc-link[aria-current=page]{background:rgba(95,182,220,.14)}
.nav-tools .acc-link:focus-visible{outline:2px solid var(--glacial-deep,#2C7FA6);outline-offset:2px}
.nav-tools .acc-link .al-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* with "My orders" in the bar, the desktop bar keeps room for the delivery chip of the store pages (promise.js, out of the
   flow at the start of these tools): a little less air between the pills, the account link icon-only (its name stays) */
@media (min-width:1280px){
  .nav-tools:has(.acc-link){gap:6px}
  .nav-tools:has(.acc-link) .acc-link{padding:0 6px}
  .nav-tools:has(.acc-link) .store-link{padding-inline:14px}
  header.shop-head:has(.acc-link) .nav-links{gap:16px}
}
@media (min-width:1280px){header.shop-head:has(.acc-link) .nav-links{gap:13px}header.shop-head:has(.acc-link) .nav-links a{font-size:16px}}   /* room for the "For business" link (0063) next to the delivery chip */
@media (min-width:1280px){html[lang=ar] header.shop-head:has(.acc-link) .nav-links{gap:10px}html[lang=ar] header.shop-head:has(.acc-link) .nav-links a{font-size:15px}}   /* the Arabic menu is wider */
/* 08.10.2026: the store header fits every phone (320-430px, iOS/Android, in-app browsers). Before, the burger was cut at the edge:
   logo + four tools + gaps were wider than the screen. Tighter gaps, the store button icon-only on narrow phones, smaller tools below 360px */
@media (max-width:880px){header.nav .nav-inner{gap:12px}.nav-burger{margin-inline-end:0}}
@media (max-width:440px){.nav-tools{gap:6px}.nav-tools:has(.acc-link) .sl-label{display:none}.nav-tools:has(.acc-link) .store-link{padding:8px 11px}}
@media (max-width:360px){.nav-tools{gap:4px}.nav-tools .cart-btn{padding:8px 9px}.nav-tools .acc-link{padding:0 8px}.nav-burger{width:40px}}