/* ============================================================================
   KHALDOUN — /cacao/order (Ceremonial Cacao, Bali Origin) · v5 design, 24 Oct 2026; cart the same day
   Brief + reference: design_briefs/261024 cacao sales page v5/. Measurements are the
   reference's (phone first). Layered on /library/library.css (type, nav frame) and
   /shell.css + /colours.css (header, footer, the shared --kh-* light/dark palette).
   Everything is prefixed kb-. Colours come only from --kh-*, except the fixed values
   the brief lists: the forest tile, text on photos (#fff8ee), photo shades and labels,
   the carousel pills, the sheet backdrop, and the dark bands (bone on --kh-band).
   ========================================================================== */
.kb-page{
  --kb-gut:20px; --kb-narrow:680px; --kb-nav:64px; --kb-r:4px;
  --kb-cream:#fff8ee; --kb-forest:#435301; --kb-bone:#f1ece5;
  --kb-edge:color-mix(in srgb,var(--kh-fg) 10%,transparent);      /* card borders */
  --kb-outline:color-mix(in srgb,var(--kh-fg) 28%,transparent);   /* outlined buttons */
  --kb-tileline:color-mix(in srgb,var(--kh-fg) 12%,transparent);  /* weight tiles */
  background:var(--kh-bg);color:var(--kh-fg);
  font-family:var(--body);font-weight:400;font-size:16px;line-height:25px;
  font-variant-numeric:lining-nums; /* even-height figures everywhere */
  letter-spacing:normal; /* the Library adds .01em; this design is set without it */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  overflow-x:clip;
}
.kb-page::after{opacity:.035} /* the Library's film grain, quieter here */
.kb-page button{font-family:var(--body);font-variant-numeric:lining-nums;color:inherit;-webkit-tap-highlight-color:transparent}
.kb-page main{display:block}
/* resets carry no weight (:where), so component rules always win */
:where(.kb-page) :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote){margin:0}
:where(.kb-page) :where(ul,ol){padding:0;list-style:none}
:where(.kb-page) a{color:inherit;-webkit-tap-highlight-color:transparent}
.kb-page :focus-visible{outline:2px solid var(--kh-focus);outline-offset:2px}
.kb-page picture,.kb-page img,.kb-page video{display:block;max-width:100%}
.kb-page em{font-style:italic}
.kb-page figcaption{opacity:1;font-size:inherit} /* the Library dims every caption to 55%; here captions set their own colour */
.kb-ic{display:block;flex:none}
.kb-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
html:has(.kb-page){scroll-padding-top:76px} /* in-page jumps clear the 64px header */
html.kb-locked{overflow:hidden}

/* one column, 20px gutters (wider screens: the narrow 680px column) */
.kb-col{box-sizing:border-box;width:100%;max-width:calc(var(--kb-narrow) + 2 * var(--kb-gut));margin-left:auto;margin-right:auto;
  padding-left:max(var(--kb-gut),env(safe-area-inset-left,0px));padding-right:max(var(--kb-gut),env(safe-area-inset-right,0px))}

/* ---------- header on this page ----------
   Hidden on arrival. bali.js adds .kb-nav-on once the hero's Add to cart has scrolled
   out of view (the moment the floating bar appears), hides it while scrolling down and
   brings it back on scrolling up. It still appears whenever it holds keyboard focus. */
.kb-page .nav{transition:opacity .4s ease,transform .4s ease,background .5s,border-color .5s}
.kb-page .nav:not(.kb-nav-on):not(:focus-within){opacity:0!important;transform:translateY(-100%);pointer-events:none!important}
.kb-page .nav:focus-within{opacity:1;transform:none}

/* ================================================================ HERO */
.kb-hero{padding:0}
.kb-hero__grid{display:block}
.kb-gallery{position:relative;overflow:hidden;background:var(--kh-bg-alt);width:100%;
  aspect-ratio:390/250;max-height:calc(100svh - var(--kb-hero-rest,0px))}
.kb-gallery__track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kb-gallery__track::-webkit-scrollbar{display:none}
.kb-gallery__track:focus-visible{outline-offset:-4px}
.kb-gallery__slide{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.kb-gallery__slide picture{width:100%;height:100%}
.kb-gallery__slide img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pm,50% 50%)}
.kb-gallery__pills{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;pointer-events:none}
.kb-gallery__pills button{pointer-events:auto;height:24px;padding:0 2.5px;border:0;background:transparent;display:flex;align-items:center;cursor:pointer}
.kb-gallery__pills span{display:block;width:6px;height:4px;border-radius:2px;background:rgba(241,236,229,.55);transition:width .25s ease,background-color .25s ease}
.kb-gallery__pills button[aria-current="true"] span{width:20px;background:var(--kb-bone)}
.kb-gallery__arrow{display:none}

.kb-hero__body{box-sizing:border-box;max-width:480px;margin:0 auto;padding:20px max(var(--kb-gut),env(safe-area-inset-right,0px)) 0 max(var(--kb-gut),env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;align-items:center;text-align:center}
.kb-hero__title{line-height:0}
.kb-hero .kb-logo{display:block;width:150px;height:auto}
.kb-hero .kb-logo--dark{display:none}
:root[data-theme="dark"] .kb-hero .kb-logo--light{display:none}
:root[data-theme="dark"] .kb-hero .kb-logo--dark{display:block}
.kb-hero__lede{margin-top:12px!important;max-width:342px;font-family:var(--display);font-size:18.5px;line-height:24px;font-weight:400;text-wrap:balance}
.kb-chip{margin-top:12px;max-width:100%;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 12px;
  border-radius:var(--kb-r);background:var(--kh-bg-alt);text-decoration:none;color:var(--kh-fg);font-size:12.5px;line-height:16px;text-wrap:balance}
.kb-chip .kb-ic{color:var(--kh-mark)}
.kb-chip__n{font-weight:600}
.kb-chip__t{color:var(--kh-muted)}
@media(max-width:389px){.kb-chip{gap:5px;padding-left:10px;padding-right:10px;font-size:12px}}

/* Size tiles (hero and close; brief 261101, option F): a radio group each, one shared choice. Outline tiles,
   transparent, 4px corners; the chosen one in the text colour with a 1px ring 3px outside it (the gap in the
   colour of the surface behind the tiles, --kb-under). One row; 22px above it for the saving labels. 98px tall
   with a delivery line, 80px without; a line that wraps makes the whole row taller together (grid stretch). */
.kb-page{--kb-under:var(--kh-bg);--kb-ring:color-mix(in srgb,var(--kh-fg) 60%,transparent)}
:root[data-theme="light"] .kb-page{--kb-ring:color-mix(in srgb,var(--kh-fg) 55%,transparent)}
.kb-weights{margin-top:22px;width:100%;display:grid;grid-template-columns:repeat(var(--kb-n,4),minmax(0,1fr));gap:8px;align-items:stretch}
.kb-tw{position:relative;display:flex;min-width:0}
.kb-weight{box-sizing:border-box;width:100%;height:auto;min-height:80px;margin:0;padding:16px 1px 6px;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:2px;border:1px solid color-mix(in srgb,var(--kh-fg) 22%,transparent);border-radius:var(--kb-r);
  background:transparent;color:var(--kh-fg);text-align:center;cursor:pointer}
.kb-weights--del .kb-weight{min-height:98px}
.kb-weight__w{font-size:15px;line-height:18px;font-weight:500}
/* A long price ("IDR 1,650,000" on a phone) wraps inside its tile instead of spilling out: the row grows together. */
.kb-weight__p{max-width:100%;padding:0 2px;box-sizing:border-box;font-size:14px;line-height:17px;color:color-mix(in srgb,var(--kh-fg) 86%,transparent);overflow-wrap:anywhere;text-wrap:balance}
.kb-weight__u{max-width:100%;padding:0 2px;box-sizing:border-box;font-size:11px;line-height:14px;color:var(--kh-muted);overflow-wrap:anywhere;text-wrap:balance}
.kb-weight__d{margin-top:3px;font-size:11px;line-height:14px;color:var(--kh-muted);text-wrap:balance}
.kb-weight__d.is-free{color:color-mix(in srgb,var(--kh-fg) 86%,transparent)}
.kb-weight[aria-checked="true"]{border-color:var(--kh-fg);box-shadow:0 0 0 3px var(--kb-under),0 0 0 4px var(--kb-ring)}
.kb-page .kb-weight:focus-visible{outline:2px solid var(--kh-focus);outline-offset:6px}
@media(max-width:899px){.kb-weight__d{font-size:10.5px;letter-spacing:-.01em}}
/* The saving, set into the top border ("SAVE 8%"): its background is the surface behind the tiles, so it cuts
   the border. The (i) beside it is a button of its own (24px touch area), never inside the tile's button. */
.kb-notch{position:absolute;top:-8px;left:50%;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:3px;padding:0 5px;
  background:var(--kb-under);color:var(--kh-accent);font-size:10px;line-height:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
@media(max-width:899px){.kb-notch{letter-spacing:.07em;padding:0 4px}}
.kb-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;margin:0;padding:0;border:0;
  background:none;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.kb-info::after{content:"";position:absolute;inset:-7px}
.kb-info svg{display:block}
.kb-page .kb-info:focus-visible{outline:2px solid var(--kh-focus);outline-offset:2px;border-radius:50%}
/* Tooltips: the saving's and the converted delivery amount's. */
.kb-tipw{position:relative}
.kb-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:5;box-sizing:border-box;width:max-content;max-width:260px;
  padding:7px 10px;border:1px solid color-mix(in srgb,var(--kh-btn-fg) 14%,transparent);border-radius:var(--kb-r);background:var(--kh-btn);color:var(--kh-btn-fg);
  font-size:12px;line-height:16px;font-weight:400;letter-spacing:0;text-transform:none;text-align:left;white-space:normal;
  box-shadow:0 8px 24px rgba(0,0,0,.35);visibility:hidden;opacity:0;transition:opacity .12s;pointer-events:none}
.kb-tip--l{left:-6px;transform:none}
.kb-tip--r{left:auto;right:-6px;transform:none}
.kb-tipw.open > .kb-tip{visibility:visible;opacity:1}
.kb-tipw--dl{display:inline}
.kb-approx{display:inline;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;cursor:help;-webkit-appearance:none;appearance:none}
.kb-page .kb-approx{font-size:inherit;line-height:inherit}
.kb-approx__a{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px}
.kb-page .kb-approx:focus-visible{outline:2px solid var(--kh-focus);outline-offset:2px;border-radius:2px}

/* Delivery and returns (brief 261101): the delivery line on top; then the arrival time and the refund policy,
   on one line on a computer, wrapping on a phone when they don't fit. */
.kb-terms{margin-top:10px!important;padding:10px 14px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;
  border-radius:var(--kb-r);background:var(--kh-bg-alt);text-align:left;font-size:12.5px;line-height:17px}
.kb-terms li{display:flex;align-items:flex-start;gap:8px;min-width:0}
.kb-terms li > .kb-ic{margin-top:.5px}
.kb-terms .kb-terms__row2{flex-wrap:wrap;gap:8px 20px}
.kb-terms__it{display:flex;align-items:center;gap:8px}
.kb-terms__it[hidden]{display:none}
.kb-terms a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Add to cart: hero and close carry the price */
.kb-buy{box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--kb-r);padding:0;
  font-family:inherit;letter-spacing:normal;-webkit-appearance:none;appearance:none;
  background:var(--kh-btn);color:var(--kh-btn-fg)!important;text-decoration:none;font-weight:500;cursor:pointer}
.kb-buy:hover{background:var(--kh-btn-hover)}
.kb-buy--main{margin-top:8px;width:100%;height:52px;font-size:16px;line-height:20px}
.kb-buy[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.kb-buy[aria-disabled="true"]:hover{background:var(--kh-btn)}
.kb-hero__foot{margin-top:10px!important;font-size:12.5px;line-height:18px;color:var(--kh-muted)}
.kb-hero__statement{margin-top:36px!important;max-width:320px;font-size:15px;line-height:23px;text-wrap:balance}
.kb-nevers{margin-top:14px!important;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-size:13.5px;line-height:18px}
.kb-nevers li{height:38px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--kb-r);background:var(--kh-bg-alt)}
.kb-nevers .kb-ic{color:var(--kh-mark)}

/* ================================================================ NAVIGATION TILES */
.kb-navtiles{margin-top:56px}
.kb-tiles{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kb-tile{position:relative;overflow:hidden;border-radius:var(--kb-r);box-sizing:border-box;padding:16px;
  display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}
.kb-tile > *{position:relative}
.kb-tile .kb-tile__img{position:absolute;inset:0;width:100%;height:100%}
.kb-tile .kb-tile__img img{width:100%;height:100%;max-width:none;object-fit:cover}
.kb-tile__n{font-size:12px;line-height:16px;font-weight:600;font-variant-numeric:tabular-nums}
.kb-tile__kw{display:block;font-family:var(--display);font-size:23px;line-height:26px}
.kb-tile__line{display:block;margin-top:6px;font-size:13px;line-height:18px}
.kb-tile__top{display:flex;justify-content:space-between;align-items:flex-start}
.kb-tile--wide{grid-column:span 2;height:210px;justify-content:flex-end;color:var(--kb-cream)!important;background:#2b2118}
.kb-tile .kb-tile__shade{position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(180deg,rgba(20,16,15,0),rgba(20,16,15,.72))}
.kb-tile--wide .kb-tile__kw{margin-top:4px;font-size:26px;line-height:30px}
.kb-tile--wide .kb-tile__line{margin-top:0;font-size:13.5px;line-height:19px}
.kb-tile--band{min-height:176px;background:var(--kh-band);color:var(--kb-bone)!important}
.kb-tile--band .kb-tile__line{color:rgba(241,236,229,.78)}
.kb-tile--alt{min-height:176px;background:var(--kh-bg-alt);color:var(--kh-fg)}
.kb-tile--alt .kb-tile__line,.kb-tile--surface .kb-tile__line{color:var(--kh-muted)}
.kb-tile__vi{font-family:var(--display);font-size:44px;line-height:36px;color:var(--kh-mark)}
.kb-tile--photo{min-height:196px;color:var(--kb-cream)!important;background:#2a1c14}
.kb-tile--photo .kb-tile__shade{top:0;height:auto;background:linear-gradient(180deg,rgba(20,16,15,.2),rgba(20,16,15,.7))}
.kb-tile--surface{min-height:196px;background:var(--kh-surface);border:1px solid var(--kb-edge);color:var(--kh-fg)}
.kb-tile__30{font-size:30px;line-height:30px;font-weight:500;letter-spacing:-.02em;color:var(--kh-accent)}

/* ================================================================ SECTION FRAME */
.kb-sec{margin-top:72px}
.kb-band{margin-top:72px;padding:56px 0 64px;background:var(--kh-band);color:var(--kb-bone);
  /* everything on the dark bands is bone, in both modes */
  --kh-fg:#f1ece5;--kh-muted:rgba(241,236,229,.62);--kh-line:rgba(241,236,229,.18);--kh-focus:#c9a96e;
  --kb-outline:rgba(241,236,229,.34)}
.kb-kick{display:block;padding:12px 0;border-top:1px solid var(--kh-fg);border-bottom:1px solid var(--kh-line);
  font-family:var(--body);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.kb-h2{margin-top:26px!important;font-family:var(--display);font-size:36px;line-height:38px;font-weight:400;letter-spacing:-.01em;text-wrap:balance}
.kb-lead{margin-top:14px!important}
.kb-para{margin-top:18px!important}
.kb-pair{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kb-pair img{width:100%;height:200px;object-fit:cover;border-radius:var(--kb-r)}
.kb-closer{margin-top:30px!important;font-family:var(--display);font-size:27px;line-height:31px;font-weight:400;text-wrap:balance}
.kb-more{margin-top:18px;width:100%;height:48px;padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--kb-outline);border-radius:var(--kb-r);background:transparent;color:var(--kh-fg);font-size:15px;line-height:20px;font-weight:500;cursor:pointer}

/* Read more text waits in the page, next to its button, until its sheet opens */
.kb-src[hidden]{margin:0!important;padding:0}

/* ================================================================ 01 · WHERE IT GROWS */
.kb-gods{margin-top:22px;padding:20px;border-radius:var(--kb-r);background:var(--kb-forest);color:var(--kb-bone)}
.kb-gods__t{font-family:var(--display);font-size:23px;line-height:29px;text-wrap:pretty}
.kb-gods__n{margin-top:14px!important;padding-top:14px;border-top:1px solid rgba(241,236,229,.24);font-family:var(--display);font-style:italic;font-size:19px;line-height:25px;color:rgba(241,236,229,.84)}

/* ================================================================ 02 · WHAT IT'S FOR */
.kb-vid{margin-top:24px!important}
/* The slot keeps the video's place (and shows its poster while the video floats); the box
   inside it is what floats to the corner (order.js, brief of 24 Oct 2026). */
.kb-vid__slot{position:relative;width:min(100%,calc(78vh * 9 / 16));margin:0 auto;aspect-ratio:9/16;border-radius:var(--kb-r);
  background:#000 center/cover no-repeat}
.kb-vid__box{position:absolute;inset:0;border-radius:var(--kb-r);overflow:hidden;background:#000;cursor:pointer}
.kb-vid__box video{width:100%;height:100%;object-fit:cover}
.kb-vid__sound{position:absolute;right:10px;bottom:10px;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(241,236,229,.5);
  background:rgba(16,14,13,.45);color:var(--kb-bone);display:flex;align-items:center;justify-content:center;cursor:pointer}
.kb-vid__sound[hidden]{display:none}
.kb-vid__on{display:none}
.kb-vid__sound[aria-pressed="true"] .kb-vid__on{display:block}
.kb-vid__sound[aria-pressed="true"] .kb-vid__off{display:none}
.kb-vid__cap{margin-top:10px;text-align:center;font-size:12.5px;line-height:18px;color:rgba(241,236,229,.62)}
.kb-felt{margin-top:26px!important;padding:22px 0;border-top:1px solid var(--kh-line);border-bottom:1px solid var(--kh-line);font-family:var(--display);font-size:23px;line-height:30px;text-wrap:pretty}

/* ================================================================ 03 · HOW IT'S MADE + step rows */
.kb-rows{margin-top:22px!important;border-top:1px solid var(--kh-line)}
.kb-rows > li{display:grid;grid-template-columns:34px minmax(0,1fr) 40px;align-items:start;padding:14px 0;border-bottom:1px solid var(--kh-line)}
.kb-rows--go > li{cursor:pointer}
.kb-row__n{font-size:13px;line-height:22px;font-weight:600;color:var(--kh-muted);font-variant-numeric:tabular-nums}
.kb-row__h{font-family:var(--body);font-size:16px;line-height:22px;font-weight:600}
.kb-row__p{margin-top:3px!important;font-size:14px;line-height:21px;color:var(--kh-muted)}
.kb-row__go{width:40px;height:44px;margin-top:-11px;padding:0;border:0;background:transparent;color:var(--kh-fg);display:flex;align-items:center;justify-content:flex-end;cursor:pointer}
.kb-steps{margin-top:26px!important}
.kb-steps > li{grid-template-columns:34px minmax(0,1fr)}

/* ================================================================ BUY STRIPS */
.kb-strip{margin-top:56px}
.kb-strip__in{padding:12px;border-radius:var(--kb-r);background:var(--kh-bg-alt)}
.kb-strip--alt .kb-strip__in{background:var(--kh-surface);border:1px solid var(--kb-edge)}
.kb-strip__top{display:flex;align-items:center;gap:12px}
.kb-strip__th{flex:none;width:52px;height:52px}
.kb-strip__th img{width:52px;height:52px;object-fit:cover;border-radius:var(--kb-r)}
.kb-strip__t{min-width:0}
.kb-strip__name{display:block;font-size:14px;line-height:19px;font-weight:600}
.kb-strip__line{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--kh-muted)}
.kb-buy--strip{width:100%;margin-top:12px;height:48px;font-size:15px;line-height:20px}

/* ================================================================ 04 · HOW IT TASTES */
.kb-notes{margin-top:22px!important;border-top:1px solid var(--kh-line);font-family:var(--display)}
.kb-notes li{padding:12px 0;border-bottom:1px solid var(--kh-line);font-size:21px;line-height:26px;text-wrap:pretty}
.kb-notes li:first-child{padding:14px 0;font-size:26px;line-height:31px}
.kb-h3c{margin-top:44px!important;font-family:var(--display);font-size:27px;line-height:31px;font-weight:400}
.kb-tests{margin-top:16px;display:grid;gap:8px}
.kb-test{overflow:hidden;border-radius:var(--kb-r);background:var(--kh-surface);border:1px solid var(--kb-edge)}
.kb-test__m{position:relative;aspect-ratio:16/9;background:#2a1c14;overflow:hidden}
.kb-test__m picture{width:100%;height:100%}
.kb-test__m img,.kb-test__m video{width:100%;height:100%;object-fit:cover}
.kb-tag{position:absolute;left:12px;padding:4px 8px;border-radius:2px;background:rgba(16,14,13,.6);color:var(--kb-bone);
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.kb-tag--a{top:12px}
.kb-tag--b{bottom:12px}
.kb-test__in{padding:16px 16px 0}
.kb-test__h{margin:1.33em 0!important;font-family:var(--display);font-size:23px;line-height:27px;font-weight:400} /* the reference keeps a heading's default space above and below */
.kb-test__p{margin-top:8px!important;font-size:15px;line-height:23px}
.kb-test__more{margin-top:14px;width:100%;min-height:48px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;
  border:0;border-top:1px solid var(--kh-line);background:transparent;color:var(--kh-fg);font-size:15px;line-height:20px;font-weight:500;cursor:pointer}
.kb-fail{color:var(--kh-warm)}

/* ================================================================ 05 · HOW TO PREPARE IT */
.kb-heat{margin-top:12px!important;font-family:var(--display);font-style:italic;font-size:19px;line-height:25px;color:var(--kh-warm)}
.kb-dose{margin-top:22px!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.kb-dose li{padding:14px 16px;border-radius:var(--kb-r);background:var(--kh-surface);border:1px solid var(--kb-edge)}
.kb-dose__v{display:block;font-size:32px;line-height:36px;font-weight:500;letter-spacing:-.02em}
.kb-dose li:first-child .kb-dose__v{color:var(--kh-accent)}
.kb-dose__k{display:block;margin-top:4px;font-size:13px;line-height:18px;color:var(--kh-muted)}
.kb-dose__note{margin-top:12px!important;font-size:14px;line-height:21px;color:var(--kh-muted)}

/* ================================================================ REVIEWS */
.kb-cert{margin-top:22px;padding:16px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;
  border:1px dashed color-mix(in srgb,var(--kh-fg) 40%,transparent);border-radius:var(--kb-r)}
.kb-cert .kb-ic{color:var(--kh-accent)}
.kb-cert__t{font-size:15px;line-height:21px;font-weight:600}
.kb-cert__m{margin-top:2px!important;font-size:13px;line-height:19px;color:var(--kh-muted)}
.kb-cert__a{margin-top:6px;display:inline-flex;align-items:center;min-height:32px;color:var(--kh-accent)!important;
  font-size:14px;line-height:20px;font-weight:500;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* ================================================================ QUESTIONS */
.kb-faq{margin-top:18px;border-top:1px solid var(--kh-line)}
.kb-qa{border-bottom:1px solid var(--kh-line)}
.kb-qa h3{font:inherit}
.kb-qa__q{width:100%;min-height:60px;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:0;background:transparent;color:var(--kh-fg);text-align:left;cursor:pointer;font-size:16px;line-height:22px;font-weight:500}
.kb-qa__q .kb-ic{transition:transform .25s ease}
.kb-qa__q[aria-expanded="true"] .kb-ic{transform:rotate(180deg)}
.kb-qa__a{padding:0 0 18px;font-size:15px;line-height:23px;color:var(--kh-muted)}
.kb-qa__a[hidden]{padding:0}
.kb-qa__a a{color:var(--kh-fg);text-underline-offset:3px}

/* ================================================================ CLOSE */
.kb-close{text-align:center}
.kb-cq{margin-top:32px!important;font-family:var(--display);font-size:29px;line-height:34px;text-wrap:balance}
.kb-sig{margin-top:12px!important;font-family:var(--display);font-style:italic;font-size:22px;line-height:28px;color:rgba(241,236,229,.82)}
.kb-cp{margin:26px auto 0!important;max-width:340px;color:rgba(241,236,229,.82);text-wrap:balance}
.kb-practice{margin-top:24px!important;display:flex;flex-direction:column;font-family:var(--display);font-size:30px;line-height:33px}
.kb-close .kb-more{margin-top:30px}
.kb-spec{margin-top:40px!important;text-align:left;border-top:1px solid var(--kb-bone)}
.kb-spec div{display:grid;grid-template-columns:104px minmax(0,1fr);padding:12px 0;border-bottom:1px solid rgba(241,236,229,.18)}
.kb-spec dt{font-size:12px;line-height:22px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(241,236,229,.62)}
.kb-spec dd{font-size:15px;line-height:22px}
.kb-cbuy{margin-top:32px}
.kb-cbuy .kb-weights{margin-top:0}
/* The close's tiles sit on the dark band (a flat colour): the same tiles in bone, the label cut out of the band. */
.kb-cbuy{--kb-under:var(--kh-band);--kb-ring:rgba(241,236,229,.6);--kh-accent:#c9a96e}   /* the band is dark in both modes: the gold accent */
.kb-cbuy .kb-weights{margin-top:22px}
.kb-cbuy .kb-tip{background:var(--kb-bone);color:#231f20;border-color:rgba(35,31,32,.14)}
.kb-cbuy .kb-buy,.kb-cbuy .kb-buy[aria-disabled="true"]:hover{background:var(--kb-bone);color:#231f20!important}
.kb-cbuy .kb-buy:hover{background:#fff}
.kb-cbuy__foot{margin-top:10px!important;font-size:12.5px;line-height:18px;color:rgba(241,236,229,.64)}

/* ================================================================ FLOATING BUY BAR (phones) */
.kb-bar{position:fixed;z-index:900;left:calc(12px + env(safe-area-inset-left,0px));right:calc(12px + env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:456px;margin:0 auto;height:64px;box-sizing:border-box;padding:0 8px;
  display:flex;align-items:center;gap:10px;
  /* The edge, the same on every background and in both themes (brief of 24 Oct 2026) */
  background:#231f20;border:1px solid rgba(241,236,229,.28);border-radius:4px;box-shadow:0 10px 30px rgba(35,31,32,.22);color:#f1ece5;
  transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom,0px)));opacity:0;visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear .35s}
.kb-bar.on{transform:none;opacity:1;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s}
.kb-bar [hidden]{display:none!important}
.kb-bar__th{flex:none;width:48px;height:48px}
.kb-bar__th img{display:block;width:48px;height:48px;object-fit:cover;border-radius:2px}
.kb-bar__t{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
.kb-bar__line{font-size:13px;line-height:17px;color:rgba(241,236,229,.74);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-bar__price{font-size:17px;line-height:22px;font-weight:600}
.kb-buy--bar{flex:none;height:48px;padding:0 20px;background:#f1ece5;color:#231f20!important;font-size:15px;line-height:20px;font-weight:600}
.kb-buy--bar:hover,.kb-buy--bar[aria-disabled="true"]:hover{background:#fff}
.kb-buy--bar .kb-sk,.kb-bar .kb-sk{background:rgba(241,236,229,.18)}
/* With something in the cart: the arrow (opens and closes the cart) and Checkout */
.kb-bar__cart{flex:none;justify-self:start;width:44px;height:44px;padding:0;display:grid;place-items:center;background:transparent;border:0;
  color:rgba(241,236,229,.6);cursor:pointer;-webkit-appearance:none;appearance:none;transition:color .2s ease}
.kb-bar .kb-bar__cart{color:rgba(241,236,229,.6)}
.kb-bar .kb-bar__cart:hover,.kb-bar .kb-bar__cart:focus-visible{color:rgba(241,236,229,.9)}
.kb-bar__cart .kb-ic{width:20px;height:20px;transition:transform .25s ease}
.kb-bar__cart[aria-expanded="true"] .kb-ic{transform:rotate(180deg)}
.kb-bar__cart:focus-visible,.kb-bar__checkout:focus-visible,.kb-buy--bar:focus-visible{outline:2px solid #f1ece5;outline-offset:2px}
/* With items: three columns (arrow space, Checkout, an equal empty space), so Checkout sits
   in the middle of the bar, and of the screen. */
.kb-bar.has-items{display:grid;grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);column-gap:6px}
.kb-bar__checkout{min-width:0;height:48px;padding:0 22px;border:0;border-radius:3px;background:#f1ece5;color:#231f20;
  font-family:inherit;font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;font-variant-numeric:lining-nums;cursor:pointer;-webkit-appearance:none;appearance:none}
.kb-bar .kb-bar__checkout{color:#231f20}
.kb-bar__checkout:hover{background:#fff}
@media(max-width:379px){.kb-bar__checkout{font-size:13px;padding:0 16px}}
.kb-bar__checkout[aria-disabled="true"]{opacity:.6;cursor:progress}
.kb-bar.over-cart{z-index:2200}
@media(max-width:374px){.kb-bar{gap:8px}.kb-buy--bar{padding:0 14px}}
/* While the cart is open over a shown bar, the slide-up sits above the bar */
html.kb-bar-items .kb-sheet__panel{bottom:calc(52px + 16px + 12px + env(safe-area-inset-bottom,0px));border-radius:10px;max-height:calc(88dvh - 80px)}

/* ================================================================ SHOPIFY STATES
   Until Shopify answers, sizes and prices are placeholders: invisible stand-in text with
   the real text's size (so nothing moves when it arrives) on a soft bar. Sold-out sizes
   stay visible, disabled. If Shopify cannot be reached, a short notice under Add to cart. */
.kb-sk{color:transparent!important;border-radius:4px;background:color-mix(in srgb,var(--kh-fg) 11%,transparent);
  -webkit-user-select:none;user-select:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.kb-sk *{visibility:hidden}
.kb-sk.is-off{background:none}
.kb-buy .kb-sk{background:color-mix(in srgb,var(--kh-btn-fg) 22%,transparent)}
.kb-cbuy .kb-buy .kb-sk{background:color-mix(in srgb,#231f20 18%,transparent)}
.kb-buy--bar .kb-sk,.kb-bar .kb-sk{background:color-mix(in srgb,var(--kh-btn-fg) 18%,transparent)}
@media(prefers-reduced-motion:no-preference){
  html:not(.kb-shop-down) .kb-sk{animation:kb-sk 1.4s ease-in-out infinite}
  @keyframes kb-sk{50%{opacity:.45}}
}
.kb-weight.is-loading{cursor:default}
.kb-weight.is-soldout,.kb-weight:disabled{cursor:not-allowed}
.kb-weight.is-soldout .kb-weight__w{opacity:.5;text-decoration:line-through;text-decoration-thickness:1px}
.kb-weight.is-soldout .kb-weight__p{opacity:.75}
.kb-shopdown{margin-top:10px!important;font-size:13.5px;line-height:19px;color:var(--kh-fg)}
.kb-cbuy .kb-shopdown{color:var(--kb-bone)}
.kb-cart__msg{margin:12px 0 0!important;padding:10px 12px;border-radius:var(--kb-r);font-size:13.5px;line-height:19px;
  background:color-mix(in srgb,var(--kh-fg) 6%,transparent);color:var(--kh-fg)}
.kb-cart__msg[hidden]{display:none}
.kb-cart[aria-busy="true"] .kb-cart__lines,.kb-cart[aria-busy="true"] .kb-cart__sub{opacity:.55;transition:opacity .2s ease}
.kb-cart [aria-disabled="true"]{cursor:progress}

/* ================================================================ CART (inside the sheet) */
.kb-cart__empty{font-size:15px;line-height:23px;color:var(--kh-muted)}
.kb-cart__lines{list-style:none;margin:0;padding:0}
.kb-cart .kb-cart__lines{margin-top:0!important}
.kb-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--kh-line)}
.kb-line:first-child{padding-top:2px}
.kb-line__th img{display:block;width:64px;height:64px;object-fit:cover;border-radius:var(--kb-r)}
.kb-line__t{display:flex;flex-direction:column;min-width:0}
.kb-line__name{font-size:15px;line-height:20px;font-weight:500}
.kb-line__meta{font-size:13.5px;line-height:19px;color:var(--kh-muted);font-variant-numeric:lining-nums}
.kb-line__row{margin-top:8px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kb-line__total{font-size:15px;line-height:20px;font-weight:500;font-variant-numeric:lining-nums tabular-nums}
.kb-step{display:inline-flex;align-items:center;border:1px solid var(--kh-line);border-radius:var(--kb-r)}
.kb-step__b{width:40px;height:40px;padding:0;border:0;background:none;color:var(--kh-fg);display:grid;place-items:center;cursor:pointer;-webkit-appearance:none;appearance:none}
.kb-step__b:disabled{opacity:.35;cursor:default}
.kb-step__b:focus-visible,.kb-line__rm:focus-visible{outline:2px solid var(--kh-focus);outline-offset:-2px}
.kb-step__n{min-width:28px;text-align:center;font-size:15px;line-height:20px;font-variant-numeric:lining-nums tabular-nums}
.kb-line__rm{min-height:40px;padding:0 2px;border:0;background:none;color:var(--kh-muted);font-family:inherit;font-size:13.5px;line-height:19px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;-webkit-appearance:none;appearance:none}
.kb-line__rm:hover{color:var(--kh-fg)}
.kb-cart__foot{padding-top:6px}
.kb-cart__foot[hidden]{display:none}
.kb-cart__sub{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;line-height:22px;font-weight:500;font-variant-numeric:lining-nums}

/* ================================================================ READ MORE SHEET */
.kb-sheet{position:fixed;inset:0;z-index:2100}
.kb-sheet[hidden]{display:none}
.kb-sheet__back{position:absolute;inset:0;background:rgba(35,31,32,.38);opacity:0;transition:opacity .3s ease}
.kb-sheet.open .kb-sheet__back{opacity:1}
.kb-sheet__panel{position:absolute;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;
  background:var(--kh-surface);color:var(--kh-fg);border-radius:10px 10px 0 0;box-shadow:0 -8px 24px rgba(35,31,32,.18);
  transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.kb-sheet.open .kb-sheet__panel{transform:translateY(0)}
.kb-sheet__head{flex:none;padding:10px max(var(--kb-gut),env(safe-area-inset-right,0px)) 0 max(var(--kb-gut),env(safe-area-inset-left,0px));touch-action:none;cursor:grab}
.kb-sheet__grab{display:block;width:36px;height:4px;margin:0 auto;border-radius:2px;background:color-mix(in srgb,var(--kh-fg) 20%,transparent)}
.kb-sheet__bar{margin-top:6px;padding-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--kh-line)}
.kb-sheet__title{font-family:var(--display);font-size:25px;line-height:30px;font-weight:400;text-wrap:balance}
.kb-sheet__x{flex:none;width:44px;height:44px;margin-right:-12px;padding:0;border:0;background:transparent;color:var(--kh-fg);display:flex;align-items:center;justify-content:center;cursor:pointer}
.kb-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:18px max(var(--kb-gut),env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(var(--kb-gut),env(safe-area-inset-left,0px))}
.kb-sheet__body .kb-src{text-align:left;color:var(--kh-fg)}
.kb-src > * + *{margin-top:14px!important}
.kb-smeta{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kh-muted)}
.kb-simg,.kb-simg img{width:100%}
.kb-simg img,video.kb-simg{height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--kb-r)}
.kb-sfig figcaption{margin-top:8px;font-size:14px;line-height:21px;color:var(--kh-muted)}
.kb-src > .kb-sfig + .kb-sfig{margin-top:22px!important}
.kb-src > .kb-sfig--gap{margin-top:26px!important}
.kb-src > .kb-slabel{margin-top:28px!important;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kh-accent)}
.kb-sbig{font-family:var(--display);font-size:23px;line-height:29px;text-wrap:pretty}
.kb-src > .kb-sh3{margin-top:26px!important;font-family:var(--display);font-size:25px;line-height:30px;font-weight:400;text-wrap:balance}
.kb-srows{border-top:1px solid var(--kh-line)}
.kb-srows div{padding:12px 0;border-bottom:1px solid var(--kh-line)}
.kb-srows dt{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kh-muted)}
.kb-srows dd{margin-top:4px;font-size:15px;line-height:23px}
.kb-src > .kb-shr{margin:24px 0!important;border:0;border-top:1px solid var(--kh-line)}
.kb-src > .kb-snext{margin-top:24px!important;width:100%;min-height:48px;padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid color-mix(in srgb,var(--kh-fg) 28%,transparent);border-radius:var(--kb-r);background:transparent;color:var(--kh-fg);
  font-size:15px;line-height:20px;font-weight:500;text-align:left;cursor:pointer}


/* ================================================================ INTRO (brief of 24 Oct 2026) */
.kb-navtiles .kb-navtiles__t{margin-top:0!important}
.kb-navtiles__d{margin-top:10px!important;font-family:var(--body);font-size:14.5px;line-height:1.55;color:color-mix(in srgb,var(--kh-fg) 72%,transparent);text-wrap:pretty}
.kb-navtiles__d + .kb-tiles{margin-top:22px}

/* The making video (05): the page's video frame, without the sound button */

/* ================================================================ FLOATING VIDEO PLAYER (brief of 24 Oct 2026)
   The box is restyled to the corner, never moved. Edge as the sticky bar. Above the page and
   the sales pop, below the cart slide-up (2100). Position from order.js (--kb-fl-x/--kb-fl-y). */
.kb-vid__box.is-float{position:fixed;inset:auto;left:var(--kb-fl-x,24px);bottom:var(--kb-fl-y,24px);width:96px;height:171px;z-index:960;
  border:1px solid rgba(241,236,229,.28);border-radius:4px;box-shadow:0 10px 30px rgba(35,31,32,.22);box-sizing:border-box}
@media(min-width:900px){.kb-vid__box.is-float{width:144px;height:256px}}
/* Floating: one small "⋮" at top right (the inline sound button steps aside); it opens the menu. */
.kb-vid__more{display:none}
.kb-vid__box.is-float .kb-vid__sound{display:none}
.kb-vid__box.is-float .kb-vid__more{position:absolute;top:0;right:0;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;
  background:radial-gradient(circle,rgba(16,14,13,.5) 11px,transparent 11.5px);color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}
.kb-vid__box.is-float .kb-vid__more .kb-ic{width:14px;height:14px}
.kb-vid__box.is-float :focus-visible{outline:2px solid #fff;outline-offset:-6px}
/* The menu, beside the player (order.js places it). A light card, as the sales pop. */
.kb-vmenu{position:fixed;z-index:965;left:0;top:0;min-width:176px;padding:4px 0;box-sizing:border-box;background:#faf7f2;color:#231f20;
  border:1px solid rgba(35,31,32,.14);border-radius:4px;box-shadow:0 8px 24px rgba(35,31,32,.16)}
.kb-vmenu[hidden]{display:none}
.kb-vmenu__i{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 14px;border:0;background:none;color:#231f20;
  font-family:var(--body);font-size:14px;line-height:18px;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.kb-page .kb-vmenu__i{color:#231f20}
.kb-vmenu__i:hover,.kb-vmenu__i:focus-visible{background:rgba(35,31,32,.06)}
.kb-vmenu__i:focus-visible{outline:2px solid #c4470e;outline-offset:-2px}
.kb-vmenu__i + .kb-vmenu__i{border-top:1px solid rgba(35,31,32,.08)}
.kb-vmenu__ic{flex:none;display:grid;place-items:center;width:18px;height:18px;color:rgba(35,31,32,.72)}
.kb-vid__box.is-fading{opacity:0;transition:opacity .5s ease}
::view-transition-group(kb-float){animation-duration:.35s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(kb-float){display:none}
::view-transition-new(kb-float){animation:none;width:100%;height:100%}
::view-transition-old(root),::view-transition-new(root){animation:none}

/* ================================================================ REVIEWS (brief of 24 Oct 2026)
   Light values as given; dark mode follows the page's tokens (surface, alternate band, text). */
.kb-stars{display:flex;gap:2px;color:#c4470e}
.kb-rate{margin-top:22px!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kb-rate .kb-stars .kb-ic{width:14px;height:14px}
.kb-rate__n{font-size:14px;line-height:20px;font-weight:600}
.kb-rate__c{font-size:13.5px;line-height:20px;color:color-mix(in srgb,var(--kh-fg) 72%,transparent)}
.kb-rate__note{margin-top:6px!important;font-size:13px;line-height:1.5;color:color-mix(in srgb,var(--kh-fg) 72%,transparent)}
.kb-ai{margin-top:24px;padding:16px;border-radius:4px;background:var(--kh-bg-alt)}
.kb-ai__top{display:flex;align-items:center;gap:12px}
.kb-ai__ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--kh-surface);color:#c4470e}
.kb-ai__t{display:block;font-size:14px;line-height:19px;font-weight:600}
.kb-ai__pts{margin-top:12px!important;display:grid;gap:8px}
.kb-ai__pts li{position:relative;padding-left:15px;font-size:14.5px;line-height:1.5}
.kb-ai__pts li::before{content:"";position:absolute;left:0;top:calc(.75em - 2.5px);width:5px;height:5px;border-radius:50%;background:#c4470e}
.kb-rvs{margin-top:16px!important;display:grid;gap:12px;overflow-anchor:none}
.kb-rvs [hidden]{display:none}
.kb-rv{padding:16px;border-radius:4px;background:var(--kh-surface);border:1px solid var(--kh-line)}
.kb-rv:focus{outline:none}
.kb-rv:focus-visible{outline:2px solid var(--kh-focus);outline-offset:2px}
.kb-rv__top{display:flex;align-items:center;gap:12px}
.kb-rv__av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:13px;line-height:1;font-weight:600;letter-spacing:.02em}
.kb-rv__n{display:block;font-size:14px;line-height:19px;font-weight:600}
.kb-rv__m{display:block;font-size:12px;line-height:17px;color:color-mix(in srgb,var(--kh-fg) 72%,transparent)}
.kb-rv > .kb-stars{margin-top:12px}
.kb-rv > .kb-stars .kb-ic{width:12px;height:12px}
.kb-rv__q{margin-top:8px!important;font-family:var(--body);font-size:15px;line-height:1.5}
.kb-rvmore{margin-top:20px;width:100%;height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid color-mix(in srgb,var(--kh-fg) 28%,transparent);border-radius:4px;background:transparent;color:var(--kh-fg);
  font-family:inherit;font-size:15px;line-height:20px;font-weight:500;text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.kb-rvmore[hidden]{display:none}
.kb-rvmore{overflow-anchor:none}

/* ================================================================ FOUNDER PHOTO: a circle, the face centred */
.kb-close .kb-portrait{display:block;width:112px;height:112px;margin:0 auto}
.kb-close .kb-portrait img{width:112px;height:112px;aspect-ratio:1;object-fit:cover;border-radius:50%}

/* ================================================================ FOOTER: logo, copyright, the seller */
.kb-foot{padding:48px max(var(--kb-gut),env(safe-area-inset-left,0px)) calc(48px + env(safe-area-inset-bottom,0px));text-align:center;border-top:1px solid var(--kh-line)}
html.kb-bar-items .kb-foot{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
.kb-foot__logo{width:140px;height:auto;margin:0 auto}
.kb-foot .kb-logo--dark{display:none}
:root[data-theme="dark"] .kb-foot .kb-logo--light{display:none}
:root[data-theme="dark"] .kb-foot .kb-logo--dark{display:block}
.kb-foot__c{margin-top:16px!important;font-size:13px;line-height:18px;color:var(--kh-fg-soft)}
.kb-foot__legal{max-width:520px;margin:10px auto 0!important;font-size:11.5px;line-height:1.55;color:var(--kh-muted)}

/* ================================================================ MARKETS (briefs 261025 Market localization + Markets update)
   The delivery line: "Delivery to [country]. [terms]". The country is the control: a pin, the name
   underlined and a small arrow, one button whose tap area reaches 44px tall (::after) without
   making the line any taller. */
.kb-hero__end{width:100%}
/* Size names are Shopify's, as they are (owner, 26 Oct 2026): a long one ("1.5kg - Save 10% + Free Shipping")
   makes its tile taller instead of spilling out of it. */
.kb-weight__w{overflow-wrap:anywhere;padding:0 2px}
.kb-dl{min-width:0}
.kb-dl__c{position:relative;display:inline-flex;align-items:center;gap:3px;margin:0;padding:0;border:0;background:none;color:inherit;
  font:inherit;line-height:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;vertical-align:baseline}
.kb-page .kb-dl__c{font-size:inherit}
.kb-dl__c::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
/* The flag: the picker's own image, 18 × 12, on the text baseline (brief 261101); the pin icon is gone. */
.kb-dl__c{white-space:nowrap}
.kb-dl__f{flex:none;display:inline-block;width:18px;height:12px;margin-right:2px;object-fit:cover;align-self:baseline;transform:translateY(1px);
  box-shadow:0 0 0 1px rgba(127,127,127,.35)}
.kb-dl__f[hidden]{display:none}
.kb-dl__c .kb-ic{flex:none;opacity:.8;margin-left:1px}
.kb-dl__n{font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.kb-dl__c:hover .kb-dl__n{text-decoration-thickness:2px}
.kb-page .kb-dl__c:focus-visible{outline:2px solid var(--kh-focus);outline-offset:3px;border-radius:2px}
.kb-cbuy__foot .kb-dl__c{color:var(--kb-bone)}

/* The country picker: a sheet from the bottom on phones, a panel under the line on desktop
   (placed by order.js). The site's type and colour tokens, in both modes. */
.kb-picker{position:fixed;inset:0;z-index:2300}
.kb-picker[hidden]{display:none}
.kb-picker__back{position:absolute;inset:0;background:rgba(35,31,32,.38);opacity:0;transition:opacity .3s ease}
.kb-picker.open .kb-picker__back{opacity:1}
.kb-picker__panel{position:absolute;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;height:min(82dvh,660px);box-sizing:border-box;
  display:flex;flex-direction:column;background:var(--kh-surface);color:var(--kh-fg);border-radius:10px 10px 0 0;
  box-shadow:0 -8px 24px rgba(35,31,32,.18);transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.kb-picker.open .kb-picker__panel{transform:none}
.kb-picker__panel:focus{outline:none}
.kb-picker__head{flex:none;padding:10px max(var(--kb-gut),env(safe-area-inset-right,0px)) 12px max(var(--kb-gut),env(safe-area-inset-left,0px));border-bottom:1px solid var(--kh-line)}
.kb-picker__grab{display:block;width:36px;height:4px;margin:0 auto;border-radius:2px;background:color-mix(in srgb,var(--kh-fg) 20%,transparent)}
.kb-picker__bar{margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.kb-picker__t{font-family:var(--display);font-size:24px;line-height:30px;font-weight:400}
.kb-picker__x{flex:none;width:44px;height:44px;margin-right:-12px;padding:0;border:0;background:transparent;color:var(--kh-fg);display:grid;place-items:center;cursor:pointer}
.kb-picker__search{margin-top:8px;height:44px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 12px;
  border:1px solid var(--kb-tileline);border-radius:var(--kb-r);background:var(--kh-bg);color:var(--kh-muted)}
.kb-picker__search:focus-within{outline:2px solid var(--kh-focus);outline-offset:1px}
.kb-picker__search input{flex:1 1 auto;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--kh-fg);
  font-family:var(--body);font-size:16px;line-height:20px;letter-spacing:normal;outline:none;-webkit-appearance:none;appearance:none}
.kb-picker__list{flex:1 1 auto;min-height:0;margin:0;padding:6px 0 calc(12px + env(safe-area-inset-bottom,0px));list-style:none;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.kb-picker__opt{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 max(var(--kb-gut),env(safe-area-inset-right,0px)) 0 max(var(--kb-gut),env(safe-area-inset-left,0px));
  font-size:16px;line-height:20px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kb-picker__opt.is-active{background:color-mix(in srgb,var(--kh-fg) 7%,transparent)}
.kb-picker__opt[aria-selected="true"] .kb-picker__n{font-weight:600}
.kb-picker__flag{flex:none;width:24px;height:18px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px color-mix(in srgb,var(--kh-fg) 14%,transparent)}
.kb-picker__n{flex:1 1 auto;min-width:0}
.kb-picker__ck{flex:none;color:var(--kh-accent)}
@media(min-width:900px){
  .kb-picker__back{background:transparent}
  .kb-picker__panel{left:auto;right:auto;bottom:auto;width:360px;height:auto;max-height:min(440px,calc(100vh - 32px));margin:0;
    border:1px solid var(--kb-edge);border-radius:8px;box-shadow:0 18px 44px rgba(35,31,32,.22);opacity:0;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease}
  .kb-picker.open .kb-picker__panel{opacity:1;transform:none}
  .kb-picker__head{padding-top:6px}
  .kb-picker__grab{display:none}
  .kb-picker__t{font-size:21px;line-height:26px}
  .kb-picker__opt{min-height:40px;font-size:15px}
}

/* The cart, under the subtotal: delivery for the cart's country, and the market's tax note */
.kb-cart__row{margin-top:6px!important;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px;line-height:20px;
  color:var(--kh-muted);font-variant-numeric:lining-nums}
.kb-cart__row span:last-child{color:var(--kh-fg);text-align:right}
.kb-cart__tax{margin-top:4px!important;font-size:13px;line-height:18px;color:var(--kh-muted)}

/* With something in the cart: no bar. Two floating buttons — the arrow (its own small button, to the
   left) and Checkout, black like Add to cart, not full width. A soft shadow and a light edge and glow
   keep both clear over light and dark sections and in dark mode. Checkout never moves: the cart opens
   above it, and it is the cart's Checkout. */
.kb-bar.has-items{height:52px;padding:0;gap:10px;justify-content:center;background:transparent;border:0;box-shadow:none;pointer-events:none}
.kb-bar.has-items > *{pointer-events:auto}
.kb-bar.has-items .kb-bar__cart{width:44px;height:44px;border-radius:50%;background:#231f20;color:#f1ece5;
  box-shadow:0 0 0 1px rgba(241,236,229,.3),0 8px 22px rgba(20,16,15,.3),0 0 20px rgba(241,236,229,.12)}
.kb-bar.has-items .kb-bar__cart:hover,.kb-bar.has-items .kb-bar__cart:focus-visible{color:#fff;background:#2e2a2b}
.kb-bar.has-items .kb-bar__checkout{height:52px;padding:0 28px;border-radius:var(--kb-r);background:#231f20;color:#f1ece5;font-size:16px;font-weight:500;
  box-shadow:0 0 0 1px rgba(241,236,229,.3),0 10px 28px rgba(20,16,15,.32),0 0 26px rgba(241,236,229,.14)}
.kb-bar.has-items .kb-bar__checkout:hover{background:#2e2a2b}
@media(max-width:379px){.kb-bar.has-items .kb-bar__checkout{font-size:14.5px;padding:0 20px}}

/* The seller of record and the store's policies (market pages only) */
.kb-foot__legal a{color:inherit;text-underline-offset:3px}
.kb-foot__pol{margin:8px auto 0!important;display:flex;flex-wrap:wrap;justify-content:center;column-gap:16px;font-size:12px;line-height:18px}
.kb-foot__pol a{display:inline-flex;align-items:center;min-height:32px;color:var(--kh-muted);text-underline-offset:3px}
.kb-foot__pol a:hover{color:var(--kh-fg)}

/* ================================================================ SALES POP (brief of 24 Oct 2026)
   Fixed values as given (a light card in both themes). Bottom left, the right kept free. */
.kb-pop{position:fixed;z-index:950;left:calc(16px + env(safe-area-inset-left,0px));bottom:16px;width:248px;box-sizing:border-box;
  padding:12px 36px 14px 68px;background:#faf7f2;border:1px solid rgba(35,31,32,.14);border-radius:4px;box-shadow:0 8px 24px rgba(35,31,32,.16);
  color:#231f20;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1),bottom .35s cubic-bezier(.2,.8,.2,1)}
.kb-pop[hidden]{display:none}
.kb-pop.in{opacity:1;transform:none}
.kb-pop.out{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.kb-pop__img{position:absolute;left:12px;top:-18px;width:44px;height:58px;transform:rotate(-18deg);
  filter:drop-shadow(0 5px 6px rgba(35,31,32,.28));transition:transform .6s cubic-bezier(.34,1.56,.64,1) .05s}
.kb-pop.in .kb-pop__img{transform:rotate(-7deg)}
.kb-pop__img img{display:block;width:44px;height:58px;object-fit:cover;border-radius:3px}
.kb-pop__t{font-family:Inter,var(--body);font-size:13.5px;line-height:1.35;color:#231f20}
.kb-pop__t b{font-weight:600}
.kb-pop__n{display:inline-block;text-align:right;font-variant-numeric:tabular-nums lining-nums}
.kb-pop__x{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;border:0;background:none;color:rgba(35,31,32,.6);
  display:grid;place-items:center;cursor:pointer;-webkit-appearance:none;appearance:none}
.kb-pop__x:hover{color:#231f20}
.kb-pop__x:focus-visible{outline:2px solid #c4470e;outline-offset:-6px}
.kb-pop__line{position:absolute;left:0;right:0;bottom:0;height:2px;background:#c4470e;transform-origin:left center;border-radius:0 0 0 4px}
@media(prefers-reduced-motion:reduce){
  .kb-pop,.kb-pop.in,.kb-pop.out{transform:none}
  .kb-pop__img,.kb-pop.in .kb-pop__img{transform:rotate(-7deg);transition:none}
  .kb-pop__line{display:none}
}

/* ================================================================ DESKTOP (900px and up) */
@media(min-width:900px){
  .kb-hero{padding-top:clamp(24px,4vw,48px)}
  .kb-hero__grid{display:grid;max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px);grid-template-columns:1.05fr .95fr;gap:clamp(18px,4.5vw,64px);align-items:center}
  .kb-gallery{aspect-ratio:4/5;max-height:calc(100svh - 48px);border-radius:var(--kb-r)}
  .kb-gallery__slide img{object-position:var(--pd,50% 50%)}
  .kb-gallery__arrow{display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(255,255,255,.55);background:rgba(16,14,13,.35);color:#fff;cursor:pointer;
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity .2s,background .2s}
  .kb-gallery__arrow:hover{background:rgba(16,14,13,.55)}
  .kb-gallery__arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .kb-gallery__arrow[disabled]{opacity:0;pointer-events:none}
  .kb-gallery__arrow--prev{left:14px}
  .kb-gallery__arrow--next{right:14px}
  .kb-gallery__pills{bottom:8px}
  /* the right column keeps its left alignment */
  .kb-hero__body{max-width:480px;margin:0;padding:0;align-items:flex-start;text-align:left}
  .kb-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kb-tile--wide{grid-column:span 4;height:260px}
  .kb-tile--band,.kb-tile--alt,.kb-tile--photo,.kb-tile--surface{min-height:210px}
  .kb-tests{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb-dose{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kb-pair img{height:280px}
  .kb-sheet__panel{top:50%;bottom:auto;left:50%;right:auto;width:560px;max-width:calc(100vw - 48px);max-height:80vh;
    border-radius:10px;opacity:0;transform:translate(-50%,calc(-50% + 24px));transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
  .kb-sheet.open .kb-sheet__panel{opacity:1;transform:translate(-50%,-50%)}
  .kb-sheet__grab{visibility:hidden}
  .kb-bar:not(.has-items){display:none}
  html.kb-bar-items .kb-sheet__panel{bottom:auto;max-height:calc(100vh - 220px);top:calc(50% - 46px)}
}

/* ================================================================ REDUCED MOTION
   Every transition and all smooth scrolling on the page are switched off. */
@media(prefers-reduced-motion:reduce){
  html:has(.kb-page),html:has(.kb-page) *,html:has(.kb-page) *::before,html:has(.kb-page) *::after{
    transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .kb-page .nav:not(.kb-nav-on):not(:focus-within){transform:none}
}

/* The cookie card (brief 261101) on phones: never over the floating Add to cart bar (or the cart's buttons) —
   it sits just above them while they show. */
@media(max-width:520px){
  html.kb-bar-on .kh-cc--card{bottom:calc(16px + 64px + 12px + env(safe-area-inset-bottom,0px))}
}