/* KET design system — generated by ket/extract_css.py from ket-product.html. Edit the prototype
   or ket/overrides.css, not this file. */

/* ===================== TOKENS ===================== */.ket{
  --white:#fff; --black:#000; --g400:#A8A8A8; --g200:#DCDCDC; --g100:#F4F4F4;
  --ink-2:#555; /* secondary text, 7.4:1 on white */
  --yellow:#F7F976; --mint:#C6F7A6; --green:#02A27A; --peri:#7F94FF; --blue:#3F48FF; --violet:#7C64F7; --lavender:#D4C4FF; --pink:#F4A7FC;
  --blush:#FCDFDB; --orange:#FF6517; --amber:#FFAE15;

  --f-latin:'Inter Tight', system-ui, sans-serif;
  --f-ar:'IBM Plex Sans Arabic', 'Inter Tight', system-ui, sans-serif;
  --font:var(--f-ar);

  --t-xs:12px; --t-sm:14px; --t-base:16px; --t-md:18px;
  --t-lg:clamp(22px, 2.4vw, 28px);
  --t-xl:clamp(30px, 4.4vw, 56px);
  --t-2xl:clamp(40px, 7vw, 96px);
  --t-display:clamp(84px, 24vw, 340px);

  --ls-caps:-0.02em; --ls-label:.08em;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:144px;
  --gutter:16px; --section:clamp(72px, 10vw, 152px);
  --r-card:20px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --header-h:60px;
  --dir:-1;
}
html[dir="ltr"] .ket{ --dir:1; --font:var(--f-latin); }
html[lang="ar"] .ket{ --ls-caps:0; --ls-label:0; }
@media (min-width:768px){ .ket{ --gutter:32px; } }
@media (min-width:1200px){ .ket{ --gutter:48px; --header-h:72px; } }

/* ===================== BASE ===================== */:where(.ket) *, :where(.ket) *::before, :where(.ket) *::after{ box-sizing:border-box; }
html .ket{ -webkit-text-size-adjust:100%; overflow-x:clip; }
.ket{ margin:0; background:var(--white); color:var(--black); font-family:var(--font); font-size:var(--t-base); line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
:where(.ket) img{ display:block; max-width:100%; height:auto; }
:where(.ket) button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:where(.ket) a{ color:inherit; }
:where(.ket) svg{ display:block; }
:where(.ket) h1, :where(.ket) h2, :where(.ket) h3, :where(.ket) h4, :where(.ket) p{ margin:0; }
:where(.ket) ul{ margin:0; padding:0; list-style:none; }
:where(.ket) .num, :where(.ket) .latin{ font-family:var(--f-latin); }
:where(.ket) .visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:where(.ket) :focus-visible{ outline:2px solid var(--black); outline-offset:3px; border-radius:6px; }
:where(.ket) .btn-primary:focus-visible, :where(.ket) .on-dark:focus-visible{ outline-color:var(--black); box-shadow:0 0 0 2px #fff inset; }
:where(.ket) .skip{ position:fixed; inset-inline-start:12px; top:-60px; z-index:200; background:#000; color:#fff; padding:10px 16px; border-radius:var(--r-pill); text-decoration:none; transition:top .3s var(--ease); }
:where(.ket) .skip:focus{ top:12px; }
:where(.ket) .container{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--gutter); }
:where(.ket) .caps{ text-transform:uppercase; letter-spacing:var(--ls-caps); }
:where(.ket) .h-2xl{ font-size:var(--t-2xl); font-weight:600; line-height:.95; letter-spacing:var(--ls-caps); text-transform:uppercase; text-wrap:balance; }
html[lang="ar"] :where(.ket) .h-2xl{ font-weight:700; line-height:1.15; }
:where(.ket) .h-xl{ font-size:var(--t-xl); font-weight:600; line-height:1; letter-spacing:var(--ls-caps); text-transform:uppercase; text-wrap:balance; }
html[lang="ar"] :where(.ket) .h-xl{ font-weight:700; line-height:1.2; }
:where(.ket) .eyebrow{ display:flex; align-items:center; gap:10px; font-size:var(--t-xs); font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-label); }
html[lang="ar"] :where(.ket) .eyebrow{ font-size:13px; }
:where(.ket) .eyebrow .idx{ font-family:var(--f-latin); color:var(--ink-2); font-weight:500; }
:where(.ket) .line-mask{ display:block; overflow:hidden; padding-block:.04em; }
:where(.ket) .line-mask > span{ display:block; will-change:transform; }
:where(.ket) .muted{ color:var(--ink-2); }

/* Pills */:where(.ket) .pill{ display:inline-flex; align-items:center; gap:6px; height:28px; padding-inline:12px; border-radius:var(--r-pill); font-size:var(--t-xs); font-weight:600; letter-spacing:.01em; white-space:nowrap; transition:transform .4s var(--ease), background-color .3s; }
html[lang="ar"] :where(.ket) .pill{ font-size:12.5px; }
:where(.ket) .pill--mint{ background:var(--mint); } :where(.ket) .pill--yellow{ background:var(--yellow); } :where(.ket) .pill--orange{ background:var(--orange); color:#000; }
:where(.ket) .pill--line{ border:1px solid var(--black); } :where(.ket) .pill--grey{ background:var(--g100); }
:where(.ket) .pill:hover{ transform:translateY(-2px); }

/* Buttons */:where(.ket) .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:56px; padding-inline:28px; border-radius:var(--r-pill); font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; overflow:hidden; isolation:isolate; transition:background-color .3s, color .3s, border-color .3s; }
html[lang="ar"] :where(.ket) .btn{ letter-spacing:0; font-size:16px; }
:where(.ket) .btn-primary{ background:var(--black); color:var(--white); }
:where(.ket) .btn-primary::before{ content:""; position:absolute; inset:0; background:#262626; transform:translateY(101%); transition:transform .5s var(--ease); z-index:-1; border-radius:inherit; }
:where(.ket) .btn-primary:hover::before{ transform:translateY(0); }
:where(.ket) .btn-outline{ border:1px solid var(--black); background:var(--white); }
:where(.ket) .btn-outline:hover{ background:var(--g100); }
:where(.ket) .btn-block{ width:100%; }
:where(.ket) .btn .btn-label{ display:inline-block; }
:where(.ket) .icon-btn{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r-pill); transition:background-color .25s; }
:where(.ket) .icon-btn:hover{ background:var(--g100); }

/* ===================== 1. ANNOUNCEMENT ===================== */
/* the hero starts at the top of the page, under the announcement bar and header (as it does while pinned),
   so the whole first screen — chair and wording — fits on load */:where(.ket) .announce{ position:relative; z-index:61; background:var(--blush); height:36px; overflow:hidden; display:flex; align-items:center; font-size:13px; font-weight:500; }
:where(.ket) .marquee{ display:flex; width:max-content; animation:marquee 32s linear infinite; }
:where(.ket) .marquee__group{ display:flex; align-items:center; gap:28px; padding-inline-end:28px; white-space:nowrap; }
:where(.ket) .marquee__group span{ display:inline-flex; align-items:center; gap:28px; }
:where(.ket) .marquee__group span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--black); }
:where(.ket) .announce:hover .marquee{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(calc(50% * var(--dir) * -1)); } }

/* ===================== 2. HEADER ===================== */:where(.ket) .header{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:60; background:var(--white); border-bottom:1px solid transparent; transition:background-color .35s, border-color .35s; }
:where(.ket) .header.is-scrolled{ background:rgba(255,255,255,.97); border-bottom-color:var(--g200); } /* no backdrop blur: it re-renders on every scroll frame */:where(.ket) .header__inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--header-h); transition:height .4s var(--ease); }
:where(.ket) .header.is-scrolled .header__inner{ height:52px; }
:where(.ket) .header__start, :where(.ket) .header__end{ display:flex; align-items:center; gap:2px; }
:where(.ket) .header__end{ justify-content:flex-end; }
:where(.ket) .logo{ display:block; color:var(--black); text-decoration:none; }
:where(.ket) .logo svg{ width:64px; height:auto; overflow:visible; transition:width .4s var(--ease); }
:where(.ket) .header.is-scrolled .logo svg{ width:58px; }
/* logo morph: at the top the full ket wordmark; once scrolled the letters fold down into the smile */:where(.ket) .klogo .kl{ transform-box:fill-box; transform-origin:50% 100%; transition:transform .6s var(--ease), opacity .35s var(--ease); }
:where(.ket) .klogo .kl:nth-child(2){ transition-delay:.05s; } :where(.ket) .klogo .kl:nth-child(3){ transition-delay:.1s; }
:where(.ket) .klogo__smile{ transform-box:fill-box; transform-origin:50% 50%; opacity:0; clip-path:inset(0 50% 0 50%); transform:translateY(-10%) scale(.7); transition:clip-path .55s var(--ease), opacity .25s, transform .6s var(--ease); }
:where(.ket) .header.is-scrolled .klogo .kl{ transform:translateY(10%) scale(.2, .04); opacity:0; }
:where(.ket) .header.is-scrolled .klogo .klogo__smile{ opacity:1; clip-path:inset(0 0 0 0); transform:translateY(-34%) scale(1.18); transition-delay:.18s; }
@media (hover:hover){
  :where(.ket) .header.is-scrolled .logo:hover .kl{ transform:none; opacity:1; }
  :where(.ket) .header.is-scrolled .logo:hover .klogo__smile{ opacity:0; clip-path:inset(0 50% 0 50%); transition-delay:0s; }
}
:where(.ket) .lang-btn{ height:36px; padding-inline:14px; border-radius:var(--r-pill); border:1px solid var(--black); font-size:13px; font-weight:600; margin-inline-start:6px; transition:background-color .25s,color .25s; }
:where(.ket) .lang-btn:hover{ background:var(--black); color:var(--white); }
:where(.ket) .cart-btn{ position:relative; }
:where(.ket) .cart-count{ position:absolute; top:4px; inset-inline-end:2px; min-width:18px; height:18px; padding-inline:5px; border-radius:var(--r-pill); background:var(--orange); color:#000; font:600 11px/18px var(--f-latin); text-align:center; transform:scale(0); transition:transform .4s var(--ease); }
:where(.ket) .cart-count.has-items{ transform:scale(1); }
:where(.ket) .crumbs{ font-size:13px; color:var(--ink-2); display:none; gap:8px; }
:where(.ket) .crumbs a{ text-decoration:none; } :where(.ket) .crumbs a:hover{ color:#000; }
@media (min-width:1024px){ :where(.ket) .crumbs{ display:flex; } :where(.ket) .hide-desk{ display:none!important; } }
@media (max-width:1023px){ :where(.ket) .hide-mob{ display:none!important; } }

/* ===================== 3. HERO / BUY BOX ===================== */:where(.ket) .pdp{ position:relative; padding-bottom:var(--s8); }
:where(.ket) .pdp-grid{ display:grid; grid-template-columns:minmax(0,1fr); }
@media (min-width:1024px){
  :where(.ket) .pdp{ padding-top:var(--s5); }
  :where(.ket) .pdp-grid{ grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); gap:clamp(40px,5vw,96px); align-items:start; }
  :where(.ket) .gallery{ position:sticky; top:calc(var(--header-h) + 16px); }
}
/* Gallery */:where(.ket) .gallery{ margin-inline:calc(var(--gutter) * -1); }
@media (min-width:1024px){ :where(.ket) .gallery{ margin-inline:0; } }
:where(.ket) .g-stage{ position:relative; background:var(--g100); overflow:hidden; }
:where(.ket) .g-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
:where(.ket) .g-track::-webkit-scrollbar{ display:none; }
:where(.ket) .g-slide{ flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; aspect-ratio:1/1; cursor:zoom-in; background:var(--g100); }
:where(.ket) .g-slide img{ width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
@media (min-width:1024px){ :where(.ket) .g-stage{ max-height:calc(100vh - var(--header-h) - 140px); aspect-ratio:1/1; } :where(.ket) .g-slide{ aspect-ratio:auto; height:100%; } :where(.ket) .g-track{ height:100%; } :where(.ket) .g-stage{ margin-inline:auto; } }
:where(.ket) .g-count{ position:absolute; bottom:14px; inset-inline-start:14px; font:500 12px/1 var(--f-latin); background:rgba(255,255,255,.9); padding:7px 10px; border-radius:var(--r-pill); pointer-events:none; }
:where(.ket) .g-zoom{ position:absolute; top:12px; inset-inline-end:12px; background:rgba(255,255,255,.92); }
:where(.ket) .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:var(--r-pill); background:var(--white); display:grid; place-items:center; opacity:0; transition:opacity .3s, transform .4s var(--ease); }
:where(.ket) .g-stage:hover .g-arrow, :where(.ket) .g-arrow:focus-visible{ opacity:1; }
:where(.ket) .g-prev{ inset-inline-start:16px; } :where(.ket) .g-next{ inset-inline-end:16px; }
html[dir="rtl"] :where(.ket) .g-arrow svg{ transform:scaleX(-1); }
:where(.ket) .g-prog{ position:relative; height:2px; background:var(--g200); margin-inline:var(--gutter); margin-top:14px; overflow:hidden; }
@media (min-width:1024px){ :where(.ket) .g-prog{ margin-inline:0; } }
:where(.ket) .g-prog span{ position:absolute; top:0; bottom:0; inset-inline-start:0; width:calc(100% / var(--n, 7)); background:var(--black); transform:translateX(calc(var(--p,0) * (var(--n,7) - 1) * 100% * var(--dir))); transition:transform .15s linear; }
:where(.ket) .g-thumbs{ display:none; gap:10px; margin-top:14px; }
@media (min-width:1024px){ :where(.ket) .g-thumbs{ display:flex; } }
:where(.ket) .g-thumb{ width:64px; height:64px; background:var(--g100); border-radius:10px; overflow:hidden; opacity:.55; transition:opacity .3s, outline-color .3s; outline:1px solid transparent; outline-offset:2px; }
:where(.ket) .g-thumb img{ width:100%; height:100%; object-fit:cover; }
:where(.ket) .g-thumb.is-active, :where(.ket) .g-thumb:hover{ opacity:1; }
:where(.ket) .g-thumb.is-active{ outline-color:var(--black); }

/* Buy box */:where(.ket) .buy{ position:relative; padding-top:var(--s5); }
@media (min-width:1024px){ :where(.ket) .buy{ padding-top:var(--s4); } }
:where(.ket) .buy__pills{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--s4); }
:where(.ket) .buy__title{ font-size:clamp(48px, 13vw, 104px); font-weight:600; line-height:.9; letter-spacing:-.035em; text-transform:uppercase; }
html[lang="ar"] :where(.ket) .buy__title{ font-weight:700; line-height:1.1; letter-spacing:0; font-size:clamp(46px, 12vw, 92px); }
:where(.ket) .buy__sub{ margin-top:var(--s3); font-size:var(--t-md); color:var(--ink-2); max-width:34ch; }
:where(.ket) .rating{ display:inline-flex; align-items:center; gap:8px; margin-top:var(--s4); font-size:14px; text-decoration:none; }
:where(.ket) .rating:hover .rating__count{ text-decoration:underline; }
:where(.ket) .stars{ position:relative; display:inline-flex; gap:1px; }
:where(.ket) .star{ position:relative; display:inline-flex; color:var(--g200); will-change:transform; }
:where(.ket) .star__fill{ position:absolute; inset-block:0; inset-inline-start:0; overflow:hidden; color:var(--black); display:flex; }
:where(.ket) .cnt{ font-variant-numeric:tabular-nums; }
:where(.ket) .stars svg{ flex:none; }
:where(.ket) .rating__val{ font:600 14px var(--f-latin); }
:where(.ket) .price{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:var(--s5); }
:where(.ket) .price__now{ font:600 clamp(32px, 7vw, 44px)/1 var(--f-latin); letter-spacing:-.03em; }
:where(.ket) .price__now small{ font-size:.42em; letter-spacing:0; margin-inline-start:4px; font-family:var(--font); font-weight:600; }
:where(.ket) .price__was{ font:500 18px var(--f-latin); color:var(--ink-2); text-decoration:line-through; text-decoration-thickness:1px; }
:where(.ket) .price__vat{ width:100%; font-size:12.5px; color:var(--ink-2); }
:where(.ket) .bnpl{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:var(--s4); padding:12px 14px; border:1px solid var(--g200); border-radius:14px; font-size:14px; }
:where(.ket) .bnpl strong{ font-family:var(--f-latin); font-weight:600; }
:where(.ket) .bnpl__brand{ display:inline-flex; align-items:center; height:22px; padding-inline:8px; border-radius:6px; font:700 12px/1 var(--f-latin); letter-spacing:-.01em; }
:where(.ket) .bnpl__brand--tabby{ background:#3BFFC1; } /* tabby-style mint chip; replaced by Zid widget */:where(.ket) .bnpl__brand--tamara{ background:var(--black); color:var(--white); }
:where(.ket) .divider{ height:1px; background:var(--g200); border:0; margin-block:var(--s5); }
:where(.ket) .stock__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; }
:where(.ket) .stock__row strong{ font-weight:600; }
:where(.ket) .stock__bar{ height:4px; border-radius:4px; background:var(--g100); margin-top:8px; overflow:hidden; }
:where(.ket) .stock__bar span{ display:block; height:100%; width:var(--w,20%); background:var(--orange); border-radius:inherit; transform-origin:var(--origin,right); }
html[dir="ltr"] :where(.ket) .stock__bar span{ --origin:left; }
:where(.ket) .delivery{ display:flex; gap:10px; align-items:flex-start; margin-top:var(--s4); font-size:14px; }
:where(.ket) .delivery svg{ flex:none; margin-top:1px; }
:where(.ket) .delivery strong{ font-weight:600; }
:where(.ket) .buy__actions{ display:grid; grid-template-columns:auto 1fr; gap:10px; margin-top:var(--s5); }
:where(.ket) .buy__actions .btn-outline{ grid-column:1 / -1; }
:where(.ket) .stepper{ display:inline-flex; align-items:center; height:56px; border:1px solid var(--black); border-radius:var(--r-pill); padding-inline:4px; }
:where(.ket) .stepper button{ width:40px; height:46px; display:grid; place-items:center; border-radius:var(--r-pill); }
:where(.ket) .stepper button:hover{ background:var(--g100); }
:where(.ket) .stepper button:disabled{ opacity:.3; cursor:not-allowed; background:none; }
:where(.ket) .stepper__val{ position:relative; width:30px; height:24px; overflow:hidden; text-align:center; font:600 17px/24px var(--f-latin); }
:where(.ket) .stepper__val span{ position:absolute; inset:0; }
:where(.ket) .trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
:where(.ket) .trust li{ position:relative; padding:14px 12px 13px; border-radius:16px; background:color-mix(in srgb, var(--tint) 18%, #fff); display:flex; flex-direction:column; gap:10px; font-size:13px; line-height:1.35; }
:where(.ket) .trust .shape{ height:34px; width:auto; display:block; transition:transform .5s var(--ease); }
:where(.ket) .trust li:hover .shape{ transform:translateY(-3px) rotate(-4deg); }
:where(.ket) .trust strong{ font-weight:700; display:block; font-size:13.5px; }
:where(.ket) .trust span{ color:var(--ink-2); font-size:12px; display:block; margin-top:2px; }
@media (max-width:420px){ :where(.ket) .trust li{ padding:12px 9px; } :where(.ket) .trust strong{ font-size:12.5px; } }
/* social proof strip (client figures) */:where(.ket) .proof{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:var(--s5); background:var(--g100); border-radius:20px; padding:16px 6px; }
:where(.ket) .proof__item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding-inline:6px; }
:where(.ket) .proof__item + .proof__item{ border-inline-start:1px solid var(--g200); }
:where(.ket) .proof__ic{ width:44px; height:44px; border-radius:50%; background:var(--white); display:grid; place-items:center; margin-bottom:4px; }
:where(.ket) .proof__ic--stars{ width:auto; background:none; height:44px; }
:where(.ket) .proof .star__fill{ color:var(--amber); }
:where(.ket) .proof .star{ color:#F1E4C8; }
:where(.ket) .proof__num{ font:700 clamp(20px,2.2vw,26px)/1.1 var(--f-latin); letter-spacing:-.02em; }
:where(.ket) .proof__num small{ font-size:.62em; font-weight:600; color:var(--ink-2); }
:where(.ket) .proof__lab{ font-size:12.5px; color:var(--ink-2); line-height:1.3; }
:where(.ket) .deco{ position:absolute; pointer-events:none; z-index:0; }
:where(.ket) .buy > *:not(.deco){ position:relative; z-index:1; }

/* ===================== 4. AR BLOCK ===================== */:where(.ket) .ar{ margin-top:var(--s6); display:grid; grid-template-columns:1fr; gap:var(--s5); background:var(--g100); border-radius:var(--r-card); padding:var(--s5); }
@media (min-width:560px){ :where(.ket) .ar{ grid-template-columns:auto 1fr; align-items:center; } }
:where(.ket) .ar__qr{ position:relative; width:132px; aspect-ratio:1; background:var(--white); border-radius:16px; padding:12px; justify-self:start; }
:where(.ket) .ar__qr svg{ width:100%; height:100%; }
:where(.ket) .ar__badge{ position:absolute; inset:0; margin:auto; width:38px; height:38px; border-radius:50%; background:var(--black); color:var(--white); display:grid; place-items:center; font:700 13px var(--f-latin); box-shadow:0 0 0 5px var(--white); }
:where(.ket) .ar__title{ font-size:var(--t-lg); font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-caps); line-height:1.1; margin-top:6px; }
html[lang="ar"] :where(.ket) .ar__title{ font-weight:700; }
:where(.ket) .ar__body{ font-size:14px; color:var(--ink-2); margin-top:8px; }
:where(.ket) .ar__note{ font-size:11.5px; color:var(--ink-2); margin-top:10px; }
:where(.ket) .ar .btn{ margin-top:14px; height:48px; }
@media (max-width:1023px){ :where(.ket) .ar__qr{ display:none; } :where(.ket) .ar{ grid-template-columns:1fr; } }
@media (min-width:1024px){ :where(.ket) .ar .btn{ display:none; } }

/* ===================== SECTION HEAD ===================== */:where(.ket) .section{ padding-block:var(--section); position:relative; }
:where(.ket) .sec-head{ display:grid; gap:var(--s4); border-top:1px solid var(--black); padding-top:var(--s4); margin-bottom:clamp(32px,5vw,72px); }
@media (min-width:1024px){ :where(.ket) .sec-head{ grid-template-columns:1fr 2fr; align-items:start; } }

/* ===================== 5. STORY ===================== */:where(.ket) .story{ background:var(--white); }
:where(.ket) .story__stage{ position:relative; min-height:100svh; padding-top:calc(var(--header-h) + 12px); padding-bottom:20px; display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; }
@media (min-width:1024px){
  :where(.ket) .story__stage{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-rows:auto auto 1fr; column-gap:clamp(40px,5vw,96px); padding-bottom:48px; }
  :where(.ket) .story__head{ grid-column:1; grid-row:1; } :where(.ket) .story__lines{ grid-column:1; grid-row:2; }
  :where(.ket) .story__visual{ grid-column:2; grid-row:1 / span 3; } :where(.ket) .story__body{ grid-column:1; grid-row:3; align-self:end; }
}
:where(.ket) .story__word{ font-family:var(--f-latin); font-size:clamp(64px, 17vw, 168px); font-weight:700; line-height:.9; letter-spacing:-.05em; margin-top:6px; }
html[lang="ar"] :where(.ket) .story__word{ font-family:var(--f-ar); line-height:1.25; letter-spacing:0; font-size:clamp(60px, 16vw, 150px); }
:where(.ket) .story__word .line-mask{ padding-bottom:.12em; margin-bottom:-.12em; }   /* room for descenders (ق ي ج) */:where(.ket) .story__lines{ font-size:clamp(22px, 3.4vw, 44px); font-weight:600; line-height:1.05; text-transform:uppercase; letter-spacing:var(--ls-caps); }
html[lang="ar"] :where(.ket) .story__lines{ font-weight:700; line-height:1.35; }
:where(.ket) .story__lines .line-mask{ padding-bottom:.08em; }
:where(.ket) .story__visual{ position:relative; min-height:260px; display:grid; place-items:center; }
:where(.ket) .story__card{ position:relative; width:min(100%, 640px); aspect-ratio:1 / 1; max-height:100%; border-radius:24px; overflow:hidden; background:var(--g100);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.35); will-change:transform; }
@media (max-width:1023px){ :where(.ket) .story__card{ aspect-ratio:1 / 1; height:auto; width:min(100%, 46svh); } }
:where(.ket) .story__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
:where(.ket) .story__detail{ position:absolute; inset:0; opacity:0; will-change:opacity, filter; }
:where(.ket) .story__detail figcaption{ position:absolute; bottom:12px; inset-inline-start:12px; background:var(--white); border-radius:var(--r-pill); padding:6px 12px; font-size:12px; font-weight:600; }
:where(.ket) .story__chips{ position:absolute; inset:0; pointer-events:none; }
:where(.ket) .story__chip{ position:absolute; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--r-pill); background:var(--white);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.35); font-size:13px; font-weight:600; white-space:nowrap; }
:where(.ket) .story__chip i{ width:8px; height:8px; border-radius:50%; flex:none; }
:where(.ket) .story__chip:nth-child(1){ top:8%; inset-inline-start:-2%; } :where(.ket) .story__chip:nth-child(1) i{ background:var(--orange); }
:where(.ket) .story__chip:nth-child(2){ top:46%; inset-inline-end:-2%; }  :where(.ket) .story__chip:nth-child(2) i{ background:var(--green); }
:where(.ket) .story__chip:nth-child(3){ bottom:9%; inset-inline-start:4%; } :where(.ket) .story__chip:nth-child(3) i{ background:var(--peri); }
@media (max-width:1023px){ :where(.ket) .story__chip{ font-size:12px; padding:7px 12px; } :where(.ket) .story__chip:nth-child(1){ inset-inline-start:2%; } :where(.ket) .story__chip:nth-child(2){ inset-inline-end:2%; } }
:where(.ket) .story__body{ font-size:clamp(15px,1.3vw,18px); max-width:46ch; color:#1a1a1a; }
html:not(.motion) :where(.ket) .story__detail{ opacity:1; position:relative; aspect-ratio:4/3; border-radius:24px; overflow:hidden; margin-top:12px; }
html:not(.motion) :where(.ket) .story__visual{ display:flex; flex-direction:column; }
html:not(.motion) :where(.ket) .story__card{ height:auto; aspect-ratio:1/1; }

/* ===================== 6. FEATURES ===================== */:where(.ket) .features{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 12px; }
@media (min-width:1024px){ :where(.ket) .features{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; } }
:where(.ket) .feature__media{ position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:var(--g100); }
:where(.ket) .feature__media-inner{ position:absolute; inset:0; transition:transform 1.1s var(--ease); }
:where(.ket) .feature:hover .feature__media-inner{ transform:scale(1.06); }
:where(.ket) .feature__media img{ width:100%; height:100%; object-fit:cover; transform:scale(var(--z,1.4)); transform-origin:var(--pos,50% 50%); object-position:var(--pos,50% 50%); }
:where(.ket) .feature__idx{ position:absolute; top:10px; inset-inline-start:10px; z-index:1; background:var(--white); border-radius:var(--r-pill); padding:4px 10px; font:600 11px var(--f-latin); }
:where(.ket) .feature h3{ margin-top:14px; font-size:clamp(15px, 1.4vw, 19px); font-weight:600; line-height:1.2; text-transform:uppercase; letter-spacing:var(--ls-caps); }
html[lang="ar"] :where(.ket) .feature h3{ font-weight:700; }
:where(.ket) .feature p{ margin-top:6px; font-size:13.5px; color:var(--ink-2); line-height:1.5; }
@media (min-width:1024px){ :where(.ket) .feature p{ font-size:15px; } }

/* ===================== 7. DIMENSIONS ===================== */:where(.ket) .dims{ display:grid; gap:var(--s7); }
@media (min-width:1024px){ :where(.ket) .dims{ grid-template-columns:1.3fr 1fr; align-items:start; } }
:where(.ket) .dims__drawings{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
:where(.ket) .dims__fig{ background:var(--g100); border-radius:var(--r-card); padding:14px 10px 10px; margin:0; }
:where(.ket) .dims__fig figcaption{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-label); padding-inline:6px; }
:where(.ket) .dims__fig svg{ width:100%; height:auto; margin-top:6px; overflow:visible; }
:where(.ket) .dl{ fill:none; stroke:var(--black); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
:where(.ket) .dl--wood{ stroke:var(--black); fill:var(--amber); fill-opacity:.0; }
:where(.ket) .dm{ fill:none; stroke:var(--blue); stroke-width:1.2; }
:where(.ket) .dm-t{ font:600 11px var(--f-latin); fill:var(--blue); }
:where(.ket) .spec{ width:100%; border-collapse:collapse; font-size:15px; }
:where(.ket) .spec th, :where(.ket) .spec td{ text-align:start; padding:14px 0; border-bottom:1px solid var(--g200); vertical-align:top; }
:where(.ket) .spec th{ font-weight:500; color:var(--ink-2); width:42%; }
:where(.ket) .spec td{ font-weight:600; }
:where(.ket) .spec tr:first-child th, :where(.ket) .spec tr:first-child td{ border-top:1px solid var(--black); }
:where(.ket) .fit{ display:flex; gap:14px; margin-top:var(--s5); padding:18px; border-radius:var(--r-card); background:var(--mint); }
:where(.ket) .fit svg{ flex:none; }
:where(.ket) .fit h3{ font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:var(--ls-caps); }
:where(.ket) .fit p{ font-size:14px; margin-top:4px; }

/* ===================== 8. ACCORDIONS ===================== */:where(.ket) .acc{ display:grid; gap:10px; }
:where(.ket) .acc__item{ background:var(--g100); border-radius:22px; }
:where(.ket) .acc__btn{ display:flex; width:100%; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; text-align:start; font-size:clamp(18px,2vw,24px); font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-caps); }
html[lang="ar"] :where(.ket) .acc__btn{ font-weight:700; }
:where(.ket) .acc__icon{ position:relative; width:32px; height:32px; flex:none; border-radius:50%; border:0; transition:transform .5s var(--ease), background-color .3s, color .3s; }
:where(.ket) .acc__icon::before, :where(.ket) .acc__icon::after{ content:""; position:absolute; inset:0; margin:auto; width:12px; height:1.5px; background:currentColor; }
:where(.ket) .acc__icon::after{ transform:rotate(90deg); }
:where(.ket) .acc__btn:hover .acc__icon{ background:var(--white); }
:where(.ket) .acc__btn[aria-expanded="true"] .acc__icon{ transform:rotate(135deg); }
:where(.ket) .acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); }
:where(.ket) .acc__panel > div{ overflow:hidden; }
:where(.ket) .acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
:where(.ket) .acc__rate{ display:inline-flex; align-items:center; gap:8px; margin-inline-start:auto; font-size:13px; font-weight:500; }
:where(.ket) .acc__btn .acc__rate + .acc__icon{ margin-inline-start:4px; }
:where(.ket) .acc__revs{ display:grid; gap:12px; }
@media (min-width:640px){ :where(.ket) .acc__revs{ grid-template-columns:1fr 1fr; } }
:where(.ket) .acc__revs blockquote{ margin:0; background:var(--white); border-radius:16px; padding:14px 16px; display:grid; gap:6px; font-size:14.5px; }
:where(.ket) .acc__revs cite{ font-style:normal; font-size:12.5px; color:var(--ink-2); }
:where(.ket) .acc__more{ display:inline-flex; margin-top:14px; font-weight:600; font-size:14px; }
:where(.ket) .acc__content{ padding:0 22px 22px; max-width:68ch; font-size:15.5px; color:#1a1a1a; }
:where(.ket) .acc__content .spec{ font-size:14px; }
:where(.ket) .acc__ship{ display:grid; grid-template-columns:118px 1fr; gap:18px; align-items:center; }
:where(.ket) .gzbox{ position:relative; display:block; width:112px; }
:where(.ket) .gzbox img{ display:block; width:100%; height:auto; }
/* the smile sits on the box front panel (x 10–88%, y 67–97% of the drawing), like a printed stamp */:where(.ket) .gzbox__logo{ position:absolute; left:49%; top:79.5%; width:33%; transform:translate(-50%,-50%) rotate(-3deg); color:#111; line-height:0; }
:where(.ket) .gzbox__logo svg{ width:100%; height:auto; display:block; }
:where(.ket) .acc__ship em{ display:block; font-style:normal; font-size:13px; color:var(--ink-2); margin-top:8px; }
@media (min-width:1024px){ :where(.ket) .info-grid .sec-head{ grid-template-columns:1fr; } :where(.ket) .info-grid{ display:grid; grid-template-columns:1fr 2fr; gap:clamp(40px,5vw,96px); } }

/* ===================== 9. REVIEWS ===================== */:where(.ket) .rev{ display:grid; gap:var(--s6); }
@media (min-width:1024px){ :where(.ket) .rev{ grid-template-columns:1fr 2fr; gap:clamp(40px,5vw,96px); } }
:where(.ket) .rev__score{ font:600 clamp(72px,9vw,128px)/.85 var(--f-latin); letter-spacing:-.05em; }
:where(.ket) .rev__meta{ margin-top:12px; display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--ink-2); }
:where(.ket) .rev__bars{ margin-top:var(--s5); display:grid; gap:8px; }
:where(.ket) .rev__bar{ display:grid; grid-template-columns:20px 1fr 40px; align-items:center; gap:10px; font:500 13px var(--f-latin); }
:where(.ket) .rev__bar i{ display:block; height:4px; background:var(--g100); border-radius:4px; overflow:hidden; }
:where(.ket) .rev__bar b{ display:block; height:100%; background:var(--black); border-radius:inherit; width:var(--w); }
:where(.ket) .rev__bar span:last-child{ text-align:end; color:var(--ink-2); }
:where(.ket) .sample-note{ display:inline-flex; margin-top:var(--s5); }
:where(.ket) .slider{ position:relative; }
:where(.ket) .slider__track{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
:where(.ket) .slider__track::-webkit-scrollbar{ display:none; }
:where(.ket) .slider__nav{ display:flex; gap:8px; margin-top:16px; }
:where(.ket) .slider__nav button{ width:48px; height:48px; border:1px solid var(--black); border-radius:50%; display:grid; place-items:center; transition:background-color .25s,color .25s; }
:where(.ket) .slider__nav button:hover{ background:var(--black); color:var(--white); }
html[dir="rtl"] :where(.ket) .slider__nav svg{ transform:scaleX(-1); }
:where(.ket) .rcard{ flex:0 0 min(84%, 380px); scroll-snap-align:start; background:var(--g100); border-radius:var(--r-card); padding:22px; display:flex; flex-direction:column; gap:14px; min-height:240px; }
:where(.ket) .rcard p{ font-size:16.5px; line-height:1.55; flex:1; }
:where(.ket) .rcard footer{ display:flex; justify-content:space-between; align-items:center; font-size:13px; }
:where(.ket) .rcard footer strong{ font-weight:600; }
:where(.ket) .rcard .pill{ height:24px; font-size:11px; background:var(--white); }

/* ===================== 10. RELATED ===================== */:where(.ket) .bundle{ display:grid; grid-template-columns:auto 1fr; gap:14px 16px; align-items:center; border:1px solid var(--black); border-radius:var(--r-card); padding:14px; margin-bottom:var(--s6); }
@media (min-width:768px){ :where(.ket) .bundle{ grid-template-columns:auto 1fr auto; padding:16px 16px 16px 20px; } }
:where(.ket) .bundle__thumbs{ display:flex; align-items:center; }
:where(.ket) .bundle__thumbs > *{ width:56px; height:56px; border-radius:12px; background:var(--g100); overflow:hidden; border:2px solid var(--white); }
:where(.ket) .bundle__thumbs > * + *{ margin-inline-start:-12px; }
:where(.ket) .bundle__thumbs img{ width:100%; height:100%; object-fit:cover; }
:where(.ket) .bundle__text strong{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:var(--ls-label); }
:where(.ket) .bundle__text p{ font-size:14.5px; margin-top:2px; }
:where(.ket) .bundle .btn{ height:44px; padding-inline:20px; font-size:13px; grid-column:1 / -1; }
@media (min-width:768px){ :where(.ket) .bundle .btn{ grid-column:auto; } }
:where(.ket) .rel__track{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
:where(.ket) .rel__track::-webkit-scrollbar{ display:none; }
:where(.ket) .prod{ flex:0 0 72%; scroll-snap-align:start; }
@media (min-width:640px){ :where(.ket) .prod{ flex-basis:42%; } }
@media (min-width:1024px){ :where(.ket) .prod{ flex-basis:calc(25% - 9px); } }
:where(.ket) .prod__media{ position:relative; aspect-ratio:4/5; border-radius:16px; background:var(--g100); overflow:hidden; display:grid; place-items:center; }
:where(.ket) .prod__media svg.ph{ width:62%; height:auto; transition:transform .9s var(--ease); }
:where(.ket) .prod:hover .prod__media svg.ph{ transform:scale(1.05) translateY(-2%); }
:where(.ket) .prod__ph{ position:absolute; bottom:10px; inset-inline-end:10px; font-size:10.5px; color:var(--ink-2); }
:where(.ket) .prod__pills{ position:absolute; top:10px; inset-inline-start:10px; display:flex; gap:6px; }
:where(.ket) .prod__add{ position:absolute; bottom:10px; inset-inline-start:10px; width:44px; height:44px; border-radius:50%; background:var(--black); color:var(--white); display:grid; place-items:center; transition:transform .4s var(--ease), background-color .3s; }
:where(.ket) .prod__add:hover{ transform:scale(1.08); }
:where(.ket) .prod__add.is-done{ background:var(--green); }
:where(.ket) .prod h3{ margin-top:12px; font-size:15px; font-weight:600; line-height:1.3; }
:where(.ket) .prod__price{ display:flex; gap:8px; align-items:baseline; margin-top:4px; font:600 15px var(--f-latin); }
:where(.ket) .prod__price s{ font-weight:400; font-size:13px; color:var(--ink-2); }
:where(.ket) .prod__price .pill{ height:22px; font-size:11px; padding-inline:8px; }

/* ===================== 11. FOOTER ===================== */:where(.ket) .footer{ background:var(--blush); padding-top:var(--s7); padding-bottom:calc(var(--s7) + 72px); overflow:hidden; position:relative; }
:where(.ket) .footer__grid{ display:grid; gap:var(--s5); justify-items:center; text-align:center; }
:where(.ket) .footer__mark{ display:grid; justify-items:center; gap:10px; }
:where(.ket) .footer__mark svg{ width:64px; height:auto; display:block; }
:where(.ket) .footer__copy{ font-size:13px; color:var(--ink-2); }
@media (max-width:1023px){ :where(.ket) .footer__touch{ order:1; } :where(.ket) .pays{ order:2; } :where(.ket) .footer__legal{ order:3; } :where(.ket) .footer__mark{ order:4; margin-top:var(--s3); } }
:where(.ket) .footer__touch{ display:grid; justify-items:center; gap:12px; }
:where(.ket) .footer__touch p{ font-size:15px; font-weight:500; }
:where(.ket) .social{ display:flex; gap:4px; }
:where(.ket) .social a{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#111; transition:background-color .25s; }
:where(.ket) .social a:hover{ background:rgba(0,0,0,.07); }
:where(.ket) .pays{ direction:ltr; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px 26px; max-width:340px; margin-inline:auto; }
@media (min-width:640px){ :where(.ket) .pays{ max-width:none; gap:14px 30px; } }
:where(.ket) .pay{ display:inline-flex; align-items:center; gap:5px; color:#111; font:700 19px/1 var(--f-latin); letter-spacing:-.02em; }
:where(.ket) .pay--visa{ font-style:italic; font-weight:800; font-size:21px; letter-spacing:.01em; }
:where(.ket) .pay--mada{ font-size:15px; flex-direction:column; gap:1px; align-items:flex-start; }
:where(.ket) .pay--mada i{ display:block; width:32px; height:4px; background:#111; border-radius:1px; }
:where(.ket) .pay--flow{ font-weight:800; letter-spacing:-.04em; }
:where(.ket) .pay--mc svg{ display:block; }
:where(.ket) .pay--amex{ font-size:9.5px; font-weight:800; background:#111; color:var(--blush); padding:6px 5px; border-radius:3px; letter-spacing:.02em; }
:where(.ket) .footer__legal{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 18px; font-size:12px; color:#111; }
:where(.ket) .footer__legal .sbc{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid rgba(0,0,0,.25); border-radius:8px; font-size:11px; }
:where(.ket) .footer__legal .ids{ display:grid; gap:2px; text-align:start; }
html[dir="rtl"] :where(.ket) .footer__legal .ids{ text-align:right; }
@media (min-width:1024px){
  :where(.ket) .footer__grid{ grid-template-columns:1fr 1fr; justify-items:stretch; text-align:start; row-gap:var(--s6); }
  :where(.ket) .footer__mark{ grid-column:1; grid-row:1; justify-items:start; }
  :where(.ket) .footer__touch{ grid-column:2; grid-row:1; justify-items:end; }
  :where(.ket) .pays, :where(.ket) .footer__legal{ grid-column:1 / -1; justify-self:center; }
}

/* ===================== PERSISTENT: sticky bar, WhatsApp ===================== */:where(.ket) .sticky-bar{ position:fixed; inset-inline:0; bottom:0; z-index:55; background:var(--white); border-top:1px solid var(--g200); padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center; transform:translateY(105%); transition:transform .6s var(--ease); }
:where(.ket) .sticky-bar.is-visible{ transform:translateY(0); }
:where(.ket) .sticky-bar img{ width:48px; height:48px; border-radius:10px; object-fit:cover; background:var(--g100); }
:where(.ket) .sticky-bar__name{ font-size:13px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(.ket) .sticky-bar__price{ font:600 15px var(--f-latin); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(.ket) .sticky-bar__price s{ font-weight:400; font-size:11.5px; color:var(--ink-2); margin-inline-start:6px; }
:where(.ket) .sticky-bar .btn{ height:48px; padding-inline:20px; font-size:13.5px; }
@media (min-width:1024px){ :where(.ket) .sticky-bar{ display:none; } }
:where(.ket) .wa{ position:fixed; bottom:calc(16px + env(safe-area-inset-bottom)); inset-inline-start:16px; z-index:54; width:56px; height:56px; border-radius:50%; background:var(--green); color:var(--white); display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.18); transition:transform .6s var(--ease); text-decoration:none; }
:where(.ket) .wa:hover{ transform:scale(1.06); }
@media (max-width:1023px){ :where(.ket) .wa{ width:52px; height:52px; transform:translateY(calc(100% + 120px)); } .ket.bar-on .wa{ transform:translateY(-72px); } }

/* ===================== CART DRAWER ===================== */:where(.ket) .scrim{ position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.35); opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; }
:where(.ket) .scrim.is-open{ opacity:1; visibility:visible; }
:where(.ket) .drawer{ position:fixed; top:0; bottom:0; inset-inline-end:0; z-index:81; width:min(440px, 100vw); background:var(--white); display:flex; flex-direction:column; transform:translateX(calc(var(--dir) * 102%)); transition:transform .7s var(--ease); visibility:hidden; }
:where(.ket) .drawer.is-open{ transform:translateX(0); visibility:visible; }
:where(.ket) .drawer__head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px 14px 20px; border-bottom:1px solid var(--g200); }
:where(.ket) .drawer__head h2{ font-size:20px; font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-caps); }
html[lang="ar"] :where(.ket) .drawer__head h2{ font-weight:700; }
:where(.ket) .drawer__head h2 .num{ font-size:14px; color:var(--ink-2); margin-inline-start:6px; }
:where(.ket) .drawer__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px 20px; }
:where(.ket) .drawer__success{ display:flex; gap:12px; align-items:center; background:var(--mint); border-radius:16px; padding:10px 14px 10px 10px; margin-bottom:12px; font-size:14px; font-weight:600; }
:where(.ket) .drawer__success .gz{ width:56px; flex:none; }
:where(.ket) .ship-meter{ font-size:13px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
:where(.ket) .ship-meter i{ flex:1; height:4px; border-radius:4px; background:var(--green); }
:where(.ket) .citem{ display:grid; grid-template-columns:76px 1fr auto; gap:12px; padding-block:14px; border-bottom:1px solid var(--g200); align-items:start; }
:where(.ket) .citem__img{ width:76px; height:76px; border-radius:12px; background:var(--g100); overflow:hidden; display:grid; place-items:center; }
:where(.ket) .citem__img img{ width:100%; height:100%; object-fit:cover; }
:where(.ket) .citem__img svg{ width:70%; }
:where(.ket) .citem h3{ font-size:14px; font-weight:600; line-height:1.3; }
:where(.ket) .citem__price{ font:600 14px var(--f-latin); margin-top:2px; }
:where(.ket) .citem__price s{ font-weight:400; color:var(--ink-2); font-size:12px; margin-inline-start:4px; }
:where(.ket) .citem .stepper{ height:36px; margin-top:8px; }
:where(.ket) .citem .stepper button{ width:30px; height:30px; }
:where(.ket) .citem .stepper__val{ width:24px; font-size:14px; }
:where(.ket) .citem__rm{ font-size:12px; text-decoration:underline; color:var(--ink-2); padding:4px; }
:where(.ket) .upsell{ margin-top:20px; }
:where(.ket) .upsell h3{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-label); margin-bottom:8px; }
:where(.ket) .upsell__row{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding-block:8px; }
:where(.ket) .upsell__row .citem__img{ width:56px; height:56px; }
:where(.ket) .upsell__row p{ font-size:13.5px; font-weight:600; line-height:1.25; }
:where(.ket) .upsell__row span{ font:500 13px var(--f-latin); color:var(--ink-2); }
:where(.ket) .upsell__row .btn{ height:36px; padding-inline:14px; font-size:12px; }
:where(.ket) .drawer__foot{ padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--g200); }
:where(.ket) .drawer__total{ display:flex; justify-content:space-between; align-items:baseline; font-weight:600; margin-bottom:4px; }
:where(.ket) .drawer__total .num{ font-size:20px; }
:where(.ket) .drawer__foot small{ display:block; color:var(--ink-2); font-size:12px; margin-bottom:12px; }
:where(.ket) .empty{ text-align:center; padding:48px 12px; }
:where(.ket) .empty .gz{ width:150px; margin:0 auto 18px; }
:where(.ket) .empty h3{ font-size:22px; font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-caps); }
:where(.ket) .empty p{ color:var(--ink-2); margin:6px 0 20px; }

/* ===================== LIGHTBOX / FLY / TOAST ===================== */:where(.ket) .lightbox{ position:fixed; inset:0; z-index:90; background:var(--white); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; touch-action:none; }
:where(.ket) .lightbox.is-open{ opacity:1; visibility:visible; }
:where(.ket) .lightbox__img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; cursor:zoom-in; transition:transform .5s var(--ease); }
:where(.ket) .lightbox__img.is-zoomed{ transform:scale(2.4); cursor:zoom-out; transition:transform .5s var(--ease), transform-origin .1s linear; }
:where(.ket) .lightbox__close{ position:absolute; top:12px; inset-inline-end:12px; background:var(--g100); z-index:2; }
:where(.ket) .lightbox__nav{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--g200); border-radius:var(--r-pill); padding:4px; z-index:2; font:500 13px var(--f-latin); }
html[dir="rtl"] :where(.ket) .lightbox__nav svg{ transform:scaleX(-1); }
:where(.ket) .fly{ position:fixed; z-index:100; pointer-events:none; border-radius:12px; object-fit:cover; background:var(--g100); box-shadow:0 10px 30px rgba(0,0,0,.2); }
:where(.ket) .toast{ position:fixed; z-index:110; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); background:var(--black); color:var(--white); padding:12px 18px; border-radius:var(--r-pill); font-size:14px; max-width:calc(100vw - 32px); width:max-content; text-align:center; opacity:0; visibility:hidden; transition:all .45s var(--ease); }
:where(.ket) .toast.is-on{ opacity:1; visibility:visible; transform:translate(-50%,0); }

/* Gazelle mascot (client drawings, recoloured) */:where(.ket) img.gz{ display:block; height:auto; }

/* Interactive gazelle: peeks in when the customer lingers on a section */:where(.ket) .peek{ position:fixed; inset:0; z-index:57; pointer-events:none; }
:where(.ket) .peek__fig{ position:fixed; width:var(--pw,124px); pointer-events:auto; cursor:pointer; opacity:0; visibility:hidden; border:0; padding:0; background:none;
  transition:transform .95s cubic-bezier(.34,1.56,.64,1), opacity .3s, visibility 0s .95s; }
:where(.ket) .peek__fig > img{ width:100%; height:auto; display:block; transform:scaleX(var(--flip,1)); }
:where(.ket) .peek.is-on .peek__fig{ opacity:1; visibility:visible; transition:transform .95s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
:where(.ket) .peek.is-on .peek__fig > img{ animation:peek-bob 2.6s ease-in-out 1s infinite; }
/* hop: jumps in on an arc · sit: tilts its head */:where(.ket) .peek--hop.is-on .peek__fig > img{ animation:peek-hop 1s cubic-bezier(.3,.7,.4,1) both, peek-bob 2.6s ease-in-out 1.2s infinite; }
@keyframes peek-hop{ 0%{ transform:scaleX(var(--flip,1)) translateY(0) rotate(0); } 35%{ transform:scaleX(var(--flip,1)) translateY(-60%) rotate(-12deg); }
  62%{ transform:scaleX(var(--flip,1)) translateY(0) rotate(4deg); } 78%{ transform:scaleX(var(--flip,1)) translateY(-14%) rotate(0); } 100%{ transform:scaleX(var(--flip,1)) translateY(0) rotate(0); } }
:where(.ket) .peek--sit.is-on .peek__fig > img{ transform-origin:50% 100%; animation:peek-tilt 3s ease-in-out .9s infinite; }
@keyframes peek-tilt{ 0%,100%{ transform:scaleX(var(--flip,1)) rotate(0); } 25%{ transform:scaleX(var(--flip,1)) rotate(-6deg); } 50%{ transform:scaleX(var(--flip,1)) rotate(0); } 72%{ transform:scaleX(var(--flip,1)) rotate(4deg); } }

/* ===================== ANIMATED GAZELLE RIGS =====================
   The client's drawings cut into layers (tools/brand/cut_rigs.py): the body pops out of the box,
   the arm waves, paws land on the rim, sparkles flash, the Zzz float. Without .is-play (or with
   reduced motion) every layer simply sits in its final place. */:where(.ket) .rig{ position:relative; display:block; width:100%; aspect-ratio:var(--ar); container-type:inline-size; }
:where(.ket) .rig img{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; user-select:none; -webkit-user-drag:none; }
:where(.ket) .rig__clip{ position:absolute; inset:0; clip-path:inset(0 0 calc(100% - var(--rim, 100%)) 0); }   /* the body disappears into the box */:where(.ket) .rig__pop, :where(.ket) .rig__breathe{ position:absolute; inset:0; transform-origin:var(--px, 50%) var(--rim, 100%); }
:where(.ket) .rig__arm{ transform-origin:var(--ax) var(--ay); }
:where(.ket) .rig__blink{ position:absolute; left:var(--ex); top:var(--ey); width:6.4%; height:5.4%; transform:translate(-50%,-50%); background:#fff; border-radius:50%; opacity:0; }
:where(.ket) .rig__blink::after{ content:""; position:absolute; inset:38% 8% 22%; border-bottom:max(1.5px, .9cqw) solid #000; border-radius:0 0 50% 50%; }
:where(.ket) .rig__hey{ position:absolute; left:50%; top:-4%; transform:translateX(-50%) rotate(-7deg); padding:0;
  background:none; color:#111; text-shadow:0 0 3px #fff, 0 0 6px #fff; font:700 21cqw/1 'Marhey', var(--f-ar); white-space:nowrap; }
:where(.ket) .rig.is-play .rig__pop{ animation:rig-pop 1.5s cubic-bezier(.3,.7,.3,1) both; }
@keyframes rig-pop{ 0%{ transform:translateY(56%); } 20%{ transform:translateY(38%); } 30%{ transform:translateY(38%) rotate(-3deg); } 40%{ transform:translateY(38%) rotate(3deg); }
  52%{ transform:translateY(38%) rotate(0); } 74%{ transform:translateY(-7%); } 87%{ transform:translateY(2%); } 100%{ transform:translateY(0); } }
:where(.ket) .rig.is-play .rig__paw{ animation:rig-paw 1.5s both; }
@keyframes rig-paw{ 0%,70%{ opacity:0; transform:translateY(-12%); } 86%{ opacity:1; transform:translateY(1.5%); } 100%{ opacity:1; transform:none; } }
:where(.ket) .rig.is-play .rig__arm{ animation:rig-wave 3.4s ease-in-out 1.35s infinite; }
@keyframes rig-wave{ 0%,46%,100%{ transform:rotate(0); } 8%{ transform:rotate(-18deg); } 16%{ transform:rotate(12deg); } 24%{ transform:rotate(-16deg); } 32%{ transform:rotate(10deg); } 40%{ transform:rotate(-5deg); } }
:where(.ket) .rig.is-play .rig__wave{ animation:rig-lines 3.4s ease-in-out 1.35s infinite both; }
@keyframes rig-lines{ 0%,44%,100%{ opacity:0; } 6%,38%{ opacity:1; } }
:where(.ket) .rig.is-play .rig__spark{ transform-origin:50% 45%; animation:rig-spark 1.1s ease-in-out 1.15s infinite alternate both; }
@keyframes rig-spark{ from{ opacity:.15; transform:scale(.9); } to{ opacity:1; transform:scale(1.04); } }
:where(.ket) .rig.is-play .rig__hey{ animation:rig-hey .7s cubic-bezier(.34,1.56,.64,1) 1.1s both, rig-float 2.8s ease-in-out 1.9s infinite; }
@keyframes rig-hey{ from{ opacity:0; transform:translateX(-50%) rotate(-22deg) scale(.2); } to{ opacity:1; transform:translateX(-50%) rotate(-7deg) scale(1); } }
@keyframes rig-float{ 0%,100%{ transform:translateX(-50%) rotate(-7deg) translateY(0); } 50%{ transform:translateX(-50%) rotate(-3deg) translateY(-6%); } }
:where(.ket) .rig.is-play .rig__blink{ animation:rig-blink 4.2s 2.4s infinite; }
@keyframes rig-blink{ 0%,90%,100%{ opacity:0; } 92%,96%{ opacity:1; } }
:where(.ket) .rig--sleep.is-play .rig__breathe{ transform-origin:50% 96%; animation:rig-breathe 3.4s ease-in-out infinite; }
@keyframes rig-breathe{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(1.015,1.035); } }
:where(.ket) .rig--sleep.is-play .rig__zzz{ transform-origin:78% 30%; animation:rig-zzz 3s ease-in-out infinite; }
@keyframes rig-zzz{ 0%{ opacity:0; transform:translate(-3%,5%) scale(.85); } 25%,65%{ opacity:1; transform:translate(0,0) scale(1); } 100%{ opacity:0; transform:translate(3%,-7%) scale(1.06); } }
:where(.ket) .drawer__success .rig{ width:84px; flex:none; margin-block:-6px; }
:where(.ket) .empty .rig{ width:170px; margin:0 auto 18px; }
@keyframes peek-bob{ 0%,100%{ transform:scaleX(var(--flip,1)) translateY(0) rotate(0); } 50%{ transform:scaleX(var(--flip,1)) translateY(-5px) rotate(-3deg); } }
:where(.ket) .peek--side .peek__fig{ top:44vh; }
:where(.ket) .peek--side.peek--l .peek__fig{ left:0; transform:translateX(-110%) rotate(30deg); }
:where(.ket) .peek--side.peek--l.is-on .peek__fig{ transform:translateX(-26%) rotate(16deg); }
:where(.ket) .peek--side.peek--r .peek__fig{ right:0; transform:translateX(110%) rotate(-30deg); }
:where(.ket) .peek--side.peek--r.is-on .peek__fig{ transform:translateX(26%) rotate(-16deg); }
:where(.ket) .peek--bottom .peek__fig{ bottom:0; transform:translateY(110%); }
:where(.ket) .peek--bottom.peek--l .peek__fig{ left:max(16px, 7vw); }
:where(.ket) .peek--bottom.peek--r .peek__fig{ right:max(16px, 7vw); }
:where(.ket) .peek--bottom.is-on .peek__fig{ transform:translateY(14%); }
.ket.bar-on .peek--bottom .peek__fig{ bottom:calc(72px + env(safe-area-inset-bottom)); }
:where(.ket) .peek__say{ position:fixed; width:max-content; max-width:min(250px, 66vw); font:700 17px/1.35 'Marhey', var(--f-ar); color:#111; text-align:center;
  text-shadow:0 0 3px #fff, 0 0 6px #fff, 0 0 10px #fff; pointer-events:auto; opacity:0; transform:scale(.6); transition:opacity .25s, transform .5s cubic-bezier(.34,1.56,.64,1); }
:where(.ket) .peek.is-on .peek__say{ opacity:1; transform:scale(1); transition-delay:.55s; }
:where(.ket) .peek--side .peek__say{ top:calc(44vh - 58px); }
:where(.ket) .peek--side.peek--l .peek__say{ left:calc(var(--pw,124px) * .78); transform-origin:0 100%; }
:where(.ket) .peek--side.peek--r .peek__say{ right:calc(var(--pw,124px) * .78); transform-origin:100% 100%; }
:where(.ket) .peek--bottom .peek__say{ bottom:calc(var(--pw,124px) * 1.12); }
:where(.ket) .peek--rig.peek--bottom .peek__say{ bottom:calc(var(--pw,124px) * 1.3); }
.ket.bar-on .peek--bottom .peek__say{ bottom:calc(var(--pw,124px) * 1.12 + 72px); }
:where(.ket) .peek--bottom.peek--l .peek__say{ left:calc(max(16px, 7vw) + var(--pw,124px) * .55); transform-origin:0 100%; }
:where(.ket) .peek--bottom.peek--r .peek__say{ right:calc(max(16px, 7vw) + var(--pw,124px) * .55); transform-origin:100% 100%; }
:where(.ket) .peek__say a{ display:inline-flex; margin-top:8px; height:32px; align-items:center; padding-inline:14px; border-radius:var(--r-pill); background:#111; color:var(--white); text-shadow:none; text-decoration:none; font-size:13px; }

/* Peeking gazelle (client's animation) */:where(.ket) .gzv{ position:fixed; bottom:0; z-index:57; width:var(--gw,160px); pointer-events:none; opacity:0; visibility:hidden;
  transition:opacity .25s, transform .7s cubic-bezier(.55,0,.75,.2), visibility 0s .7s; }
:where(.ket) .gzv.is-on{ opacity:1; visibility:visible; transition:opacity .25s, transform .7s cubic-bezier(.55,0,.75,.2); }
:where(.ket) .gzv--l{ left:0; } :where(.ket) .gzv--r{ right:0; }
:where(.ket) .gzv--txt{ height:calc(var(--gw,160px) * 1.52); }
:where(.ket) .gzv--r .gzv__v{ transform:scaleX(-1); }
:where(.ket) .gzv--l.is-out{ transform:translateX(-106%); } :where(.ket) .gzv--r.is-out{ transform:translateX(106%); }
:where(.ket) .gzv__v{ display:block; width:100%; height:auto; aspect-ratio:300/456; }
.ket.bar-on .gzv{ bottom:calc(66px + env(safe-area-inset-bottom)); }
:where(.ket) .gzv__say{ position:absolute; bottom:92%; width:max-content; max-width:min(250px, 66vw); font:700 clamp(20px,2vw,26px)/1.15 'Marhey', var(--f-ar); color:#111;
  -webkit-text-stroke:7px #fff; paint-order:stroke fill; text-shadow:0 0 6px #fff, 0 0 12px #fff; opacity:0; transform:translateY(12px) scale(.55); transition:opacity .25s, transform .55s cubic-bezier(.34,1.56,.64,1); pointer-events:auto; }
:where(.ket) .gzv--l .gzv__say{ left:10%; transform-origin:25% 100%; } :where(.ket) .gzv--r .gzv__say{ right:10%; transform-origin:75% 100%; }
:where(.ket) .gzv.is-talk .gzv__say, :where(.ket) .gzw.is-talk .gzv__say{ opacity:1; transform:none; }
:where(.ket) .gzv__say small{ -webkit-text-stroke-width:5px; }
/* Walking gazelle (Blender: walk + idle loops, transparent animated WebP) */:where(.ket) .gzw{ position:fixed; bottom:0; z-index:57; width:var(--gw,150px); pointer-events:none; visibility:hidden; }
:where(.ket) .gzw.is-on{ visibility:visible; }
:where(.ket) .gzw--l{ left:0; } :where(.ket) .gzw--r{ right:0; }
:where(.ket) .gzw--txt{ height:calc(var(--gw,150px) * 1.288); }
.ket.bar-on .gzw{ bottom:calc(66px + env(safe-area-inset-bottom)); }
:where(.ket) .gzw__m{ position:relative; aspect-ratio:330/425; }
:where(.ket) .gzw__m img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
:where(.ket) .gzw__m [hidden]{ display:none; }
:where(.ket) .gzw__walk{ opacity:0; } :where(.ket) .gzw.is-walk .gzw__walk{ opacity:1; } :where(.ket) .gzw.is-walk .gzw__idle{ opacity:0; }
:where(.ket) .gzw--r .gzw__m, :where(.ket) .gzw--l.is-back .gzw__m{ transform:scaleX(-1); } :where(.ket) .gzw--r.is-back .gzw__m{ transform:none; }
:where(.ket) .gzw--l .gzv__say{ left:18%; transform-origin:25% 100%; } :where(.ket) .gzw--r .gzv__say{ right:18%; transform-origin:75% 100%; }
:where(.ket) .gzv__say b{ display:block; font-weight:700; }
:where(.ket) .gzv__say small{ display:block; font:600 14px/1.45 var(--f-ar); margin-top:4px; white-space:normal; }
@media (max-width:639px){ :where(.ket) .gzv .gzv__say small, :where(.ket) .gzw .gzv__say small{ display:none; } }
:where(.ket) .gzv__say a{ display:inline-flex; margin-top:8px; height:32px; align-items:center; padding-inline:14px; border-radius:var(--r-pill); background:#111; color:#fff; text-decoration:none; text-shadow:none; font:600 13px var(--f-ar); }
:where(.ket) .wa{ transition:opacity .3s; } .ket.kg-hi .wa{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ :where(.ket) .gzv, :where(.ket) .gzv__say{ transition:opacity .2s!important; } :where(.ket) .gzv--l.is-out, :where(.ket) .gzv--r.is-out{ transform:none; opacity:0; } }

/* Decoration inspiration */:where(.ket) .insp__grid{ display:grid; gap:var(--s6); align-items:center; }
@media (min-width:1024px){ :where(.ket) .insp__grid{ grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,96px); } }
:where(.ket) #inspTitle{ text-transform:none; }
:where(.ket) .insp__body{ font-size:var(--t-md); color:var(--ink-2); max-width:40ch; }
:where(.ket) .insp__chips{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:var(--s5); max-width:520px; }
@media (min-width:640px){ :where(.ket) .insp__chips{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
:where(.ket) .insp__chip{ justify-content:center; height:56px; padding-inline:16px; border-radius:16px; background:var(--chip, var(--g100)); font-size:16px; font-weight:500; display:inline-flex; align-items:center; text-decoration:none; color:var(--black);
  transition:transform .45s var(--ease), background-color .3s, color .3s; }
:where(.ket) .insp__chip:hover{ transform:translateY(-3px); background:var(--black); color:var(--white); }
:where(.ket) .insp__art{ margin:0; max-width:560px; justify-self:center; width:100%; }
:where(.ket) .insp__art img{ width:100%; height:auto; }
:where(.ket) .insp__fx{ position:relative; }
:where(.ket) .insp__fx .insp__steam, :where(.ket) .insp__fx .insp__gz{ position:absolute; inset:0; height:100%; pointer-events:none; }
:where(.ket) .insp__steam{ transform-origin:30% 19%; animation:insp-steam 3.8s ease-in-out infinite; }   /* anchored on the mug: the top sways, rises and thins */@keyframes insp-steam{ 0%, 100%{ opacity:.95; transform:none; } 25%{ opacity:1; transform:translateY(-1.5%) scaleY(1.06) skewX(-8deg); }
  50%{ opacity:.45; transform:translateY(-3%) scaleY(1.1) skewX(0); } 75%{ opacity:.85; transform:translateY(-1%) scaleY(1.04) skewX(7deg); } }
:where(.ket) .insp__gz{ transform-origin:var(--gzx, 16%) var(--belly, 86%); animation:insp-breathe 3.6s ease-in-out infinite; }
@keyframes insp-breathe{ 0%, 100%{ transform:scale(1, 1); } 45%{ transform:scale(1.012, 1.04); } }
@media (prefers-reduced-motion: reduce){ :where(.ket) .insp__steam, :where(.ket) .insp__gz{ animation:none; } }

/* Footer brand: full lockup + "from our hands to your home" stamp */

/* Intro states (only while JS animates) */html.is-loading :where(.ket) .intro-line > span{ transform:translateY(110%); }
html.is-loading :where(.ket) .g-stage{ clip-path:inset(100% 0 0 0); }
html.is-loading :where(.ket) .intro-fade{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  :where(.ket) .klogo .kl, :where(.ket) .klogo__smile, :where(.ket) .peek__fig, :where(.ket) .peek__say{ transition:none!important; }
  :where(.ket) .peek.is-on .peek__fig img, :where(.ket) .stamp__ring, :where(.ket) .rig, :where(.ket) .rig *{ animation:none!important; }
  :where(.ket) *, :where(.ket) *::before, :where(.ket) *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}
/* Lenis */html.lenis .ket, html.lenis :where(.ket) body{ height:auto; }
:where(.ket) .lenis.lenis-smooth{ scroll-behavior:auto!important; }
:where(.ket) .lenis.lenis-stopped{ overflow:hidden; }

/* ===================== CUSTOMER MOMENTS (fanned photo deck) ===================== */:where(.ket) .mom{ overflow-x:clip; }
:where(.ket) .mom__lede{ margin-top:var(--s4); max-width:52ch; font-size:var(--t-md); line-height:1.6; }
:where(.ket) .mom__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:var(--s5); }
:where(.ket) .mom__bar .sample-note{ margin-top:0; }
:where(.ket) .mom__chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; max-width:100%; }
:where(.ket) .mom__chips::-webkit-scrollbar{ display:none; }
:where(.ket) .mom__chip{ height:40px; padding-inline:18px; border-radius:var(--r-pill); border:1px solid var(--g200); font-size:14px; font-weight:500; white-space:nowrap; transition:background-color .25s, color .25s, border-color .25s; }
:where(.ket) .mom__chip:hover{ border-color:var(--black); }
:where(.ket) .mom__chip[aria-pressed="true"]{ background:var(--black); color:var(--white); border-color:var(--black); }

:where(.ket) .mom__deck{ --cw:min(74vw, 340px); --sp:calc(var(--cw) * .56); --d:1; position:relative; display:grid; justify-items:center; align-items:start; padding-block:12px 36px; touch-action:pan-y; -webkit-user-select:none; user-select:none; border-radius:var(--r-card); }
html[dir="rtl"] :where(.ket) .mom__deck{ --d:-1; }
@media (min-width:768px){ :where(.ket) .mom__deck{ --cw:360px; --sp:calc(var(--cw) * .72); } }
@media (min-width:1200px){ :where(.ket) .mom__deck{ --cw:390px; --sp:calc(var(--cw) * .8); } }
:where(.ket) .mcard{ --o:0; --ao:0; grid-area:1 / 1; width:var(--cw); background:var(--white); border-radius:24px; padding:10px; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 24px 48px -22px rgba(0,0,0,.28);
  transform:translateX(calc(var(--o) * var(--sp) * var(--d))) translateY(calc(var(--ao) * 22px)) rotate(calc(var(--o) * var(--d) * 4deg)) scale(calc(1 - var(--ao) * .1));
  transition:transform .8s var(--ease), opacity .5s var(--ease); transition-delay:calc(var(--ao) * 60ms); }
:where(.ket) .mcard.is-active{ cursor:auto; }
:where(.ket) .mcard.is-hidden{ opacity:0; pointer-events:none; }
:where(.ket) .mom__deck.is-stacked .mcard{ transform:translateY(40px) rotate(calc(var(--o) * var(--d) * 1.5deg)) scale(.9); }
:where(.ket) .mcard__media{ position:relative; display:block; width:100%; aspect-ratio:4 / 5; border-radius:16px; overflow:hidden; background:var(--g100); }
:where(.ket) .mcard:not(.is-active) .mcard__media{ pointer-events:none; }
:where(.ket) .mcard__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); transition:transform 1s var(--ease); }
:where(.ket) .mcard.is-active .mcard__media:hover img{ transform:scale(1.04); }
:where(.ket) .mcard__zoom{ position:absolute; top:10px; inset-inline-end:10px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.92); opacity:0; transition:opacity .4s; }
:where(.ket) .mcard.is-active .mcard__zoom{ opacity:1; }
:where(.ket) .mcard__body{ display:grid; gap:12px; padding:14px 6px 4px; transition:opacity .4s var(--ease); }
:where(.ket) .mcard:not(.is-active) .mcard__body{ opacity:0; }
:where(.ket) .mcard__who{ display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:10px; }
:where(.ket) .mcard__av{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:17px; background:var(--av, var(--blush)); }
:where(.ket) .mcard__who strong{ display:block; font-size:15px; line-height:1.3; }
:where(.ket) .mcard__meta{ display:block; font-size:12.5px; color:var(--ink-2); }
:where(.ket) .mcard__quote{ font-size:15.5px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.65em * 2); }
:where(.ket) .mcard__shop{ display:grid; grid-template-columns:44px 1fr 40px; align-items:center; gap:10px; background:var(--g100); border-radius:14px; padding:8px; }
:where(.ket) .mcard__thumb{ width:44px; height:44px; border-radius:10px; overflow:hidden; background:var(--white); display:grid; place-items:center; }
:where(.ket) .mcard__thumb img{ width:100%; height:100%; object-fit:cover; }
:where(.ket) .mcard__thumb .ph{ width:80%; height:80%; }
:where(.ket) .mcard__kicker{ display:block; font-size:11.5px; color:var(--ink-2); line-height:1.3; }
:where(.ket) .mcard__pname{ display:block; font-size:13.5px; font-weight:600; line-height:1.35; }
:where(.ket) .mcard__price{ font:500 12.5px var(--f-latin); }
:where(.ket) .mcard__add{ width:40px; height:40px; border-radius:50%; background:var(--black); color:var(--white); display:grid; place-items:center; transition:transform .3s var(--ease), background-color .3s; }
:where(.ket) .mcard__add:hover{ transform:scale(1.08); }
:where(.ket) .mcard__add.is-done{ background:var(--green); }

:where(.ket) .mom__ctrl{ display:flex; justify-content:center; align-items:center; gap:18px; }
:where(.ket) .mom__nav{ width:48px; height:48px; border:1px solid var(--black); border-radius:50%; display:grid; place-items:center; transition:background-color .25s, color .25s; }
:where(.ket) .mom__nav:hover{ background:var(--black); color:var(--white); }
:where(.ket) .mom__count{ font:500 14px var(--f-latin); min-width:64px; text-align:center; }
:where(.ket) .mom__share{ margin-top:var(--s7); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--g200); padding-top:var(--s5); }
:where(.ket) .mom__share p{ font-size:var(--t-md); max-width:46ch; }
@media (prefers-reduced-motion: reduce){ :where(.ket) .mcard, :where(.ket) .mcard__media img{ transition:none; } }

/* ---- theme overrides (ket/overrides.css) ---- */
/* Theme-only rules for the KET product page (appended to assets/ket.css by ket/extract_css.py).
   They cover the places where the Zid page differs from the prototype: Zid's own components
   (quantity input, options, payment widgets, metafields, related carousel) and the hero fallback. */
[data-ket-product] .hidden{ display:none!important; }   /* product page only: Zid's 'hidden lg:flex' menus elsewhere must still work */
.ket [hidden]{ display:none!important; }

/* 3D hero: static fallback until the bundle mounts (and without WebGL / JS) */
.ket #ket-hero .kh-static{ position:relative; min-height:100vh; min-height:100svh; display:grid; align-content:end; gap:16px; padding:96px clamp(16px,4vw,56px) 40px; background:radial-gradient(120% 80% at 50% 38%, #fff 0%, #f6f5f3 46%, #e9e7e4 100%); overflow:hidden; }
.ket #ket-hero .kh-static-media{ position:absolute; inset:0; display:grid; place-items:center; padding-bottom:24vh; }
.ket #ket-hero .kh-static-media img{ width:min(78vw,560px); height:auto; mix-blend-mode:multiply; }
.ket #ket-hero .kh-static h2{ position:relative; margin:0; font-size:clamp(44px,9vw,128px); line-height:1.05; font-weight:700; text-transform:uppercase; }

/* the description from Zid is HTML */
.ket .buy__sub p{ margin:0; }
.ket .ket-prose{ font-size:15px; line-height:1.75; color:var(--ink-2); }
.ket .ket-prose p + p{ margin-top:.8em; }
.ket .ket-prose ul{ list-style:disc; padding-inline-start:1.2em; }
.ket .ket-meta{ display:grid; gap:10px; margin-top:16px; font-size:14px; }

/* Tabby / Tamara / bank offers (Zid widgets) */
.ket .ket-bnpl{ margin-top:var(--s4); display:grid; gap:10px; }
.ket .ket-bnpl:empty{ display:none; }

/* options + custom fields (Zid headless components) */
.ket .ket-form{ display:grid; gap:var(--s4); margin-top:var(--s5); }
.ket .ket-options .product-options__group{ display:grid; gap:10px; }

/* actions: [quantity][add to cart] / [buy now] */
.ket .buy__actions{ display:block; margin-top:0; }
.ket .ket-actions{ display:grid; grid-template-columns:auto 1fr; gap:10px; }
.ket .ket-actions > .btn-outline, .ket .ket-actions--out .btn{ grid-column:1 / -1; }
.ket .ket-actions--out{ grid-template-columns:1fr; }
/* Zid's gift-order link: icon beside two lines of plain text (the KET .btn is one uppercase line) */
.ket [data-gift-order-link]{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:12px; row-gap:2px; height:auto; min-height:56px; padding:12px 22px; margin-top:var(--s3); white-space:normal; text-transform:none; letter-spacing:0; text-align:start; }
.ket [data-gift-order-link] svg{ grid-row:span 2; }
.ket .ket-actions #product-view-add-to-cart:empty{ display:none; }
/* Zid's quantity input, drawn as the KET pill stepper */
.ket .ket-qty .qty-input{ height:56px; border:1px solid var(--black); border-radius:var(--r-pill); padding-inline:4px; gap:0; box-shadow:none; }
.ket .ket-qty .qty-input:hover, .ket .ket-qty .qty-input:focus-within{ box-shadow:none; outline:0; }
.ket .ket-qty .qty-input-btn{ width:40px; height:46px; border-radius:var(--r-pill); background:none; }
.ket .ket-qty .qty-input-btn:hover{ background:var(--g100); }
.ket .ket-qty .qty-input-btn svg{ width:18px; height:18px; }
.ket .ket-qty .qty-input-field{ width:34px; border:0; background:none; text-align:center; font:600 17px/24px var(--f-latin); -moz-appearance:textfield; }
.ket .ket-qty .qty-input-field::-webkit-inner-spin-button, .ket .ket-qty .qty-input-field::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }

/* sections on the Zid page are not preceded by the prototype's own spacing */
.ket #dimensions, .ket #info, .ket #reviews, .ket #related{ padding-top:0; }
.ket .ket-related .theme-container, .ket .ket-related > div{ padding-inline:0; }
.ket .ket-related h2:empty{ display:none; }

/* Zid's header is sticky over the pinned 3D hero: keep the scene below it (height measured by ket-product.js) */
.ket #ket-hero .kh-canvas{ top:var(--ket-header-h, 0px)!important; height:calc(100% - var(--ket-header-h, 0px))!important; }
.ket .ket-qty .qty-input-field{ height:46px; padding:0; line-height:46px; }
.ket .rev > *{ min-width:0; }   /* the review slider must not widen the column on phones */
.ket .ket-qty .qty-input{ display:inline-flex; align-items:center; }
body.ket-before-buy #sticky-cta{ display:none!important; }   /* not over the 3D hero / gallery */

/* ===================== Header / announcement / footer (every page) ===================== */
.ket-top{ background:var(--white); }
.ket-top .header{ position:relative; top:auto; }
.ket-top .header__start, .ket-top .header__end{ min-width:0; }
.ket-top .header__end{ list-style:none; margin:0; padding:0; }
.ket-top .header__end > li:not(.hidden){ display:flex; }
.ket-top .icon-btn svg{ display:block; }
.ket-top .ket-nav{ margin-inline-start:6px; font-size:14px; }
.ket-top .cart-count{ transform:none; display:block; }
.ket-top .cart-count[hidden]{ display:none; }
.ket-top .logo{ justify-self:center; }
.ket-top a.announce{ color:inherit; text-decoration:none; }
#mobile-drawer{ top:var(--ket-top-h, var(--header-h))!important; }
.ket-top [data-gift-cart-popup]{ font-size:14px; }

/* the footer element is itself .ket, so the prototype's ".footer" rules are restated here */
.ket.footer{ background:var(--blush); padding-top:var(--s7); padding-bottom:var(--s7); overflow:hidden; position:relative; }
body:has(#sticky-cta) .ket.footer{ padding-bottom:calc(var(--s7) + 96px); }   /* clear of Zid's sticky add-to-cart bar */
.ket .footer__links{ display:grid; gap:var(--s5) var(--s6); grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); padding-bottom:var(--s6); margin-bottom:var(--s6); border-bottom:1px solid rgba(0,0,0,.12); }
.ket .footer__about{ grid-column:1 / -1; max-width:60ch; font-size:14px; line-height:1.7; color:var(--ink-2); }
.ket .footer__group h3{ font-size:14px; font-weight:700; margin-bottom:10px; }
.ket .footer__group ul{ display:grid; gap:6px; }
.ket .footer__group a{ font-size:14px; color:var(--ink-2); text-decoration:none; }
.ket .footer__group a:hover{ color:var(--black); text-decoration:underline; }
.ket .pay--img img{ display:block; height:24px; width:auto; max-width:64px; object-fit:contain; mix-blend-mode:multiply; }
.ket .footer__legal a{ color:inherit; }
.ket .footer__legal img{ display:block; height:36px; width:auto; }
@media (min-width:1024px){
  .ket .footer__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; }
  .ket .footer__mark{ justify-self:start; justify-items:start; text-align:start; }
  .ket .footer__touch{ justify-self:end; justify-items:start; text-align:start; }
  .ket .footer__grid .pays, .ket .footer__grid .footer__legal{ grid-column:1 / -1; justify-self:center; }
}
.ket .pays{ max-width:none; }
.ket .pay--img img{ filter:grayscale(1) contrast(1.2); }
.ket .pay--tamara{ font-weight:800; letter-spacing:-.03em; }
.ket .pay--stc{ font-weight:800; font-size:17px; letter-spacing:-.02em; }
.ket-top .icon-btn.hidden{ display:none; }   /* Zid shows either login or profile */

/* ===================== Sections added for parity with the prototype ===================== */
.ket .rev__write{ margin-top:var(--s5); }
.ket .rev__write .btn{ height:48px; }
.ket .rev__empty{ display:grid; place-items:center; min-height:200px; padding:var(--s6); border-radius:var(--r-card); background:var(--g100); text-align:center; font-size:16px; color:var(--ink-2); }
.ket .rcard footer .pill{ background:var(--white); }
.ket .prod__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.ket .prod:hover .prod__media img{ transform:scale(1.04); }
.ket .prod__link{ position:absolute; inset:0; }
.ket .prod__pills{ z-index:1; }
.ket .prod__add{ z-index:1; display:grid; place-items:center; color:var(--white); text-decoration:none; }
.ket .prod h3 a{ text-decoration:none; }
.ket a.insp__chip{ color:var(--black); }
.ket .mcard__add{ display:grid; place-items:center; }
.ket .prod__link{ display:grid; place-items:center; }
.ket .prod__link svg.ph{ width:62%; height:auto; transition:transform .9s var(--ease); }
.ket .prod:hover .prod__link svg.ph{ transform:scale(1.05) translateY(-2%); }
.ket .bundle{ margin-bottom:var(--s5); }
.ket .bundle__thumbs svg.ph{ width:80%; height:auto; }

/* The 3D hero starts at the very top of the page, under the announcement bar and header (as it does
   while pinned and as in the prototype), so the whole first screen, pieces and wording, fits on load.
   --ket-header-h is measured by ket-product.js; the fallbacks are the bar + header heights. */
.ket #ket-hero{ margin-top:calc(-1 * var(--ket-header-h, 97px)); }
@media (min-width:1200px){ .ket #ket-hero{ margin-top:calc(-1 * var(--ket-header-h, 109px)); } }

/* ===================== KET green for the announcement bar and footer (as the home page), every page ===================== */
.ket-top .announce{ background:#088040; color:#fff; }
.ket-top .announce .marquee__group span::after{ background:#fff; }
.ket.footer{ background:#088040; color:#fff; }
.ket.footer :is(p, span, a, h3, li, small, b, strong, svg, .footer__copy, .footer__about, .footer__group a){ color:#fff; }
.ket.footer .footer__links{ border-bottom-color:rgba(255,255,255,.22); }
.ket.footer .footer__group a, .ket.footer .footer__about{ opacity:.85; }
.ket.footer .footer__group a:hover{ opacity:1; }
.ket.footer .footer__mark svg, .ket.footer .footer__mark svg *{ color:#fff; fill:#fff; }   /* the smile, white on the green */

/* ===================== Phone menu: bigger rows with a line between them ===================== */
.ket-dlink{ display:flex; align-items:center; justify-content:space-between; font-size:19px!important; font-weight:600; letter-spacing:-.01em; padding-block:18px!important; border-bottom:1px solid rgba(0,0,0,.07); }
.ket-dlink::after{ content:"›"; font-size:22px; font-weight:400; opacity:.35; }
html[dir="rtl"] .ket-dlink::after{ content:"‹"; }
details > summary.ket-dlink::after{ content:none; }

/* the automatic story (department wording): a two-word title, so a smaller size, and room for the dots of the lines below */
.ket .story--auto .story__word{ font-size:clamp(44px, 6.4vw, 104px); line-height:1.15; }
.ket .story--auto .story__lines{ margin-top:clamp(10px, 1.6vw, 22px); }

/* ===================== Header: same height before and after scrolling (only the logo folds), so the page never jumps ===================== */
.ket-top .header.is-scrolled .header__inner{ height:var(--header-h); }

/* ===================== Product page: the add-to-cart bar is a small floating pill in the middle ===================== */
#sticky-cta{ left:50%!important; right:auto!important; bottom:calc(14px + env(safe-area-inset-bottom))!important; width:min(560px, calc(100% - 24px));
  transform:translateX(-50%); border:0!important; border-radius:999px; padding:8px 8px 8px 14px!important; background:rgba(255,255,255,.96)!important;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.05); }
html[dir="rtl"] #sticky-cta{ padding:8px 14px 8px 8px!important; }
#sticky-cta .theme-container{ max-width:none; padding:0; }
#sticky-cta .size-16{ width:42px; height:42px; border-radius:50%; }
#sticky-cta .btn{ height:44px; min-height:0; padding-inline:18px; border-radius:999px; font-size:14px; }
#sticky-cta .gap-4{ gap:10px; }
body:has(#sticky-cta) .ket.footer{ padding-bottom:calc(var(--s7) + 76px); }

/* ===================== Search (header): one clean rounded field, no double outline ===================== */
#search-dialog .form-input-wrapper{ border:1.5px solid rgba(0,0,0,.14)!important; border-radius:999px; background:#F4F4F5; padding-inline:16px; height:52px; display:flex; align-items:center; gap:10px; box-shadow:none!important; }
#search-dialog .form-input-wrapper:focus-within{ border-color:#088040!important; background:#fff; }
#search-dialog input, #search-dialog input:focus, #search-dialog input:focus-visible{ outline:none!important; box-shadow:none!important; border:0!important; background:transparent!important; height:100%; font-size:16px; }

/* ===================== Product figures: as many columns as figures, centred (no empty box) ===================== */
.ket .proof{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0, 220px); justify-content:center; }