/** Shopify CDN: Minification failed

Line 696:0 Expected "}" to go with "{"

**/
/* RIBI theme — design system (ported from the approved prototype).
   Also drawing on Pure Cycles (tracked caps, slide progress bars, journal), Verve (cream canvas, charcoal nav bar, shelves)
   and Cosori (brand bar, rounded hero, category cards, checklist rows).
   Colours: the live ribi.mt footer (charcoal #212121, amber #E9A63A, off-white #F2F2F2).
   Influences: Thesus (calm canvas, one brand colour, square product tiles, pill buttons, brand-colour footer)
   and Welly (serif display + tracked sans, full-bleed colour blocks, wavy/scalloped shapes, sticker badge).
   Theme follows the OS; html[data-theme] (header switch) overrides. */
:root{
  --amber:#E9A63A; --amber-hi:#F2B550; --ink:#212121; --ok:#3E9B66;
  --cat-1:#FBE6C2; --cat-2:#ECE5DA; --cat-3:#E6E0D5;
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:Poppins,system-ui,sans-serif;
  --wrap:1360px; --gut:40px; --hdr:72px; --r:16px; --r-lg:24px;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --bg:#F6F2EB;--bg-2:#EEE8DE;--card:#FFFFFF;--line:rgba(33,33,33,.12);--line-2:rgba(33,33,33,.24);--tx:#212121;--tx-2:rgba(33,33,33,.75);--tx-3:rgba(33,33,33,.68);--accent:#9A5B07;--tile:#ECE5DA;--soft:#FCEED6;--strip:#212121;--track:rgba(33,33,33,.1);--logo-filter:none;--brand-filter:brightness(0);--brand-blend:multiply;--logo-blend:multiply;color-scheme:light;
}
.force-dark{--bg:#212121;--bg-2:#2A2A2A;--card:#2C2C2C;--line:rgba(242,242,242,.14);--line-2:rgba(242,242,242,.26);--tx:#F2F2F2;--tx-2:rgba(242,242,242,.78);--tx-3:rgba(242,242,242,.64);--accent:#E9A63A;--tile:#EEECE8;--soft:#3A3021;--strip:#141414;--track:rgba(242,242,242,.12);--logo-filter:invert(1);--brand-filter:brightness(0) invert(1);--brand-blend:screen;--logo-blend:screen;--inkbtn:#F2F2F2;--inkbtn-tx:#212121;color-scheme:dark}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#212121;--bg-2:#2A2A2A;--card:#2C2C2C;--line:rgba(242,242,242,.14);--line-2:rgba(242,242,242,.26);--tx:#F2F2F2;--tx-2:rgba(242,242,242,.78);--tx-3:rgba(242,242,242,.64);--accent:#E9A63A;--tile:#EEECE8;--soft:#3A3021;--strip:#141414;--track:rgba(242,242,242,.12);--logo-filter:invert(1);--brand-filter:brightness(0) invert(1);--brand-blend:screen;--logo-blend:screen;--inkbtn:#F2F2F2;--inkbtn-tx:#212121;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#212121;--bg-2:#2A2A2A;--card:#2C2C2C;--line:rgba(242,242,242,.14);--line-2:rgba(242,242,242,.26);--tx:#F2F2F2;--tx-2:rgba(242,242,242,.78);--tx-3:rgba(242,242,242,.64);--accent:#E9A63A;--tile:#EEECE8;--soft:#3A3021;--strip:#141414;--track:rgba(242,242,242,.12);--logo-filter:invert(1);--brand-filter:brightness(0) invert(1);--brand-blend:screen;--logo-blend:screen;--inkbtn:#F2F2F2;--inkbtn-tx:#212121;color-scheme:dark}
.force-dark{background:var(--bg);color:var(--tx)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
/* anything marked hidden stays hidden, whatever display its class sets (the room calculator's second row showed because .rcalc-row is flex) */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.65 var(--sans);letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .3s,color .3s}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.15}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
::selection{background:var(--amber);color:var(--ink)}

/* type */
.display{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5.4vw,78px);line-height:1.04;letter-spacing:-.01em}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.005em}
.h2{font-size:clamp(30px,3.2vw,46px);letter-spacing:.015em;line-height:1.2}
.h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:.01em}
.label{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.lead{font-size:17px;color:var(--tx-2);max-width:560px}
.small{font-size:14px;color:var(--tx-2)}
.fine{font-size:12px;color:var(--tx-3)}
.mono{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.center{text-align:center}
.ul{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;font-size:14px;font-weight:500;letter-spacing:.04em}
.ul:hover{color:var(--accent)}

/* section heading: centred (Welly) or split with a link/controls */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.sh.c{flex-direction:column;align-items:center;text-align:center}
.sh .lead{margin-top:12px}
.sh.c .lead{margin-left:auto;margin-right:auto}

/* buttons: pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;border-radius:12px;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .45s var(--spring);white-space:nowrap;background:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.95);transition-duration:.08s}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:var(--amber-hi)}
.btn-ink{background:var(--inkbtn,#212121);color:var(--inkbtn-tx,#F2F2F2)}
.btn-ink:hover{filter:brightness(1.15)}
.block-amber .btn-ink,.final .btn-ink{background:#212121;color:#F2F2F2}
.btn-line{border-color:currentColor;color:inherit}
.btn-line:hover{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.block-amber .btn-line:hover{background:var(--ink);color:var(--amber);border-color:var(--ink)}
.btn-sm{height:38px;padding:0 18px;font-size:12px}
.btn-block{width:100%}

/* small tags */
.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--amber);color:var(--ink);line-height:1.2;vertical-align:middle}
.pill.dark{background:var(--ink);color:#F2F2F2}
.pill.wine{background:var(--inkbtn,#212121);color:var(--inkbtn-tx,#F2F2F2)}
.pill.line{background:none;border:1px solid var(--line-2);color:var(--tx-2)}

/* tabs and pill chips */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button,.chip{border:1.5px solid var(--line-2);background:none;border-radius:10px;padding:7px 16px;font-size:13px;font-weight:500;letter-spacing:.03em;color:var(--tx-2);text-decoration:none;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.tabs button:hover,.chip:hover{border-color:var(--tx);color:var(--tx)}
.tabs button.on,.chip.on,.chip[aria-pressed="true"]{background:var(--tx);border-color:var(--tx);color:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip .n{font-size:11px;opacity:.6}

/* top bar (amber): rotating message (Verve) + our brands (Cosori) */
.topbar{background:var(--amber);color:var(--ink);font-size:13px;font-weight:500;letter-spacing:.03em}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:40px}
.tb-msg{display:flex;align-items:center;gap:8px;min-width:0}
.tb-msg button{width:26px;height:26px;border:0;background:none;color:var(--ink);font-size:15px;line-height:1;border-radius:50%;flex:none}
.tb-msg button:hover{background:rgba(33,33,33,.12)}
.tb-msg span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s;font-weight:600}
.tb-msg a{color:inherit}
.tb-brands{display:flex;align-items:center;gap:20px;white-space:nowrap}
.tb-brands small{font-size:12px;opacity:.75;font-weight:500}
.tb-brands a{display:flex;align-items:center;height:22px}
.tb-brands img{display:block;height:var(--h,14px);width:calc(var(--h,14px) * var(--r,4));max-width:none;object-fit:contain;filter:grayscale(1) contrast(1.6);mix-blend-mode:multiply;opacity:.85;transition:opacity .2s}
.tb-brands a:hover img{opacity:1}
.tb-brands img{transform:translateY(var(--dy,0px))}   /* per-logo nudge (header block setting) so the lettering shares one baseline */
.tb-brands .sep{width:1px;height:16px;background:rgba(33,33,33,.3)}
.tb-brands .sup{font-weight:600;text-decoration:none}
.tb-brands .sup:hover{text-decoration:underline}
/* header: search · centred logo · tools, then a charcoal nav bar (Verve) */
.hdr{position:sticky;top:0;z-index:50;background:var(--bg);transition:background-color .3s}
.hdr-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hdr);transition:height .3s var(--ease)}
.hdr.compact .hdr-top{height:58px}
.hdr.compact{box-shadow:0 10px 30px -24px rgba(0,0,0,.5)}
.hdr-l{display:flex;align-items:center;gap:6px}
.logo{display:flex;align-items:center;justify-content:center}
.logo img{height:32px;width:auto;filter:var(--logo-filter);mix-blend-mode:var(--logo-blend);transition:height .3s var(--ease)}
.hdr .logo img{width:var(--header-logo-width,68px);height:auto;max-height:calc(var(--hdr) - 16px);object-fit:contain;transition:width .3s var(--ease)}
.hdr.compact .logo img{width:calc(var(--header-logo-width,68px) * .82);max-height:42px}
@media (max-width:600px){.hdr .logo img{width:min(var(--header-logo-width,68px),88px)}.hdr.compact .logo img{width:min(calc(var(--header-logo-width,68px) * .82),76px)}}
.navbar{background:var(--strip);color:#F2F2F2}
.navbar-in{position:relative;display:flex;align-items:center;justify-content:center;gap:32px;height:46px}
/* the bar carries the live site's eleven categories in its order (owner, 27 Oct 2026) plus Laifen, always on one row and never
   scrolling (owner: "i dont want the navigation bar to be scrollable"): the links share the free space evenly (at least 12px
   apart) and the type eases from 14px down to 12px on narrower screens; below 1180px the bar gives way to the menu button */
.navbar-in{justify-content:space-between;gap:12px;overflow:visible}
.navbar-in>a,.navbar-in>button{flex:none;white-space:nowrap}
html:root .navbar .navbar-in>a,html:root .navbar .navbar-in>button{font-size:clamp(12px,.975vw,14px)}
@media (max-width:1180px) and (min-width:961px){html:root .navbar{display:none}html:root .burger{display:grid}}
.navbar-in :focus-visible{outline-offset:-4px}
.navbar .navbar-in>.quiz{position:static;right:auto}   /* a highlighted link (e.g. the owner's "Discounted") stays in its place in the row, amber, never on top of the next link */
.navbar a,.navbar button{position:relative;background:none;border:0;padding:0;height:100%;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#F2F2F2;text-decoration:none;opacity:.88;transition:opacity .15s}
.navbar a:hover,.navbar button:hover,.navbar button[aria-expanded="true"],.navbar a.on{opacity:1}
.navbar a::after,.navbar button::after{content:"";position:absolute;left:0;right:0;bottom:11px;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.navbar a:hover::after,.navbar button:hover::after,.navbar button[aria-expanded="true"]::after,.navbar a.on::after{transform:scaleX(1)}
.navbar .pill{letter-spacing:.06em}
/* a red NEW tag on a nav link (owner, 1 Nov 2026: Laifen "a bit more prominent, maybe with a red NEW on top of it"): it sits on the label's top right corner, in the red of the Black Friday card tags; set the link's Pill to "New" in the header section */
.navbar .nav-new{position:absolute;top:calc(50% - 18px);right:-15px;padding:1px 4px;border-radius:3px;background:#E0222E;color:#fff;font-size:9px;font-weight:800;letter-spacing:.08em;line-height:1.3;box-shadow:0 1px 6px rgba(224,34,46,.45);pointer-events:none}
.mnav .nav-new{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:4px;background:#E0222E;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;line-height:1.3;vertical-align:middle}
.navbar .quiz{position:absolute;right:var(--gut);color:var(--amber);opacity:1}
.navbar .chev{transition:transform .2s}
.navbar button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.hdr-tools{display:flex;gap:20px;align-items:center;justify-content:flex-end}
.search-box{display:flex;align-items:center;gap:10px;height:40px;width:250px;padding:0 14px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--card);color:var(--tx-3);font-size:14px;text-align:left;transition:border-color .15s}
.search-box:hover{border-color:var(--tx-3)}
.search-box svg{color:var(--tx)}
.tbtn{border:0;background:none;padding:0;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--tx);display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.tbtn:hover{color:var(--accent)}
.cart-n{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--amber);color:var(--ink);font-size:11px;font-weight:700}
.ibtn{width:40px;height:40px;border:0;background:none;display:grid;place-items:center;color:var(--tx);border-radius:50%}
.burger,.m-search{display:none}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);display:none;box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}
.mega.open{display:block;animation:fade .2s ease}
.mega-in{display:grid;grid-template-columns:repeat(var(--mega-cols,5),1fr) 1.3fr;gap:28px;padding:34px var(--gut) 40px}
/* column titles are not headings (the page's outline starts at its h1); a title with a link lists everything in the column */
.mega .mega-h{font-size:11px;font-weight:600;line-height:1.15;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:12px}
.mega .mega-h a.mega-hd{color:inherit;text-decoration:none}
.mega .mega-h a.mega-hd .arr{display:inline-block;margin-left:6px;font-size:13px;letter-spacing:0;opacity:.55;transition:transform .2s ease,opacity .2s ease}
.mega .mega-h a.mega-hd:hover,.mega .mega-h a.mega-hd:focus-visible{color:var(--tx);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mega .mega-h a.mega-hd:hover .arr,.mega .mega-h a.mega-hd:focus-visible .arr{opacity:1;transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.mega .mega-h a.mega-hd .arr{transition:none}}
.mega a.ml{display:flex;align-items:center;gap:12px;padding:5px 0;font-size:15px;text-decoration:none}
.mega a.ml .mt{flex:none;width:40px;height:40px;border-radius:10px;background:var(--tile);overflow:hidden}
.mega a.ml .mt img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:8%}
.mega a.ml:hover{text-decoration:underline;text-underline-offset:4px}
.mega a.ml small{color:var(--tx-3);font-size:12px;margin-left:auto}
.mega-promo{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;text-decoration:none;background:var(--soft);border-radius:var(--r);padding:12px}
.mega-promo .tile{aspect-ratio:1;background:var(--cat-2);border-radius:12px;overflow:hidden}
.mega-promo .tile img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6%}
.mega-promo b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;margin:6px 0 2px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:45;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.scrim.show{opacity:1;visibility:visible}

/* drawers */
.drawer{position:fixed;top:0;bottom:0;z-index:90;width:min(440px,92vw);background:var(--bg);display:flex;flex-direction:column;transition:transform .35s var(--ease)}
.drawer.right{right:0;transform:translateX(105%)}
.drawer.left{left:0;transform:translateX(-105%)}
.drawer.open{transform:none}
#mnav:not(.open),#cart:not(.open){visibility:hidden}
#mnav.open,#cart.open{visibility:visible}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:var(--hdr);border-bottom:1px solid var(--line)}
.drawer-hd .drawer-t{font-size:13px;font-weight:600;line-height:1.15;letter-spacing:.14em;text-transform:uppercase}
.drawer-bd{flex:1;overflow:auto;padding:0 24px}
.drawer-ft{border-top:1px solid var(--line);padding:18px 24px 22px;display:grid;gap:10px}
.ship{margin:18px 0 6px;padding:14px 16px;font-size:13px;background:var(--soft);border-radius:12px}
.ship b{font-weight:600}
.bar{height:6px;border-radius:3px;background:var(--track);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--amber);border-radius:3px;transition:width .4s var(--ease)}
.ship.done .bar i{background:var(--ok)}
.ci{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.ci .st{width:76px;height:76px;background:var(--tile)}
.ci img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6%}
.ci .t{font-size:14px;line-height:1.35;font-weight:500}
.ci .v{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin-top:3px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:999px;margin-top:10px}
.qty a{width:34px;height:32px;display:grid;place-items:center;text-decoration:none;font-size:17px;line-height:1;color:var(--tx);border-radius:999px;transition:background .15s,color .15s}
.qty a:hover{background:var(--tx);color:var(--bg)}
.qty a[aria-disabled="true"]{opacity:.28;pointer-events:none}
.qty input{width:34px;height:32px;border:0;background:none;padding:0;text-align:center;font:inherit;font-size:13px;color:var(--tx);-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ci .pr{font-size:14px;text-align:right}
.ci .rm{display:block;border:0;background:none;color:var(--tx-3);font-size:12px;margin-top:8px;text-decoration:underline;padding:0;margin-left:auto}
.sum{display:flex;justify-content:space-between;font-size:15px;font-weight:500}
.empty{padding:40px 0;color:var(--tx-3)}
.ci .side{text-align:right}
.ci .pr s{display:block;color:var(--tx-3);font-size:12px;font-weight:400}
.ci .pr small{display:block;font-size:12px;color:var(--tx-3);font-weight:400;margin-top:2px}
.ci .meta{font-size:12px;color:var(--tx-3);margin-top:4px}
.ci ul{margin:4px 0 0;padding:0;list-style:none}
.ci .disc{color:var(--accent);font-size:12px;font-weight:600}
/* the cart (snippets/cart-form.liquid) in the drawer: assets/cart.js puts it into #cartBody; the summary keeps to the bottom
   while the lines scroll. One markup with the cart page: .drawer-only and .ct-only parts show in their place. */
.hide{display:none!important}
.drawer .js-cart-form{display:flex;flex-direction:column;min-height:100%}
.drawer .ct-main{flex:1 0 auto}
.drawer .ct-sum{position:sticky;bottom:0;margin:18px -24px 0;padding:18px 24px 22px;background:var(--bg);border-top:1px solid var(--line);display:grid;gap:10px}
.drawer .ct-only,.ct .drawer-only{display:none}
/* without JavaScript the cart page's quantity fields are saved with Update cart */
.cart-update-nojs{display:none}
.no-js .cart-update-nojs{display:inline-flex;margin-top:18px}
.mnav a{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.mnav a.mnav-hl{padding-left:14px;font-weight:700;background:linear-gradient(90deg,rgba(233,166,58,.2),rgba(233,166,58,0) 85%);box-shadow:inset 3px 0 0 var(--amber)}   /* the phone menu's highlighted links ("Black Friday", "Discounted"): an amber bar and tint, so the text keeps its normal colour and stays readable on the light and the dark menu */
.mnav details summary{list-style:none;display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.mnav details summary::-webkit-details-marker{display:none}
.mnav details a{padding:11px 0 11px 14px;font-size:15px;text-transform:none;letter-spacing:.01em;font-weight:400;color:var(--tx-2)}
.mnav details a.mnav-all{color:var(--tx);font-weight:600}
.mnav-contact{margin:24px 0;display:grid;gap:8px}

/* search overlay */
.search{position:fixed;inset:0 0 auto 0;z-index:95;background:var(--bg);display:none;max-height:88vh;overflow:auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.search.open{display:block;animation:fade .2s ease}
.search-in{padding:0 var(--gut) 34px}
.search-row{display:flex;gap:14px;align-items:center;border-bottom:1.5px solid var(--tx);height:84px}
.search-row input{flex:1;border:0;background:none;outline:0;font-family:var(--serif);font-size:30px;min-width:0}
.search-row input::placeholder{color:var(--tx-3)}
.sr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px 24px;margin-top:6px}
.sr{display:grid;grid-template-columns:60px 1fr auto;gap:14px;align-items:center;padding:8px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.sr:hover .t{text-decoration:underline}
.sr .st{width:60px;height:60px;background:var(--tile)}
.sr img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6%}
.sr .t{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr .p{font-size:14px}
.search .sr-h{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin:24px 0 12px}

/* product card (Thesus-style: square tile, text below, outlined pill) */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 20px}
.pc{position:relative;display:flex;flex-direction:column}
.pc-media{position:relative}
.pc-img{position:relative;display:block;aspect-ratio:1/1;background:var(--tile);overflow:hidden;border-radius:14px}
/* bn K51 · Kolenda Luxury Branding (https://www.kolenda.io/guides/luxury-branding) */
/* the photo swap is decorative, so it fades unhurried (.7s); buttons and form feedback stay at .15 to .2s */
.pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:10%;transition:opacity .7s,transform .6s var(--ease)}
/* bn K33 · Kolenda Packaging (https://www.kolenda.io/guides/packaging) */
/* the hover photo is framed like the chosen one (contain, same padding and blend), so the product's whole outline shows */
.pc-img img.alt{opacity:0;object-fit:contain;padding:10%}
.pc:hover .pc-img img.alt{opacity:1}
/* while the hover photo shows, the chosen photo fades out: a hover photo on a transparent background would otherwise show
   two products on top of each other (only once the hover photo has loaded, so the tile never goes blank) */
@media (hover:hover){html:root .pc:hover .pc-img>img:not(.alt):has(~ img.alt.is-ld){opacity:0}}

/* phones and tablets cannot hover: the hover photo is never shown there, so it is never downloaded (a lazy image with
   display:none is not fetched); a mouse still swaps to it */
@media (hover:none){.pc-img img.alt{display:none}}
.pc-badges{position:absolute;left:12px;top:12px;display:flex;gap:5px;flex-wrap:wrap;z-index:2}
.pc-b{padding-top:14px;display:flex;flex-direction:column;flex:1}
.pc-v{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
a.pc-v{text-decoration:none;align-self:flex-start}a.pc-v:hover{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.pc-t{font-size:16px;font-weight:500;line-height:1.35;margin-top:4px;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-t:hover{text-decoration:underline;text-underline-offset:4px}
.pc-meta{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin-top:4px}
.pc-pr{padding-top:8px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:16px}
.pc-pr.sale b{color:var(--accent)}
.pc-pr b{font-weight:500}
.pc-pr s{font-size:14px;color:var(--tx-3)}
.pc-ship{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:12px;color:var(--tx-3)}
.pc-ship i{width:7px;height:7px;border-radius:50%;background:var(--tx-3);flex:none}
.pc-ship i.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(62,155,102,.15)}
.pc-b .spacer{flex:1;min-height:14px}
/* card Add to cart: outline at rest, filled on hover (fill and label colour change together, so the label stays readable);
   "added" is green; sold out stays an outline whatever the pointer does. One rule set: a background shorthand on any of these
   would reset the fill. */
.qadd{height:44px;border-radius:12px;border:1.5px solid var(--tx);background-color:transparent;background-image:none;color:var(--tx);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s}
.qadd:hover:not([disabled]):not(.done){background-color:var(--tx);color:var(--bg)}
.qadd.done{background-color:var(--ok);border-color:var(--ok);color:#fff}
.qadd[disabled]{opacity:.4;cursor:not-allowed}
.pc.soldout .pc-img img{opacity:.55}

/* Product photo picks (owner, 27 Oct 2026: "all products should look at the right"; snippets/photo-pick): a left-facing
   chosen photo is shown mirrored so it looks right. The one flip in the theme: the scale property composes with any
   transform rule (hover zooms, transform:none resets, entrance motion), so a mirrored photo never turns back; browsers
   without it use the transform. Nothing else is ever mirrored. */
.is-mirrored{scale:-1 1}
@supports not (scale:1){.is-mirrored{transform:scaleX(-1)}}

/* carousel rail */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*20px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.arrows{display:flex;gap:8px}
.arrows button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--tx);background:none;display:grid;place-items:center;transition:background .15s,color .15s}
.arrows button:hover{background:var(--tx);color:var(--bg)}
.arrows button[disabled]{opacity:.25;pointer-events:none}

/* sections and colour blocks */
.sec{padding:100px 0}
.sec-sm{padding:64px 0}
.block-amber{background:var(--amber);color:var(--ink)}
.block-amber .lead,.block-amber .small{color:rgba(33,33,33,.8)}
.block-soft{background:var(--soft)}
.block-2{background:var(--bg-2)}

/* scalloped panel (Welly): ::before draws the shape so content stays crisp */
.scallop{position:relative;isolation:isolate;--sc:18px;--sc-bg:var(--soft)}
.scallop::before{content:"";position:absolute;inset:0;z-index:-1;padding:var(--sc);background:var(--sc-bg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle,#000 calc(var(--sc) - .5px),#0000 var(--sc)) 0 0/calc(2*var(--sc)) calc(2*var(--sc)) round;
          mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle,#000 calc(var(--sc) - .5px),#0000 var(--sc)) 0 0/calc(2*var(--sc)) calc(2*var(--sc)) round}

/* rotating sticker */
.sticker{width:130px;height:130px;position:relative;flex:none}
.sticker svg{width:100%;height:100%;animation:spin 22s linear infinite}
.sticker .core{position:absolute;inset:29%;border-radius:50%;background:var(--ink);color:var(--amber);display:grid;place-items:center;font-family:var(--serif);font-size:28px;line-height:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* amber marquee band (Welly strip / the live footer strip) */
.marquee{background:var(--amber);color:var(--ink);overflow:hidden;padding:15px 0}
.mq-track{display:flex;width:max-content;animation:mq 50s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{display:inline-flex;align-items:center;gap:22px;padding:0 22px;font-size:15px;font-weight:600;letter-spacing:.03em;white-space:nowrap}
.mq-track span svg{flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* contact boxes (live footer pattern) */
.tb{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border:1px solid var(--line-2);border-radius:6px;text-decoration:none;transition:border-color .15s}
a.tb:hover{border-color:var(--amber)}
.tb small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tb b{font-size:14px;font-weight:600;text-align:right}
.tb-wa small{display:inline-flex;align-items:center;gap:7px}.tb-wa small svg{width:16px;height:16px;flex:none}

/* accordions, rich text, spec tables */
.acc details{border-bottom:1px solid var(--line)}
.acc details:first-child{border-top:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-size:16px;font-weight:500;position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:4px;top:50%;width:12px;height:12px;margin-top:-6px;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .25s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .acc-b{padding:0 40px 22px 0;color:var(--tx-2);font-size:15px}
.acc .acc-b p+p{margin-top:10px}
.rte p,.rte ul,.rte ol{margin:0 0 12px}
.rte ul,.rte ol{padding-left:20px}
.rte li{margin:4px 0}
.rte strong,.rte b{color:var(--tx);font-weight:600}
.rte h2,.rte h3,.rte h4{font-size:17px;margin:18px 0 8px;color:var(--tx)}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec th,.spec td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec thead th{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);border-bottom:1.5px solid var(--tx)}
.spec .num{white-space:nowrap}

/* footer (live ribi.mt footer, always dark) */
.foot-in{padding:72px var(--gut) 28px}
.foot-top{padding-bottom:40px;border-bottom:1px solid var(--line-2)}
.foot-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr) 1.3fr;gap:30px;padding:44px 0;border-bottom:1px solid var(--line-2)}
.foot-cols .foot-h{font-size:12px;font-weight:700;line-height:1.15;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.foot-cols .foot-h::after{content:"";width:22px;height:2px;background:var(--amber)}
.foot-cols a{display:block;color:var(--tx-2);text-decoration:none;font-size:14px;line-height:2.1}
.foot-cols a:hover{color:var(--amber)}
.foot-cols a.manual{display:inline-flex;background:var(--amber);color:var(--ink);font-weight:600;border-radius:3px;padding:0 10px;line-height:2;margin:4px 0}
.news{display:flex;gap:6px;margin-top:10px}
.news input{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid var(--line-2);background:transparent;padding:0 16px;outline:0}
.news input:focus{border-color:var(--amber)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;font-size:13px;color:var(--amber)}
.socials{display:flex;gap:18px;font-size:13px}
.socials a{color:var(--tx-2);text-decoration:none}
.socials a:hover{color:var(--amber)}

/* toast */
.toast{position:fixed;left:50%;bottom:22px;z-index:120;transform:translate(-50%,200%);background:var(--ink);color:#F2F2F2;padding:12px 20px;border-radius:999px;font-size:14px;display:flex;gap:12px;align-items:center;transition:transform .35s var(--ease);max-width:calc(100vw - 32px);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.toast.show{transform:translate(-50%,0)}
.toast .ok{color:var(--amber)}
.toast button{border:0;background:none;color:var(--amber);text-decoration:underline;padding:0 0 0 4px;font-size:14px}
.fade-in{animation:fade .35s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.crumbs{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);display:flex;gap:10px;flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--tx)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* responsive (shared) */
@media (max-width:1180px){
  :root{--gut:28px}
  .navbar-in{gap:22px;justify-content:flex-start}
  .navbar .nav-opt{display:none}
  .navbar .quiz{position:static;margin-left:auto}
  .search-box{width:170px}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rail{grid-auto-columns:calc((100% - 2*20px)/3)}
  .mega-in{grid-template-columns:repeat(3,1fr)}
  .mega-promo{grid-column:1/-1}
  .foot-cols{grid-template-columns:repeat(3,1fr)}
  .foot-cols .news-col{grid-column:1/-1}
}
@media (max-width:960px){
  .navbar,.search-box,.tbtn.acct,.tbtn .lbl,.tb-brands{display:none}
  .burger,.m-search{display:grid}
  .hdr-top{grid-template-columns:auto 1fr auto}
  .logo{justify-content:flex-start;margin-left:4px}
  .hdr-tools{gap:10px}
  .topbar-in{justify-content:center}
  .foot-cards{grid-template-columns:minmax(0,1fr);gap:8px}
  .sh{flex-direction:column;align-items:flex-start}
  .sh.c{align-items:center}
}
@media (max-width:640px){
  :root{--gut:18px;--hdr:62px}
  .sec{padding:72px 0}
  .sec-sm{padding:48px 0}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .rail{grid-auto-columns:72%;gap:12px}
  .pc-t{font-size:14px}
  .pc-pr{font-size:14px}
  .qadd{height:40px;font-size:11px;letter-spacing:.06em}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-bot{flex-direction:column;align-items:flex-start}
  .toast{bottom:64px}
  .sticker{width:100px;height:100px}
}

@media (max-width:1360px){.navbar .nav-opt{display:none}}
@media (min-width:961px) and (max-width:1180px){
  html:root:not(.lp) .navbar{display:block}
  html:root .navbar-in{justify-content:flex-start;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--amber) transparent}
  html:root .navbar .nav-opt{display:inline-flex}
  html:root .navbar .navbar-in>.quiz{margin-left:0}
  html:root .navbar .navbar-in>a,html:root .navbar .navbar-in>button{font-size:14px}
  html:root{scroll-padding-top:calc(var(--hdr) + 62px)}
}
/* ---------- v4 components ---------- */
/* shelf: intro left, carousel right with a page counter (Verve) */
.shelf-in{display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);gap:56px;align-items:start}
.shelf-intro{position:sticky;top:calc(var(--hdr) + 80px)}
.shelf-intro .lead{font-size:15px;margin-top:12px}
.shelf-intro .btn{margin-top:24px}
.shelf-intro .tabs,.shelf-intro .chips{margin-top:22px}
.shelf .rail{grid-auto-columns:calc((100% - 2*20px)/3)}
.rail-ctl{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:24px;font-size:12px;font-weight:600;letter-spacing:.14em}
.rail-ctl button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--tx);background:none;display:grid;place-items:center;transition:background .15s,color .15s}
.rail-ctl button:hover{background:var(--tx);color:var(--bg)}
.rail-ctl button[disabled]{opacity:.25;pointer-events:none}

/* category cards (Cosori): name + arrow on a warm tile */
.catc-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.catc{position:relative;display:flex;flex-direction:column;background:var(--tile);color:var(--ink);border-radius:var(--r);padding:16px 16px 0;text-decoration:none;overflow:hidden;transition:transform .3s var(--ease)}
.catc:hover{transform:translateY(-3px)}
.catc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.catc-top b{font-weight:600;font-size:15px;line-height:1.3}
.catc-top small{display:block;font-size:12px;color:rgba(33,33,33,.6);font-weight:400;margin-top:2px}
.catc .ar{flex:none;width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:14px;transition:background .2s,transform .3s var(--ease)}
.catc:hover .ar{background:var(--amber);transform:rotate(45deg)}
.catc .im{aspect-ratio:1/1;margin-top:4px}
.catc img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:7%;transition:transform .6s var(--ease)}

.catc .pill{position:absolute;left:16px;bottom:16px}

/* checklist rows (Cosori) */
.checks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.checks li{display:flex;gap:14px;align-items:center;background:var(--card);border-radius:14px;padding:14px 18px;font-size:15px;font-weight:500;box-shadow:0 1px 0 var(--line)}
.checks li::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23212121' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* guides (Pure Cycles journal / Cosori tips) */
.guides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.guide{text-decoration:none;display:flex;flex-direction:column;gap:14px}
.guide .im{aspect-ratio:4/3;border-radius:var(--r);background:var(--tile);overflow:hidden}
.guide img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:12%;transition:transform .6s var(--ease)}

.guide .meta{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.guide h3{font-size:17px;font-weight:500;line-height:1.38;margin-top:-6px}
.guide:hover h3{text-decoration:underline;text-underline-offset:4px}

@media (max-width:1180px){
  .catc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .shelf .rail{grid-auto-columns:calc((100% - 20px)/2)}
  .guides{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .shelf-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .shelf-intro{position:static}
  .catc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .catc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .catc{padding:12px 12px 0}
  .catc-top b{font-size:13px}
  .catc .ar{width:26px;height:26px}
  .shelf .rail{grid-auto-columns:72%}
  .guides{grid-template-columns:1fr 1fr;gap:14px}
  .guide h3{font-size:14px}
}

/* sections ease in as they enter the viewport (added by ribi.js, so no-JS stays visible) */

/* cart add-ons */
.ups{margin:20px 0 10px;padding:16px;border-radius:14px;background:var(--bg-2)}
.ups .ups-h{font-size:11px;font-weight:700;line-height:1.15;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:8px}
.up{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:8px 0}
.up+.up{border-top:1px solid var(--line)}
.up .st{width:52px;height:52px;border-radius:10px;background:var(--tile);overflow:hidden}
.up img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:8%}
.up .t{font-size:13px;line-height:1.3;font-weight:500}
.up small{display:block;font-size:12px;color:var(--tx-3);font-weight:400;margin-top:2px}

/* express checkout + WhatsApp */
.xpay{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.xpay button{height:42px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--card);font-size:13px;font-weight:600;color:var(--tx)}
.xpay button:hover{border-color:var(--tx)}
.wa{position:fixed;right:18px;bottom:18px;z-index:105;display:flex;align-items:center;gap:8px;height:50px;padding:0 18px 0 14px;border-radius:999px;background:var(--inkbtn,#212121);color:var(--inkbtn-tx,#F2F2F2);text-decoration:none;font-size:14px;font-weight:600;box-shadow:0 16px 34px -14px rgba(0,0,0,.55);transition:transform .2s var(--ease)}
.wa:hover{transform:translateY(-2px)}
@media (max-width:640px){.wa{right:12px;bottom:12px;padding:0;width:50px;justify-content:center}.wa span{display:none}}

.scrim.show ~ .wa{opacity:0;pointer-events:none}

/* card lift */
.pc-img{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.pc:hover .pc-img{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(0,0,0,.45)}

/* grid children may shrink below their content's width (stops carousels and galleries widening the page on phones) */
.shelf-in>*,.pdp>*,.pdp-more>*,.band>*,.finder>*,.fam>*,.split>*,.split2>*,.hero-grid>*,.lf-grid>*,.brush>*,.duo>*,.fnd>*,.faq>*,.tech-grid>*,.coll>*,.foot-top>*,.foot-cols>*{min-width:0}

/* cart drawer lines settle in when it opens */
.drawer.open .ci,.drawer.open .ups{animation:fadeup .45s var(--ease) both}
.drawer.open .ci:nth-child(2){animation-delay:.05s}.drawer.open .ci:nth-child(3){animation-delay:.1s}.drawer.open .ci:nth-child(4){animation-delay:.15s}.drawer.open .ups{animation-delay:.2s}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* parallax images get a little bleed so edges never show */
[data-parallax]{will-change:transform}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}.drawer.open .ci,.drawer.open .ups{animation:none}}

/* campaign mode (?lp=1, the link paid ads use): no mega nav or brand strip, so the landing page keeps the visitor's focus */
.lp .navbar,.lp .tb-brands{display:none}
.lp #site-header{min-height:112px}
@media (max-width:640px){.lp #site-header{min-height:102px}}

/* data-backed badge (12-month Shopify sales rank) and the search grant note */
.pill.best{background:#212121;color:#E9A63A}
.sr-note{display:block;margin:4px 0 18px;padding:14px 18px;border-radius:14px;background:var(--soft);text-decoration:none;font-size:14px}
.sr-note:hover{text-decoration:underline}

/* ---------- theme additions (Shopify markup) ---------- */
.skip{position:absolute;left:-9999px;top:8px;z-index:300;background:var(--ink);color:#F2F2F2;padding:10px 16px;border-radius:10px}
.skip:focus{left:12px}
.rte{color:var(--tx-2);font-size:16px;line-height:1.7}
.rte h2,.rte h3,.rte h4{color:var(--tx);font-weight:600;line-height:1.25;margin:1.6em 0 .5em}
.rte h2{font-size:26px}.rte h3{font-size:21px}
.rte p,.rte ul,.rte ol,.rte table{margin:0 0 1em}
.rte a{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.rte img{border-radius:var(--r);margin:1em 0}
.rte table{width:100%;border-collapse:collapse;font-size:14px}
.rte td,.rte th{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:42px;height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:600;font-size:14px}
.pagination .current{background:var(--ink);border-color:var(--ink);color:#F2F2F2}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600;color:var(--tx-2)}
.field input,.field textarea,.field select{height:48px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--card);color:var(--tx);padding:0 14px;font:inherit}
.field textarea{height:auto;min-height:140px;padding:12px 14px}
.form-msg{padding:12px 16px;border-radius:12px;background:var(--soft);margin-bottom:16px;font-size:14px}
.form-msg.err{background:#fde8e6;color:#8a1f12}
.page-head{padding:44px 0 10px}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.6vw,60px);line-height:1.05}
.narrow{max-width:820px;margin:0 auto}
.shopify-payment-button__button{border-radius:12px!important;min-height:52px}
.shopify-payment-button__more-options{color:var(--tx-2)!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tb-word{font-weight:700;font-size:13px;letter-spacing:.02em}
.tb-msg .ann a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot-bot .pay{display:flex;gap:6px;flex-wrap:wrap}
.foot-bot .pay-ic{height:22px;width:auto}
.ci a.t{text-decoration:none;color:inherit}.ci a.t:hover{text-decoration:underline}
.drawer-hd .logo img{height:22px;width:auto;filter:var(--logo-filter)}
.drawer-ft form{margin:0}
.tb-brands a{text-decoration:none}
/* product card: the add button sits in its form, so let it fill the card; "Choose options" links look like the button */
.pc-b>form[data-add-form]{display:flex;flex-direction:column;margin:0}
.pc-b>form[data-add-form] .qadd{width:100%}
a.qadd{display:flex;align-items:center;justify-content:center;text-decoration:none}
/* header stays pinned: the section wrapper (top bar + header) is sticky, and the 40px top bar scrolls away above it */
.section-header{position:sticky;top:-40px;z-index:50}
.section-header .hdr{position:relative;top:auto}
/* toast is fully hidden until shown (on phones the translate alone left the pill peeking) */
.toast{visibility:hidden;opacity:0;transition:transform .35s var(--ease),opacity .25s,visibility .35s}
.toast.show{visibility:visible;opacity:1}

/* cart drawer: one-tap express checkout */
.drawer-xpay{padding:0 24px 22px}
.drawer-xpay .fine{text-align:center;margin:0 0 10px}
.drawer-xpay[hidden]{display:none}
/* campaign mode (?lp=1) also hides the mega menu */
.lp .mega,.lp #megaBtn{display:none}

/* phones, product pages: the sticky Add to cart is the main action, so the floating WhatsApp bubble steps aside (support is in the buy box) */
@media (max-width:640px){.template-product .wa{display:none}}

/* room size calculator (snippets/room-calc.liquid) */
.rcalc{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.rcalc-h{padding:12px 14px 10px;font-size:14px;font-weight:600}
.rcalc-body{padding:0 14px 14px}
.rcalc-row{display:flex;align-items:flex-end;gap:10px}
.rcalc-row+.rcalc-row{margin-top:10px}
.rcalc-row label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:500;color:var(--tx-2)}
.rcalc-row label span{display:flex;align-items:center;gap:6px;color:var(--tx-2);font-size:14px}
.rcalc-row input{width:100%;min-width:0;height:42px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);color:var(--tx);padding:0 10px;font:inherit;font-size:16px}
.rcalc-x{padding-bottom:11px;color:var(--tx-3)}
.rcalc-add{margin-top:10px;border:0;background:none;padding:0;color:var(--tx);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rcalc-out{margin-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:14px;color:var(--tx-2)}
.rcalc-out b{font-size:20px;color:var(--tx);font-variant-numeric:tabular-nums}
.rcalc-out small{flex-basis:100%;font-size:12.5px}

/* ---------- Kolenda sales tactics (research/kolenda/PLAYBOOK.md) ---------- */
/* bn K11 · Kolenda User Experience (https://www.kolenda.io/guides/user-experience) */
/* search suggestions: the shopper's words in a suggestion's name are bold; on phones one left-aligned column in Shopify's
   relevance order */
.sr .n b{font-weight:600}
@media (max-width:640px){.sr-grid{grid-template-columns:minmax(0,1fr)}}

/* bn K06b · Kolenda Copywriting (https://www.kolenda.io/guides/copywriting) */
/* the returns and WhatsApp line under Checkout: one quiet centred line, no box */
.ct-sum .k-assure{text-align:center}
.ct-sum .k-assure a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ct-sum .k-assure a:hover{color:var(--tx)}

/* bn K32 · Kolenda Ecommerce (https://www.kolenda.io/guides/ecommerce) */
/* after an add (assets/cart.js felt()), the cart count gives one calm pulse: opacity and colour only, nothing scales;
   none with reduced motion (the rule near the top of this file) */
.cart-n.bump{animation:k-bump .6s ease-out 1}
@keyframes k-bump{0%,100%{opacity:1}35%{opacity:.45;color:var(--accent)}}

/* bn K45 · Kolenda User Experience (https://www.kolenda.io/guides/user-experience) */
/* the cart line whose quantity just changed glows softly for a moment (assets/cart.js changed()); a pseudo-element behind
   the line, so nothing moves; reduced motion turns it on and off without the fade */
html:root .ci{position:relative;isolation:isolate}
html:root .ci::before{content:"";position:absolute;inset:0 -12px;z-index:-1;border-radius:var(--r-md,12px);background:var(--soft);opacity:0;transition:opacity .9s ease;pointer-events:none}
html:root .ci.k-changed::before{opacity:1;transition-duration:.15s}

/* bn K45 · Kolenda User Experience (https://www.kolenda.io/guides/user-experience) */
/* the toast with an action (Undo, WhatsApp us) sizes to its words up to the screen width less the 16px gutters, so a
   product name wraps once at most instead of four times in a half-width pill; centred with auto margins, so it only
   slides up. A failure (.err) has no tick. In dark the toast takes the raised card surface and a hairline, so it stands
   off the dark drawer. On phones the action gets a 40 × 40 hit area (K31) without changing its look */
html:root .toast{left:16px;right:16px;margin-inline:auto;width:fit-content;max-width:calc(100vw - 32px);transform:translateY(200%)}
html:root .toast.show{transform:none}
html:root .toast.err .ok{display:none}
html:root #toastT{display:flex;align-items:center;gap:16px}
html:root .toast button{flex:none;white-space:nowrap}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toast{background:var(--card);outline:1px solid var(--line-2)}}
:root[data-theme="dark"] .toast,.force-dark .toast{background:var(--card);outline:1px solid var(--line-2)}
@media (max-width:640px){
  html:root .toast button{position:relative}
  html:root .toast button::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,40px);height:max(100%,40px);transform:translate(-50%,-50%)}
}

/* bn K16 · Kolenda Donations (https://www.kolenda.io/guides/donations) */
/* phones: the free-delivery words keep two lines' height, bottom-aligned, so the short "Add €X more" and "unlocked" lines
   and the longer below-halfway sentence take the same room: nothing below the bar moves when the cart crosses halfway */
@media (max-width:640px){
  html:root .ship .k-ship-t{display:grid;align-items:end;min-height:2lh}
}

/* bn K51 · Kolenda Fonts (https://www.kolenda.io/guides/fonts) */
/* small text breathes a little: crumbs, card lines, fine print and cart line details (sentence case, no new size). The
   page stylesheets set crumbs at one class deeper (.col-hero .crumbs, .pdp-top .crumbs), so [class] matches that depth */
html:root body [class] :is(.crumbs,.pc-meta,.fine),html:root body .ct-lines .ci .v{letter-spacing:.01em}

/* bn K31 · Kolenda User Experience (https://www.kolenda.io/guides/user-experience) */
/* phones: every small control is at least 40 × 40 to the finger. Where the look must stay (− and +, Remove, filter and
   search chips) a transparent ::after widens the hit area around the centre; footer links get the height itself. The
   arrows, drawer close and page numbers are already 40 × 40 (assets/minimal.css). */
@media (max-width:640px){
  html:root :is(.qty a,.ci .rm,.chip){position:relative}
  html:root :is(.qty a,.ci .rm,.chip)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,40px);height:max(100%,40px);transform:translate(-50%,-50%)}
  html:root body .foot-cols a{min-height:40px;padding:10px 0}
}

/* Black Friday as a button (owner, 31 Oct 2026: "this should be more prominent"): a filled amber pill in the top bar and in the phone menu */
.navbar .nav-badge{background:var(--amber);color:#212121;opacity:1;height:30px;align-self:center;padding:0 13px;border-radius:999px;font-weight:700;letter-spacing:.1em;box-shadow:0 2px 12px rgba(233,166,58,.38);transition:background .2s,box-shadow .2s}
.navbar .nav-badge::after{display:none}
.navbar .nav-badge:hover{background:var(--amber-hi);box-shadow:0 3px 16px rgba(233,166,58,.5)}
.navbar .nav-badge:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (min-width:1181px) and (max-width:1260px){.navbar-in{gap:10px}} /* the button is a little wider than a plain link: take it from the gaps so the bar stays on one row */
.mnav a.mnav-badge{margin:8px 0;padding:13px 16px;border:0;border-radius:10px;background:var(--amber);font-weight:700;box-shadow:0 2px 12px rgba(233,166,58,.3)}
html:root body .mnav a.mnav-badge,html:root body .mnav a.mnav-badge:is(:hover,:focus-visible){color:#212121!important}

/* pre-order notice at the top of the cart and the cart drawer (snippets/cart-form.liquid) */
.cart-pre{display:block;box-sizing:border-box;width:100%;max-width:100%;margin:0 0 16px;padding:14px 16px;border-left:3px solid var(--amber);border-radius:6px;background:rgba(233,166,58,.14);font-size:14px;line-height:1.6;white-space:normal;overflow-wrap:anywhere
.cart-pre strong{font-weight:700}