/* Stoep Commerce default storefront theme. --brand comes from Store setup > Logo & colours. */
:root{
  --brand:#6b4fa0; --ink:#1b1f1e; --muted:#5d6664; --line:#e4e7e6; --ground:#fbfbfa; --panel:#ffffff; --soft:#f3f4f3;
  --ok:#2f7a55; --ok-soft:#e7f3ec; --bad:#b23a3a; --bad-soft:#fbeaea; --info-soft:#eef0f7;
  --radius:10px; --btn-radius:8px; --on-brand:#fff; color-scheme:light;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --heading-font:var(--font);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.6 var(--font);min-height:100vh;display:flex;flex-direction:column}
/* Closed menus and flyouts near the right edge are invisible but still take up room; never let them make the
   whole page scroll sideways. (clip, not hidden, so sticky parts such as the Features search keep working.) */
body{overflow-x:clip}
main{flex:1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.15;text-wrap:balance;margin:0;letter-spacing:-.015em;font-family:var(--heading-font)}
.theme-karoo h1,.theme-karoo h2,.theme-karoo h3{letter-spacing:0;font-weight:700}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.wrap{max-width:var(--wrap,1200px);margin:0 auto;padding-inline:clamp(16px,2.5vw,40px)}
.narrow-wrap{max-width:760px}
.section{padding-block:36px}
.muted{color:var(--muted)} .small{font-size:14px} .center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}
.staff-bar{background:#fbf0de;color:#7a4707;text-align:center;padding:8px 16px;font-size:14px}
.staff-bar a{color:inherit;font-weight:700}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin:0 0 6px}

/* Header */
.store-head{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.head-row{display:flex;align-items:center;gap:24px;min-height:68px;flex-wrap:wrap}
.store-brand{font-weight:800;font-size:21px;text-decoration:none;letter-spacing:-.02em}
.store-brand{display:inline-flex;align-items:center;flex-shrink:0}
.store-brand img{display:block;height:var(--logo-h,64px);max-height:var(--logo-h,64px);width:auto;max-width:min(360px,60vw);object-fit:contain}
@media (max-width:860px){.store-brand img{height:min(var(--logo-h,64px),52px);max-height:min(var(--logo-h,64px),52px);max-width:55vw}}
.store-nav{display:flex;gap:20px;flex:1;overflow-x:auto;scrollbar-width:none}
.store-nav a{text-decoration:none;font-size:15px;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.store-nav a:hover{border-bottom-color:var(--brand)}
.head-tools{display:flex;align-items:center;gap:12px}
/* Header search (simple header): four styles and three widths, chosen in the page builder's Header settings */
.head-search{position:relative;display:flex;align-items:center}
.head-search input{font:inherit;font-size:14px;color:var(--ink);width:var(--hs-w,220px);transition:width .2s,border-color .15s,box-shadow .15s,background .15s}
.head-search input::placeholder{color:var(--muted)}
.hs-small{--hs-w:160px}.hs-medium{--hs-w:220px}.hs-large{--hs-w:300px}
.hs-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:grid;color:var(--muted);pointer-events:none}
.hs-icon svg{width:17px;height:17px}
.hs-pill input{border:var(--search-border,1px solid var(--line));border-radius:var(--search-radius,999px);padding:var(--search-py,9px) 16px var(--search-py,9px) 38px;background:var(--search-bg,var(--soft))}
.hs-pill input:focus{outline:none;border-color:var(--brand);background:var(--ground);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);width:calc(var(--hs-w,220px) + 40px)}
.hs-box input{border:var(--search-border,1px solid var(--line));border-right:0;border-radius:var(--search-radius,var(--btn-radius)) 0 0 var(--search-radius,var(--btn-radius));padding:var(--search-py,9px) 12px;background:var(--search-bg,var(--ground))}
.hs-box input:focus{outline:none;border-color:var(--brand)}
.hs-box button{border:1px solid var(--search-btn,var(--brand));background:var(--search-btn,var(--brand));color:var(--search-btn-on,var(--on-brand));font:inherit;font-size:14px;font-weight:700;padding:var(--search-py,9px) 16px;border-radius:0 var(--search-radius,var(--btn-radius)) var(--search-radius,var(--btn-radius)) 0;cursor:pointer}
.hs-box button:hover{filter:brightness(1.08)}
.hs-line .hs-icon{left:0}
.hs-line input{border:0;border-bottom:2px solid var(--line);border-radius:0;padding:8px 4px 8px 26px;background:transparent}
.hs-line input:focus{outline:none;border-bottom-color:var(--brand)}
.head-search-pop>summary{list-style:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer}
.head-search-pop>summary::-webkit-details-marker{display:none}
.head-search-pop>summary:hover,.head-search-pop[open]>summary{background:var(--soft)}
.head-search-pop:not(.hsp-always){display:none}
.hsp-form{position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 12px 24px -16px rgba(0,0,0,.35);padding-block:14px;z-index:6}
.hsp-row{display:flex;gap:8px}
.hsp-row input{flex:1;min-width:0;font:inherit;font-size:16px;padding:var(--search-py,11px) 16px;border:var(--search-border,1px solid var(--line));border-radius:var(--search-radius,var(--btn-radius));background:var(--search-bg,var(--ground));color:var(--ink)}
.hsp-row input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.hsp-row button{border:0;background:var(--search-btn,var(--brand));color:var(--search-btn-on,var(--on-brand));font:inherit;font-weight:700;padding:0 20px;border-radius:var(--search-radius,var(--btn-radius));cursor:pointer}
/* Small phones: the header icons (currency, search, theme, account, wishlist, cart) must fit on one line */
@media (max-width:480px){.head-tools{gap:4px}}
@media (max-width:360px){.head-tools .theme-btn,.head-tools .acct-link,.head-tools .wish-link,.head-tools .cart-link,.head-tools .head-search-pop>summary{width:33px;height:33px}.head-tools{gap:2px}}
.cart-link{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;text-decoration:none}
.cart-link:hover{background:var(--soft)}
.cart-count{position:absolute;top:0;right:-2px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}

/* Flash */
.flash{margin:16px 0 0;padding:12px 16px;border-radius:8px;background:var(--info-soft);font-size:15px}
.flash-success{background:var(--ok-soft);color:var(--ok)}
.flash-error{background:var(--bad-soft);color:var(--bad)}

/* Buttons */
.btn-brand{display:inline-flex;align-items:center;justify-content:center;background:var(--btn-bg,var(--brand));color:var(--btn-on,var(--on-brand));border:2px solid var(--btn-bg,var(--brand));text-decoration:none;font:700 16px/1 var(--font);padding:14px 26px;border-radius:var(--btn-radius);cursor:pointer;transition:filter .15s,background .15s,transform .15s,box-shadow .15s}
body.btns-outline .btn-brand{background:transparent;color:var(--btn-bg,var(--brand))}
body.btns-outline .btn-brand:hover{background:var(--btn-bg,var(--brand));color:var(--btn-on,var(--on-brand))}
.btn-brand:hover{filter:brightness(1.1)}
.btn-brand:disabled{background:#b9bfbd;cursor:not-allowed;filter:none}
.btn-brand.block{width:100%;margin-top:12px}
.btn-outline{background:transparent;border:1.5px solid var(--ink);border-radius:8px;padding:9px 16px;font:600 15px var(--font);cursor:pointer}
.link-btn{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit}
.grow{flex:1}

/* Home */
.hero{background:linear-gradient(0deg,var(--soft),var(--panel));border-bottom:1px solid var(--line)}
.hero .wrap{padding-block:72px 64px}
.hero h1{font-size:clamp(34px,6vw,64px);max-width:16ch;font-weight:800;letter-spacing:-.03em}
.hero-sub{font-size:18px;color:var(--muted);margin:12px 0 0}
.hero .btn-brand{margin-top:28px}
.collection-strip{display:flex;gap:10px;flex-wrap:wrap}
.pill-link{text-decoration:none;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 16px;font-weight:600;font-size:15px}
.pill-link:hover{border-color:var(--brand);color:var(--brand)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px}
.section-head h2{font-size:26px}
.section-head a{font-size:15px;color:var(--brand);text-decoration:none;font-weight:600}
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;border-top:1px solid var(--line)}
.promises div{display:flex;flex-direction:column}
.promises span{color:var(--muted);font-size:15px}

/* Product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px 20px}
.card{display:flex;flex-direction:column;gap:6px;text-decoration:none}
.card-img{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .card-img img{transform:scale(1.03)}
.card-ph{display:grid;place-items:center;width:100%;height:100%;font-size:56px;font-weight:800;color:var(--brand);background:var(--soft);aspect-ratio:1}
.card-ph.big{font-size:120px;border-radius:var(--radius)}
.card-title{font-weight:600;line-height:1.35}
.badge{position:absolute;top:10px;left:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px}
.badge-sale{background:var(--brand)}
.listing-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.listing-head h1{font-size:34px}
.listing-banner{margin:0 0 22px;border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.listing-banner img{display:block;width:100%;max-height:320px;object-fit:cover}
.sort-form{display:flex;align-items:center;gap:8px;font-size:14px}
.sort-form select{font:inherit;padding:7px 10px;border-radius:6px;border:1px solid var(--line);background:var(--panel)}
.pager{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:32px}

/* Product page */
.product{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
.gallery-main{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);background:var(--soft)}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumb-btn{width:72px;height:72px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:none}
.thumb-btn img{width:100%;height:100%;object-fit:cover}
.thumb-btn[aria-current="true"]{border-color:var(--brand)}
.buy h1{font-size:clamp(28px,4vw,40px)}
.price{font-size:24px;font-weight:700;margin:12px 0 0}
.buy-form{margin:24px 0;display:flex;flex-direction:column;gap:18px}
.opt{border:0;padding:0;margin:0}
.opt legend{font-weight:700;font-size:14px;margin-bottom:8px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch input{position:absolute;opacity:0;pointer-events:none}
.swatch span{display:inline-block;padding:9px 16px;border:1.5px solid var(--line);border-radius:8px;cursor:pointer;background:var(--panel);font-size:15px}
.swatch input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.swatch input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.swatch.unavailable span{color:var(--muted);text-decoration:line-through}
.nojs-only select{font:inherit;padding:10px;border-radius:8px;border:1px solid var(--line);width:100%}
.stock-note{margin:0;font-size:14px;color:var(--ok);font-weight:600}
.stock-note.low{color:#9a5b0c} .stock-note.out{color:var(--bad)}
.qty-row{display:flex;gap:12px;align-items:stretch}
.qty{display:flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.qty button{width:40px;border:0;background:none;font-size:20px;cursor:pointer}
.qty input{width:44px;text-align:center;border:0;font:inherit;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.description p{margin:0 0 12px;max-width:62ch}
.assurances{padding-left:18px;border-top:1px solid var(--line);padding-top:14px}

/* Cart */
.cart-lines{list-style:none;margin:24px 0;padding:0;border-top:1px solid var(--line)}
.cart-line{display:grid;grid-template-columns:80px 1fr auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-img img,.cart-img .card-ph{width:80px;height:80px;object-fit:cover;border-radius:8px;font-size:28px}
.cart-info{display:flex;flex-direction:column}
.cart-info a{text-decoration:none}
.cart-qty{display:flex;flex-direction:column;align-items:center;gap:4px}
.cart-qty input{width:64px;padding:7px;border:1px solid var(--line);border-radius:6px;font:inherit;text-align:center}
.cart-total{font-weight:700;min-width:90px;text-align:right}
.cart-summary{margin-left:auto;max-width:360px}
.sum-row{display:flex;justify-content:space-between;margin:6px 0}
.sum-row.grand{font-size:19px;border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.free-hint{background:var(--ok-soft);color:var(--ok);padding:8px 12px;border-radius:6px}

/* Checkout */
.checkout h1{margin-bottom:8px}
.checkout-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:start;margin-top:20px}
.co-box{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:20px;margin:0 0 18px}
.co-box legend,.co-box summary{font-weight:800;font-size:17px;padding:0 6px}
details.co-box summary{cursor:pointer;font-size:15px;font-weight:600}
.f{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.f label{font-weight:600;font-size:14px}
.f input,.f select,.f textarea{font:inherit;padding:11px 12px;border:1px solid #cdd3d1;border-radius:8px;background:#fff;width:100%}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--brand);outline:2px solid color-mix(in srgb,var(--brand) 25%,transparent);outline-offset:0}
.f [aria-invalid="true"]{border-color:var(--bad)}
.field-error{color:var(--bad);font-size:14px;font-weight:600;margin:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.check input{margin-top:4px;accent-color:var(--brand)}
.choices{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.choice{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:8px;padding:14px;cursor:pointer}
.choice:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,#fff)}
/* Dark mode: the chosen option gets a dark brand-tinted background so its light text stays readable */
:root[data-theme="dark"] .choice:has(input:checked){background:color-mix(in srgb,var(--brand) 16%,var(--ground));border-color:color-mix(in srgb,var(--brand) 70%,#fff)}
.choice input{margin-top:4px;accent-color:var(--brand)}
.choice-body{display:flex;flex-direction:column;flex:1}
.choice-price{font-weight:700;white-space:nowrap}
.summary-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:88px}
.summary-box h2{font-size:18px;margin-bottom:12px}
.mini-lines{list-style:none;padding:0;margin:0 0 12px}
.mini-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
/* Prices never wrap between "R" and the amount, and line up down the right-hand side */
.mini-lines li>span:last-child,.sum-row>span:last-child,.sum-row>b{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.sum-row{gap:12px}
.sum-row>span:first-child{min-width:0}

/* Order page */
.order-page h1{font-size:34px}
.progress-steps{list-style:none;display:flex;padding:0;margin:20px 0;counter-reset:s}
.progress-steps li{flex:1;text-align:center;font-size:14px;color:var(--muted);position:relative;padding-top:26px;counter-increment:s}
.progress-steps li::before{content:counter(s);position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--muted);font-size:12px;font-weight:700;display:grid;place-items:center}
.progress-steps li.done{color:var(--ink);font-weight:600}
.progress-steps li.done::before{content:"✓";background:var(--brand);color:#fff}
.order-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:20px;margin:18px 0}
.order-box.ok{background:var(--ok-soft);border-color:transparent}
.order-box.bad{background:var(--bad-soft);border-color:transparent}
.order-box h2{font-size:19px;margin-bottom:8px}
.order-box p{margin:0 0 10px}
.bank{display:grid;gap:6px;margin:14px 0;background:var(--soft);padding:14px 16px;border-radius:8px}
.bank div{display:flex;justify-content:space-between;gap:12px}
.bank dt{color:var(--muted)} .bank dd{margin:0;text-align:right}
.bank .ref{border-top:1px solid var(--line);padding-top:8px;margin-top:4px;font-size:18px}
.proof-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px dashed var(--line);padding-top:14px;margin-top:10px}
.proof-form label{flex-basis:100%}
.track{list-style:none;margin:12px 0 0;padding:0 0 0 18px;border-left:2px solid color-mix(in srgb,var(--ok) 40%,transparent)}
.track li{position:relative;padding:4px 0 8px;display:flex;flex-direction:column;font-size:15px}
.track li::before{content:"";position:absolute;left:-24px;top:9px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--ok)}
.track li.latest::before{background:var(--ok)}
.co-sub{font-size:15px;margin:10px 0}
/* Locker / pickup-point chooser under a PUDO or Pargo delivery option */
.pp-pick{border:1.5px solid var(--brand);border-radius:8px;padding:14px;margin-top:-4px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pp-pick[hidden]{display:none}
.pp-title{margin:0;font-weight:700}
.pp-search{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pp-search input{flex:1 1 180px;min-width:0;font:inherit;padding:10px 12px;border:1px solid #cdd3d1;border-radius:8px;background:#fff;color:inherit}
.pp-search input:focus{border-color:var(--brand);outline:2px solid color-mix(in srgb,var(--brand) 25%,transparent);outline-offset:0}
.pp-locate{background:none;border:0;padding:4px 0;color:var(--brand);font:inherit;font-size:.9em;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pp-locate:disabled{opacity:.7;cursor:wait}
.pp-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;overscroll-behavior:contain}
.pp-list[aria-busy="true"]{opacity:.55}
.pp-item{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:6px;padding:10px 12px;cursor:pointer}
.pp-item input{margin-top:4px;accent-color:var(--brand);flex:none}
.pp-item:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,#fff)}
:root[data-theme="dark"] .pp-item:has(input:checked){background:color-mix(in srgb,var(--brand) 16%,var(--ground))}
.pp-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;overflow-wrap:anywhere}
.pp-km{flex:none;font-size:.85em;font-weight:600;white-space:nowrap}
.pp-empty{margin:0}
.quote-prompt{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:12px;border:1px dashed var(--line);border-radius:8px}
.small-btn{font-size:14px;padding:7px 12px}
.address-note{margin:0 0 10px}
[aria-busy="true"]{opacity:.6;transition:opacity .2s}
.order-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;margin-top:24px}
.order-cols h2{font-size:17px;margin-bottom:8px}
address{font-style:normal}

/* Closed / soon */
.soon{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 16px;gap:8px;min-height:60vh}
.soon h1{font-size:clamp(32px,6vw,56px);margin:0}
.soon-logo{max-height:80px;margin-bottom:16px}
.soon-name{font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin:0}
.soon-tag{font-size:20px;color:var(--muted);margin:0}
.soon-contact{color:var(--muted);font-size:15px;margin-top:24px}

/* Footer */
.store-foot{border-top:1px solid var(--line);background:var(--panel);margin-top:48px}
.foot-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding-block:32px}
.foot-row p{margin:0 0 4px}
.foot-name{font-weight:800}

@media (max-width:860px){
  .product,.checkout-grid,.order-cols{grid-template-columns:1fr;gap:28px}
  .summary-box{position:static}
  .head-search{display:none}
  .head-search-pop:not(.hsp-always){display:block}
  .store-nav{order:3;flex-basis:100%;padding-bottom:10px;gap:16px}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .cart-line{grid-template-columns:64px 1fr;grid-template-areas:"img info" "img qty" ". total"}
  .cart-img{grid-area:img} .cart-info{grid-area:info} .cart-qty{grid-area:qty;flex-direction:row;justify-content:flex-start} .cart-total{grid-area:total;text-align:left}
  .cart-img img,.cart-img .card-ph{width:64px;height:64px}
  .f2{grid-template-columns:1fr}
  .qty-row{flex-wrap:wrap}
  .hero .wrap{padding-block:48px 40px}
}
/* ---- Theme & page builder sections ---- */
.announce{background:var(--ink);color:var(--ground);text-align:center;font-size:14px;padding:8px 16px}
.announce a{color:inherit}
.sec{padding-block:44px}
.sec.space-compact{padding-block:24px}
.sec.space-roomy{padding-block:72px}
.sec-hero{padding-block:0}
.scheme-soft{background:var(--soft)}
.scheme-brand{background:var(--brand);color:var(--on-brand)}
.scheme-dark{background:var(--ink);color:var(--ground)}
.scheme-brand .muted,.scheme-dark .muted{color:inherit;opacity:.8}
.scheme-brand .btn-brand{background:var(--on-brand);color:var(--brand);border-color:var(--on-brand)}
.scheme-dark .btn-brand{background:var(--ground);color:var(--ink);border-color:var(--ground)}
.scheme-brand a:not(.btn-brand):not(.card):not(.col-card),.scheme-dark a:not(.btn-brand):not(.card):not(.col-card){color:inherit}
.hero2{position:relative;display:flex;align-items:center;overflow:hidden;background:linear-gradient(0deg,var(--soft),var(--panel))}
.scheme-brand .hero2,.scheme-dark .hero2{background:none}
.hero-small{min-height:260px}.hero-medium{min-height:400px}.hero-large{min-height:560px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:#000}
.shade-0{opacity:0}.shade-10{opacity:.1}.shade-20{opacity:.2}.shade-30{opacity:.3}.shade-40{opacity:.4}.shade-50{opacity:.5}.shade-60{opacity:.6}.shade-70{opacity:.7}.shade-80{opacity:.8}.shade-90{opacity:.9}
.hero2.has-image{color:#fff}
.hero-inner{position:relative;padding-block:56px;width:100%}
.hero2 h1{font-size:clamp(34px,6vw,64px);max-width:18ch;font-weight:800;letter-spacing:-.03em}
.hero2 .hero-sub{font-size:19px;max-width:52ch;margin:14px 0 0;opacity:.9}
.hero2.has-image .hero-sub{color:inherit;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero2 .btn-brand{margin-top:26px}
.hero2.align-center .hero-inner{text-align:center}
.hero2.align-center h1,.hero2.align-center .hero-sub{margin-inline:auto}
.col-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.col-card{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.col-img{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.col-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.col-card:hover img{transform:scale(1.04)}
.col-title{font-weight:700}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.image-right .split-img{order:2}
.split-img img,.img-ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);display:block;background:var(--soft)}
.split-text h2{font-size:32px;margin-bottom:14px}
.split-text .btn-brand{margin-top:18px}
.rte p{margin:0 0 14px;max-width:65ch}
.rte ul,.rte ol{margin:0 0 14px;padding-left:20px}
.rte blockquote,.description blockquote{margin:0 0 16px;padding:4px 0 4px 16px;border-left:3px solid var(--brand);font-style:italic;opacity:.92}
.rte blockquote p,.description blockquote p{margin:0}
.rte hr,.description hr{border:0;border-top:1px solid currentColor;opacity:.2;margin:20px 0}
.rte a{color:var(--brand)}
.scheme-brand .rte a,.scheme-dark .rte a{color:inherit}
.rt-heading{font-size:32px;margin-bottom:16px}
.align-center{text-align:center}
.align-center .rte p{margin-inline:auto}
/* Text and FAQ sections: a readable column that starts at the page's left edge (or centres, if chosen) */
.text-sec .text-col{max-width:820px}
.text-sec.align-center .text-col{margin-inline:auto}
.text-sec .rte p{max-width:75ch}
.text-sec .rte h3{font-size:20px;margin:22px 0 8px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.feature{display:flex;flex-direction:column;gap:6px}
.feature svg{color:var(--brand)}
.scheme-brand .feature svg,.scheme-dark .feature svg{color:inherit}
.feature span{opacity:.8;font-size:15px}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.quote{margin:0;padding:22px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.scheme-brand .quote,.scheme-dark .quote{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.quote blockquote{margin:0 0 12px;font-size:18px;line-height:1.5}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:4px 0}
.faq-item summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::after{content:"+";font-size:20px;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-item .rte{padding-bottom:10px}
.newsletter{text-align:center}
.newsletter h2{font-size:30px;margin-bottom:8px}
.nl-form{display:flex;gap:10px;max-width:460px;margin:18px auto 8px}
.nl-form input[type=email]{flex:1;padding:13px 14px;border:1px solid var(--line);border-radius:var(--btn-radius);font:inherit;min-width:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px}
.contact-grid h2{font-size:30px;margin-bottom:12px}
.contact-list{margin:0;display:grid;gap:16px}
.contact-list dt{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.contact-list dd{margin:2px 0 0}
.contact-list a{color:inherit}
.foot-links{display:flex;flex-direction:column;gap:6px}
.foot-links a{text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.prefix-input{display:flex}
.card-img,.gallery-main{border-radius:var(--radius)}
/* Page builder preview only */
body[data-preview] [data-section-id]{cursor:pointer;outline-offset:-3px}
body[data-preview] [data-section-id]:hover{outline:2px dashed rgba(107,79,160,.6)}
body[data-preview] [data-section-id].ed-sel{outline:3px solid #6b4fa0}
body[data-preview] .sec-hidden{opacity:.35}
@media (max-width:760px){.split,.contact-grid{grid-template-columns:1fr;gap:24px}.split.image-right .split-img{order:0}.nl-form{flex-direction:column}}
/* Phase 5 bits: discounts, reviews */
.code-form{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin:14px 0 0 auto;max-width:360px}
.code-form input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:6px;font:inherit;text-transform:uppercase}
.discount-row{color:var(--ok)}
.rating-line{display:inline-flex;gap:8px;align-items:center;margin-top:8px;text-decoration:none;font-size:14px;color:var(--muted)}
.review-links{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.review-links p{flex-basis:100%;margin:0}
.review-list{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.review{border:1px solid var(--line);padding:18px;background:var(--panel)}
.review h3{font-size:18px;margin:6px 0}
.review p{margin:6px 0}
.review-form{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.stars-input{border:0;padding:0;margin:0;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.stars-input legend{float:left;width:100%;font-weight:600;margin-bottom:6px}
.stars-input input{position:absolute;opacity:0}
.stars-input label{font-size:38px;line-height:1;color:#ddd;cursor:pointer}
.stars-input input:checked~label,.stars-input label:hover,.stars-input label:hover~label{color:#ffb503}
.stars-input input:focus-visible+label{outline:2px solid var(--brand);outline-offset:2px}

/* ================= Department layout (Metro theme) ================= */
.bg-sun{background:#ffc156;color:#1b1b1b}.bg-brand{background:var(--brand);color:var(--on-brand)}.bg-accent2{background:var(--accent2);color:var(--on-accent2)}
.bg-dark{background:#1c2227;color:#fff}.bg-light{background:#f5f6f9;color:#1b1b1b}.bg-purple{background:#5b2bb5;color:#fff}.bg-teal{background:#0e8f9a;color:#fff}
.nc-top{background:#181818;color:#e6e6e6;font-size:13px}
.nc-top-row{display:flex;justify-content:space-between;gap:16px;min-height:38px;align-items:center;flex-wrap:wrap}
.nc-top-links{display:flex;gap:18px;flex-wrap:wrap}
.nc-top a{color:inherit;text-decoration:none}
.nc-top a:hover{color:#fff;text-decoration:underline}
.nc-head{background:#fff;border-bottom:1px solid var(--line)}
.nc-head-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:28px;align-items:center;min-height:92px}
.nc-logo{font-family:var(--heading-font);font-size:30px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.nc-search{display:flex;max-width:620px;width:100%;border:var(--search-border,2px solid var(--brand));border-radius:var(--search-radius,6px);overflow:hidden;background:var(--search-bg,#fff)}
.nc-search input{flex:1;border:0;padding:var(--search-py,12px) 16px;font:inherit;font-size:15px;min-width:0;outline:0;background:transparent}
.nc-search button{background:var(--search-btn,var(--brand));color:var(--search-btn-on,var(--on-brand));border:0;width:58px;cursor:pointer;display:grid;place-items:center}
.nc-search button:hover{filter:brightness(1.1)}
.nc-help{display:flex;flex-direction:column;gap:2px;text-decoration:none;line-height:1.2}
.nc-cart small{font-size:12px;color:var(--muted)}
.nc-help small{font-size:14px;color:var(--muted)}
.nc-help b{font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.nc-help:hover b{color:var(--brand)}
.nc-cart{display:flex;align-items:center;gap:10px;text-decoration:none}
.nc-cart-icon{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--soft)}
.nc-cart .cart-count{top:-2px;right:-4px;background:var(--brand)}
.nc-cart-text{display:flex;flex-direction:column;line-height:1.25}
.nc-cart-text b{font-size:15px}
.nc-nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:6}
.nc-nav-row{display:flex;align-items:stretch;gap:28px;min-height:52px}
.nc-dept{position:relative;width:260px;flex:none}
.nc-dept summary{list-style:none;cursor:pointer;height:100%;display:flex;align-items:center;gap:10px;padding:0 18px;background:var(--brand);color:var(--on-brand);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.03em}
.nc-dept summary::-webkit-details-marker{display:none}
.nc-dept-menu{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);border-top:0;box-shadow:0 12px 24px rgba(0,0,0,.08);display:flex;flex-direction:column;z-index:8}
.nc-dept-menu a{padding:11px 18px;text-decoration:none;border-bottom:1px solid var(--line);font-size:14px}
.nc-dept-menu a:hover{color:var(--brand);background:var(--soft)}
.nc-links{display:flex;align-items:center;gap:26px;overflow-x:auto;scrollbar-width:none}
.nc-links a{text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;padding:14px 0;border-bottom:2px solid transparent}
.nc-links a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.nc-note{margin-left:auto;align-self:center;font-size:13px;color:var(--brand);font-weight:600;white-space:nowrap}
.nc-note a{color:inherit}

/* Hero slider with departments and promos */
.sec-hero_slider{padding-block:24px}
.hs{display:grid;gap:20px;align-items:stretch}
.hs.with-depts.with-promos{grid-template-columns:260px minmax(0,1fr) 300px}
.hs.with-depts:not(.with-promos){grid-template-columns:260px minmax(0,1fr)}
.hs.no-depts.with-promos{grid-template-columns:minmax(0,1fr) 300px}
.hs-depts{display:flex;flex-direction:column;border:1px solid var(--line);background:#fff}
.hs-depts a{display:flex;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line);text-decoration:none;font-size:14px;color:var(--ink)}
.hs-depts a:last-child{border-bottom:0}
.hs-depts a:hover{color:var(--brand);padding-left:22px;transition:padding .15s}
.hs-depts .hs-all{font-weight:700}
.hs-slider{position:relative;min-height:400px;overflow:hidden}
.hs-slide{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding:40px 48px;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.hs-slide.is-active{opacity:1;visibility:visible;position:relative}
.hs-copy{position:relative;z-index:1}
.hs-sub{margin:0 0 8px;font-size:17px;font-weight:300}
.hs-title{font-size:clamp(30px,4vw,46px);line-height:1.08;margin:0 0 14px;font-weight:700}
.hs-price{font-family:var(--heading-font);font-size:30px;font-weight:700;margin:0 0 22px}
.hs-img{width:100%;max-height:340px;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(0,0,0,.18));mix-blend-mode:multiply}
.bg-dark .hs-img,.bg-purple .hs-img,.bg-teal .hs-img,.bg-brand .hs-img,.bg-accent2 .hs-img{mix-blend-mode:normal;border-radius:var(--radius)}
/* Slider arrows: frosted dark glass that reads on any photo or colour; fade in on hover (always on touch) */
.hs-nav{position:absolute;top:50%;z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(17,20,23,.42);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.22);cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .25s,transform .25s,background .2s,border-color .2s}
.hs-prev{left:16px;transform:translate(-8px,-50%)}.hs-next{right:16px;transform:translate(8px,-50%)}
.hs-slider:hover .hs-nav,.hs-slider:focus-within .hs-nav{opacity:1;transform:translate(0,-50%)}
.hs-nav:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.hs-nav:active{transform:translate(0,-50%) scale(.94)}
.hs-nav:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (hover:none){.hs-nav{opacity:1;transform:translate(0,-50%);width:40px;height:40px}}
/* Keep slide text clear of the arrows; on phones and tablets people swipe (the dots stay) */
@media (min-width:861px){.hs-slider:has(.hs-nav) .hs-slide{padding-left:84px;padding-right:84px}}
@media (max-width:860px){.hs-nav{display:none}}
/* Pagination: dots in a glass pill; the current one stretches into a bar that fills until the next slide */
.hs-dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:2px;padding:4px 8px;border-radius:999px;
  background:rgba(17,20,23,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hs-dots button{display:grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border:0;background:none;cursor:pointer;border-radius:999px}
.hs-dot{position:relative;display:block;width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.55);overflow:hidden;transition:width .35s cubic-bezier(.4,0,.2,1),background .2s}
.hs-dots button:hover .hs-dot{background:rgba(255,255,255,.9)}
.hs-dots button[aria-current="true"] .hs-dot{width:30px;background:rgba(255,255,255,.45)}
.hs-dot-fill{position:absolute;inset:0;border-radius:inherit;background:#fff;transform-origin:left center;transform:scaleX(0)}
.hs-dots button[aria-current="true"] .hs-dot-fill{transform:scaleX(1)}
.hs-slider.has-progress .hs-dots button[aria-current="true"] .hs-dot-fill{transform:scaleX(0)}
.hs-slider.has-progress .hs-dots button.is-run .hs-dot-fill{animation:hs-fill var(--hs-delay,5000ms) linear forwards}
.hs-slider.is-held .hs-dots button.is-run .hs-dot-fill{animation-play-state:paused}
.hs-slider.is-paused .hs-dots button[aria-current="true"] .hs-dot-fill{animation:none;transform:scaleX(1)}
@keyframes hs-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hs-dots button:focus-visible{outline:2px solid #fff;outline-offset:1px}
@media (prefers-reduced-motion:reduce){.hs-nav,.hs-dot{transition:none}}
.hs-promos{display:grid;grid-template-rows:repeat(3,1fr);gap:14px}
.hs-promo{position:relative;display:flex;flex-direction:column;justify-content:center;padding:16px 18px;overflow:hidden;text-decoration:none;min-height:110px}
.hs-promo-title{font-family:var(--heading-font);font-size:19px;font-weight:700;line-height:1.15;max-width:60%;position:relative;z-index:1}
.hs-promo-cta{font-size:13px;font-weight:700;margin-top:6px;position:relative;z-index:1}
.hs-promo img{position:absolute;right:12px;bottom:0;transition:transform .3s}
/* The tile's picture: as tall as the tile and standing on its bottom edge (no gap), shown whole, never
   wider than 45% so the words keep their room. Sized by height, so wide tiles don't get giant pictures. */
.hs-promo img.hs-promo-pic{top:auto;height:100%;width:auto;max-width:42%;object-fit:contain;object-position:right bottom;transform-origin:center bottom}
.hs-promo.has-pic .hs-promo-copy{max-width:55%}
/* Picture style (Page builder > Hero slider > Promo tile > Picture style); "plain" is the default above. */
.hs-promo img.hs-promo-pic.pic-circle{top:50%;bottom:auto;transform:translateY(-50%);height:calc(100% - 20px);aspect-ratio:1;width:auto;object-fit:cover;border-radius:50%;transform-origin:center}
.hs-promo:hover img.hs-promo-pic.pic-circle{transform:translateY(-50%) scale(1.06)}
.hs-promo img.hs-promo-pic.pic-rounded{top:50%;bottom:auto;transform:translateY(-50%);height:calc(100% - 20px);aspect-ratio:1;width:auto;object-fit:cover;border-radius:14px;transform-origin:center}
.hs-promo:hover img.hs-promo-pic.pic-rounded{transform:translateY(-50%) scale(1.04)}
.hs-promo img.hs-promo-pic.pic-fill{top:0;right:0;bottom:0;height:100%;width:42%;max-width:none;object-fit:cover;object-position:center;transform-origin:center}
.hs-promo:hover img.hs-promo-pic.pic-fill{transform:scale(1.04)}
.hs-promo:hover img{transform:scale(1.06)}

/* Policy strip */
.features-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1px solid var(--line);gap:0}
.features-strip .feature{flex-direction:row;align-items:center;gap:14px;padding:22px 20px;border-right:1px solid var(--line)}
.features-strip .feature:last-child{border-right:0}
.features-strip .feature b{font-family:var(--heading-font);text-transform:uppercase;font-size:15px;letter-spacing:.02em;display:block}
.features-strip .feature span{font-size:13px}
.features-strip .feature svg{flex:none;width:40px;height:40px;color:var(--brand)}
.features-strip .feature{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:14px}
.features-strip .feature svg{grid-row:1/3}

/* Section heads: small grey line above a big condensed title */
.sh-titles{display:flex;flex-direction:column}
.sh-eyebrow{margin:0 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.layout-department .section-head{align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:26px}
.layout-department .section-head h2{font-size:34px;font-weight:700;text-transform:none}
.countdown{margin:0;font-weight:600;color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,#fff);padding:8px 14px;border-radius:999px;font-size:14px}
.countdown b{font-variant-numeric:tabular-nums}

/* Category circles */
.col-circles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));text-align:center}
.col-circles .col-img{aspect-ratio:1;border-radius:50%;border:1px solid var(--line);padding:10px;background:#fff}
.col-circles .col-img img{border-radius:50%}
.col-circles .col-card:hover .col-img{border-color:var(--brand)}
.col-circles .col-title{font-family:var(--heading-font);font-size:17px}

/* Product cards */
.card{position:relative}
.card-img>a{display:block;width:100%;height:100%}
/* Badges stack down the corner; each keeps its own width (a short "New" doesn't stretch to "Local favourite") */
.labels{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;z-index:1}
.labels .badge{position:static;border-radius:3px;font-size:12px;padding:2px 7px}
.badge-new{background:var(--accent2);color:var(--on-accent2)}
.card-actions{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;z-index:1}
.card:hover .card-actions,.card:focus-within .card-actions{opacity:1;transform:none}
.card-add{margin:0}
.card-action{width:40px;height:40px;border-radius:50%;background:#fff;color:#2e2e2e;border:1px solid transparent;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:pointer;text-decoration:none;
  transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s}
.card-action:hover,.card-action:focus-visible{background:var(--brand);color:var(--on-brand);border-color:var(--brand);transform:translateY(-2px);box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 35%,transparent)}
.card-action:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.card-action:active{transform:translateY(0) scale(.94)}
@media (prefers-reduced-motion:reduce){.card-action,.card-action:hover{transition:none;transform:none}}
.card-title{font-family:var(--heading-font);font-weight:600;font-size:17px;line-height:1.3;text-decoration:none;color:#000}
.card-title:hover{color:var(--brand)}
/* Prices: current price bold; on special it turns sale red, with the old price and the saving beside it */
:root{--price:#15191c;--sale:#c8102e;--sale-soft:#fdecee;--was:#646d75}
:root[data-theme="dark"]{--price:#f4f6f8;--sale:#ff6b6b;--sale-soft:rgba(255,107,107,.16);--was:#a3adb6}
.pr{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:4px;font-variant-numeric:tabular-nums;margin-top:4px}
/* The amount in the heading font, with a raised small currency symbol and cents: R 299.00 */
.pr-now{display:inline-flex;align-items:flex-start;font-family:var(--heading-font);font-weight:700;font-size:1.25em;line-height:1;color:var(--price);letter-spacing:-.01em}
.pr-cur{font-size:.58em;font-weight:700;margin:.12em .18em 0 0;line-height:1}
.pr-int{line-height:1}
.pr-dec{font-size:.58em;font-weight:700;margin-top:.12em;line-height:1}
.pr.is-sale .pr-now{color:var(--sale)}
.pr-from{font-size:.72em;font-weight:700;color:var(--was);text-transform:uppercase;letter-spacing:.06em}
.pr s.pr-was{font-size:.82em;font-weight:500;color:var(--was);margin:0;text-decoration-thickness:1.5px}
.pr-save{align-self:center;font-size:11px;font-weight:800;line-height:1;padding:4px 7px;border-radius:999px;background:var(--sale);color:#fff;letter-spacing:.02em}
:root[data-theme="dark"] .pr-save{color:#1a0808}
.card-price{font-size:16px}
.mini-price{font-size:14px}
.price{font-size:26px}
.price .pr-save{font-size:13px;padding:6px 10px}
.stars{color:#ffb503;letter-spacing:1px}
.stars-off{color:#ddd}
.stars.small{font-size:13px}
/* Touch screens (tablets, touch laptops) have no hover, so the buttons would sit over the photo all the time: put them in a row under the photo instead, as on phones */
@media (hover:none){.card-actions{position:static;opacity:1;transform:none;justify-content:flex-start;gap:6px;margin:8px 0 2px;padding:0}.card-action{width:36px;height:36px;box-shadow:none;border:1px solid var(--line)}.card:hover .card-img img{transform:none}}

/* Promo banners */
.promo-row{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.promo{position:relative;display:flex;align-items:center;min-height:190px;padding:26px 30px;overflow:hidden;text-decoration:none}
/* Middle Banners → Corners (section setting); "Look's default" adds no class. Doubled class to beat the looks' own rules. */
.promo-row.pc-square{--pc-r:0px}.promo-row.pc-soft{--pc-r:8px}.promo-row.pc-round{--pc-r:20px}.promo-row.pc-extra{--pc-r:36px}
.promo-row:is(.pc-square,.pc-soft,.pc-round,.pc-extra) .promo.promo{border-radius:var(--pc-r)}
.promo-copy{display:flex;flex-direction:column;gap:6px;max-width:58%;position:relative;z-index:1}
.promo-sub{font-size:13px;text-transform:uppercase;letter-spacing:.1em;opacity:.85}
.promo-title{font-family:var(--heading-font);font-size:26px;font-weight:700;line-height:1.1}
.promo-cta{font-weight:700;font-size:14px;margin-top:6px}
/* Banner buttons are buttons, not underlined links (video banners use a real link for the button) */
.promo-cta,.promo-cta:hover,.promo-cta:focus,.hs-promo-cta{text-decoration:none}
/* Only the banner's own product picture: not its background photo (.bb-img) or a video preview */
.promo > img:not(.bb-img){position:absolute;right:16px;bottom:0;width:40%;max-height:92%;object-fit:contain;object-position:center bottom;transform-origin:center bottom;transition:transform .3s}
.promo.bg-sun > img:not(.bb-img),.promo.bg-light > img:not(.bb-img){mix-blend-mode:multiply}
.promo:hover > img:not(.bb-img){transform:scale(1.05)}

/* Product lists (three columns) */
.pcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.pcol-title{font-size:22px;padding-bottom:10px;margin-bottom:14px;border-bottom:2px solid var(--line);position:relative}
.pcol-title::after{content:"";position:absolute;left:0;bottom:-2px;width:60px;height:2px;background:var(--brand)}
.mini{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:center;padding:10px 0;text-decoration:none;border-bottom:1px dashed var(--line)}
.mini:last-child{border-bottom:0}
.mini-img{aspect-ratio:1;background:var(--soft);display:block;overflow:hidden}
.mini-img img{width:100%;height:100%;object-fit:cover}
.mini-body{display:flex;flex-direction:column;gap:3px}
.mini-title{font-family:var(--heading-font);font-weight:600;color:#000}
.mini:hover .mini-title{color:var(--brand)}
/* Hover (and keyboard focus) on a row in Bestsellers / Top deals / Top rated: a soft brand-tinted panel, the
   picture zooms gently, the text nudges across and an arrow slides in. Kept inside the row: the sliding lists
   clip anything that spills out. */
.pcol .mini{position:relative;padding:10px 40px 10px 8px;border-radius:calc(var(--radius) + 4px);transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease}
.pcol .mini-img{border-radius:var(--radius)}
.pcol .mini-img img{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.pcol .mini-body{transition:transform .25s ease}
.pcol .mini::after{content:"";position:absolute;right:14px;top:50%;width:9px;height:9px;border-top:2px solid var(--brand);border-right:2px solid var(--brand);transform:translate(-8px,-50%) rotate(45deg);opacity:0;transition:opacity .25s ease,transform .25s ease}
.pcol .mini:is(:hover,:focus-visible){background:color-mix(in srgb,var(--brand) 6%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent);border-bottom-color:transparent}
.pcol .mini:is(:hover,:focus-visible) .mini-img img{transform:scale(1.08)}
.pcol .mini:is(:hover,:focus-visible) .mini-body{transform:translateX(4px)}
.pcol .mini:is(:hover,:focus-visible)::after{opacity:1;transform:translate(0,-50%) rotate(45deg)}
.pcol .mini:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
:root[data-theme="dark"] .pcol .mini:is(:hover,:focus-visible){background:color-mix(in srgb,var(--brand) 14%,var(--panel))}
@media (prefers-reduced-motion:reduce){.pcol .mini-img img,.pcol .mini-body,.pcol .mini::after{transition:none}.pcol .mini:is(:hover,:focus-visible) .mini-img img,.pcol .mini:is(:hover,:focus-visible) .mini-body{transform:none}}

/* Dark footer */
.nc-foot{background:#191e22;color:#b9bec3;margin-top:56px;font-size:14px}
.nc-foot a{color:#d9dde0;text-decoration:none}
.nc-foot a:hover{color:#fff;text-decoration:underline}
/* Footer columns (Online store > Footer): any number, normal / wide / narrow, wrapping on smaller screens */
.nc-foot-grid{display:flex;flex-wrap:wrap;gap:36px;padding-block:56px 40px}
.nc-foot-col{flex:1 1 170px;min-width:0}
.nc-foot-col.is-wide{flex:1.6 1 240px}
.nc-foot-col.is-narrow{flex:.7 1 130px}
.nc-foot-grid nav,.nc-foot-links{display:flex;flex-direction:column;gap:9px}
.nc-foot-img{display:block;max-width:100%;height:auto;border-radius:var(--radius);margin:0 0 14px}
.nc-foot-img-link{display:block}
.nc-foot-text{margin-bottom:12px}
.nc-foot-text p{margin:0 0 10px}
.nc-foot-text a{color:inherit;text-decoration:underline}
/* The simple (light) footer uses the same columns in its own colours */
.store-foot .nc-foot-title,.store-foot .nc-foot-brand,.store-foot .nc-foot-call a,.store-foot .nc-foot-links a{color:var(--ink)}
.store-foot .nc-foot-links a{text-decoration:none}
.store-foot .nc-foot-links a:hover{text-decoration:underline}
.store-foot .nc-foot-nl{border:1px solid var(--line)}
.store-foot .nc-foot-grid{padding-block:40px 8px}
.nc-foot-title{color:#fff;font-size:18px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.03em}
.nc-foot-brand{font-family:var(--heading-font);font-size:28px;color:#fff;font-weight:700;margin:0 0 8px}
.nc-foot-about p{margin:0 0 10px}
.nc-foot-call small{display:block;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.nc-foot-call a{font-family:var(--heading-font);font-size:24px;color:#fff}
.nc-foot-nl{display:flex;margin-top:12px;border-radius:999px;overflow:hidden;background:#fff}
.nc-foot-nl input[type=email]{flex:1;border:0;padding:12px 16px;font:inherit;min-width:0;outline:0}
.nc-foot-nl button{background:var(--brand);color:var(--on-brand);border:0;padding:0 20px;font-weight:700;cursor:pointer}
.nc-foot-bottom{border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.nc-foot-bottom-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px}
/* Footer payment badges: style, size and position from the page builder's Footer settings */
.pay-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pb-label{font-size:.9em;font-weight:600;opacity:.85}
.pb-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pb{display:inline-flex;align-items:center;gap:6px;line-height:1.2;white-space:nowrap;font-weight:600}
.pb svg{flex:none;width:1.25em;height:1.25em}
.pb-small .pb{font-size:11px;padding:3px 8px}.pb-medium .pb{font-size:12.5px;padding:5px 10px}.pb-large .pb{font-size:14px;padding:8px 14px}
.pb-outline .pb{border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:6px}
.pb-filled .pb{background:color-mix(in srgb,currentColor 13%,transparent);border-radius:6px}
.pb-cards .pb{background:#fff;color:#1d2330;border:1px solid rgba(0,0,0,.08);border-radius:7px;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.pb-cards .pb svg{color:var(--brand)}
.pb-text .pb{padding-inline:0 8px}
.pb-text .pb:not(:last-child){border-right:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.pb-secure svg{color:#1e8e3e}
.nc-foot-bottom-row .pb-align-left{order:-1}
.nc-foot-bottom-row .pb-align-right{margin-left:auto}
.nc-foot-bottom-row .pb-align-center{flex-basis:100%;justify-content:center}
.foot-row .pay-badges{grid-column:1/-1;padding-top:16px;border-top:1px solid var(--line)}
.foot-row .pb-align-center{justify-content:center}.foot-row .pb-align-right{justify-content:flex-end}
@media (max-width:560px){.nc-foot-bottom-row .pay-badges,.foot-row .pay-badges{justify-content:flex-start;margin-left:0;order:0}}

/* Metro section spacing is tighter and squarer */
.theme-neon .card-img,.theme-neon .col-img:not(.col-circles .col-img){border-radius:0}
.theme-neon .quote,.theme-neon .promo,.theme-neon .hs-promo,.theme-neon .hs-slider{border-radius:0}
.theme-neon .btn-brand{text-transform:uppercase;font-size:14px;letter-spacing:.04em;padding:14px 28px}

@media (max-width:1100px){
  .hs.with-depts.with-promos{grid-template-columns:230px minmax(0,1fr)}
  .hs.with-depts.with-promos .hs-promos,.hs.no-depts.with-promos .hs-promos{grid-column:1/-1;grid-template-rows:none;grid-template-columns:repeat(3,1fr)}
  .hs.no-depts.with-promos{grid-template-columns:1fr}
  .nc-foot-col,.nc-foot-col.is-wide,.nc-foot-col.is-narrow{flex:1 1 calc(50% - 18px)}
}
/* Mid-size screens: the phone number and cart text give way before they get squashed */
.nc-help,.nc-cart-text{white-space:nowrap}
@media (max-width:1200px){.nc-help{display:none}}
@media (max-width:980px){.nc-cart-text{display:none}}
@media (max-width:860px){
  .nc-head-row{grid-template-columns:auto minmax(0,1fr) auto;gap:14px;min-height:0;padding-block:14px}
  /* The logo shrinks to fit beside the menu button and tools instead of pushing the page wider */
  .nc-head-row .store-brand{min-width:0}
  .nc-head-row .store-brand img{max-width:100%}
  .nc-search{grid-column:1/-1;grid-row:2;max-width:none}
  .nc-help,.nc-cart-text,.nc-top-links{display:none}
  .nc-dept{width:auto}
  .nc-note{display:none}
  .hs.with-depts,.hs.with-depts.with-promos,.hs.with-depts:not(.with-promos){grid-template-columns:1fr}
  .hs-depts{display:none}
  .hs-slide{grid-template-columns:1fr;padding:28px 24px 44px;text-align:left}
  .hs-img{max-height:200px}
  .pcols{grid-template-columns:1fr}
  .hs-promos{grid-template-columns:1fr!important}
}
@media (max-width:560px){.nc-foot-col,.nc-foot-col.is-wide,.nc-foot-col.is-narrow{flex-basis:100%}.nc-logo{font-size:24px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.demo-bar{background:#fff4c2;color:#5a4500;text-align:center;font-size:13px;padding:6px 16px;border-bottom:1px solid #f0dc8a}

/* ---- Page width: bigger screens get more columns, never a stretched layout ---- */
@media (min-width:1500px){.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}

/* ---- Carousels (product rows, categories, testimonials) ---- */
.carousel{position:relative;container-type:inline-size;--gap:20px}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));gap:var(--gap);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 2px 8px;--per:5}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.car-item{scroll-snap-align:start;min-width:0}
@container (min-width:1500px){.car-track{--per:6}}
@container (max-width:1099px){.car-track{--per:4}}
@container (max-width:859px){.car-track{--per:3}}
@container (max-width:559px){.car-track{--per:2.15;--gap:12px}}
.car-quotes .car-track{--per:3}
@container (max-width:959px){.car-quotes .car-track{--per:2}}
@container (max-width:599px){.car-quotes .car-track{--per:1.1}}
.car-circles .car-track{--per:8}
@container (max-width:1099px){.car-circles .car-track{--per:6}}
@container (max-width:699px){.car-circles .car-track{--per:3.5}}
/* A category slider sizes every tile from --per: drop the grid's own column pattern (col-cards/col-circles), or the
   tiles that fit on screen follow that pattern and the rest follow --per, so pictures in one row differ in size. */
.car-track.col-cards{grid-template-columns:none}
.car-cols .car-track.col-cards:not(.col-circles){--per:4}
@container (max-width:859px){.car-cols .car-track.col-cards:not(.col-circles){--per:2.2}}
.car-btn{position:absolute;top:38%;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--ground);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:opacity .15s,transform .15s}
.car-btn:hover:not([disabled]){background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.car-btn[disabled]{opacity:0;pointer-events:none}
.car-prev{left:-10px}.car-next{right:-10px}
@media (max-width:700px){.car-btn{display:none}}

/* ---- Quantity discounts ---- */
.tiers{border:1px dashed color-mix(in srgb,var(--brand) 45%,var(--line));border-radius:var(--radius);padding:12px 14px;margin:14px 0 4px;background:color-mix(in srgb,var(--brand) 4%,var(--ground))}
.tiers-title{margin:0 0 8px;font-weight:700;font-size:14px;color:var(--brand)}
.tiers ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.tiers li{display:flex;flex-direction:column;background:var(--ground);border:1px solid var(--line);border-radius:calc(var(--radius) - 2px);padding:8px 10px}
.tiers li b{font-size:16px}.tiers li span{font-weight:600;color:var(--brand)}.tiers li small{color:var(--muted)}
.tier-note{margin:8px 0 0;font-weight:600;color:var(--brand)}
.tier-tag{display:inline-block;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);font-weight:700;border-radius:999px;padding:1px 8px;width:max-content}
.tier-hint{color:var(--muted)}

/* ---- Frequently bought together ---- */
.fbt{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.fbt-items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;container-type:inline-size}
.fbt-item{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;position:relative}
.fbt-item label{display:flex;gap:12px;align-items:center;cursor:pointer;flex:1;min-width:0}
.fbt-item input{width:18px;height:18px;accent-color:var(--brand);flex:none}
.fbt-img{width:104px;height:104px;border-radius:calc(var(--radius) - 2px);overflow:hidden;background:var(--soft);flex:none}
/* Too narrow for the items side by side (phones, landscape phones, small tablets): one per row, every
   row starting at the same edge, so no "+" between them. */
@container (max-width:780px){.fbt-item{flex:1 1 100%}.fbt-plus{display:none}.fbt-img{width:88px;height:88px}}
.fbt-img img{width:100%;height:100%;object-fit:cover}
.fbt-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.fbt-name{font-size:14px;line-height:1.3}
.fbt-price{font-weight:700}
.fbt-plus{font-size:22px;color:var(--muted);flex:none}
.fbt-buy{display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:center}
.fbt-total{font-size:24px;font-weight:800;font-family:var(--heading-font)}
@media (max-width:760px){.fbt{grid-template-columns:1fr}}

/* ---- Pictures of what's being bought (checkout, order page) ---- */
.mini-item{display:flex;align-items:center;gap:10px;min-width:0}
.mini-item .mini-img{width:44px;height:44px;object-fit:cover;border-radius:6px;flex:none;border:1px solid var(--line)}
/* ---- Currency switcher ---- */
.cur-switch{position:relative}
.cur-switch summary{list-style:none;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.cur-switch summary::-webkit-details-marker{display:none}
.cur-switch summary::after{content:"▾";font-size:10px;opacity:.7}
.cur-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:230px;background:var(--ground);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,.15);padding:6px;display:grid;gap:2px}
.cur-menu a{display:block;padding:7px 10px;border-radius:6px;text-decoration:none;color:inherit;font-size:14px}
.cur-menu a:hover,.cur-menu a[aria-current]{background:var(--soft)}
.cur-menu small{display:block;padding:6px 10px 4px;color:var(--muted);font-size:11px;line-height:1.4}
/* "SaleCart by Afriweb": a centred line of its own at the very bottom of every footer, on every screen size */
.dc-credit-row{display:block;width:100%;text-align:center;padding:4px 16px 16px;font-size:13px;line-height:1.5}
.dc-credit{white-space:nowrap;opacity:.85}
footer .dc-credit a,footer .dc-credit a:hover,footer .dc-credit a:focus-visible{color:inherit;text-decoration:none;font-weight:600}
footer .dc-credit a:hover,footer .dc-credit a:focus-visible{opacity:.75}
.fx-credit{font-size:11px;opacity:.7}.fx-credit a{color:inherit}
/* Checkout: country-aware address */
#export-row span:last-child{color:var(--ok,#2f7a55)}.reorder{margin-top:12px}

/* ---- On-page builder (inside the editor's preview) ---- */
body[data-preview] [data-section-id],body[data-preview] [data-chrome]{position:relative}
body[data-preview] [data-chrome]:hover{outline:2px dashed rgba(107,79,160,.6);outline-offset:-3px}
.pv-tools{position:absolute;top:10px;right:10px;z-index:40;display:none;gap:2px;align-items:center;background:#1c1830;color:#fff;border-radius:10px;padding:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);font:600 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif}
[data-section-id]:hover>.pv-tools,[data-section-id].ed-sel>.pv-tools,[data-chrome]:hover>.pv-tools{display:flex}
.pv-name{padding:0 8px;opacity:.8;white-space:nowrap}
.pv-btn{border:0;background:transparent;color:#fff;font:inherit;padding:7px 9px;border-radius:7px;cursor:pointer;white-space:nowrap}
.pv-btn:hover,.pv-btn:focus-visible{background:#6b4fa0;outline:none}
.pv-btn.danger:hover{background:#b23a3a}
.pv-add{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);z-index:41;display:none;background:#6b4fa0;color:#fff;border:2px solid #fff;
  border-radius:999px;padding:6px 14px;font:700 12px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}
[data-section-id]:hover>.pv-add,[data-section-id].ed-sel>.pv-add{display:block}
.pv-hidden-tag{position:absolute;top:10px;left:10px;z-index:40;background:#b23a3a;color:#fff;font:700 11px system-ui,sans-serif;padding:4px 8px;border-radius:6px}
/* Staff shortcut to the builder on the live store */
.edit-fab{position:fixed;right:18px;bottom:18px;z-index:90;display:inline-flex;align-items:center;gap:8px;background:#1c1830;color:#fff;text-decoration:none;
  font:700 14px system-ui,-apple-system,"Segoe UI",sans-serif;padding:12px 16px;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.edit-fab:hover{background:#6b4fa0}
.nc-search-gap{flex:1}
@media print{.edit-fab{display:none}}
.description h2{font-size:20px;margin:1em 0 .4em}.description h3{font-size:17px;margin:1em 0 .3em}.description ul,.description ol{padding-left:1.3em;margin:0 0 1em}

/* ---- Section width, hero with small banners, HTML banners ---- */
.sec-w-full .wrap{max-width:none}
.hero-set.tiles-right{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;padding-block:16px}
.hero-set .hero2{border-radius:var(--radius)}
.hero-set .hero-inner{padding:48px clamp(20px,4vw,56px)}
.hero-tiles{display:grid;gap:16px}
.tiles-right .hero-tiles{grid-auto-rows:1fr}
.hero-tiles-below{padding-top:16px}
.hero-tiles-below .hero-tiles{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.hero-tiles .promo{min-height:150px;padding:20px 24px}
.tiles-right .hero-tiles .promo{min-height:0}
.hero-tiles .promo-title{font-size:21px}
.theme-neon .hero-set .hero2,.theme-neon .hero-tiles .promo{border-radius:0}
.html-banner{overflow-wrap:anywhere;position:relative;isolation:isolate;overflow:hidden;contain:paint} /* its own HTML can never spill over the page (absolute/fixed pictures stay inside) */
.html-banner img{max-width:100%;height:auto}
@media (max-width:860px){
  .hero-set.tiles-right{grid-template-columns:1fr}
  .tiles-right .hero-tiles{grid-auto-rows:auto}
  .tiles-right .hero-tiles .promo{min-height:130px}
}
/* ---- Mobile menu ---- */
.m-burger{display:none;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;color:inherit;cursor:pointer;flex:none}
.m-burger:hover{border-color:var(--ink)}
.m-menu{position:fixed;inset:0 auto 0 0;margin:0;width:min(86vw,360px);max-width:none;height:100%;max-height:none;padding:0;border:0;background:var(--ground);color:var(--ink);box-shadow:8px 0 32px rgba(0,0,0,.2);overflow:hidden}
.m-menu[open]{animation:m-in .22s ease-out}
.m-menu::backdrop{background:rgba(0,0,0,.45)}
@keyframes m-in{from{transform:translateX(-100%)}to{transform:none}}
.m-inner{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:0 0 32px}
.m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ground);z-index:1}
.m-title{font-family:var(--heading-font);font-weight:700;font-size:19px}
.m-close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:8px;background:var(--soft);color:inherit;cursor:pointer}
.m-search{display:flex;margin:16px 20px 4px;border:var(--search-border,2px solid var(--brand));border-radius:var(--search-radius,var(--btn-radius));overflow:hidden;background:var(--search-bg,transparent)}
.m-search input{flex:1;min-width:0;border:0;padding:var(--search-py,11px) 14px;font:inherit;background:transparent;color:inherit}
.m-search button{border:0;background:var(--search-btn,var(--brand));color:var(--search-btn-on,var(--on-brand));padding:0 14px;cursor:pointer}
.m-links{display:flex;flex-direction:column;padding:4px 0}
.m-links a,.m-contact a{display:block;padding:12px 20px;text-decoration:none;font-weight:600;font-size:16px;color:inherit;border-left:3px solid transparent}
.m-links a:hover,.m-links a:focus-visible{background:var(--soft)}
.m-links a[aria-current="page"]{color:var(--brand);border-left-color:var(--brand);background:var(--soft)}
.m-label{margin:14px 20px 4px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.m-contact{border-top:1px solid var(--line);margin-top:10px;padding-top:4px}
.m-contact a{font-weight:500;font-size:15px}
.m-currency{border-top:1px solid var(--line);margin-top:10px;padding-top:4px}
.m-cur-row{display:flex;flex-wrap:wrap;gap:8px;padding:6px 20px}
.m-cur-row a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:14px;font-weight:600;color:inherit}
.m-cur-row a[aria-current="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
@media (max-width:860px){
  .m-burger{display:inline-grid}
  .nc-nav,.store-nav{display:none}
  .nc-head-row{grid-template-columns:auto 1fr auto}
  .nc-search-gap{display:none}
  .head-row{flex-wrap:nowrap;gap:12px}
  .head-row .store-brand{flex:1;min-width:0}
}
@media (prefers-reduced-motion:reduce){.m-menu[open]{animation:none}}
/* ---- Trust strip: 4 blocks sit 4 across, then 2 x 2 on phones ---- */
@media (max-width:760px){
  .features-strip{grid-template-columns:1fr 1fr}
  .features-strip .feature{padding:16px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:32px 1fr;column-gap:10px}
  .features-strip .feature svg{width:32px;height:32px}
  .features-strip .feature:nth-child(2n){border-right:0}
  .features-strip .feature:nth-last-child(-n+2):nth-child(odd),.features-strip .feature:last-child{border-bottom:0}
  .mini{grid-template-columns:96px 1fr}
}
/* ---- Lightbox: quick view and "added to cart" ---- */
.qv-dialog{width:min(920px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:calc(var(--radius) + 4px);background:var(--ground);color:var(--ink);box-shadow:0 24px 64px rgba(0,0,0,.3);overflow:hidden}
.qv-dialog::backdrop{background:rgba(0,0,0,.55)}
.qv-dialog[open]{animation:qv-in .18s ease-out}
@keyframes qv-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.qv-shell{position:relative;max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain}
.qv-close{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--soft);color:inherit;cursor:pointer}
.qv-close:hover{background:var(--line)}
.qv-loading{padding:80px 24px;text-align:center;color:var(--muted)}
.qv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:28px}
.qv-gallery{display:flex;flex-direction:column;gap:10px}
.qv-img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--soft);border-radius:var(--radius)}
.qv-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.qv-thumb{width:58px;height:58px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:var(--soft);cursor:pointer}
.qv-thumb[aria-current="true"]{border-color:var(--brand)}
.qv-thumb img{width:100%;height:100%;object-fit:cover}
.qv-info{display:flex;flex-direction:column;gap:12px;padding-right:28px}
.qv-title{font-size:clamp(22px,2.6vw,30px);line-height:1.15;margin:0}
.qv-rating,.qv-price{margin:0}
.qv-desc{margin:0;color:var(--muted)}
.qv-form{display:flex;flex-direction:column;gap:12px}
.qv-error{margin:0;color:#b42318;font-weight:600}
.qv-more{font-weight:600;margin-top:auto}
.qv-added{padding:28px;display:flex;flex-direction:column;gap:16px;max-width:520px}
.qv-dialog:has(.qv-added),.qv-dialog:has(.qv-loading),.qv-dialog:has(.qv-added-error){width:min(520px,calc(100vw - 32px))}
.qv-added-head{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--heading-font);font-size:21px;font-weight:700;padding-right:40px}
.qv-added-head svg{color:#fff;background:#2f7a55;border-radius:50%;padding:4px;width:30px;height:30px;flex:none}
.qv-added-item{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--radius)}
.qv-added-item img{width:72px;height:72px;object-fit:cover;border-radius:6px;flex:none}
.qv-added-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.qv-added-sum{margin:0;font-weight:600}
.qv-added-actions{display:flex;flex-wrap:wrap;gap:10px}
.qv-added-actions>*{flex:1 1 140px;text-align:center;justify-content:center}
.qv-added-error{padding:32px 28px;margin:0;font-weight:600}
.qv-added-actions .btn-outline{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-width:2px;border-radius:var(--btn-radius);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer}
.qv-added-actions .btn-outline:hover{background:var(--ink);color:var(--ground)}
@media (max-width:700px){
  .qv{grid-template-columns:1fr;gap:18px;padding:20px}
  .qv-info{padding-right:0}
  .qv-img{aspect-ratio:4/3}
  .qv-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .qv-shell{max-height:calc(100dvh - 16px)}
}
@media (prefers-reduced-motion:reduce){.qv-dialog[open]{animation:none}}
/* ---- Wishlist, compare, showcase ---- */
.list-toggle{display:contents}
.card-action[aria-pressed="true"].lt-wish{color:#d0243c}
.card-action[aria-pressed="true"].lt-wish svg path{fill:currentColor}
.card-action[aria-pressed="true"].lt-wish:hover,.card-action[aria-pressed="true"].lt-wish:focus-visible{color:var(--on-brand)}
.card-action[aria-pressed="true"].lt-compare{background:var(--brand);color:var(--on-brand)}
.buy-lists{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.list-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:none;color:inherit;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.list-btn:hover{border-color:var(--ink)}
.list-btn[aria-pressed="true"].lt-wish{color:#d0243c;border-color:#d0243c}
.list-btn[aria-pressed="true"].lt-wish svg path{fill:currentColor}
.list-btn[aria-pressed="true"].lt-compare{border-color:var(--brand);color:var(--brand)}
.wish-link{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;color:inherit;text-decoration:none}
.wish-count{position:absolute;top:0;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--brand);color:var(--on-brand);font-size:11px;font-weight:700;display:grid;place-items:center}
.wish-count[hidden]{display:none}
.nc-head-row .wish-link{margin-right:-12px}
.compare-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:16px;padding:10px 12px 10px 20px;border-radius:999px;background:var(--ink);color:var(--ground);box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:15px}
.compare-bar[hidden]{display:none}
.compare-bar .btn-brand{padding:9px 18px}
.compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.compare{width:100%;border-collapse:collapse;min-width:620px;table-layout:fixed}
.compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare tbody th{width:150px;color:var(--muted);font-weight:600;font-size:14px;background:var(--soft)}
.compare thead td{width:150px}
.compare thead th{position:relative}
.compare-prod{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;font-family:var(--heading-font);font-weight:700}
.compare-prod img{width:100%;max-width:220px;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);background:var(--soft)}
/* Columns keep the same size whether 2, 3 or 4 products are compared: the table only grows as wide as it needs. */
.compare-n2{max-width:calc(150px + 2 * 290px)}.compare-n3{max-width:calc(150px + 3 * 290px)}.compare-n4{max-width:calc(150px + 4 * 290px)}
.compare-n2 .compare{min-width:470px}
.compare-one{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.compare-one-prod{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:inherit;font-family:var(--heading-font);font-weight:700}
.compare-one-prod img{width:160px;aspect-ratio:var(--img-ratio,1/1);object-fit:var(--img-fit,cover);border-radius:var(--radius);background:var(--img-bg,var(--soft))}
.compare-one p{max-width:460px;margin:0}
@media (max-width:560px){.compare tbody th,.compare thead td{width:110px}.compare th,.compare td{padding:12px}}
.compare-remove{position:absolute;top:18px;right:20px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:0;background:var(--ground);box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;color:inherit}
.empty-list{padding:40px 0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.enquire{display:flex;flex-direction:column;gap:10px;margin:8px 0 12px;align-items:flex-start}
.enquire-note{margin:0;color:var(--muted)}
/* "Price on request" products */
.por-price{font-weight:700;color:var(--ink)}
.card-price.por-price{font-size:.95em}
.por-ask{flex-direction:row;flex-wrap:wrap;align-items:center}.por-ask .enquire-note{flex-basis:100%}
.enquire-call{display:inline-flex;align-items:center;gap:6px}
.toast{position:fixed;left:50%;bottom:80px;transform:translate(-50%,20px);z-index:60;padding:12px 18px;border-radius:10px;background:var(--ink);color:var(--ground);font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:#b42318;color:#fff}
@media (max-width:860px){.compare-bar{bottom:10px;width:calc(100vw - 24px);justify-content:space-between}.wish-link{width:38px}}@media (max-width:560px){.card-actions{gap:5px;bottom:10px}.card-action{width:34px;height:34px}.card-action svg{width:16px;height:16px}}

/* ---- Smoother sliders ---- */
.hs-slider.is-sliding .hs-track{display:flex;height:100%;min-height:inherit;will-change:transform}
.hs-slider.is-sliding .hs-slide{position:relative;inset:auto;flex:0 0 100%;opacity:1;visibility:visible;transition:none}
.car-track.is-gliding{scroll-snap-type:none;scroll-behavior:auto}
/* Stacked transitions (fade, zoom, rise, Ken Burns): every slide sits in the same grid cell, so the
   slider is as tall as its tallest slide, and the active one fades in over the others. */
.hs-slider.is-stacked .hs-track{display:grid;min-height:inherit;height:100%} /* fill the slider when it stretches to a taller promo column */
.hs-slider.is-stacked .hs-slide{grid-area:1 / 1;position:relative;inset:auto;z-index:0;opacity:0;visibility:hidden;
  transition:opacity var(--hs-dur,1200ms) cubic-bezier(.4,0,.2,1),transform var(--hs-dur,1200ms) cubic-bezier(.4,0,.2,1),visibility 0s linear var(--hs-dur,1200ms)}
.hs-slider.is-stacked .hs-slide.is-active{z-index:1;opacity:1;visibility:visible;
  transition:opacity var(--hs-dur,1200ms) cubic-bezier(.4,0,.2,1),transform var(--hs-dur,1200ms) cubic-bezier(.4,0,.2,1),visibility 0s}
.hs-slider.fx-zoom .hs-slide{transform:scale(1.06)}
.hs-slider.fx-rise .hs-slide{transform:translateY(28px)}
.hs-slider.fx-zoom .hs-slide.is-active,.hs-slider.fx-rise .hs-slide.is-active{transform:none}
/* Ken Burns: the photo drifts slowly larger while its slide is showing */
@keyframes hs-kb{from{transform:scale(1)}to{transform:scale(1.14)}}
.hs-slider.fx-kenburns .hs-slide.kb-run .bb-img,.hs-slider.fx-kenburns .hs-slide.kb-run .hs-img{animation:hs-kb 14s linear forwards}
@media (prefers-reduced-motion:reduce){
  .hs-slider.is-stacked .hs-slide,.hs-slider.is-stacked .hs-slide.is-active{transition:none;transform:none}
  .hs-slider.fx-kenburns .hs-slide .bb-img,.hs-slider.fx-kenburns .hs-slide .hs-img{animation:none}
}
/* ---- Header: search in the middle, tools on the right ---- */
.nc-tools{display:flex;align-items:center;justify-content:flex-end;gap:22px}
.nc-tools .wish-link{margin-right:-8px}
@media (min-width:861px){
  /* Logo and tools keep their natural width (the tools used to spill over the search on tablets);
     the search takes the space between them, up to 640px, centred in that space. */
  .nc-head-row{grid-template-columns:auto minmax(0,1fr) auto}
  .nc-logo{justify-self:start}
  .nc-search{justify-self:center;max-width:640px}
  .nc-tools{justify-self:end}
}
@media (max-width:860px){.nc-tools{gap:10px}}

/* ---- All departments: slide-out sub-collections ---- */
.nc-dept-menu .dept-item{position:relative;border-bottom:1px solid var(--line)}
.nc-dept-menu .dept-link{display:flex;justify-content:space-between;align-items:center;border-bottom:0}
.dept-arrow{font-size:18px;line-height:1;color:var(--muted);transition:transform .18s}
.dept-sub{position:absolute;left:100%;top:-1px;min-width:250px;min-height:calc(100% + 2px);display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);box-shadow:12px 12px 28px rgba(0,0,0,.1);z-index:9;
  opacity:0;visibility:hidden;transform:translateX(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.dept-item:hover>.dept-sub,.dept-item:focus-within>.dept-sub{opacity:1;visibility:visible;transform:none}
.dept-item:hover>.dept-link,.dept-item:focus-within>.dept-link{color:var(--brand);background:var(--soft)}
.dept-item:hover .dept-arrow,.dept-item:focus-within .dept-arrow{color:var(--brand);transform:translateX(3px)}
.dept-sub a{padding:10px 18px;border-bottom:1px solid var(--line);text-decoration:none;font-size:14px;color:var(--ink)}
.dept-sub a:last-child{border-bottom:0}
.dept-sub a:hover{color:var(--brand);background:var(--soft)}
.dept-sub .dept-sub-all{font-weight:700}
.nc-dept-menu .dept-all{border-bottom:0}
.hs-depts{position:relative;z-index:4}
.hs-depts .dept-item{position:relative;border-bottom:1px solid var(--line)}
.hs-depts .dept-item>.dept-link{border-bottom:0}
.hs-depts .dept-sub a{display:block;padding:10px 18px}
.hs-depts .dept-sub a:hover{padding-left:22px}
@media (hover:none){
  .dept-sub{position:static;min-height:0;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-top:1px solid var(--line);background:var(--soft)}
  .dept-sub a{padding-left:30px}
  .dept-arrow{transform:rotate(90deg)}
}

/* ---- Main menu dropdowns ---- */
.nc-links,.store-nav{overflow:visible}
.menu-item{position:relative;display:flex;align-items:stretch}
.drop-caret{font-size:11px;margin-left:5px;display:inline-block;transition:transform .18s}
.menu-drop{position:absolute;left:-16px;top:100%;min-width:220px;display:flex;flex-direction:column;padding:6px 0;background:#fff;border:1px solid var(--line);box-shadow:0 14px 28px rgba(0,0,0,.1);z-index:9;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.menu-item:hover>.menu-drop,.menu-item:focus-within>.menu-drop{opacity:1;visibility:visible;transform:none}
.menu-item:hover .drop-caret,.menu-item:focus-within .drop-caret{transform:rotate(180deg)}
.nc-links .menu-drop a,.store-nav .menu-drop a{padding:9px 16px;border-bottom:0;font-weight:500;font-size:14px;white-space:nowrap;color:var(--ink)}
.nc-links .menu-drop a:hover,.store-nav .menu-drop a:hover{background:var(--soft);color:var(--brand)}
.nc-links a[aria-current="page"],.store-nav a[aria-current="page"]{color:var(--brand)}
/* Menu bar: items wrap onto a second line rather than running off the screen, and sit a little
   tighter on tablets; the last item's dropdown opens to the left so it stays on screen. */
.nc-links{flex-wrap:wrap;column-gap:26px;row-gap:0;min-width:0}
.nc-links > .menu-item:last-child > .menu-drop,.store-nav > .menu-item:last-child > .menu-drop{left:auto;right:-16px}
@media (min-width:861px) and (max-width:1199px){
  .nc-dept{width:210px}
  .nc-nav-row{gap:20px}
  .nc-links{column-gap:18px}
  .nc-links > a,.nc-links > .menu-item > a{font-size:14px}
}

/* ---- Collection pages: parent crumb and sub-collection chips ---- */
.crumb{margin:0 0 4px;font-size:14px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--brand)}
.sub-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.sub-chips a{padding:8px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:600;font-size:14px;color:var(--ink);background:var(--ground)}
.sub-chips a:hover{border-color:var(--brand);color:var(--brand)}

/* ---- Mobile menu: departments open like an accordion ---- */
.m-sub summary{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;font-weight:600;font-size:16px;cursor:pointer;list-style:none;border-left:3px solid transparent}
.m-sub summary::-webkit-details-marker{display:none}
.m-sub summary::after{content:"+";font-size:20px;color:var(--muted);margin-left:auto}
.m-sub summary:has(> .menu-ico){justify-content:flex-start;gap:10px}
.m-sub[open] summary::after{content:"−"}
.m-sub[open] summary{background:var(--soft)}
.m-sub a{padding-left:36px;font-weight:500;font-size:15px}

/* ---- Image manager: one shape for every product picture ---- */
.card-img,.card-ph,.gallery-main,.qv-img,.mini-img,.compare-prod img{aspect-ratio:var(--img-ratio,1/1);background:var(--img-bg,var(--soft))}
.thumb-btn,.fbt-img,.qv-thumb,.cart-img{background:var(--img-bg,var(--soft))}
.card-img img,.gallery-main,.qv-img,.mini-img img,.thumb-btn img,.fbt-img img,.compare-prod img,.cart-img img,.qv-thumb img,.qv-added-item img{object-fit:var(--img-fit,cover);background:var(--img-bg,var(--soft))}
.gallery-main,.qv-img{height:auto}
@media (max-width:700px){.qv-img{aspect-ratio:var(--img-ratio,1/1)}}
.fp-tl{object-position:0 0}.fp-t{object-position:50% 0}.fp-tr{object-position:100% 0}
.fp-l{object-position:0 50%}.fp-c{object-position:50% 50%}.fp-r{object-position:100% 50%}
.fp-bl{object-position:0 100%}.fp-b{object-position:50% 100%}.fp-br{object-position:100% 100%}

/* ---- Product tabs ---- */
.description-short{color:var(--muted);margin:14px 0 0}
.ptabs{border-top:1px solid var(--line)}
.ptabs-list{display:flex;gap:4px;border-bottom:2px solid var(--line);overflow-x:auto;scrollbar-width:none;margin-bottom:24px}
.ptabs-list[hidden]{display:none}
.ptabs-list [role=tab]{flex:none;padding:14px 20px;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;background:none;color:var(--muted);font:inherit;font-family:var(--heading-font);font-weight:700;font-size:17px;cursor:pointer;white-space:nowrap}
.ptabs-list [role=tab]:hover{color:var(--ink)}
.ptabs-list [role=tab][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.ptabs-list [role=tab]:focus-visible{outline:2px solid var(--brand);outline-offset:-4px}
.ptabs-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:10px;background:var(--soft);font-size:12px;font-family:var(--font)}
.ptabs-panel{max-width:80ch}
.ptabs-panel:focus-visible{outline:2px solid var(--brand);outline-offset:6px}
.ptabs-panel+.ptabs-panel{margin-top:32px}
.js-tabs .ptabs-panel+.ptabs-panel{margin-top:0}
.ptabs-h{font-size:22px;margin:0 0 12px}
.js-tabs .ptabs-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ptab-downloads{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ptab-downloads .dl{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);background:var(--ground)}
.ptab-downloads .dl:hover{border-color:var(--brand)}
.ptab-downloads .dl svg{color:var(--brand);flex:none}
.ptab-downloads .dl span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.ptab-downloads small{color:var(--muted);font-size:13px}

/* ---- Customer accounts ---- */
.acct-link{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;color:inherit;text-decoration:none}
.acct-dot{position:absolute;right:7px;bottom:8px;width:9px;height:9px;border-radius:50%;background:#2f7a55;border:2px solid var(--ground)}
.auth-wrap{display:flex;justify-content:center}
.auth-box{width:100%;max-width:440px;display:flex;flex-direction:column;gap:14px}
.auth-box h1{margin:0}
.auth-form{display:flex;flex-direction:column;gap:8px}
.auth-form label:not(.check){font-weight:600;font-size:14px;margin-top:6px}
.auth-form input:not([type=checkbox]){padding:12px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--ground);color:var(--ink)}
.auth-form input:focus{outline:2px solid var(--brand);outline-offset:1px}
.auth-form .btn-brand,.auth-form .btn-outline{margin-top:10px;align-self:flex-start}
.auth-box .auth-form .btn-brand{align-self:stretch}
.auth-form .check{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin-top:6px}
.auth-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.auth-two>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.auth-form input:not([type=checkbox]):not([type=radio]){width:100%;min-width:0;box-sizing:border-box}
.auth-links{font-size:14px;color:var(--muted)}
.social-signin{display:flex;flex-direction:column;gap:10px}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--ink);text-decoration:none;font-weight:600}
.social-btn:hover{border-color:var(--ink)}
.social-apple{background:#000;color:#fff;border-color:#000}
.social-apple:hover{background:#222}
.social-signin.compact{flex-direction:row;flex-wrap:wrap}
.social-signin.compact .social-btn{padding:8px 14px;font-size:14px}
.or-line{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:4px 0}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}
/* ---- Customer account page ---- */
.acct-hero{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;padding:26px 28px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 9%,var(--panel)),var(--panel) 60%)}
.acct-avatar{flex:none;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--brand);box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 18%,transparent)}
.acct-hello{flex:1 1 280px;min-width:0}
.acct-hello .eyebrow{margin-bottom:4px}
.acct-hello h1{margin:0 0 6px;font-size:32px;line-height:1.15}
.acct-hello p.muted{margin:0;overflow-wrap:anywhere}
.acct-hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.acct-hero-actions form{margin:0}
.acct-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:20px 0 24px}
.acct-stat{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:inherit;text-decoration:none;min-width:0;transition:border-color .15s,transform .15s}
a.acct-stat:hover{border-color:var(--brand);transform:translateY(-1px)}
.acct-stat-icon{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--brand);background:color-mix(in srgb,var(--brand) 11%,transparent)}
.acct-stat b{display:block;font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums}
.acct-stat small{display:block;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.acct-side{display:flex;flex-direction:column;gap:20px;min-width:0}
.acct-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.acct-card-head h2{margin:0}
.acct-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:10px 0 4px}
.acct-empty p{margin:0}
.acct-linked{margin-bottom:12px}
.points-meter{display:block;width:100%;height:8px;margin:6px 0 10px;border:0;border-radius:999px;overflow:hidden;background:var(--soft);appearance:none;-webkit-appearance:none}
.points-meter::-webkit-progress-bar{background:var(--soft);border-radius:999px}
.points-meter::-webkit-progress-value{background:var(--brand);border-radius:999px}
.points-meter::-moz-progress-bar{background:var(--brand);border-radius:999px}
.account-verify{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:20px 0 28px;padding:18px 22px;border-left:4px solid var(--brand);line-height:1.55}
.account-verify p{margin:0;flex:1 1 360px}
.account-verify p b{display:block;margin-bottom:4px}
.account-verify form{margin:0;flex:none}
.account-verify .link-btn{font-weight:700;white-space:nowrap}
.account-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
.account-card{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;background:var(--panel)}
.account-card h2{font-size:19px;margin:0 0 14px}
.acct-orders{list-style:none;margin:0;padding:0}
.acct-orders li{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line)}
.acct-orders li:first-child{border-top:0}
.acct-order{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:14px 0;color:inherit;text-decoration:none}
.acct-order:hover .acct-order-info b{color:var(--brand)}
.acct-thumbs{display:flex;align-items:center;width:112px}
.acct-thumbs img,.acct-thumb-ph{width:46px;height:46px;border-radius:10px;object-fit:var(--img-fit,cover);background:var(--img-bg,var(--soft));border:2px solid var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.12);flex:none}
.acct-thumbs img+img{margin-left:-20px}
.acct-thumb-ph{display:grid;place-items:center;color:var(--muted);font-weight:800}
.acct-order-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.acct-order-total{white-space:nowrap;font-variant-numeric:tabular-nums}
.acct-again{flex:none;font-size:12px;font-weight:700;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:inherit;text-decoration:none;white-space:nowrap}
.acct-again:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:640px){
  .acct-hero{padding:20px}.acct-avatar{width:56px;height:56px;font-size:20px}.acct-hello h1{font-size:26px}
  .acct-hero-actions{width:100%}.acct-hero-actions>*{flex:1}.acct-hero-actions .btn-outline{width:100%;text-align:center}
  .acct-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.acct-stat{padding:12px;gap:10px}.acct-stat-icon{width:36px;height:36px}.acct-stat b{font-size:18px}
  .account-card{padding:16px}
  .acct-orders li{flex-wrap:wrap;gap:0 12px;padding-bottom:12px}
  .acct-order{flex-basis:100%;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pics info total" "pics status .";gap:4px 12px;padding-bottom:8px}
  .acct-thumbs{grid-area:pics;width:auto}.acct-thumbs img:nth-child(n+3){display:none}.acct-thumbs img,.acct-thumb-ph{width:40px;height:40px}
  .acct-order-info{grid-area:info}.acct-order .acct-status{grid-area:status;justify-self:start}.acct-order-total{grid-area:total}
}
.acct-status{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--soft)}
.acct-status.status-paid,.acct-status.status-fulfilled,.acct-status.status-completed{background:#e3f1ea;color:#1f5e40}
.acct-status.status-cancelled,.acct-status.status-refunded{background:#f6e3e1;color:#8a2a1c}
ul.plain{list-style:none;padding:0;margin:0 0 12px}
@media (max-width:980px){.account-grid{grid-template-columns:1fr}}
@media (max-width:860px){.acct-link{width:38px}}
@media (max-width:480px){.auth-two{grid-template-columns:1fr}}

/* ---- Videos (load on play) ---- */
.yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#111}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,rgba(0,0,0,.35),rgba(0,0,0,.6)),var(--brand);text-decoration:none}
.yt-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt-play::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);transition:background .2s}
.yt-play:hover::after{background:rgba(0,0,0,.05)}
.yt-btn{position:relative;z-index:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));transition:transform .2s}
.yt-play:hover .yt-btn,.yt-play:focus-visible .yt-btn{transform:scale(1.08)}
.yt-play:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.hs-video{align-self:center;max-width:560px;justify-self:center}
.promo-has-video{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:center}
.promo-has-video .promo-copy{max-width:none}
.promo-has-video .promo-video{width:100%}
.promo-has-video a.promo-cta{color:inherit}
.promo-text{font-size:14px;line-height:1.45;opacity:.9}
@media (max-width:760px){.promo-has-video{grid-template-columns:1fr}}

/* ---- Slideshow pause button ---- */
.hs-pause{position:absolute;right:16px;bottom:14px;z-index:3;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(17,20,23,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.hs-pause:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.hs-pause:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hs-pause .i-play{display:none}
.hs-pause[aria-pressed="true"] .i-play{display:block}
.hs-pause[aria-pressed="true"] .i-pause{display:none}
.hs-pause[hidden]{display:none}

/* ---- Product badges ---- */
.badge-new{background:var(--bdg-new-bg,var(--accent2));color:var(--bdg-new-ink,var(--on-accent2))}
.badge-sale{background:var(--bdg-sale-bg,var(--brand));color:var(--bdg-sale-ink,var(--on-brand))}
.badge-dark{background:#2b2b2b;color:#fff}
.badge-soldout{background:var(--bdg-soldout-bg,#2b2b2b);color:var(--bdg-soldout-ink,#fff)}
.badge-brand{background:var(--brand);color:var(--on-brand)}
.badge-accent{background:var(--accent2);color:var(--on-accent2)}
.badge-green{background:#2f7a55;color:#fff}
.badge-amber{background:#f2b53a;color:#2b1d00}
.badge-red{background:#c62828;color:#fff}
.badge-blue{background:#1f5fae;color:#fff}
.badge-outline{background:var(--ground);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.labels-inline{position:static;flex-direction:row;flex-wrap:wrap;margin:0 0 8px}
.labels-inline .badge{font-size:12px;padding:3px 9px}
/* ---- Banner backgrounds: solid, gradient, photo, photo with colour tint ---- */
.bb{overflow:hidden;isolation:isolate}
.bb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.promo.bb:hover .bb-img{transform:scale(1.04)}
.bb-tint{position:absolute;inset:0;z-index:-1;pointer-events:none}
.tint-shade{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 100%)}
.tint-sun{background:#ffc156}.tint-brand{background:var(--brand)}.tint-accent2{background:var(--accent2)}.tint-dark{background:#1c2227}
.tint-light{background:#f5f6f9}.tint-purple{background:#5b2bb5}.tint-teal{background:#0e8f9a}
.hero-shade.tint-shade{background:#000}
.bb .hs-copy,.bb .promo-copy{position:relative}
.bb-img,.bb-tint{border-radius:inherit}
/* Photo: light text with a soft shadow; tinted: text follows the tint colour */
.bb.bb-photo{color:#fff}
.bb.bb-photo .hs-title,.bb.bb-photo .promo-title,.bb.bb-photo .hs-sub,.bb.bb-photo .hs-price,.bb.bb-photo .promo-sub,.bb.bb-photo .promo-text{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.bb.bb-tinted{color:#fff}
.bb.bb-tinted.bg-sun,.bb.bb-tinted.bg-light{color:#1b1b1b}
.bb.bb-photo,.bb.bb-tinted{background:#1c2227}
/* Gradients from each colour */
.bb-gradient.bg-sun{background:linear-gradient(135deg,#ffd27a 0%,#ff9f43 100%)}
.bb-gradient.bg-brand{background:linear-gradient(135deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 55%,#000) 100%)}
.bb-gradient.bg-accent2{background:linear-gradient(135deg,var(--accent2) 0%,color-mix(in srgb,var(--accent2) 55%,#000) 100%)}
.bb-gradient.bg-dark{background:linear-gradient(135deg,#2c353d 0%,#0f1316 100%)}
.bb-gradient.bg-light{background:linear-gradient(135deg,#ffffff 0%,#d3dae5 100%)}
.bb-gradient.bg-purple{background:linear-gradient(135deg,#7b4ae0 0%,#3a1680 100%)}
.bb-gradient.bg-teal{background:linear-gradient(135deg,#17b3bf 0%,#075d65 100%)}
/* Photo slides give the words more room */
.hs-slide.bb-photo,.hs-slide.bb-tinted{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.promo.bb-photo,.promo.bb-tinted{min-height:220px}
.promo.bb-photo .promo-copy,.promo.bb-tinted .promo-copy{max-width:70%}
.promo.bb-photo .promo-cta,.promo.bb-tinted .promo-cta{display:inline-block;margin-top:8px;padding:9px 16px;border-radius:var(--btn-radius);background:#fff;color:#111;align-self:flex-start;text-shadow:none}
@media (max-width:860px){.promo.bb-photo .promo-copy,.promo.bb-tinted .promo-copy{max-width:100%}}
/* Phones and small tablets: photo slides stack too, and a hero video uses the full width under the words */
@media (max-width:860px){.hs-slide.bb-photo,.hs-slide.bb-tinted{grid-template-columns:1fr}.hs-video{max-width:none;width:100%;justify-self:stretch;margin-top:18px}}
/* Video banners: words use their whole column; a narrow banner puts the video under the words */
.promo.promo-has-video .promo-copy{max-width:none}
.promo.promo-has-video{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.promo.promo-has-video .promo-cta{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ---- Storefront dark mode (shopper's choice, remembered on their device) ---- */
:root[data-theme="dark"]{--ground:#121518;--ink:#e8ebee;--soft:#1b2024;--line:#2b3238;--muted:#9aa4ad;--panel:#171b1f;--img-bg:#1b2024;color-scheme:dark}
/* Message bars (flash notes) in dark mode: dark tinted backgrounds, light text */
:root[data-theme="dark"]{--info-soft:#1a2531;--ok:#6fcf9b;--ok-soft:rgba(111,207,155,.13);--bad:#ff8f8f;--bad-soft:rgba(255,120,120,.13)}
:root[data-theme="dark"] .flash{color:var(--ink);border:1px solid var(--line)}
:root[data-theme="dark"] .flash-success{color:var(--ok);border-color:rgba(111,207,155,.3)}
:root[data-theme="dark"] .flash-error{color:var(--bad);border-color:rgba(255,120,120,.3)}
:root[data-theme="dark"] .account-verify{border-left:4px solid var(--brand)}
:root[data-theme="dark"] body{background:var(--ground);color:var(--ink)}
:root[data-theme="dark"] .nc-head,:root[data-theme="dark"] .nc-nav,:root[data-theme="dark"] .nc-dept-menu,:root[data-theme="dark"] .hs-depts,
:root[data-theme="dark"] .dept-sub,:root[data-theme="dark"] .menu-drop,:root[data-theme="dark"] .skip,:root[data-theme="dark"] .store-head{background:var(--ground)}
:root[data-theme="dark"] .col-circles .col-img,:root[data-theme="dark"] .compare-remove{background:var(--panel);color:var(--ink)}
:root[data-theme="dark"] .nc-search{background:var(--search-bg-dark,var(--panel));color:var(--ink)}
/* Product icons in dark mode: a raised dark button with a light edge; hover and "added" states stay visible */
:root[data-theme="dark"] .card-action{background:#262d33;color:#eef1f3;border-color:rgba(255,255,255,.14);box-shadow:0 4px 14px rgba(0,0,0,.5)}
:root[data-theme="dark"] .card-action:hover,:root[data-theme="dark"] .card-action:focus-visible{background:var(--brand);color:var(--on-brand);border-color:color-mix(in srgb,var(--brand) 60%,#fff);box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 45%,transparent)}
:root[data-theme="dark"] .card-action:focus-visible{outline-color:#fff}
:root[data-theme="dark"] .card-action[aria-pressed="true"].lt-wish{color:#ff7a8e;border-color:#ff7a8e}
:root[data-theme="dark"] .card-action[aria-pressed="true"].lt-wish:hover{background:#ff7a8e;color:#1a0a0d}
:root[data-theme="dark"] .card-action[aria-pressed="true"].lt-compare{background:var(--brand);color:var(--on-brand);border-color:color-mix(in srgb,var(--brand) 60%,#fff)}
:root[data-theme="dark"] .nc-search input,:root[data-theme="dark"] .head-search input{background:transparent;color:var(--ink)}
:root[data-theme="dark"] .f input,:root[data-theme="dark"] .f select,:root[data-theme="dark"] .f textarea,
:root[data-theme="dark"] .auth-form input:not([type=checkbox]),:root[data-theme="dark"] input[type=search],:root[data-theme="dark"] input[type=email]{background:var(--panel);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .card-title,:root[data-theme="dark"] .mini-title,:root[data-theme="dark"] .hs-depts a,:root[data-theme="dark"] .nc-help b,:root[data-theme="dark"] .nc-logo{color:var(--ink)}
:root[data-theme="dark"] .track li::before{background:var(--ground)}
:root[data-theme="dark"] .hs-img,:root[data-theme="dark"] .promo img{mix-blend-mode:normal}
:root[data-theme="dark"] .social-apple{background:#fff;color:#000;border-color:#fff}
/* Two logos: the main (dark) one on the light store, the light one in dark mode */
.store-brand .logo-for-dark{display:none}
:root[data-theme="dark"] .store-brand .logo-for-dark{display:block}
:root[data-theme="dark"] .store-brand .logo-for-light{display:none}
/* Branding → Logo for phones: a <picture> around the logo; it takes no box of its own, so the logo sizes as before */
.store-brand picture{display:contents}
.store-brand picture.logo-for-dark{display:none}
:root[data-theme="dark"] .store-brand picture.logo-for-dark{display:contents}
:root[data-theme="dark"] .store-brand picture.logo-for-light{display:none}
.nc-foot-brand img{display:block;height:auto;max-height:min(var(--logo-h,64px),72px);width:auto;max-width:min(240px,100%)}
/* The footer is always dark: the main (dark) logo sits on a small white plate so it stays visible */
.nc-foot-brand img:not(.logo-for-dark){background:#fff;padding:8px 12px;border-radius:8px}
.nc-foot-brand.store-brand{display:block}
/* Footer newsletter: one pill in both modes, with a visible focus ring */
.nc-foot-nl:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 55%,transparent)}
.nc-foot-nl input[type=email]{background:transparent;color:#1b1f23}
.nc-foot-nl input[type=email]::placeholder{color:#6b737a}
:root[data-theme="dark"] .nc-foot-nl{background:#262d33;box-shadow:inset 0 0 0 1px #3a444c}
:root[data-theme="dark"] .nc-foot-nl:focus-within{box-shadow:inset 0 0 0 1px #56626c,0 0 0 3px color-mix(in srgb,var(--brand) 55%,transparent)}
:root[data-theme="dark"] .nc-foot-nl input[type=email]{background:transparent;color:#eef1f3;border:0}
:root[data-theme="dark"] .nc-foot-nl input[type=email]::placeholder{color:#9aa4ad}
.theme-btn{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.theme-btn:hover{background:var(--soft)}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (max-width:860px){.theme-btn{width:38px;height:38px}}

/* ---- Product cards on phones: small badges and actions below the photo, so pictures stay visible ---- */
@media (max-width:560px){
  .labels{top:6px;left:6px;gap:3px}
  .labels .badge{font-size:10px;line-height:1.4;padding:1px 6px}
  .labels .badge:nth-child(n+3){display:none}
  .card-actions{position:static;opacity:1;transform:none;justify-content:flex-start;gap:6px;margin:8px 0 2px;padding:0}
  .card-action{width:32px;height:32px;box-shadow:none;border:1px solid var(--line)}
  .card:hover .card-img img{transform:none}
}

/* ---- Product lists: 1-4 lists side by side; optional pager per list ---- */
.pcol{position:relative;min-width:0}
/* Hidden pages must never widen the page; clip sideways only. */
.pcols .pcol{min-width:0;overflow-x:clip}
/* Safety net: nothing in the page content may push the page wider than the screen. */
#main{overflow-x:clip}
/* Screen-reader-only text (e.g. "was" before an old price) is positioned absolutely: keep it inside
   its carousel card, or a sliding carousel drags the whole page sideways in some browsers. */
.car-item,.pr{position:relative}
/* Last line of defence in every browser: the page itself never scrolls sideways. */
html{overflow-x:hidden}
.pcols{--pcols:3;grid-template-columns:repeat(var(--pcols),minmax(0,1fr))}
.pcols-1{--pcols:1}.pcols-2{--pcols:2}.pcols-3{--pcols:3}.pcols-4{--pcols:4;gap:26px}
.pcol-list{display:flex;flex-direction:column}
.pcols-1 .pcol-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
.pcols-2 .pcol-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
/* Heading row: title on the left, arrows and pause on the right */
.pcol-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:14px;border-bottom:2px solid var(--line);position:relative}
.pcol-head::after{content:"";position:absolute;left:0;bottom:-2px;width:60px;height:2px;background:var(--brand)}
.pcol-head .pcol-title{margin:0;padding-bottom:10px;border-bottom:0}
.pcol-head .pcol-title::after{display:none}
.pcol-controls{display:flex;gap:6px;padding-bottom:8px;flex:none}
.pcol-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--ground);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.pcol-btn:hover,.pcol-btn:focus-visible{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.pcol-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pcol-pause .i-play,.pcol-pause[aria-pressed="true"] .i-pause{display:none}
.pcol-pause[aria-pressed="true"] .i-play{display:block}
.pcol-pause[hidden]{display:none}
/* Pager: pages stacked in one place (as tall as the tallest), the current one shown */
.pcol-pager{overflow:hidden;border-radius:2px}
.pcol-pager:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.pcol-pages{display:grid}
.pcol-page{grid-area:1 / 1;visibility:hidden;opacity:0;transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1),visibility 0s linear .65s}
.pcol-page.is-active{visibility:visible;opacity:1;transform:none;transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1),visibility 0s}
.fx-slide .pcol-page{opacity:1}
.fx-rise .pcol-page:not(.is-active){transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){.pcol-page,.pcol-page.is-active{transition:none;transform:none}}
/* Larger pictures and short descriptions (section options) */
.pcols.thumbs-large .mini{grid-template-columns:150px minmax(0,1fr)}
.pcols-4.thumbs-large .mini{grid-template-columns:120px minmax(0,1fr)}
.mini-desc{font-size:13px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcol-all{display:inline-block;margin-top:12px;font-weight:700;font-size:14px;color:var(--brand);text-decoration:none}
.pcol-all:hover{text-decoration:underline}
/* Tablets: two lists side by side (an odd last list spans the width, its products in two columns);
   narrower tablets: one list per row with its products in two columns; phones: one column. */
@media (max-width:1100px){
  .pcols-3,.pcols-4{--pcols:2}
  .pcols-3>.pcol:last-child{grid-column:1 / -1}
  .pcols-3>.pcol:last-child .pcol-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .pcols-1 .pcol-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcols-2 .pcol-list{display:flex}
}
@media (max-width:860px){
  .pcols{--pcols:1}
  .pcols .pcol-list,.pcols-3>.pcol:last-child .pcol-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .pcols.thumbs-large .mini{grid-template-columns:120px minmax(0,1fr)}
}
@media (max-width:560px){
  .pcols .pcol-list,.pcols-3>.pcol:last-child .pcol-list{display:flex}
  .pcols.thumbs-large .mini{grid-template-columns:110px minmax(0,1fr)}
}

/* Photo and its action icons: icons float over the photo on larger screens, sit underneath on phones */
.card-media{position:relative}

/* Live prices: running total on the product page / quick view; cart dims while it recalculates */
.buy-total{margin:10px 0 0;font-weight:700;font-size:17px}
#cart-page[aria-busy="true"] .cart-total,#cart-page[aria-busy="true"] .sum-row b{opacity:.45;transition:opacity .15s}

/* Back to top */
.to-top{position:fixed;right:18px;bottom:18px;z-index:40;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:var(--brand);color:var(--on-brand);box-shadow:0 6px 20px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s}
.to-top.is-shown{opacity:1;visibility:visible;transform:none}
.to-top:hover{filter:brightness(1.08)}
.to-top:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.edit-fab ~ .to-top{bottom:78px}
@media (max-width:860px){.to-top{right:14px;bottom:14px;width:42px;height:42px}.compare-bar:not([hidden]) ~ .to-top{bottom:80px}}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}
@media print{.to-top{display:none}}

/* ---- Ticker: scrolling store news at the top of the page and/or pinned to the bottom ---- */
.ticker{position:relative;display:flex;align-items:center;min-height:40px;font-size:14px;font-weight:600;line-height:1.2;overflow:hidden}
.ticker-viewport{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.ticker-list{display:flex;align-items:center;flex:none;width:max-content;list-style:none;margin:0;padding:0;white-space:nowrap}
.ticker-item{padding:11px 0}
.ticker-item a{color:inherit;text-decoration:none}
.ticker-item a:hover,.ticker-item a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.ticker-sep{padding:0 24px;opacity:.65}
.ticker-track{display:flex;width:max-content;animation:tk-scroll var(--tk-dur,40s) linear infinite;will-change:transform}
@keyframes tk-scroll{from{transform:translateX(0)}to{transform:translateX(var(--tk-shift,-50%))}}
.ticker[data-dir="right"] .ticker-track{animation-direction:reverse}
.ticker.is-paused .ticker-track,.ticker[data-pause-hover]:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
/* Standing still (no JavaScript, or reduced motion): centred when it fits, scrollable by hand when it doesn't */
.ticker:not(.is-moving) .ticker-viewport{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
.ticker:not(.is-moving) .ticker-list{margin:0 auto;padding:0 16px}
.ticker:not(.is-moving) .ticker-sep:last-child{display:none}
.ticker-btn{flex:none;width:28px;height:28px;margin-right:8px;border:0;border-radius:50%;background:rgba(0,0,0,.2);color:inherit;display:grid;place-items:center;cursor:pointer}
.ticker-btn:hover{background:rgba(0,0,0,.32)}
.ticker-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ticker-pause .i-play,.ticker.is-paused .ticker-pause .i-pause{display:none}
.ticker.is-paused .ticker-pause .i-play{display:block}
.ticker-bottom{position:fixed;left:0;right:0;bottom:0;z-index:45;box-shadow:0 -6px 18px rgba(0,0,0,.18)}
:root[data-ticker-closed] .ticker{display:none}
/* Keep floating buttons and bars clear of the bottom ticker */
body.has-ticker-bottom{--tk-b:40px;padding-bottom:var(--tk-b)}
:root[data-ticker-closed] body.has-ticker-bottom{--tk-b:0px}
body.has-ticker-bottom .to-top{bottom:calc(18px + var(--tk-b))}
body.has-ticker-bottom .edit-fab{bottom:calc(18px + var(--tk-b))}
body.has-ticker-bottom .edit-fab ~ .to-top{bottom:calc(78px + var(--tk-b))}
body.has-ticker-bottom .compare-bar{bottom:calc(16px + var(--tk-b))}
body.has-ticker-bottom .toast{bottom:calc(80px + var(--tk-b))}
@media (max-width:860px){
  body.has-ticker-bottom .to-top{bottom:calc(14px + var(--tk-b))}
  body.has-ticker-bottom .compare-bar{bottom:calc(10px + var(--tk-b))}
  body.has-ticker-bottom .compare-bar:not([hidden]) ~ .to-top{bottom:calc(80px + var(--tk-b))}
  .ticker{font-size:13px}
}
@media print{.ticker{display:none}}

/* ---- Pop-ups: notices and promotions in a lightbox ---- */
.pop-dialog{width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:calc(var(--radius) + 6px);background:var(--ground);color:var(--ink);box-shadow:0 24px 64px rgba(0,0,0,.35);overflow:auto}
.pop-small{width:min(420px,calc(100vw - 32px))}
.pop-large{width:min(760px,calc(100vw - 32px))}
.pop-image_side.pop-medium{width:min(760px,calc(100vw - 32px))}
.pop-image_side.pop-large{width:min(920px,calc(100vw - 32px))}
.pop-dialog::backdrop{background:rgba(10,12,14,.6)}
.pop-dialog[open]{animation:pop-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pop-in{from{opacity:0;transform:translateY(18px) scale(.97)}}
.pop-shell{position:relative;display:grid}
.pop-image_side .pop-shell{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.pop-media{background:var(--soft)}
.pop-media img{display:block;width:100%;height:100%;object-fit:cover}
.pop-image_side .pop-media img{min-height:300px}
.pop-image_top .pop-media img{aspect-ratio:16 / 9;max-height:300px}
.pop-body{display:flex;flex-direction:column;gap:12px;padding:32px 30px 24px}
.pop-title{margin:0;padding-right:30px;font-size:clamp(22px,3vw,30px);line-height:1.15}
.pop-text-body p{margin:0 0 8px}
.pop-close{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pop-close:hover{background:#fff}
.pop-code{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 14px;border:2px dashed var(--brand);border-radius:var(--radius)}
.pop-code-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.pop-code-value{font-family:ui-monospace,"Cascadia Mono",monospace;font-size:20px;letter-spacing:.08em}
.pop-copy{margin-left:auto;padding:6px 14px;font-size:14px}
.pop-nl{display:flex;flex-wrap:wrap;gap:8px}
.pop-nl input[type=email]{flex:1 1 200px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--btn-radius);font:inherit;background:var(--panel);color:var(--ink)}
.pop-nl .btn-brand{padding:12px 20px}
.pop-nl-msg{flex-basis:100%;margin:0}
.pop-nl-msg.is-ok{color:#1a7f37;font-weight:600}
.pop-nl-msg.is-bad{color:var(--sale)}
:root[data-theme="dark"] .pop-nl-msg.is-ok{color:#5fd38a}
.pop-fine{margin:0}
.pop-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:4px}
.pop-preview-note{margin:0;padding:6px 10px;border-radius:6px;background:#fff4c2;color:#5a4500;font-size:13px}
@media (max-width:640px){
  .pop-image_side .pop-shell{grid-template-columns:1fr}
  .pop-image_side .pop-media img{min-height:0;max-height:200px;aspect-ratio:16 / 9}
  .pop-body{padding:26px 20px 20px}
}
@media (prefers-reduced-motion:reduce){.pop-dialog[open]{animation:none}.ticker-track{animation:none}}
/* Sale maker: the sale's name and end date under the price */
.sale-note{display:inline-flex;flex-wrap:wrap;gap:4px;margin:-4px 0 12px;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--sale,#c8102e) 12%,transparent);color:var(--sale,#c8102e);font-size:13px}
/* Loyalty points: checkout box, account card */
.points-box{margin:10px 0;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--brand) 45%,var(--line));border-radius:var(--radius);background:color-mix(in srgb,var(--brand) 6%,transparent);font-size:14px}
.points-box p{margin:0 0 6px}
.points-box .check{display:flex;gap:8px;align-items:center;margin:0;cursor:pointer}
.points-earn{margin:8px 0;padding:8px 10px;border-radius:var(--radius);background:var(--soft)}
.points-balance{margin:0 0 6px;font-size:16px}
.points-balance b{font-size:30px;margin-right:4px}
.points-list{list-style:none;margin:12px 0 0;padding:0}
.points-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.pts-plus{color:#2f7a55}.pts-minus{color:var(--sale,#c8102e)}
:root[data-theme="dark"] .pts-plus{color:#6fd39c}
/* Vouchers at checkout; refunds and returns on the order page */
.voucher-box{margin:10px 0;font-size:14px}
.voucher-box summary{cursor:pointer;color:var(--brand);font-weight:600}
.voucher-row{display:flex;gap:8px;margin-top:8px}
.voucher-row input{flex:1;min-width:0;text-transform:uppercase}
.voucher-on{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;padding:8px 10px;border:1px dashed var(--line);border-radius:var(--radius)}
.link-btn{background:none;border:0;padding:0;color:var(--brand);text-decoration:underline;cursor:pointer;font:inherit}
.order-after{margin-top:28px;display:grid;gap:10px}
/* ---- Product page: a bundle's contents, options and extras ---- */
.kit{margin:14px 0 6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.kit-title{margin:0;padding:12px 16px;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--brand) 6%,var(--panel))}
.kit-items{list-style:none;margin:0;padding:0}
.kit-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);transition:opacity .15s}
.kit-item:first-child{border-top:0}
.kit-item.is-extra{background:color-mix(in srgb,var(--soft) 55%,transparent)}
.kit-item.is-off .kit-img,.kit-item.is-off .kit-name,.kit-item.is-off .kit-line{opacity:.5}
.kit-img{width:56px;height:56px;border-radius:calc(var(--radius) - 2px);overflow:hidden;background:var(--img-bg,var(--soft));border:1px solid var(--line);display:block}
.kit-img img{width:100%;height:100%;object-fit:var(--img-fit,cover);display:block}
.kit-text{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.kit-name{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.kit-name a{color:inherit;text-decoration:none}.kit-name a:hover{color:var(--brand)}
.kit-qty{color:var(--brand)}
.kit-select{max-width:100%;padding:6px 10px;font-size:14px;border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--ink)}
.kit-extra{margin:0;font-size:14px}
.kit-line{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.kit-worth{margin:0;padding:10px 16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.kit-worth b{color:var(--ink)}
@media (max-width:560px){.kit-item{grid-template-columns:48px minmax(0,1fr) auto;padding:10px 12px;gap:10px}.kit-img{width:48px;height:48px}}

/* ---- Customer order page: full width, a main column and a sticky summary (stacked on phones) ---- */
.op-back{margin:0 0 14px}
.op-back a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 12px 6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.op-back a:hover{color:var(--brand);border-color:var(--brand)}
.op-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.op-head h1{margin:0 0 10px}
.op-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;font-size:15px}
.op-actions{display:flex;flex-wrap:wrap;gap:10px}
.op-grid{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:28px 36px;align-items:start;margin-top:28px}
.op-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.op-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:88px;min-width:0}
.op-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:22px 24px}
.op-card h2{font-size:18px;margin:0 0 16px;display:flex;align-items:center;gap:8px}
.op-count{font-size:13px;font-weight:700;background:var(--soft);border-radius:999px;padding:1px 9px}
.op-lines{list-style:none;margin:0;padding:0}
.op-line{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.op-line:first-child{border-top:0;padding-top:0}
.op-line:last-child{padding-bottom:0}
.op-img{width:88px;height:88px;border-radius:calc(var(--radius) - 2px);overflow:hidden;background:var(--img-bg,var(--soft));border:1px solid var(--line)}
.op-img img{width:100%;height:100%;object-fit:var(--img-fit,cover);display:block}
.op-line-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.op-line-text b{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.op-line-total{font-size:16px;white-space:nowrap}
.op-summary .sum-row{margin:9px 0;gap:12px}
.op-summary .sum-row.grand{font-size:21px;margin-top:14px;padding-top:14px}
.op-summary .points-earn{margin-top:14px}
.op-summary-links{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.op-summary-links:not(:has(a)){display:none}
.op-summary-links a{font-weight:600}
.op-card address{font-style:normal;line-height:1.65}
.op-method{margin:12px 0 0}
.op-help p{margin:0;line-height:1.6}
.order-page .progress-steps{margin:0;padding:18px 12px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.order-page .order-box{margin:0;padding:22px 24px}
.order-page .order-again,.order-page .order-after{margin-top:0}
@media (max-width:980px){
  .op-grid{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .op-main{display:contents}
  .op-side{position:static;order:1}
  .op-main>.order-again,.op-main>.order-after{order:2}
}
@media (max-width:560px){
  .op-card,.order-page .order-box{padding:16px}
  .op-line{grid-template-columns:64px minmax(0,1fr) auto;gap:12px}
  .op-img{width:64px;height:64px}
  .op-actions{width:100%}.op-actions a{flex:1;text-align:center}
}
:root[data-theme="dark"] .acct-status{background:var(--soft);color:var(--ink)}
:root[data-theme="dark"] .acct-status.status-paid,:root[data-theme="dark"] .acct-status.status-fulfilled,:root[data-theme="dark"] .acct-status.status-completed{background:rgba(111,207,155,.15);color:#8fe0b4}
:root[data-theme="dark"] .acct-status.status-cancelled,:root[data-theme="dark"] .acct-status.status-refunded{background:rgba(255,120,120,.15);color:#ffa3a3}
/* "Order again" picker on the order page */
.order-again{margin-top:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:20px;scroll-margin-top:90px}
.oa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.oa-head h2{font-size:19px;margin:0 0 4px}.oa-head p{margin:0}.oa-head .link-btn{flex:none;white-space:nowrap;margin-top:4px}
.oa-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.oa-line{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:calc(var(--radius) - 2px);background:var(--ground);transition:opacity .15s,border-color .15s}
.oa-line:has(input[type=checkbox]:checked){border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.oa-line.is-unticked,.oa-line.is-off{opacity:.55}
.oa-pick{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer;margin:0}
.oa-line.is-off .oa-pick{cursor:default}
.oa-pick input{width:20px;height:20px;accent-color:var(--brand);flex:none;margin:0}
.oa-img{width:64px;height:64px;border-radius:calc(var(--radius) - 2px);overflow:hidden;background:var(--img-bg,var(--soft));flex:none;border:1px solid var(--line)}
.oa-img img{width:100%;height:100%;object-fit:var(--img-fit,cover);display:block}
.oa-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.oa-name{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.oa-gone{color:var(--sale,#c8102e)}
.oa-qty{width:72px;flex:none;text-align:center;padding:8px 6px}
.oa-foot{display:flex;justify-content:flex-end;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.oa-sum{margin:0;display:flex;align-items:baseline;gap:10px}.oa-sum b{font-size:20px}
@media (max-width:560px){.order-again{padding:14px}.oa-line{padding:8px 10px;gap:8px}.oa-img{width:52px;height:52px}.oa-qty{width:58px}.oa-foot{justify-content:space-between}.oa-foot .btn-brand{flex:1 1 100%}}
.refund-note,.return-note{margin:0;padding:10px 14px;border-radius:var(--radius);background:var(--soft)}
.return-approved{border-left:3px solid #2f7a55}.return-declined{border-left:3px solid var(--sale,#c8102e)}
.return-box{border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px}
.return-box summary{cursor:pointer;font-weight:700}
.return-form{display:grid;gap:8px;max-width:560px;margin-top:10px}
.return-form fieldset{border:0;padding:0;margin:0 0 6px;display:grid;gap:6px}
.return-form legend{font-weight:600;margin-bottom:6px}
.return-line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.return-line select{width:auto}
.mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.04em}
/* ---- Brand logos: continuous scroll, paged slide / fade / zoom, or a still grid ---- */
.brand-strip{--per:6;--bh:56px;position:relative;display:flex;align-items:center;gap:8px}
.bs-n-2{--per:2}.bs-n-3{--per:3}.bs-n-4{--per:4}.bs-n-5{--per:5}.bs-n-6{--per:6}.bs-n-7{--per:7}.bs-n-8{--per:8}
.bs-h-28{--bh:28px}.bs-h-32{--bh:32px}.bs-h-36{--bh:36px}.bs-h-40{--bh:40px}.bs-h-44{--bh:44px}.bs-h-48{--bh:48px}.bs-h-52{--bh:52px}.bs-h-56{--bh:56px}.bs-h-60{--bh:60px}.bs-h-64{--bh:64px}.bs-h-68{--bh:68px}.bs-h-72{--bh:72px}.bs-h-76{--bh:76px}.bs-h-80{--bh:80px}.bs-h-84{--bh:84px}.bs-h-88{--bh:88px}.bs-h-92{--bh:92px}.bs-h-96{--bh:96px}.bs-h-100{--bh:100px}
.brand-strip{--per-eff:var(--per)}
@media (max-width:1023px){.brand-strip{--per-eff:min(var(--per),3)}}
@media (max-width:600px){.brand-strip{--per-eff:min(var(--per),2)}.brand-strip .bs-item{padding:10px 8px}.brand-strip .bs-logo{height:max(var(--bh),60px)}.brand-strip .bs-logo img{max-height:max(var(--bh),60px)}}
.bs-viewport{flex:1;min-width:0;overflow:hidden}
.bs-track{display:flex;align-items:stretch}
.bs-item{flex:0 0 calc(100% / var(--per-eff));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 12px;text-decoration:none;color:inherit;box-sizing:border-box}
.bs-logo{display:grid;place-items:center;height:var(--bh);width:100%}
.bs-logo img{max-height:var(--bh);max-width:100%;width:auto;object-fit:contain;transition:filter .25s,opacity .25s,transform .25s}
.bs-name{font-size:13px;font-weight:600;text-align:center}
.bs-look-grey .bs-logo img{filter:grayscale(1);opacity:.7}
.bs-look-soft .bs-logo img{opacity:.55}
.bs-item:hover .bs-logo img,.bs-item:focus-visible .bs-logo img{filter:none;opacity:1;transform:scale(1.05)}
.bs-boxed .bs-item{padding:8px}
.bs-boxed .bs-logo{height:calc(var(--bh) + 28px);padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel,#fff);box-sizing:border-box}
:root[data-theme="dark"] .bs-boxed .bs-logo{background:#f4f5f6}
.bs-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.bs-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 16px;border:2px dashed var(--line);border-radius:var(--radius);text-align:center;color:var(--muted)}
.bs-empty b{color:var(--ink);font-size:16px}
.view-all{font-weight:600;color:var(--brand);text-decoration:none;white-space:nowrap}
.view-all:hover{text-decoration:underline}
/* continuous scroll: the track holds the logos twice and moves by half its width */
.bs-marquee .bs-track{width:max-content;animation:bs-marquee var(--bs-dur,40s) linear infinite}
.bs-marquee .bs-item{flex-basis:auto;width:calc((min(100vw, var(--wrap, 1200px)) - 48px) / var(--per-eff))}
.bs-speed-slow{--bs-dur:70s}.bs-speed-normal{--bs-dur:42s}.bs-speed-fast{--bs-dur:24s}
.bs-marquee:hover .bs-track,.bs-marquee:focus-within .bs-track,.bs-marquee.is-paused .bs-track{animation-play-state:paused}
@keyframes bs-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bs-marquee .bs-viewport{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bs-pause{position:absolute;right:0;bottom:-6px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:var(--ground);color:var(--ink);cursor:pointer;opacity:.6}
.bs-pause:hover,.bs-pause:focus-visible{opacity:1}
.bs-pause .i-play,.bs-marquee.is-paused .bs-pause .i-pause{display:none}
.bs-marquee.is-paused .bs-pause .i-play{display:block}
/* paged: slide moves the track; fade and zoom swap whole pages */
.bs-slide .bs-track{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.bs-fade .bs-track,.bs-zoom .bs-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% / var(--per-eff))}
.bs-fade .bs-item,.bs-zoom .bs-item{transition:opacity .6s ease,transform .6s ease}
.bs-fade .bs-item.is-off,.bs-zoom .bs-item.is-off{opacity:0;pointer-events:none;position:absolute;visibility:hidden}
.bs-zoom .bs-item.is-in{animation:bs-zoom-in .6s ease both}
.bs-fade .bs-item.is-in{animation:bs-fade-in .6s ease both}
@keyframes bs-zoom-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes bs-fade-in{from{opacity:0}to{opacity:1}}
.bs-arrow{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--ground);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s}
.bs-arrow:hover{border-color:var(--brand);color:var(--brand)}
.bs-arrow[disabled]{opacity:.35;cursor:default}
/* still grid */
.bs-static .bs-track{flex-wrap:wrap;justify-content:center}
@media (prefers-reduced-motion:reduce){.bs-marquee .bs-track{animation:none}.bs-marquee .bs-viewport{overflow-x:auto}.bs-slide .bs-track{transition:none}}
/* brand pages */
.brand-page-logo{display:block;max-height:80px;max-width:260px;object-fit:contain;margin:4px 0 10px}
.brand-about{max-width:70ch;margin-top:6px}
.by-brand{margin:6px 0 20px}
.by-brand a{display:inline-flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;font-size:15px}
.by-brand a:hover b{color:var(--brand)}
.by-brand img{height:48px;width:auto;max-width:170px;object-fit:contain}
@media (max-width:560px){.by-brand img{height:40px;max-width:140px}}
.brand-grid-store{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.brand-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:130px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel,#fff);text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.brand-tile:hover{border-color:var(--brand);transform:translateY(-2px)}
.brand-tile img{max-height:60px;max-width:100%;object-fit:contain}
.brand-tile-count{font-size:12px;color:var(--muted)}
:root[data-theme="dark"] .brand-tile{background:#f4f5f6;color:#1b1f1e}
/* Staff signed in as a customer */
.as-customer{position:sticky;top:0;z-index:200;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;padding:8px 16px;background:#ffd84d;color:#1b1f1e;font-size:14px;text-align:center}
.as-customer form{margin:0}
.as-customer button{padding:5px 12px;border:1px solid #1b1f1e;border-radius:999px;background:#1b1f1e;color:#fff;font:inherit;font-weight:700;cursor:pointer}
/* ---- Feature groups (the Features page) ---- */
.fg{--fg-accent:var(--brand)}
.fg-hero{position:relative;overflow:hidden;margin:8px 0 22px;padding:48px 40px;border-radius:calc(var(--radius) + 8px);background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--fg-accent) 28%,transparent) 0%,transparent 55%),linear-gradient(135deg,color-mix(in srgb,var(--fg-accent) 12%,var(--ground)) 0%,var(--soft) 100%);border:1px solid color-mix(in srgb,var(--fg-accent) 18%,var(--line))}
.fg-kicker{display:inline-block;margin:0 0 14px;padding:4px 12px;border-radius:999px;background:var(--fg-accent);color:var(--on-brand,#fff);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.fg-title{margin:0 0 12px;max-width:18ch;font-family:var(--heading-font,inherit);font-size:clamp(30px,4.6vw,52px);line-height:1.05;letter-spacing:-.02em}
.fg-intro{margin:0;max-width:62ch;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.fg-counts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.fg-counts span{padding:8px 14px;border-radius:999px;background:var(--ground);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.fg-counts b{margin-right:4px;font-size:18px;color:var(--ink)}
.fg-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:10px 0}
.fg-nav a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--ground);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.fg-nav a svg{color:var(--fg-accent)}
.fg-nav a:hover,.fg-nav a:focus-visible{border-color:var(--fg-accent);color:var(--fg-accent)}
.fg-groups{display:grid;gap:26px}
.fg-group{scroll-margin-top:90px;padding:26px;border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);background:var(--panel,var(--ground))}
.fg-group-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.fg-icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--fg-accent) 13%,transparent);color:var(--fg-accent)}
.fg-group-head h2{display:flex;align-items:center;gap:10px;margin:2px 0 4px;font-size:clamp(20px,2.2vw,26px)}
.fg-group-head p{margin:0;color:var(--muted)}
.fg-count{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:12px;font-weight:700}
.fg-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fg-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.fg-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.fg-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fg-item{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);transition:transform .2s,border-color .2s,box-shadow .2s}
.fg-item:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fg-accent) 45%,var(--line));box-shadow:0 10px 24px -18px rgba(0,0,0,.45)}
.fg-item div{display:flex;flex-direction:column;gap:3px;min-width:0}
.fg-item b{font-size:15px;line-height:1.35}
.fg-item span:not(.fg-new):not(.fg-tick){font-size:14px;line-height:1.5;color:var(--muted)}
.fg-tick{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:color-mix(in srgb,var(--fg-accent) 14%,transparent);color:var(--fg-accent)}
.fg-item.is-new{border-color:color-mix(in srgb,var(--accent2,#0062bd) 45%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--accent2,#0062bd) 7%,var(--ground)),var(--ground))}
.fg-item.is-new .fg-tick{background:var(--accent2,#0062bd);color:var(--on-accent2,#fff)}
.fg-new{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:var(--accent2,#0062bd);color:var(--on-accent2,#fff);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:2px}
.fg-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin:28px 0 8px;padding:26px 28px;border-radius:calc(var(--radius) + 6px);background:var(--fg-accent);color:var(--on-brand,#fff)}
.fg-cta p{margin:0;max-width:60ch;font-size:16px}
.fg-cta .btn-brand{background:var(--on-brand,#fff);color:var(--fg-accent);border-color:transparent}
@media (max-width:1100px){.fg-cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.fg-cols-3,.fg-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.fg-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.fg-nav a{padding:8px 10px;font-size:13px;white-space:normal;line-height:1.25;border-radius:12px}}
@media (max-width:600px){.fg-hero{padding:30px 20px}.fg-group{padding:18px 16px}.fg-items{grid-template-columns:minmax(0,1fr)!important}.fg-icon{width:44px;height:44px}.fg-cta{padding:22px 20px}}
@media (prefers-reduced-motion:reduce){.fg-item{transition:none}.fg-item:hover{transform:none}}
/* Brand logos in dark mode: most logos are made for light backgrounds, so give them a light tile (default),
   turn them white, or leave them (for logos made for dark backgrounds) */
:root[data-theme="dark"] .bs-dark-tiles .bs-logo{height:calc(var(--bh) + 24px);padding:12px 16px;border-radius:var(--radius);background:#eef0f2;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 18px -10px rgba(0,0,0,.6);box-sizing:border-box}
:root[data-theme="dark"] .bs-dark-tiles.bs-look-grey .bs-logo img{opacity:.8}
:root[data-theme="dark"] .bs-dark-tiles .bs-item:hover .bs-logo,:root[data-theme="dark"] .bs-dark-tiles .bs-item:focus-visible .bs-logo{background:#fff}
:root[data-theme="dark"] .bs-dark-white .bs-logo img,:root[data-theme="dark"] .bs-dark-white .bs-item:hover .bs-logo img{filter:brightness(0) invert(1);opacity:.72}
:root[data-theme="dark"] .bs-dark-white .bs-item:hover .bs-logo img,:root[data-theme="dark"] .bs-dark-white .bs-item:focus-visible .bs-logo img{opacity:1}
:root[data-theme="dark"] .bs-marquee .bs-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
:root[data-theme="dark"] .bs-name{color:var(--ink)}
:root[data-theme="dark"] .bs-pause,:root[data-theme="dark"] .bs-arrow{background:#1b2024;border-color:#34404a;color:#e8ebee}
:root[data-theme="dark"] .by-brand img{padding:6px 10px;border-radius:8px;background:#eef0f2;box-sizing:content-box;height:40px}
:root[data-theme="dark"] .brand-page-logo{padding:12px 18px;border-radius:var(--radius);background:#eef0f2}
/* Brand logos: more speeds, greyscale always, and a size per logo */
.bs-speed-slowest{--bs-dur:100s}.bs-speed-fastest{--bs-dur:14s}
.bs-look-mono .bs-logo img,.bs-look-mono .bs-item:hover .bs-logo img,.bs-look-mono .bs-item:focus-visible .bs-logo img{filter:grayscale(1);opacity:.75}
.bs-look-mono .bs-item:hover .bs-logo img{opacity:1}
.bs-s-sm .bs-logo img{max-height:calc(var(--bh) * .72);max-width:80%}
.bs-s-lg .bs-logo{height:calc(var(--bh) * 1.3)}
.bs-s-lg .bs-logo img{max-height:calc(var(--bh) * 1.3)}
:root[data-theme="dark"] .bs-dark-tiles .bs-s-lg .bs-logo{height:calc(var(--bh) * 1.3 + 24px)}
span.bs-item{cursor:default}
/* Header cart: a neat pill with the icon, count badge and total; "Empty" when there's nothing in it */
.nc-cart{gap:10px;padding:4px 16px 4px 4px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--ground);transition:border-color .2s,background .2s,box-shadow .2s}
.nc-cart:hover,.nc-cart:focus-visible{border-color:var(--brand);box-shadow:0 6px 18px -12px color-mix(in srgb,var(--brand) 70%,transparent)}
.nc-cart .nc-cart-icon{width:42px;height:42px;background:color-mix(in srgb,var(--brand) 12%,var(--ground));color:var(--brand);transition:background .2s,color .2s}
.nc-cart:hover .nc-cart-icon{background:var(--brand);color:var(--on-brand,#fff)}
.nc-cart .cart-count{min-width:20px;height:20px;padding:0 5px;border-radius:999px;font-size:11px;font-weight:800;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--ground)}
.cart-count[hidden]{display:none!important}
.nc-cart-text small{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.nc-cart-text b{font-size:15px;font-variant-numeric:tabular-nums}
.nc-cart.is-empty .nc-cart-icon{background:var(--soft);color:var(--muted)}
.nc-cart.is-empty .nc-cart-text b{font-weight:600;color:var(--muted)}
.nc-cart.no-total{padding:0;border-color:transparent;background:none}
.nc-cart.no-total:hover{box-shadow:none}
/* Header account as a button like the cart (Header → Account icon style); icon only where the cart text hides */
.nc-acct{position:relative;display:flex;align-items:center;gap:10px;padding:4px 16px 4px 4px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--ground);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.nc-acct:hover,.nc-acct:focus-visible{border-color:var(--brand);box-shadow:0 6px 18px -12px color-mix(in srgb,var(--brand) 70%,transparent)}
.nc-acct .nc-cart-icon{width:42px;height:42px;background:color-mix(in srgb,var(--brand) 12%,var(--ground));color:var(--brand);transition:background .2s,color .2s}
.nc-acct:hover .nc-cart-icon{background:var(--brand);color:var(--on-brand,#fff)}
@media (max-width:980px){.nc-acct{padding:0;border-color:transparent;background:none}.nc-acct:hover{box-shadow:none}}
/* Header account as a clear "Sign in" button (Header → Account icon style); outline once signed in, icon only on phones */
.signin-btn{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:42px;padding:0 18px 0 14px;border:2px solid var(--brand);border-radius:999px;background:var(--brand);color:var(--on-brand,#fff);font-weight:700;font-size:15px;line-height:1;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.signin-btn:hover,.signin-btn:focus-visible{box-shadow:0 8px 20px -10px color-mix(in srgb,var(--brand) 80%,transparent);transform:translateY(-1px);color:var(--on-brand,#fff)}
.signin-btn.is-in{background:transparent;color:var(--brand)}
.signin-btn.is-in:hover,.signin-btn.is-in:focus-visible{background:var(--brand);color:var(--on-brand,#fff)}
.signin-btn svg{flex:none}
@media (max-width:640px){.signin-btn{width:40px;min-height:40px;padding:0;justify-content:center}.signin-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.nc-cart.is-bumped .nc-cart-icon{animation:cart-bump .5s ease}
.nc-cart.is-bumped .cart-count{animation:cart-pop .45s ease}
@keyframes cart-bump{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes cart-pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (max-width:980px){.nc-cart{padding:0;border-color:transparent;background:none}.nc-cart:hover{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.nc-cart.is-bumped .nc-cart-icon,.nc-cart.is-bumped .cart-count{animation:none}}

/* ---- Page builder product grid: the chosen columns on a computer, fewer on tablets, 1 or 2 on phones ---- */
.grid.pg-grid{grid-template-columns:repeat(var(--pg-cols,4),minmax(0,1fr))}
.pg-c-2{--pg-cols:2}.pg-c-3{--pg-cols:3}.pg-c-4{--pg-cols:4}.pg-c-5{--pg-cols:5}.pg-c-6{--pg-cols:6}
/* 6 columns go to 3 on tablets (not 4), so 6 or 12 products fill whole rows with no empty slots */
@media (max-width:1100px){.pg-c-5{--pg-cols:4}.pg-c-6{--pg-cols:3}}
@media (max-width:860px){.pg-c-4,.pg-c-5,.pg-c-6{--pg-cols:3}}
@media (max-width:560px){.grid.pg-grid{gap:20px 12px}.pg-grid.pg-m-2{--pg-cols:2}.pg-grid.pg-m-1{--pg-cols:1;gap:28px}}

/* ---- Second picture on hover (product cards). Only with a mouse; calmer when less motion is asked for ---- */
.card-img.has-alt a{position:relative;display:block;width:100%;height:100%}
.card-img .card-img2{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--img-fit,cover);background:var(--img-bg,var(--soft));opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .card-img.has-alt img{transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  .card:hover .has-alt img{transform:none} /* replaces the plain zoom; the effects below outrank it */
  /* Cross-fade */
  .card:hover .hov-fade .card-img2,.card:focus-within .hov-fade .card-img2{opacity:1}
  /* Fade and zoom */
  .hov-zoom .card-img2{transform:scale(1.12)}
  .card:hover .hov-zoom .card-img2,.card:focus-within .hov-zoom .card-img2{opacity:1;transform:scale(1)}
  .card:hover .hov-zoom .card-img1{transform:scale(1.06)}
  /* Slide across: the second picture pushes the first out to the left */
  .hov-slide .card-img2{opacity:1;transform:translateX(100%)}
  .card:hover .hov-slide .card-img2,.card:focus-within .hov-slide .card-img2{transform:translateX(0)}
  .card:hover .hov-slide .card-img1,.card:focus-within .hov-slide .card-img1{transform:translateX(-100%)}
  /* Slide up */
  .hov-rise .card-img2{opacity:1;transform:translateY(100%)}
  .card:hover .hov-rise .card-img2,.card:focus-within .hov-rise .card-img2{transform:translateY(0)}
  .card:hover .hov-rise .card-img1,.card:focus-within .hov-rise .card-img1{transform:translateY(-30%);opacity:.4}
  /* Flip over */
  .card-img.hov-flip{perspective:900px;overflow:visible}
  .hov-flip a{transform-style:preserve-3d}
  .hov-flip img{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);transition:transform .6s cubic-bezier(.3,.7,.2,1)}
  .hov-flip .card-img2{opacity:1;transform:rotateY(180deg)}
  .card:hover .hov-flip .card-img1,.card:focus-within .hov-flip .card-img1{transform:rotateY(-180deg)}
  .card:hover .hov-flip .card-img2,.card:focus-within .hov-flip .card-img2{transform:rotateY(0)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  .card-img.has-alt img{transition:opacity .3s ease;transform:none!important}
  .card-img.has-alt .card-img2{transform:none!important;opacity:0}
  .card:hover .card-img.has-alt .card-img2,.card:focus-within .card-img.has-alt .card-img2{opacity:1}
  .card:hover .card-img.has-alt .card-img1{opacity:1}
}

/* ---- Trust blocks (Features section): three more styles ---- */
/* Soft cards: each block on its own card, icon on a tinted tile */
.features-tiles{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.features-tiles .feature{gap:8px;padding:22px 22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:transform .2s,box-shadow .2s,border-color .2s}
.features-tiles .feature:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 40%,var(--line));box-shadow:0 12px 26px -16px rgba(0,0,0,.28)}
.features-tiles .feature svg{width:50px;height:50px;padding:12px;margin-bottom:6px;border-radius:14px;background:color-mix(in srgb,var(--brand) 12%,transparent)}
.features-tiles .feature b{font-size:17px}
/* Round icon badges: big filled circles, centred */
.features-badges{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px 22px;text-align:center}
.features-badges .feature{align-items:center;gap:8px}
.features-badges .feature svg{width:76px;height:76px;padding:21px;margin-bottom:8px;border-radius:50%;background:var(--brand);color:var(--on-brand,#fff);box-shadow:0 0 0 7px color-mix(in srgb,var(--brand) 15%,transparent)}
.features-badges .feature b{font-size:17px}
.features-badges .feature span{max-width:30ch}
/* Slim bar: compact, one line each, divided */
.features-bar{display:flex;flex-wrap:wrap;gap:0;border-block:1px solid var(--line)}
.features-bar .feature{flex:1 1 210px;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;row-gap:1px;align-items:center;padding:14px 20px;border-left:1px solid var(--line)}
.features-bar .feature:first-child{border-left:0}
.features-bar .feature svg{width:30px;height:30px;grid-row:1/3}
.features-bar .feature b{font-size:14px;line-height:1.3}
.features-bar .feature span{font-size:13px;line-height:1.35}
@media (max-width:560px){
  .features-tiles{grid-template-columns:1fr 1fr;gap:10px}.features-tiles .feature{padding:16px}.features-tiles .feature svg{width:42px;height:42px;padding:10px}
  .features-badges{grid-template-columns:1fr 1fr;gap:22px 12px}.features-badges .feature svg{width:60px;height:60px;padding:16px}
  .features-bar .feature{flex-basis:100%;border-left:0;border-top:1px solid var(--line);padding:12px 4px}.features-bar .feature:first-child{border-top:0}
}
/* On a brand-coloured or dark section background */
.scheme-brand .features-tiles .feature,.scheme-dark .features-tiles .feature{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.scheme-brand .features-tiles .feature svg,.scheme-dark .features-tiles .feature svg{background:rgba(255,255,255,.14)}
.scheme-brand .features-badges .feature svg{background:rgba(255,255,255,.18);color:inherit;box-shadow:0 0 0 7px rgba(255,255,255,.1)}
.scheme-brand .features-bar,.scheme-brand .features-bar .feature,.scheme-dark .features-bar,.scheme-dark .features-bar .feature{border-color:rgba(255,255,255,.2)}

/* ---- Full width (edge to edge): picture sections run to the screen edges with square outer corners;
   text and product sections keep a small gutter so words never touch the edge ---- */
.sec-w-full:is(.sec-hero,.sec-hero_slider,.sec-promo_banners,.sec-html_banner)>.wrap{max-width:none;padding-inline:0}
.sec-w-full .hero-set .hero2,.sec-w-full .hs-slider,.sec-w-full .hs-promo,.sec-w-full .promo-row .promo,.sec-w-full .hero-tiles .promo,.sec-w-full .html-banner img{border-radius:0}
.sec-w-full .hs-depts{border-left:0}

/* ---- Product page layout (Theme > Product page): picture size, thumbnails on the left, tabs in a column ---- */
.product.pp-img-small{grid-template-columns:minmax(0,.75fr) minmax(0,1fr)}
.product.pp-img-large{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px}
.gallery{min-width:0}
.gallery-media.thumbs-left{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:start}
.thumbs-left .gallery-main{grid-column:2;grid-row:1}
.thumbs-left .thumbs{grid-column:1;grid-row:1;flex-direction:column;flex-wrap:nowrap;gap:10px;margin-top:0;height:0;min-height:100%;overflow-y:auto;scrollbar-width:thin}
.thumbs-left .thumb-btn{flex:none;width:100%;height:auto;aspect-ratio:var(--img-ratio,1/1)}
.ptabs-in{margin-top:32px;padding-top:4px;border-top:1px solid var(--line)}
.ptabs-in .ptabs-panel{max-width:none}
@media (max-width:860px){
  .product.pp-img-small,.product.pp-img-large{grid-template-columns:1fr;gap:28px}
  /* Phones and tablets: pictures, then the buy box, then tabs placed under the pictures */
  .product{display:flex;flex-direction:column;align-items:stretch;gap:28px} /* stretch: a bundle's parts list must not widen the buy box past the screen */
  .product .buy{min-width:0}
  .product .gallery{display:contents}
  .product .gallery-media{order:1}.product .buy{order:2}.product .gallery>.ptabs-in{order:3;margin-top:0}
}
@media (max-width:560px){
  .gallery-media.thumbs-left{display:block}
  .thumbs-left .thumbs{flex-direction:row;height:auto;min-height:0;margin-top:12px;overflow-x:auto}
  .thumbs-left .thumb-btn{width:72px;height:72px;aspect-ratio:auto}
}
/* "Themes" menu (page builder → Header) and the bar shown while a visitor tries a theme */
.tm-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:0;box-shadow:0 0 0 2px var(--ground),0 0 0 3px var(--line)}
.tm-neon{background:#cc1414}.tm-stoep{background:#6b4fa0}.tm-karoo{background:#a4471f}.tm-coastal{background:#1f6f8b}.tm-harbour{background:#0a6fd6}
.theme-menu .menu-drop a[aria-current="true"]{font-weight:700}
.tm-now{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-left:6px}
.theme-link{white-space:nowrap}
.theme-link .tm-dot{margin-right:5px}
/* The demo links make the menu bar long: a little less space between items keeps it on one row. */
.nc-links:has(.theme-link),.nc-nav-row:has(.hb-menu) .nc-links:has(.theme-link){column-gap:14px}
@media (max-width:1400px){.nc-links:has(.theme-link),.nc-nav-row:has(.hb-menu) .nc-links:has(.theme-link){column-gap:12px}.theme-link .tm-dot{display:none}}
.theme-link[aria-current="true"]{font-weight:700}
.tm-note{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-left:22px;line-height:1.3}
.theme-menu .tm-back{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;font-size:14px}
.try-bar{background:var(--ink);color:var(--ground);text-align:center;font-size:14px;padding:8px 16px}
.try-bar a{color:inherit;font-weight:700;margin-left:6px}
:root{--b:"c1d0986903477c5a"}

/* ---- Customer reviews section (page builder) and replies on the product page ---- */
.rvs-head{align-items:flex-end;flex-wrap:wrap}
.rvs-summary{margin:0;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rvs-summary .stars{font-size:18px}
.rvs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.rvs-card{margin:0;padding:22px;border-radius:var(--radius);display:flex;flex-direction:column;gap:10px;min-width:0;height:100%}
.rvs-card .stars{font-size:17px}
.rvs-card blockquote{margin:0;flex:1}
.rvs-card blockquote p{margin:0;line-height:1.55;color:var(--ink)}
.rvs-title{display:block;font-family:var(--heading-font);font-size:17px;margin-bottom:6px}
.rvs-card figcaption{display:flex;flex-direction:column;gap:10px;font-size:14px}
.rvs-verified{display:inline-flex;align-items:center;gap:3px;margin-left:4px;font-size:12px;font-weight:600;color:#1e8e3e}
.rvs-product{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--line);text-decoration:none;color:var(--muted);font-size:13px}
.rvs-product:hover span{color:var(--brand);text-decoration:underline}
.rvs-product img{width:40px;height:40px;border-radius:6px;object-fit:var(--img-fit,cover);background:var(--img-bg,var(--soft));flex:none}
.rvs-cards .rvs-card{background:var(--panel);border:1px solid var(--line)}
.rvs-soft .rvs-card{background:color-mix(in srgb,var(--brand) 7%,var(--ground));border:1px solid transparent}
.rvs-plain .rvs-card{padding:6px 4px;position:relative}
.rvs-plain .rvs-card blockquote{padding-left:34px;position:relative}
.rvs-plain .rvs-card blockquote::before{content:"\201C";position:absolute;left:0;top:-14px;font-family:Georgia,serif;font-size:60px;line-height:1;color:var(--brand);opacity:.55}
.scheme-brand .rvs-card,.scheme-dark .rvs-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.scheme-brand .rvs-card blockquote p,.scheme-dark .rvs-card blockquote p,.scheme-brand .rvs-product,.scheme-dark .rvs-product{color:inherit}
.theme-neon .rvs-card{border-radius:0}
:root[data-theme="dark"] .rvs-verified{color:#6cc49a}
.review-reply{margin-top:10px;padding:10px 12px;border-left:3px solid var(--brand);background:var(--soft);border-radius:0 6px 6px 0;font-size:14px}
.review-reply p{margin:4px 0 0}

/* Google reviews section: cards, speech bubbles, spotlight (one at a time) and a wall */
.gr-head{align-items:flex-end;flex-wrap:wrap;gap:10px 20px}
.gr-badge{margin:0;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:15px;color:var(--ink)}
.gr-badge b{font-size:18px}
.gr-word{font-weight:700;letter-spacing:-.2px}
.gr-count{color:var(--muted);font-size:14px}
.gr-stars{color:#f5a400;letter-spacing:1px;font-size:17px;white-space:nowrap}
.gr-stars-off{color:var(--line)}
.gr-card{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0;height:100%}
.gr-card blockquote{margin:0;flex:1}
.gr-card p{margin:0;line-height:1.6;overflow-wrap:anywhere}
.gr-card figcaption{display:flex;align-items:center;gap:12px;min-width:0}
.gr-avatar{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:18px;color:#fff;background:#3b6fd4}
.gr-av-1{background:#c2410c}.gr-av-2{background:#15803d}.gr-av-3{background:#7e3fb8}.gr-av-4{background:#b4256a}.gr-av-5{background:#0e7490}
.gr-person{display:flex;flex-direction:column;min-width:0;font-size:15px;line-height:1.3}
.gr-person b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-when{color:var(--muted);font-size:13px}
.gr-cta{margin:24px 0 0;text-align:center}
.gr-cta .btn-outline{display:inline-block;text-decoration:none;color:var(--ink)}
.gr-cta .btn-outline:hover{background:var(--ink);color:var(--ground)}
.gr-cards .gr-card,.gr-wall .gr-card{padding:22px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.04)}
.gr-bubbles .gr-card{gap:18px}
.gr-bubble{position:relative;padding:20px 22px;border-radius:18px;background:color-mix(in srgb,var(--brand) 9%,var(--ground));display:flex;flex-direction:column;gap:10px}
.gr-bubble::after{content:"";position:absolute;left:28px;bottom:-10px;width:20px;height:20px;background:inherit;transform:rotate(45deg);border-radius:0 0 4px 0}
.gr-bubbles figcaption{padding-left:16px}
.gr-one .car-track{--per:1}
.gr-spotlight .gr-card{align-items:center;text-align:center;gap:18px;max-width:760px;margin:0 auto;padding:10px 44px}
.gr-spotlight .gr-stars{font-size:24px}
.gr-spotlight blockquote{flex:none}
.gr-spotlight blockquote p{font-family:var(--heading-font);font-size:clamp(19px,2.4vw,26px);line-height:1.45}
.gr-spotlight figcaption{text-align:left}
.gr-wall{columns:3 280px;column-gap:20px}
.gr-wall .gr-card{height:auto;break-inside:avoid;margin-bottom:20px}
.scheme-brand .gr-cards .gr-card,.scheme-dark .gr-cards .gr-card,.scheme-brand .gr-wall .gr-card,.scheme-dark .gr-wall .gr-card,.scheme-brand .gr-bubble,.scheme-dark .gr-bubble,.scheme-brand .gr-badge,.scheme-dark .gr-badge{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:inherit}
.scheme-brand .gr-when,.scheme-dark .gr-when,.scheme-brand .gr-count,.scheme-dark .gr-count{color:inherit;opacity:.75}
.scheme-brand .gr-stars-off,.scheme-dark .gr-stars-off{color:rgba(255,255,255,.3)}
.scheme-brand .gr-cta .btn-outline,.scheme-dark .gr-cta .btn-outline{color:inherit;border-color:currentColor}
.theme-neon .gr-card,.theme-neon .gr-bubble{border-radius:0}
@media (max-width:600px){.gr-spotlight .gr-card{padding:6px 8px}.gr-badge{padding:7px 12px;font-size:14px}}

/* WhatsApp button */
.wa{position:fixed;bottom:calc(18px + var(--tk-b,0px));z-index:45;display:flex;flex-direction:column;gap:10px;--wa-bg:#25d366;--wa-ink:#06301a}
.wa-right{right:18px;align-items:flex-end}
.wa-left{left:18px;align-items:flex-start}
.wa-c-brand{--wa-bg:var(--brand);--wa-ink:var(--on-brand)}
.wa-c-dark{--wa-bg:#16181d;--wa-ink:#fff}
.wa-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:54px;height:54px;border-radius:999px;background:var(--wa-bg);color:var(--wa-ink);text-decoration:none;font:700 15px var(--font);box-shadow:0 8px 22px rgba(0,0,0,.24);transition:transform .15s,filter .15s}
.wa-link:hover{transform:translateY(-2px);filter:brightness(1.06)}
.wa-link:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wa-link svg{flex:none}
.wa-pill .wa-link{padding:0 20px 0 15px}
.wa-link span{white-space:nowrap}
.wa-greet{position:relative;max-width:min(250px,calc(100vw - 36px));padding:12px 34px 12px 14px;border-radius:14px;background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.16);font-size:14px;line-height:1.4}
.wa-greet p{margin:0}
.wa-greet-x{position:absolute;top:4px;right:4px;width:26px;height:26px;border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;border-radius:50%}
.wa-greet-x:hover{color:var(--ink)}
.wa-tab{bottom:auto;top:50%;transform:translateY(-50%)}
.wa-tab.wa-right{right:0}.wa-tab.wa-left{left:0}
.wa-tab .wa-link{writing-mode:vertical-rl;height:auto;min-width:0;width:44px;padding:14px 0;gap:8px;font-size:14px;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.wa-tab.wa-right .wa-link{border-radius:12px 0 0 12px}
.wa-tab.wa-left .wa-link{border-radius:0 12px 12px 0}
.wa-tab .wa-link:hover{transform:none}
.wa-tab .wa-link svg{width:22px;height:22px}
/* Make room: back-to-top and the staff Edit button sit above a button on the right */
body:has(.wa-right:not(.wa-tab)) .to-top{bottom:calc(84px + var(--tk-b,0px))}
body:has(.wa-right:not(.wa-tab)) .edit-fab{bottom:calc(84px + var(--tk-b,0px))}
body:has(.wa-right:not(.wa-tab)) .edit-fab ~ .to-top{bottom:calc(144px + var(--tk-b,0px))}
@media (min-width:861px){.wa-mobile{display:none}
  body:has(.wa-right.wa-mobile) .to-top,body:has(.wa-right.wa-mobile) .edit-fab{bottom:calc(18px + var(--tk-b,0px))}
  body:has(.wa-right.wa-mobile) .edit-fab ~ .to-top{bottom:calc(78px + var(--tk-b,0px))}}
@media (max-width:860px){
  .wa{bottom:calc(14px + var(--tk-b,0px))}.wa-right{right:14px}.wa-left{left:14px}
  .wa-link{min-width:50px;height:50px}
  .wa-tab{bottom:auto}.wa-tab.wa-right{right:0}.wa-tab.wa-left{left:0}
  body:has(.wa-right:not(.wa-tab)) .to-top{bottom:calc(74px + var(--tk-b,0px))}
  body:has(.compare-bar:not([hidden])) .wa:not(.wa-tab){bottom:calc(76px + var(--tk-b,0px))}
  body:has(.compare-bar:not([hidden])):has(.wa-right:not(.wa-tab)) .to-top{bottom:calc(136px + var(--tk-b,0px))}
}
@media (prefers-reduced-motion:reduce){.wa-link{transition:none}}
@media print{.wa{display:none}}

/* Footer: the owner's own HTML (page builder → Edit footer) */
.nc-foot-html{margin-bottom:12px;overflow-wrap:anywhere}
.nc-foot-html p{margin:0 0 10px}
.nc-foot-html a,.foot-html a{color:inherit;text-decoration:underline}
.nc-foot-html img,.foot-html img{max-width:100%;height:auto}
.foot-html{padding-block:6px 22px;overflow-wrap:anywhere}
.foot-html-center{text-align:center}
.foot-html-right{text-align:right}

/* Product page: the rating sits on its own line, above the price */
.rating-line{display:flex;width:fit-content;max-width:100%;flex-wrap:wrap}
p.price.pr{display:flex;margin-top:10px}
.foot-copy p{display:inline;margin:0}
.foot-copy a{color:inherit;text-decoration:underline}
.foot-copy img{max-height:40px;width:auto;vertical-align:middle}

/* Text section: width choices, and the optional side column */
.text-sec.tw-full .text-col,.text-sec.tw-full .rte p{max-width:none}
/* FAQs use the whole page width; and a Text or FAQ section set to "Full width" really goes edge to edge. */
.sec-faq .text-sec .text-col{max-width:none}
.sec-w-full .text-sec .text-col,.sec-w-full .text-sec .rte p{max-width:none}
.text-sec.tw-wide .text-col{max-width:1040px}
.text-sec.tw-wide .rte p{max-width:none}
.text-sec.has-side{display:grid;grid-template-columns:minmax(0,1fr) var(--side-w);gap:clamp(24px,4vw,56px);align-items:start}
.text-sec.side-left{grid-template-columns:var(--side-w) minmax(0,1fr)}
.text-sec.side-left .text-side{order:-1}
.text-sec.side-w-narrow{--side-w:260px}.text-sec.side-w-medium{--side-w:340px}.text-sec.side-w-wide{--side-w:420px}
.text-sec.has-side .text-col{max-width:none}
.text-sec.has-side.tw-readable .text-col{max-width:820px}
.text-sec.has-side.align-center .text-col{margin-inline:0}
.text-side{display:flex;flex-direction:column;gap:18px;min-width:0;text-align:left}
.text-side.is-sticky{position:sticky;top:24px}
.side-item{min-width:0;overflow-wrap:anywhere}
.side-boxed .side-item{padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.side-boxed .side-item.side-image,.side-boxed .side-item.side-video{padding:0;border:0;background:none}
.side-item h3{font-size:18px;margin:0 0 10px}
.side-item figure{margin:0}
.side-item img{width:100%;height:auto;border-radius:var(--radius);display:block}
.side-item figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.side-item .rte p{max-width:none}
.side-item .rte p:last-child{margin-bottom:0}
.side-item .btn-brand{display:inline-block;margin-top:10px;text-decoration:none}
.side-contact{display:flex;flex-direction:column;gap:4px;margin:8px 0 0}
.side-contact a{color:inherit}
.scheme-brand .side-boxed .side-item,.scheme-dark .side-boxed .side-item{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.scheme-brand .side-item figcaption,.scheme-dark .side-item figcaption{color:inherit;opacity:.8}
.theme-neon .side-boxed .side-item{border-radius:0}
@media (max-width:860px){.text-sec.has-side,.text-sec.side-left{grid-template-columns:minmax(0,1fr)}.text-sec.side-left .text-side{order:0}.text-side.is-sticky{position:static}}
/* Footer newsletter: the button sits inside the field as its own pill, in the store's font */
.nc-foot-nl{align-items:center;gap:4px;padding:4px}
.nc-foot-nl input[type=email]{padding:10px 12px 10px 14px}
.nc-foot-nl button{font:inherit;font-size:15px;font-weight:700;line-height:1.2;min-height:42px;padding:10px 22px;border-radius:999px;white-space:nowrap;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 2px 8px rgba(0,0,0,.25);transition:filter .15s,transform .15s}
.nc-foot-nl button:hover{filter:brightness(1.18)}
.nc-foot-nl button:active{transform:scale(.97)}
.nc-foot-nl button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.nc-foot-nl button{transition:none}}.demo-bar a{color:inherit;font-weight:700;text-decoration:underline;margin-left:4px}

/* Picture sizes the owner sets (Theme → Product page): extra product pictures, and the cart and checkout */
.thumb-btn{width:var(--pp-thumb,72px);height:var(--pp-thumb,72px)}
.gallery-media.thumbs-left{grid-template-columns:calc(var(--pp-thumb,72px) + 12px) minmax(0,1fr)}
.cart-line{grid-template-columns:var(--cart-thumb,80px) 1fr auto auto}
.cart-img img,.cart-img .card-ph{width:var(--cart-thumb,80px);height:var(--cart-thumb,80px);font-size:calc(var(--cart-thumb,80px) * .35)}
.mini-item .mini-img{width:calc(var(--cart-thumb,80px) * .55);height:calc(var(--cart-thumb,80px) * .55)}
.qv-added-item img{width:calc(var(--cart-thumb,80px) * .9);height:calc(var(--cart-thumb,80px) * .9)}
@media (max-width:560px){
  .cart-line{grid-template-columns:calc(var(--cart-thumb,80px) * .8) 1fr}
  .cart-img img,.cart-img .card-ph{width:calc(var(--cart-thumb,80px) * .8);height:calc(var(--cart-thumb,80px) * .8)}
  .thumbs-left .thumb-btn{width:var(--pp-thumb,72px);height:var(--pp-thumb,72px)}
}
/* "Download our price list" on the All products page */
.pl-download{margin:6px 0 0;font-size:14px}
.pl-download a{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;text-decoration:none}
.pl-download a:hover{text-decoration:underline}
/* Hero promo tiles: editable text, backgrounds and pictures; beside the slider or in a row under it */
.hs-promo-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;max-width:62%}
.hs-promo:not(.has-pic) .hs-promo-copy{max-width:none}
.hs-promo-copy .hs-promo-title{max-width:none}
.hs-promo-sub{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.hs-promo img.bb-img{inset:0;right:auto;bottom:auto;width:100%;height:100%;aspect-ratio:auto;border-radius:0;opacity:1;object-fit:cover}
.hs-promo:hover img.bb-img{transform:scale(1.04)}
.hs-promo.bb-photo .hs-promo-copy,.hs-promo.bb-tinted .hs-promo-copy{text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hs-promos-2{grid-template-rows:repeat(2,1fr)}
.hs-promos-1{grid-template-rows:1fr}
.hs.promos-below{grid-template-columns:minmax(0,1fr)}
.hs.with-depts.promos-below{grid-template-columns:260px minmax(0,1fr)}
.hs.promos-below .hs-promos{grid-column:1/-1;grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
.hs.promos-below .hs-promos-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hs.promos-below .hs-promos-1{grid-template-columns:minmax(0,1fr)}
.hs.promos-below .hs-promo{min-height:150px;padding:20px 24px}
.hs.promos-below .hs-promo-title{font-size:21px}
@media (max-width:1100px){.hs.with-depts.promos-below{grid-template-columns:230px minmax(0,1fr)}}
@media (max-width:860px){.hs.with-depts.promos-below{grid-template-columns:1fr}.hs.promos-below .hs-promo{min-height:120px}}

/* Cookie notice (Store features): bar, card, slim strip or one quiet line; dark, light or brand */
.cookie{position:fixed;z-index:70;display:flex;align-items:center;gap:10px 14px;font-size:14px;line-height:1.45;
  --ck-bg:#16181d;--ck-ink:#f2f4f6;--ck-ok:#ffffff;--ck-ok-ink:#16181d;--ck-line:rgba(255,255,255,.28);
  background:var(--ck-bg);color:var(--ck-ink);box-shadow:0 10px 30px rgba(0,0,0,.22);transition:opacity .2s,transform .2s}
.cookie-c-light{--ck-bg:#ffffff;--ck-ink:#1b1f23;--ck-ok:var(--brand);--ck-ok-ink:var(--on-brand);--ck-line:rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.08)}
.cookie-c-brand{--ck-bg:var(--brand);--ck-ink:var(--on-brand);--ck-ok:var(--on-brand);--ck-ok-ink:var(--brand);--ck-line:color-mix(in srgb,var(--on-brand) 40%,transparent)}
.cookie.is-gone{opacity:0;transform:translateY(10px)}
.cookie-text{margin:0;flex:1 1 auto;min-width:0}
.cookie-text a{color:inherit;text-decoration:underline;white-space:nowrap}
.cookie-actions{display:flex;gap:8px;flex:none}
.cookie-btn{font:inherit;font-weight:700;font-size:14px;border:0;border-radius:var(--btn-radius,8px);padding:8px 18px;cursor:pointer;background:var(--ck-ok);color:var(--ck-ok-ink)}
.cookie-btn:hover{filter:brightness(1.08)}
.cookie-btn:focus-visible{outline:2px solid var(--ck-ink);outline-offset:2px}
.cookie-no{background:transparent;color:var(--ck-ink);box-shadow:inset 0 0 0 1px var(--ck-line)}
/* Bar */
.cookie-bar{left:0;right:0;bottom:var(--tk-b,0px);justify-content:center;padding:12px max(16px,calc((100vw - var(--wrap,1200px)) / 2 + 24px));box-shadow:0 -6px 24px rgba(0,0,0,.14)}
.cookie-bar .cookie-text{flex:0 1 auto}
body.has-cookie-bar .wa,body.has-cookie-bar .to-top,body.has-cookie-bar .compare-bar,body.has-cookie-bar .edit-fab{margin-bottom:var(--ck-h,64px)}
@media (max-width:860px){body.has-cookie-note .wa:not(.wa-tab),body.has-cookie-note .to-top,body.has-cookie-note .compare-bar,body.has-cookie-note .edit-fab{margin-bottom:var(--ck-h,64px)}}
/* Card */
.cookie-card{bottom:calc(18px + var(--tk-b,0px));width:min(360px,calc(100vw - 32px));flex-direction:column;align-items:stretch;padding:16px 18px;border-radius:12px}
.cookie-card .cookie-actions{justify-content:flex-end}
/* Slim strip */
.cookie-pill{bottom:calc(16px + var(--tk-b,0px));max-width:min(600px,calc(100vw - 32px));padding:7px 7px 7px 18px;border-radius:999px;font-size:13px}
.cookie-pill .cookie-btn{padding:6px 14px;font-size:13px;border-radius:999px}
/* One quiet line */
.cookie-tiny{bottom:calc(10px + var(--tk-b,0px));max-width:calc(100vw - 24px);padding:6px 10px;border-radius:6px;font-size:12px;gap:8px;box-shadow:0 4px 14px rgba(0,0,0,.14);background:color-mix(in srgb,var(--ck-bg) 92%,transparent)}
.cookie-tiny .cookie-btn{background:none;color:inherit;padding:2px 4px;font-size:12px;text-decoration:underline;box-shadow:none}
/* Where it sits */
.cookie-card.cookie-left,.cookie-pill.cookie-left,.cookie-tiny.cookie-left{left:18px}
.cookie-card.cookie-right,.cookie-pill.cookie-right,.cookie-tiny.cookie-right{right:18px}
.cookie-card.cookie-center,.cookie-pill.cookie-center,.cookie-tiny.cookie-center{left:50%;transform:translateX(-50%)}
.cookie-card.cookie-center.is-gone,.cookie-pill.cookie-center.is-gone,.cookie-tiny.cookie-center.is-gone{transform:translate(-50%,10px)}
@media (max-width:560px){
  .cookie-card,.cookie-pill{left:12px!important;right:12px!important;width:auto;max-width:none;transform:none!important}
  .cookie-pill{border-radius:14px;padding:10px 10px 10px 14px}
  .cookie-bar{flex-wrap:wrap;padding:12px 16px}
  .cookie-bar .cookie-actions{width:100%;justify-content:flex-end}
}
@media print{.cookie{display:none}}
/* Header button (Header → Header button): a pill with an icon, the text and an optional highlight tag,
   at the right end of the menu bar or beside the icons; phones get their own copy under the search box. */
.head-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:42px;padding:0 20px;border:0;border-radius:999px;font-weight:700;font-size:13.5px;line-height:1;letter-spacing:.06em;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .2s,filter .15s}
.head-btn:has(.hb-badge){padding-right:6px}
.head-btn .hb-label{text-transform:uppercase}
.head-btn .hb-icon{flex:none;transition:transform .2s}
.head-btn .hb-badge{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:#fff;color:var(--accent2,#0062bd);font-size:14px;font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums}
.head-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-110%);transition:transform .7s ease}
.head-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.head-btn:hover::after{transform:translateX(110%)}
.head-btn:hover .hb-icon:last-child{transform:translateX(3px)}
.head-btn:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.head-btn-gradient{background:linear-gradient(120deg,var(--brand),var(--accent2,#0062bd));color:var(--on-brand,#fff);box-shadow:0 6px 18px -6px var(--accent2,#0062bd)}
.head-btn-gradient:hover{box-shadow:0 10px 22px -8px var(--accent2,#0062bd)}
.head-btn-accent2{background:var(--accent2,#0062bd);color:var(--on-accent2,#fff);box-shadow:0 6px 18px -8px var(--accent2,#0062bd)}
.head-btn-brand{background:var(--brand);color:var(--on-brand,#fff);box-shadow:0 6px 18px -8px var(--brand)}
.head-btn-brand .hb-badge{color:var(--brand)}
.head-btn-dark{background:#1f2328;color:#fff;box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.head-btn-dark .hb-badge{color:#1f2328}
.head-btn-outline{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 2px currentColor}
.head-btn-outline .hb-badge{background:var(--brand);color:var(--on-brand,#fff)}
.head-btn-outline::after{display:none}
/* At the right end of the department menu bar; the bar tightens up a little to make room */
.nc-nav-row .hb-menu{margin-left:auto;align-self:center;flex:none}
.nc-note + .hb-menu{margin-left:0}
.nc-nav-row:has(.hb-menu){gap:20px}
.nc-nav-row:has(.hb-menu) .nc-dept{width:230px}
.nc-nav-row:has(.hb-menu) .nc-links{column-gap:18px}
@media (min-width:1200px) and (max-width:1319px){
  .nc-nav-row:has(.hb-menu) .nc-dept{width:210px}
  .nc-nav-row:has(.hb-menu) .nc-links > a,.nc-nav-row:has(.hb-menu) .nc-links > .menu-item > a{font-size:14px}
  .nc-nav-row .hb-menu{padding-left:16px}
  .nc-nav-row .hb-menu .hb-icon{display:none}
}
/* Tablets: the menu bar has no room, so the button sits beside the icons instead */
.head-btn.hb-alt{display:none}
@media (min-width:861px) and (max-width:1199px){
  .nc-nav-row .hb-menu{display:none}
  .head-btn.hb-alt{display:inline-flex;height:38px;padding-left:14px;font-size:12.5px}
  .head-btn.hb-alt .hb-icon{display:none}
  /* the search box moves to its own row so it isn't squeezed */
  .nc-head-row:has(.hb-alt){row-gap:12px;padding-bottom:14px}
  .nc-head-row:has(.hb-alt) .nc-search{grid-column:1/-1;grid-row:2;max-width:none;justify-self:stretch}
  .nc-head-row:has(.hb-alt) .nc-tools{grid-column:-2/-1;grid-row:1;justify-self:end}
}/* Phones: only the copy under the search box */
.head-btn.hb-m{display:none}
@media (max-width:860px){
  .head-btn.hb-header,.head-btn.hb-alt{display:none}
  .nc-head-row .head-btn.hb-m{display:flex;grid-row:3;grid-column:1/-1;height:46px;margin-top:-2px}
}
@media (max-width:560px){
  .head-row:has(.hb-m){flex-wrap:wrap;row-gap:8px}
  .head-row .head-btn.hb-m{display:flex;order:5;flex:0 0 100%;height:44px;margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){.head-btn,.head-btn::after,.head-btn .hb-icon{transition:none}}
/* ---- Product picture zoom (Theme → Product page) and the full-screen viewer ---- */
.zoom-stage{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--img-bg,var(--soft))}
.thumbs-left .zoom-stage{grid-column:2;grid-row:1}
.zoom-stage .gallery-main{display:block;transform-origin:50% 50%;transition:transform .25s ease}
.zoom-stage.has-lightbox .gallery-main{cursor:zoom-in}
.zoom-stage.is-zooming .gallery-main{cursor:crosshair}
.zoom-stage.zm-inner.is-zooming .gallery-main{transition:transform .12s ease-out}
.zoom-lens{position:absolute;z-index:2;width:170px;height:170px;border-radius:50%;pointer-events:none;background-repeat:no-repeat;background-color:var(--img-bg,#fff);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line),0 10px 30px rgba(0,0,0,.25);opacity:0;transition:opacity .15s}
.zoom-mark{position:absolute;z-index:2;pointer-events:none;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px var(--brand);opacity:0;transition:opacity .15s}
.zoom-pane{position:absolute;z-index:30;top:0;left:calc(100% + 24px);background-repeat:no-repeat;background-color:var(--img-bg,#fff);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 16px 40px rgba(0,0,0,.18);opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;pointer-events:none}
.gallery-media{position:relative}
.is-zooming .zoom-lens,.is-zooming~.zoom-pane,.zoom-pane.is-on{opacity:1;visibility:visible}
.is-zooming .zoom-mark{opacity:1}
.zoom-open{position:absolute;z-index:3;right:10px;bottom:10px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#222;box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer;opacity:.85;transition:opacity .15s,transform .15s}
.zoom-open:hover,.zoom-open:focus-visible{opacity:1;transform:scale(1.06)}
.zoom-open:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.lb{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,12,14,.96);color:#fff;overflow:hidden}
.lb::backdrop{background:rgba(10,12,14,.96)}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.lb-count{font-size:.9rem;opacity:.8}
.lb-stage{position:relative;overflow:hidden;display:grid;place-items:center;touch-action:none;user-select:none}
.lb-img{position:absolute;inset:0;margin:auto;max-width:min(calc(100% - 128px),1400px);max-height:calc(100% - 8px);object-fit:contain;transform-origin:0 0;transition:transform .2s ease;cursor:zoom-in;background:#fff}
.lb-stage.is-zoomed .lb-img{cursor:grab}
.lb-stage.is-dragging .lb-img{cursor:grabbing;transition:none}
.lb-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background .15s}
.lb-btn:hover{background:rgba(255,255,255,.24)}
.lb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-prev,.lb-next{position:absolute;top:50%;z-index:2;transform:translateY(-50%)}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-thumbs{display:flex;gap:8px;justify-content:center;padding:12px 16px 16px;overflow-x:auto}
.lb-thumbs button{flex:none;width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:8px;background:#fff;overflow:hidden;cursor:pointer;opacity:.6}
.lb-thumbs button[aria-current]{border-color:var(--brand);opacity:1}
.lb-thumbs img{width:100%;height:100%;object-fit:contain}
.lb-hint{font-size:.8rem;opacity:.6}
@media (max-width:900px){.zoom-pane{display:none}}
@media (max-width:560px){.lb-img{max-width:100%}.lb-prev,.lb-next{display:none}.lb-thumbs button{width:52px;height:52px}.lb-hint{display:none}}
@media (prefers-reduced-motion:reduce){.zoom-stage .gallery-main,.lb-img,.zoom-lens,.zoom-pane,.zoom-mark,.zoom-open{transition:none}}
/* Buttons & search (page builder → Buttons & search): store-wide button and search bar styles.
   "Theme" choices add no class, so the Look & feel settings apply. */
body.bsh-square{--btn-radius:2px}body.bsh-rounded{--btn-radius:10px}body.bsh-pill{--btn-radius:999px}
body.bcol-accent2{--btn-bg:var(--accent2);--btn-on:var(--on-accent2);--btn-grad2:var(--brand)}
body.bcol-dark{--btn-bg:#1d2124;--btn-on:#fff;--btn-grad2:var(--brand)}
:root[data-theme="dark"] body.bcol-dark{--btn-bg:#f1f3f4;--btn-on:#111}
body.bst-soft .btn-brand{background:color-mix(in srgb,var(--btn-bg,var(--brand)) 14%,transparent);color:var(--btn-bg,var(--brand));border-color:transparent}
body.bst-soft .btn-brand:hover{background:var(--btn-bg,var(--brand));color:var(--btn-on,var(--on-brand));filter:none}
:root[data-theme="dark"] body.bst-soft .btn-brand{background:color-mix(in srgb,var(--btn-bg,var(--brand)) 30%,transparent);color:var(--ink)}
body.bst-gradient .btn-brand{background:linear-gradient(135deg,var(--btn-bg,var(--brand)),var(--btn-grad2,var(--accent2)));color:var(--btn-on,var(--on-brand));border-color:transparent}
body.bst-raised .btn-brand{box-shadow:0 6px 16px -4px color-mix(in srgb,var(--btn-bg,var(--brand)) 55%,transparent)}
body.bsz-small .btn-brand{font-size:14px;padding:10px 18px}
body.bsz-large .btn-brand{font-size:18px;padding:18px 34px}
body.btx-upper .btn-brand{text-transform:uppercase;letter-spacing:.06em;font-size:.9em}
body.btx-normal .btn-brand{text-transform:none;letter-spacing:normal}
body.bsz-small.btx-upper .btn-brand{font-size:13px}body.bsz-large.btx-upper .btn-brand{font-size:16px}
body.bhv-lift .btn-brand:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 10px 20px -8px color-mix(in srgb,var(--btn-bg,var(--brand)) 60%,transparent);filter:none}
body.bhv-darken .btn-brand:not(:disabled):hover{filter:brightness(.86)}
body.bhv-grow .btn-brand:not(:disabled):hover{transform:scale(1.04);filter:none}
body.bhv-none .btn-brand:not(:disabled):hover{filter:none}
body.ssh-square{--search-radius:2px}body.ssh-rounded{--search-radius:14px}body.ssh-pill{--search-radius:999px}
body.sfl-white{--search-bg:#fff}
body.sfl-soft{--search-bg:var(--soft);--search-bg-dark:var(--soft)}
body.sfl-tint{--search-bg:color-mix(in srgb,var(--brand) 8%,var(--ground));--search-bg-dark:color-mix(in srgb,var(--brand) 18%,var(--ground))}
body.sbd-none{--search-border:1px solid transparent}
body.sbd-thin{--search-border:1px solid var(--line)}
body.sbd-brand{--search-border:2px solid var(--brand)}
body.sbd-dark{--search-border:2px solid var(--ink)}
body.sbt-accent2{--search-btn:var(--accent2);--search-btn-on:var(--on-accent2)}
body.sbt-dark{--search-btn:#1d2124;--search-btn-on:#fff}
body.sbt-plain{--search-btn:transparent;--search-btn-on:var(--ink)}
body.ssz-compact{--search-py:7px}body.ssz-tall{--search-py:15px}:root[data-theme="dark"] body.sfl-white{--search-bg:var(--panel)}

/* Page not found (404): a friendly way back into the store */
.nf-hero{max-width:640px;margin:0 auto;text-align:center;padding-block:12px 8px}
.nf-art{width:min(320px,80vw);height:auto;margin:0 auto 8px;display:block;overflow:visible}
.nf-digit{font:700 150px/1 var(--heading-font);fill:var(--brand)}
.nf-shadow{fill:color-mix(in srgb,var(--ink) 10%,transparent)}
.nf-bag{transform-origin:160px 176px;animation:nf-bob 3.2s ease-in-out infinite}
.nf-bag-body{fill:color-mix(in srgb,var(--brand) 16%,var(--panel));stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.nf-bag-handle,.nf-mouth{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.nf-eye{fill:var(--ink);animation:nf-blink 4s infinite}
@keyframes nf-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes nf-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.nf-eye{transform-box:fill-box;transform-origin:center}
.nf-hero h1{font-size:clamp(28px,4vw,40px);margin:0 0 10px}
.nf-lead{margin:0 auto 22px;max-width:520px}
.nf-search{display:flex;gap:8px;max-width:480px;margin:0 auto 18px}
.nf-search input{flex:1;min-width:0;font:inherit;padding:12px 16px;border:var(--search-border,1px solid var(--line));border-radius:var(--search-radius,var(--btn-radius));background:var(--search-bg,var(--panel));color:var(--ink)}
.nf-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.nf-search .btn-brand{padding:12px 22px}
.nf-actions{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:center;align-items:center}
.nf-link{font-weight:700;color:var(--brand);text-decoration:none}
.nf-link:hover{text-decoration:underline}
.nf-cats,.nf-popular{margin-top:48px}
.nf-cats h2,.nf-popular h2{font-size:22px;margin:0 0 14px;text-align:center}
.nf-cats .sub-chips{justify-content:center}
@media (max-width:560px){.nf-search{flex-direction:column}.nf-search .btn-brand{width:100%}.nf-digit{font-size:120px}}
@media (prefers-reduced-motion:reduce){.nf-bag,.nf-eye{animation:none}}
/* Search style "expanding icon" (simple header): the icon is the input's label, so a click focuses the
   box and :focus-within opens it; it stays open while it holds text. No script needed. */
.hs-expand .hs-toggle{left:0;width:40px;height:40px;place-items:center;border-radius:50%;pointer-events:auto;cursor:pointer;color:var(--ink);z-index:1;transition:background .15s}
.hs-expand .hs-toggle:hover{background:var(--soft)}
.hs-expand .hs-toggle svg{width:20px;height:20px}
.hs-expand input{width:40px;padding:9px 0 9px 40px;border:1px solid transparent;border-radius:var(--search-radius,999px);background:transparent;cursor:pointer;transition:width .25s ease,padding .25s ease,background .15s,border-color .15s,box-shadow .15s}
.hs-expand input::placeholder{color:transparent}
.hs-expand input::-webkit-search-cancel-button{display:none}
.hs-expand:focus-within input,.hs-expand input:not(:placeholder-shown){width:var(--hs-w,220px);padding-right:16px;cursor:text;border:var(--search-border,1px solid var(--line));background:var(--search-bg,var(--soft))}
.hs-expand:focus-within input{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.hs-expand:focus-within input::placeholder{color:var(--muted)}
.hs-expand:focus-within .hs-toggle:hover{background:none}
:root[data-theme="dark"] .hs-expand:focus-within input,:root[data-theme="dark"] .hs-expand input:not(:placeholder-shown){background:var(--panel)}
@media (prefers-reduced-motion:reduce){.hs-expand input{transition:none}}

/* Simple header with the menu on its own row under the logo (page builder → Header → Where the menu goes) */
@media (min-width:861px){
  .menu-below .head-row{row-gap:0}
  .menu-below .head-tools{margin-left:auto}
  .menu-below .store-nav{order:3;flex:0 0 100%;flex-wrap:wrap;justify-content:center;column-gap:24px;row-gap:0;padding:6px 0 8px;border-top:1px solid var(--line)}
}
/* Simple header on laptop widths: a little less space between items keeps logo, menu and icons on one line */
@media (min-width:861px) and (max-width:1365px){.head-row{column-gap:16px}.store-nav{column-gap:14px}.head-tools{gap:8px}}

/* Photo banners: a soft dark fade behind the text side (on top of the owner's tint) and a gentle shadow,
   so white text stays readable on bright photos like sky, sea and sand. The far side keeps the photo clear. */
.hero2.has-image::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.32) 40%,rgba(0,0,0,0) 75%)}
.hero2.has-image.align-center::after{background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0) 75%)}
.hero2.has-image.align-right::after{background:linear-gradient(270deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.32) 40%,rgba(0,0,0,0) 75%)}
.hero2.has-image .hero-inner{position:relative;z-index:1}
.hero2.has-image h1{text-shadow:0 2px 20px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3)}
.hero2.has-image .hero-sub{opacity:1;text-shadow:0 1px 3px rgba(0,0,0,.45),0 1px 14px rgba(0,0,0,.4)}
@media (max-width:700px){.hero2.has-image::after,.hero2.has-image.align-right::after{background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.3))}}
/* Features page search: pinned to the top of the screen while you scroll; it filters the features below
   (matching words highlighted) and the chosen feature flashes. */
.fg-search{position:sticky;top:10px;max-width:720px;margin:0 auto 18px;z-index:30;border-radius:var(--search-radius,999px);transition:box-shadow .2s}
.fg-search[hidden]{display:none}
.fg-search-sentinel{height:1px;margin-bottom:-1px}
.fg-search.is-stuck input{box-shadow:0 14px 34px -14px rgba(0,0,0,.45)}
.fg-search-icon{position:absolute;left:18px;top:27px;transform:translateY(-50%);display:grid;color:var(--fg-accent,var(--brand));pointer-events:none}
.fg-search input{width:100%;font:inherit;font-size:17px;padding:15px 84px 15px 50px;border:2px solid var(--line);border-radius:var(--search-radius,999px);background:var(--panel);color:var(--ink);box-shadow:0 8px 24px -16px rgba(0,0,0,.25);transition:border-color .15s,box-shadow .15s}
.fg-search input::-webkit-search-cancel-button{display:none}
.fg-search input::placeholder{color:var(--muted)}
.fg-search input:focus{outline:none;border-color:var(--fg-accent,var(--brand));box-shadow:0 0 0 4px color-mix(in srgb,var(--fg-accent,var(--brand)) 16%,transparent),0 8px 24px -16px rgba(0,0,0,.25)}
.fg-search-clear{position:absolute;right:12px;top:27px;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--ink);cursor:pointer}
.fg-search-clear:hover,.fg-search-clear:focus-visible{background:color-mix(in srgb,var(--fg-accent,var(--brand)) 16%,var(--soft));outline:none}
.fg-search-key{position:absolute;right:18px;top:27px;transform:translateY(-50%);min-width:24px;padding:2px 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--ground);color:var(--muted);font:600 12px/1.4 var(--font);text-align:center;pointer-events:none}
.fg-search-clear:not([hidden]) ~ .fg-search-key,.fg-search input:focus ~ .fg-search-key{display:none}
.fg-search-status{margin:8px auto 0;padding:0 18px;text-align:center;color:var(--muted);font-size:14px;min-height:0}
.fg-search-status:empty{display:none}
.fg-search.is-stuck .fg-search-status:not(:empty){display:inline-block;margin:8px 0 0;padding:4px 12px;border-radius:999px;background:var(--panel);box-shadow:0 6px 18px -10px rgba(0,0,0,.35)}
.fg-search.is-stuck{text-align:center}
.fg-count{white-space:nowrap}
mark.fg-hl{background:color-mix(in srgb,var(--fg-accent,var(--brand)) 22%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.fg-item:focus{outline:none}
.fg-item.is-found{animation:fg-found 2.4s ease-out}
@keyframes fg-found{0%,35%{border-color:var(--fg-accent,var(--brand));box-shadow:0 0 0 4px color-mix(in srgb,var(--fg-accent,var(--brand)) 28%,transparent);background:color-mix(in srgb,var(--fg-accent,var(--brand)) 9%,var(--ground))}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:860px){body.m-sticky .fg-search{top:calc(var(--m-head-h,64px) + 8px)}}
@media (max-width:560px){.fg-search input{font-size:16px;padding:13px 54px 13px 46px}.fg-search-icon{left:15px;top:24px}.fg-search-clear{top:24px;right:9px}.fg-search-key{display:none}}
@media (prefers-reduced-motion:reduce){.fg-item.is-found{animation:none;border-color:var(--fg-accent,var(--brand))}}
/* Hero slider "Showcase" look (page builder → Hero slider → Look): a brand-colour glow over photo slides,
   text that rises in slide by slide, a price sticker, and promo tiles that lift, glow and shine. */
.hs.look-showcase .hs-slider{border-radius:calc(var(--radius) + 10px);isolation:isolate;
  box-shadow:0 28px 60px -32px color-mix(in srgb,var(--brand) 60%,#000),0 2px 6px -2px rgba(0,0,0,.18)}
.hs.look-showcase .hs-slide.bb-photo::after,.hs.look-showcase .hs-slide.bb-tinted::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,color-mix(in srgb,var(--brand) 82%,#000) 0%,color-mix(in srgb,var(--brand) 52%,transparent) 40%,transparent 72%)}
.hs.look-showcase .hs-slider::before{content:"";position:absolute;z-index:1;pointer-events:none;width:46%;aspect-ratio:1;right:-12%;bottom:-38%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 55%,transparent),transparent 68%);mix-blend-mode:screen;opacity:.7}
.hs.look-showcase .hs-copy{z-index:2}
.hs.look-showcase .hs-sub{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hs.look-showcase .hs-sub::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 35%,transparent)}
.hs.look-showcase .bg-light .hs-sub,.hs.look-showcase .bg-sun .hs-sub{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1)}
.hs.look-showcase .hs-title{font-size:clamp(32px,4.2vw,56px);line-height:1.02;letter-spacing:-.025em;margin-bottom:18px;text-shadow:0 2px 24px rgba(0,0,0,.18)}
.hs.look-showcase .hs-title::after{content:"";display:block;width:68px;height:5px;margin-top:16px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent2),color-mix(in srgb,var(--accent2) 30%,#fff))}
.hs.look-showcase .hs-price{display:inline-flex;align-items:center;margin:0 0 22px;padding:8px 18px;border-radius:999px;background:#fff;color:var(--brand);
  font-size:clamp(18px,1.8vw,24px);transform:rotate(-2.5deg);box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.hs.look-showcase .hs-slide .btn-brand{display:inline-flex;gap:10px;box-shadow:0 12px 28px -10px color-mix(in srgb,var(--btn-bg,var(--brand)) 75%,#000)}
.hs.look-showcase .hs-slide .btn-brand::after{content:"→";transition:transform .2s}
.hs.look-showcase .hs-slide .btn-brand:hover::after{transform:translateX(4px)}
.hs.look-showcase .bb-photo .btn-brand,.hs.look-showcase .bb-tinted .btn-brand{background:#fff;color:var(--brand);border-color:#fff}
.hs.look-showcase .hs-slide.is-active .hs-copy>*{animation:hs-show-in .75s cubic-bezier(.2,.75,.2,1) both}
.hs.look-showcase .hs-slide.is-active .hs-copy>:nth-child(2){animation-delay:.1s}
.hs.look-showcase .hs-slide.is-active .hs-copy>:nth-child(3){animation-delay:.2s}
.hs.look-showcase .hs-slide.is-active .hs-copy>:nth-child(4){animation-delay:.3s}
@keyframes hs-show-in{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
.hs.look-showcase .hs-depts{border-radius:calc(var(--radius) + 6px);box-shadow:0 18px 40px -30px rgba(0,0,0,.35)}

.hs.look-showcase .hs-promos{gap:16px}
.hs.look-showcase .hs-promo{border-radius:calc(var(--radius) + 6px);isolation:isolate;transition:translate .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s;
  box-shadow:0 12px 28px -22px rgba(0,0,0,.45)}
.hs.look-showcase .hs-promo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb,currentColor 22%,transparent) 1.2px,transparent 1.4px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(115deg,#000,transparent 55%);mask-image:linear-gradient(115deg,#000,transparent 55%)}
.hs.look-showcase .hs-promo::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;translate:-130% 0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);transition:translate .9s ease}
.hs.look-showcase .hs-promo:hover,.hs.look-showcase .hs-promo:focus-visible{translate:0 -4px;box-shadow:0 26px 44px -24px rgba(0,0,0,.5)}
.hs.look-showcase .hs-promo:hover::after,.hs.look-showcase .hs-promo:focus-visible::after{translate:130% 0}
.hs.look-showcase .hs-promo.bb-solid.has-pic{background-image:radial-gradient(circle at 80% 55%,color-mix(in srgb,currentColor 16%,transparent) 0,transparent 42%)}
.hs.look-showcase .hs-promo-sub{display:inline-block;align-self:flex-start;padding:3px 9px;border-radius:999px;font-size:11px;background:color-mix(in srgb,currentColor 12%,transparent)}
.hs.look-showcase .hs-promo-title{font-size:clamp(18px,1.5vw,22px);letter-spacing:-.01em}
.hs.look-showcase .hs-promo-cta{display:inline-flex;align-items:center;transition:translate .25s}
.hs.look-showcase .hs-promo:hover .hs-promo-cta{translate:5px 0}
.hs.look-showcase .hs-promo img.hs-promo-pic{z-index:1;filter:drop-shadow(0 14px 16px rgba(0,0,0,.28));transition:scale .5s cubic-bezier(.2,.75,.2,1),rotate .5s cubic-bezier(.2,.75,.2,1)}
.hs.look-showcase .hs-promo:hover img.hs-promo-pic{scale:1.08;rotate:-4deg}
.hs.look-showcase .hs-promo:hover img{transform:none}
.hs.look-showcase .hs-promo img.hs-promo-pic.pic-circle,.hs.look-showcase .hs-promo img.hs-promo-pic.pic-rounded{transform:translateY(-50%)}
.hs.look-showcase .hs-promo img.hs-promo-pic.pic-circle,.hs.look-showcase .hs-promo img.hs-promo-pic.pic-rounded{box-shadow:0 0 0 5px color-mix(in srgb,currentColor 14%,transparent);filter:none}
@media (prefers-reduced-motion:reduce){
  .hs.look-showcase .hs-slide.is-active .hs-copy>*{animation:none}
  .hs.look-showcase .hs-promo,.hs.look-showcase .hs-promo::after,.hs.look-showcase .hs-promo img.hs-promo-pic,.hs.look-showcase .hs-promo-cta{transition:none}
}/* Showcase: product photos on white blend into the tile (no white box, no boxy shadow) */
.hs.look-showcase .hs-promo img.hs-promo-pic.pic-plain{mix-blend-mode:multiply;filter:none}
:root[data-theme="dark"] .hs.look-showcase .hs-promo img.hs-promo-pic.pic-plain{mix-blend-mode:normal;border-radius:var(--radius)}

/* Department-store header search bar in the owner's chosen style (page builder → Header → Search box style).
   Buttons & search shape/border/background still apply on top, through the --search-* variables. */
.nc-search.ncs-pill{border-radius:var(--search-radius,999px)}
.nc-search.ncs-pill input{padding-left:22px}
.nc-search.ncs-pill button{width:62px;border-radius:0}
.nc-search.ncs-box{border-radius:var(--search-radius,2px)}
.nc-search.ncs-box button{width:auto;display:inline-flex;align-items:center;gap:8px;padding:0 20px;font:inherit;font-weight:700;font-size:15px}
.nc-search.ncs-box button svg{display:none}
.nc-search.ncs-line{border:0;border-bottom:var(--search-border,2px solid var(--line));border-radius:0;background:var(--search-bg,transparent);overflow:visible}
.nc-search.ncs-line:focus-within{border-bottom-color:var(--brand)}
.nc-search.ncs-line input{padding-left:4px;background:transparent}
.nc-search.ncs-line button{background:var(--search-btn,transparent);color:var(--search-btn-on,var(--ink));width:48px}
:root[data-theme="dark"] .nc-search.ncs-line{background:var(--search-bg-dark,transparent)}.nc-search.ncs-pill{background:linear-gradient(to left,var(--search-btn,var(--brand)) 62px,var(--search-bg,#fff) 62px)}
:root[data-theme="dark"] .nc-search.ncs-pill{background:linear-gradient(to left,var(--search-btn,var(--brand)) 62px,var(--search-bg-dark,var(--panel)) 62px)}

/* Map section (page builder → Map): Google map beside the details, or on its own. Until the visitor
   clicks "Show map", a drawn placeholder (streets made of CSS gradients) stands in for it. */
.map-sec{display:grid;gap:clamp(20px,3vw,40px);align-items:center}
/* Beside the details: the map takes about 40, 50 or 60% of the row, on the right or the left */
.map-side{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.map-side.map-w-narrow{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.map-side.map-w-medium{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.map-side.map-pos-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.map-side.map-pos-left.map-w-narrow{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.map-side.map-pos-left.map-w-medium{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.map-side.map-pos-left .map-info{order:2}
/* Just the map: narrow, medium or the full page width, lined up left, centre or right */
.map-map{grid-template-columns:1fr}
.map-map .map-info{text-align:center}
.map-map.map-w-narrow .map-frame,.map-map.map-w-narrow .map-info{width:100%;max-width:640px}
.map-map.map-w-medium .map-frame,.map-map.map-w-medium .map-info{width:100%;max-width:920px}
.map-map.map-align-center :is(.map-frame,.map-info){margin-inline:auto}
.map-map.map-align-left :is(.map-frame,.map-info){margin-right:auto}
.map-map.map-align-left :is(.map-info,.map-dir-row){text-align:left}
.map-map.map-align-right :is(.map-frame,.map-info){margin-left:auto}
.map-map.map-align-right :is(.map-info,.map-dir-row){text-align:right}
.map-frame-round .map-canvas{border-radius:calc(var(--radius) + 22px)}
.map-info h2{margin:0 0 12px}
.map-info .rte{margin-bottom:16px}
.map-details{margin:0 0 20px}
.map-dir{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.map-dir svg{width:18px;height:18px}
.map-dir-row{text-align:center;margin:18px 0 0}
.map-frame{position:relative}
.map-canvas{position:relative;width:100%;height:var(--map-h,420px);border-radius:calc(var(--radius) + 4px);overflow:hidden;border:1px solid var(--line);background:var(--soft);box-shadow:0 16px 36px -26px rgba(0,0,0,.4)}
.map-h-small{--map-h:300px}.map-h-medium{--map-h:420px}.map-h-large{--map-h:560px}
.map-canvas iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;
  background:
    radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--brand) 16%,transparent) 0,transparent 32%),
    linear-gradient(28deg,transparent 46%,color-mix(in srgb,var(--ink) 9%,transparent) 46%,color-mix(in srgb,var(--ink) 9%,transparent) 49%,transparent 49%),
    linear-gradient(-62deg,transparent 58%,color-mix(in srgb,var(--ink) 7%,transparent) 58%,color-mix(in srgb,var(--ink) 7%,transparent) 60%,transparent 60%),
    repeating-linear-gradient(0deg,transparent 0 46px,color-mix(in srgb,var(--ink) 5%,transparent) 46px 48px),
    repeating-linear-gradient(90deg,transparent 0 58px,color-mix(in srgb,var(--ink) 5%,transparent) 58px 60px),
    color-mix(in srgb,var(--brand) 4%,var(--ground))}
.map-ph-pin{display:grid;place-items:center;width:56px;height:56px;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--brand);color:var(--on-brand);box-shadow:0 12px 24px -10px color-mix(in srgb,var(--brand) 70%,#000)}
.map-ph-pin svg{rotate:45deg}
.map-ph-place{margin:6px 0 0;font-weight:700;max-width:420px}
.map-ph-note{margin:0;font-size:13px;color:var(--muted)}
.map-show{margin-top:4px}
.map-open{display:inline-block;margin-top:10px;font-size:14px;color:var(--muted)}
.map-empty{padding:24px;border:1px dashed var(--line);border-radius:var(--radius);text-align:center}
@media (max-width:860px){.map-side,.map-side.map-pos-left,.map-side.map-w-narrow,.map-side.map-w-medium,.map-side.map-pos-left.map-w-narrow,.map-side.map-pos-left.map-w-medium,.map-side_left{grid-template-columns:1fr}.map-side.map-pos-left .map-info,.map-side_left .map-info{order:0}.map-h-large{--map-h:420px}}
@media (max-width:560px){.map-h-medium{--map-h:340px}.map-h-large{--map-h:380px}}
/* Hero slide in "Your own HTML and CSS": the owner's design fills the slide and can't spill outside it */
.hs-slide.bb-html{padding:0;display:block}
.hs-slide.bb-html .hs-html{position:absolute;inset:0;overflow:hidden;contain:paint;isolation:isolate}
.hs-slider.is-sliding .hs-slide.bb-html,.hs-slider.is-stacked .hs-slide.bb-html{min-height:inherit}
.hs-html img{max-width:none}/* A banner pasted as the slide's only element fills the slide, whatever height its own CSS gives it */
.hs-slide.bb-html .hs-html>:only-child{height:100%!important;min-height:100%}

/* Promo tiles and promo banners (.bxo) use the same style choices; by default their text doesn't animate in */
.bxo{--hs-in:none;--hg-dir:100deg;--hg1:82%;--hg2:52%;--hg3:72%}
/* Hero slider style choices (page builder → Hero slider → Slider style). "Look's default" adds no class,
   so each look keeps its own styling; a chosen option overrides both looks. */
/* A brand-coloured slide never gets a brand-coloured (invisible) button */
.hs .hs-slide.bg-brand .btn-brand{background:#fff;color:var(--brand);border-color:#fff}
/* Corners */
.hs.hc-square{--hs-r:0px}.hs.hc-soft{--hs-r:8px}.hs.hc-round{--hs-r:20px}.hs.hc-extra{--hs-r:36px}
.hs.hs-opt:is(.hc-square,.hc-soft,.hc-round,.hc-extra) :is(.hs-slider,.hs-promo,.hs-depts){border-radius:var(--hs-r)}
.hs.hs-opt.hc-extra .hs-promo{border-radius:calc(var(--hs-r) * .75)}
/* Text position */
:is(.hs.hs-opt .hs-slide,.bxo).htx-right{grid-template-columns:1fr 1.1fr}
:is(.hs.hs-opt .hs-slide,.bxo).htx-right :is(.hs-copy,.promo-copy,.hs-promo-copy){order:2}
:is(.hs.hs-opt .hs-slide,.bxo).htx-center{grid-template-columns:1fr;justify-items:center;text-align:center}
:is(.hs.hs-opt .hs-slide,.bxo).htx-center :is(.hs-copy,.promo-copy,.hs-promo-copy){max-width:780px;margin-inline:auto}
:is(.hs.hs-opt .hs-slide,.bxo).htx-center>.hs-img,:is(.hs.hs-opt .hs-slide,.bxo).htx-center>.hs-video{display:none}
:is(.hs.hs-opt .hs-slide,.bxo).htx-center :is(.hs-title,.promo-title,.hs-promo-title)::after{margin-inline:auto}
/* Text on the right: the text always takes the right column (also when the slide has no picture) */
:is(.hs.hs-opt .hs-slide,.bxo).htx-right :is(.hs-copy,.promo-copy,.hs-promo-copy){grid-column:2;grid-row:1}
:is(.hs.hs-opt .hs-slide,.bxo).htx-right>:is(.hs-img,.hs-video){grid-column:1;grid-row:1}
:is(.hs.hs-opt .hs-slide,.bxo).htx-right :is(.hs-title,.promo-title,.hs-promo-title)::after{margin-left:auto}
/* Narrow screens: one column, the text lined up on the right */
@media (max-width:860px){
  :is(.hs.hs-opt .hs-slide,.bxo).htx-right{grid-template-columns:1fr;text-align:right}
  :is(.hs.hs-opt .hs-slide,.bxo).htx-right :is(.hs-copy,.promo-copy,.hs-promo-copy){grid-column:1;grid-row:auto;order:0;justify-self:end}
  :is(.hs.hs-opt .hs-slide,.bxo).htx-right>:is(.hs-img,.hs-video){grid-column:1;grid-row:auto}
}
/* Buttons: style */
:is(.hs.hs-opt .hs-slide,.bxo):is(.hb-solid,.hb-arrow,.hb-white,.hb-outline,.hb-glass,.hb-link) :is(.btn-brand,.promo-cta,.hs-promo-cta){display:inline-flex;gap:10px}
:is(.hs.hs-opt .hs-slide,.bxo):is(.hb-solid,.hb-white,.hb-outline,.hb-glass) :is(.btn-brand,.promo-cta,.hs-promo-cta)::after{content:none}
:is(.hs.hs-opt .hs-slide,.bxo):is(.hb-arrow,.hb-link) :is(.btn-brand,.promo-cta,.hs-promo-cta)::after{content:"→";transition:transform .2s}
:is(.hs.hs-opt .hs-slide,.bxo):is(.hb-arrow,.hb-link) :is(.btn-brand,.promo-cta,.hs-promo-cta):hover::after{transform:translateX(4px)}
:is(.hs.hs-opt .hs-slide,.bxo):is(.hb-solid,.hb-arrow) :is(.btn-brand,.promo-cta,.hs-promo-cta){background:var(--btn-bg,var(--brand));color:var(--btn-on,var(--on-brand));border-color:var(--btn-bg,var(--brand))}
:is(.hs.hs-opt .hs-slide,.bxo):is(.hb-solid,.hb-arrow).bg-brand :is(.btn-brand,.promo-cta,.hs-promo-cta),:is(.hs.hs-opt .hs-slide,.bxo).hb-white :is(.btn-brand,.promo-cta,.hs-promo-cta){background:#fff;color:var(--brand);border-color:#fff}
:is(.hs.hs-opt .hs-slide,.bxo).hb-white:is(.bg-light,.bg-sun) :is(.btn-brand,.promo-cta,.hs-promo-cta){background:#16191c;color:#fff;border-color:#16191c}
:is(.hs.hs-opt .hs-slide,.bxo).hb-outline :is(.btn-brand,.promo-cta,.hs-promo-cta){background:transparent;color:inherit;border:2px solid currentColor;box-shadow:none}
:is(.hs.hs-opt .hs-slide,.bxo).hb-outline :is(.btn-brand,.promo-cta,.hs-promo-cta):hover{background:color-mix(in srgb,currentColor 14%,transparent);filter:none}
:is(.hs.hs-opt .hs-slide,.bxo).hb-glass :is(.btn-brand,.promo-cta,.hs-promo-cta){background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:0 8px 24px -12px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
:is(.hs.hs-opt .hs-slide,.bxo).hb-glass :is(.btn-brand,.promo-cta,.hs-promo-cta):hover{background:rgba(255,255,255,.3);filter:none}
:is(.hs.hs-opt .hs-slide,.bxo).hb-glass:is(.bg-light,.bg-sun) :is(.btn-brand,.promo-cta,.hs-promo-cta){background:rgba(0,0,0,.06);color:var(--ink,#16191c);border-color:rgba(0,0,0,.22)}
:is(.hs.hs-opt .hs-slide,.bxo).hb-link :is(.btn-brand,.promo-cta,.hs-promo-cta){background:none;color:inherit;border:0;padding:6px 0;box-shadow:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
:is(.hs.hs-opt .hs-slide,.bxo).hb-link :is(.btn-brand,.promo-cta,.hs-promo-cta):hover{filter:none;text-decoration-color:var(--accent2)}
/* Buttons: shape */
:is(.hs.hs-opt .hs-slide,.bxo).hbs-pill :is(.btn-brand,.promo-cta,.hs-promo-cta){border-radius:999px}
:is(.hs.hs-opt .hs-slide,.bxo).hbs-rounded :is(.btn-brand,.promo-cta,.hs-promo-cta){border-radius:12px}
:is(.hs.hs-opt .hs-slide,.bxo).hbs-square :is(.btn-brand,.promo-cta,.hs-promo-cta){border-radius:0}
/* Buttons: effect */
:is(.hs.hs-opt .hs-slide,.bxo).hbx-lift :is(.btn-brand,.promo-cta,.hs-promo-cta){transition:translate .2s,box-shadow .2s,filter .15s}
:is(.hs.hs-opt .hs-slide,.bxo).hbx-lift :is(.btn-brand,.promo-cta,.hs-promo-cta):hover{translate:0 -3px;box-shadow:0 16px 30px -12px rgba(0,0,0,.5)}
:is(.hs.hs-opt .hs-slide,.bxo).hbx-shine :is(.btn-brand,.promo-cta,.hs-promo-cta){position:relative;overflow:hidden;isolation:isolate}
:is(.hs.hs-opt .hs-slide,.bxo).hbx-shine :is(.btn-brand,.promo-cta,.hs-promo-cta)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;translate:-130% 0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transition:translate .8s ease}
:is(.hs.hs-opt .hs-slide,.bxo).hbx-shine :is(.btn-brand,.promo-cta,.hs-promo-cta):hover::before{translate:130% 0}
:is(.hs.hs-opt .hs-slide,.bxo).hbx-pulse.is-active :is(.btn-brand,.promo-cta,.hs-promo-cta){animation:hs-btn-pulse 2.2s ease-out 1s infinite}
@keyframes hs-btn-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}
:is(.hs.hs-opt .hs-slide,.bxo).hbx-none :is(.btn-brand,.promo-cta,.hs-promo-cta),:is(.hs.hs-opt .hs-slide,.bxo).hbx-none :is(.btn-brand,.promo-cta,.hs-promo-cta)::after{transition:none}
:is(.hs.hs-opt .hs-slide,.bxo).hbx-none :is(.btn-brand,.promo-cta,.hs-promo-cta):hover{filter:none;transform:none;translate:none}
:is(.hs.hs-opt .hs-slide,.bxo).hbx-none :is(.btn-brand,.promo-cta,.hs-promo-cta):hover::after{transform:none}
/* Small line above the heading: style */
:is(.hs.hs-opt .hs-slide,.bxo):is(.hl-chip_dot,.hl-chip,.hl-solid) :is(.hs-sub,.promo-sub,.hs-promo-sub){display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
:is(.hs.hs-opt .hs-slide,.bxo):is(.hl-chip_dot,.hl-chip) :is(.hs-sub,.promo-sub,.hs-promo-sub){background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:is(.hs.hs-opt .hs-slide,.bxo):is(.hl-chip_dot,.hl-chip):is(.bg-light,.bg-sun) :is(.hs-sub,.promo-sub,.hs-promo-sub){background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1)}
:is(.hs.hs-opt .hs-slide,.bxo).hl-chip_dot :is(.hs-sub,.promo-sub,.hs-promo-sub)::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 35%,transparent)}
:is(.hs.hs-opt .hs-slide,.bxo):is(.hl-chip,.hl-solid,.hl-text) :is(.hs-sub,.promo-sub,.hs-promo-sub)::before{content:none}
:is(.hs.hs-opt .hs-slide,.bxo).hl-solid :is(.hs-sub,.promo-sub,.hs-promo-sub){background:var(--accent2);color:var(--on-accent2);border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
:is(.hs.hs-opt .hs-slide,.bxo).hl-line :is(.hs-sub,.promo-sub,.hs-promo-sub){display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
:is(.hs.hs-opt .hs-slide,.bxo).hl-line :is(.hs-sub,.promo-sub,.hs-promo-sub)::before{content:"";flex:none;width:32px;height:3px;border-radius:3px;background:var(--accent2);box-shadow:none}
:is(.hs.hs-opt .hs-slide,.bxo).hl-text :is(.hs-sub,.promo-sub,.hs-promo-sub){display:block;margin:0 0 8px;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  font-size:17px;font-weight:400;letter-spacing:0;text-transform:none}
/* Text entrance: one rule for every look ("Look's default": Showcase rises in, Classic stays still) */
.hs.look-showcase{--hs-in:hs-show-in}.hs.look-classic{--hs-in:none}
:is(.hs .hs-slide,.bxo).hta-rise{--hs-in:hs-show-in}:is(.hs .hs-slide,.bxo).hta-fade{--hs-in:hs-fade-in}:is(.hs .hs-slide,.bxo).hta-left{--hs-in:hs-left-in}:is(.hs .hs-slide,.bxo).hta-zoom{--hs-in:hs-zoom-in}:is(.hs .hs-slide,.bxo).hta-none{--hs-in:none}
:is(.hs.hs-opt .hs-slide,.bxo).is-active :is(.hs-copy,.promo-copy,.hs-promo-copy)>*{animation:var(--hs-in) .75s cubic-bezier(.2,.75,.2,1) both}
:is(.hs.hs-opt .hs-slide,.bxo).is-active :is(.hs-copy,.promo-copy,.hs-promo-copy)>:nth-child(2){animation-delay:.1s}
:is(.hs.hs-opt .hs-slide,.bxo).is-active :is(.hs-copy,.promo-copy,.hs-promo-copy)>:nth-child(3){animation-delay:.2s}
:is(.hs.hs-opt .hs-slide,.bxo).is-active :is(.hs-copy,.promo-copy,.hs-promo-copy)>:nth-child(4){animation-delay:.3s}
@keyframes hs-fade-in{from{opacity:0}to{opacity:1}}
@keyframes hs-left-in{from{opacity:0;translate:-32px 0}to{opacity:1;translate:0 0}}
@keyframes hs-zoom-in{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
/* Label animation */
:is(.hs.hs-opt .hs-slide,.bxo).hla-none.is-active :is(.hs-copy,.promo-copy,.hs-promo-copy)>:is(.hs-sub,.promo-sub,.hs-promo-sub){animation:none}
:is(.hs.hs-opt .hs-slide,.bxo).hla-float.is-active :is(.hs-copy,.promo-copy,.hs-promo-copy)>:is(.hs-sub,.promo-sub,.hs-promo-sub){animation:var(--hs-in) .75s cubic-bezier(.2,.75,.2,1) both,hs-float 3.2s ease-in-out .9s infinite}
@keyframes hs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
:is(.hs.hs-opt .hs-slide,.bxo).hla-pulse :is(.hs-sub,.promo-sub,.hs-promo-sub)::before{animation:hs-dot-pulse 1.8s ease-out infinite}
@keyframes hs-dot-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent2) 70%,transparent);opacity:1}70%{box-shadow:0 0 0 9px transparent;opacity:.75}100%{box-shadow:0 0 0 0 transparent;opacity:1}}
:is(.hs.hs-opt .hs-slide,.bxo).hla-shine :is(.hs-sub,.promo-sub,.hs-promo-sub){position:relative;overflow:hidden;isolation:isolate}
:is(.hs.hs-opt .hs-slide,.bxo).hla-shine :is(.hs-sub,.promo-sub,.hs-promo-sub)::after{content:"";position:absolute;inset:0;pointer-events:none;translate:-130% 0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);animation:hs-label-shine 3.6s ease-in-out 1.2s infinite}
@keyframes hs-label-shine{0%{translate:-130% 0}45%,100%{translate:130% 0}}
/* Price line */
:is(.hs.hs-opt .hs-slide,.bxo):is(.hp-sticker,.hp-pill) .hs-price{display:inline-flex;align-items:center;margin:0 0 22px;padding:8px 18px;border-radius:999px;background:#fff;color:var(--brand);
  font-size:clamp(18px,1.8vw,24px);box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
:is(.hs.hs-opt .hs-slide,.bxo).hp-sticker .hs-price{transform:rotate(-2.5deg)}
:is(.hs.hs-opt .hs-slide,.bxo).hp-pill .hs-price{transform:none}
:is(.hs.hs-opt .hs-slide,.bxo).hp-plain .hs-price{display:block;padding:0;background:none;color:inherit;transform:none;box-shadow:none;border-radius:0;font-size:30px}
/* Showcase: accent line, corner light, colour glow (position and strength) */
:is(.hs.hs-opt .hs-slide,.bxo).hno-tline :is(.hs-title,.promo-title,.hs-promo-title)::after{content:none}
.hs.hs-opt.hno-bubble .hs-slider::before{content:none}
.hs.hs-opt{--hg-dir:100deg;--hg1:82%;--hg2:52%;--hg3:72%}
:is(.hs.hs-opt .hs-slide,.bxo).hg-right{--hg-dir:260deg}:is(.hs.hs-opt .hs-slide,.bxo).hg-bottom{--hg-dir:0deg}:is(.hs.hs-opt .hs-slide,.bxo).hg-top{--hg-dir:180deg}
:is(.hs.hs-opt .hs-slide,.bxo).hgs-strong{--hg1:92%;--hg2:70%;--hg3:92%}
:is(.hs.hs-opt .hs-slide,.bxo):is(.bb-photo,.bb-tinted):is(.hg-left,.hg-right,.hg-top,.hg-bottom,.hg-all)::after{
  background:linear-gradient(var(--hg-dir),color-mix(in srgb,var(--brand) var(--hg1),#000) 0%,color-mix(in srgb,var(--brand) var(--hg2),transparent) 40%,transparent var(--hg3))}
:is(.hs.hs-opt .hs-slide,.bxo).hg-all:is(.bb-photo,.bb-tinted)::after{background:color-mix(in srgb,var(--brand) var(--hg2),transparent)}
:is(.hs.hs-opt .hs-slide,.bxo).hgs-light:is(.bb-photo,.bb-tinted)::after{opacity:.55}
.hs.hs-opt .hs-slide.hg-none:is(.bb-photo,.bb-tinted)::after{content:none}
@media (prefers-reduced-motion:reduce){
  :is(.hs.hs-opt .hs-slide,.bxo).is-active :is(.hs-copy,.promo-copy,.hs-promo-copy)>*,:is(.hs.hs-opt .hs-slide,.bxo).hla-float.is-active :is(.hs-copy,.promo-copy,.hs-promo-copy)>:is(.hs-sub,.promo-sub,.hs-promo-sub),:is(.hs.hs-opt .hs-slide,.bxo).hbx-pulse.is-active :is(.btn-brand,.promo-cta,.hs-promo-cta),
  :is(.hs.hs-opt .hs-slide,.bxo).hla-pulse :is(.hs-sub,.promo-sub,.hs-promo-sub)::before,:is(.hs.hs-opt .hs-slide,.bxo).hla-shine :is(.hs-sub,.promo-sub,.hs-promo-sub)::after{animation:none}
  :is(.hs.hs-opt .hs-slide,.bxo).hbx-shine :is(.btn-brand,.promo-cta,.hs-promo-cta)::before{transition:none}
}
/* A slider showing just one slide (no slider script): the slide still fills the frame, so its photo isn't cut off */
.hs-slider>.hs-slide.is-active{min-height:inherit}
/* Spacing "No gap above": the section sits right under the menu bar */
.sec.space-flush_top{padding-top:0;padding-bottom:24px}
.sec.space-flush{padding-block:0}
/* Photo focus (page builder → background photo → Photo focus): the part of a cropped photo that stays in view.
   The slow-zoom (Ken Burns) effect zooms towards the same spot. */
img.pos-top{object-position:50% 0;transform-origin:50% 0}
img.pos-upper{object-position:50% 25%;transform-origin:50% 25%}
img.pos-lower{object-position:50% 75%;transform-origin:50% 75%}
img.pos-bottom{object-position:50% 100%;transform-origin:50% 100%}
img.pos-left{object-position:0 50%;transform-origin:0 50%}
img.pos-right{object-position:100% 50%;transform-origin:100% 50%}
/* Each slide's own colour glow, on any look (Showcase used to be the only look with one) */
:is(.hs.hs-opt .hs-slide,.bxo):is(.bb-photo,.bb-tinted):is(.hg-left,.hg-right,.hg-top,.hg-bottom,.hg-all)::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;translate:none;transition:none}
:is(.hs.hs-opt .hs-slide,.bxo).hyes-tline :is(.hs-title,.promo-title,.hs-promo-title)::after{content:"";display:block;width:68px;height:5px;margin-top:16px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent2),color-mix(in srgb,var(--accent2) 30%,#fff))}
:is(.hs.hs-opt .hs-slide,.bxo).hyes-tline.htx-center :is(.hs-title,.promo-title,.hs-promo-title)::after{margin-inline:auto}
/* Each slide's shade direction (photo backgrounds): which side is darker */
:is(.hs .hs-slide,.bxo).hsd-right .bb-tint.tint-shade{background:linear-gradient(270deg,#000 0%,rgba(0,0,0,.55) 100%)}
:is(.hs .hs-slide,.bxo).hsd-bottom .bb-tint.tint-shade{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.4) 100%)}
:is(.hs .hs-slide,.bxo).hsd-top .bb-tint.tint-shade{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 100%)}
:is(.hs .hs-slide,.bxo).hsd-even .bb-tint.tint-shade{background:#000}
/* Accent line by the heading (each slide: Style → Accent line). Replaces the look's built-in line:
   shape, length and colour are variables; it sits under (::after) or above (::before) the heading. */
:is(.hs.hs-opt .hs-slide,.bxo) :is(.hs-title,.promo-title,.hs-promo-title)::after{content:none}
:is(.hs.hs-opt .hs-slide,.bxo).hln{--ln-w:68px;--ln-h:5px;--ln-r:999px;--ln-c:var(--accent2);--ln-ml:0;--ln-mr:auto;--ln-o:left center;
  --ln-bg:linear-gradient(90deg,var(--ln-c),color-mix(in srgb,var(--ln-c) 30%,#fff))}
:is(.hs.hs-opt .hs-slide,.bxo).hln:not(.hlp-above) :is(.hs-title,.promo-title,.hs-promo-title)::after,:is(.hs.hs-opt .hs-slide,.bxo).hln.hlp-above :is(.hs-title,.promo-title,.hs-promo-title)::before{content:"";display:block;
  width:var(--ln-w);max-width:100%;height:var(--ln-h);border-radius:var(--ln-r);background:var(--ln-bg);margin:16px var(--ln-mr) 0 var(--ln-ml);transform-origin:var(--ln-o)}
:is(.hs.hs-opt .hs-slide,.bxo).hln.hlp-above :is(.hs-title,.promo-title,.hs-promo-title)::before{margin-top:0;margin-bottom:16px}
/* style */
:is(.hs.hs-opt .hs-slide,.bxo).hls-thin{--ln-h:2px;--ln-bg:var(--ln-c)}
:is(.hs.hs-opt .hs-slide,.bxo).hls-thick{--ln-h:9px}
:is(.hs.hs-opt .hs-slide,.bxo).hls-fade{--ln-h:3px;--ln-bg:linear-gradient(90deg,var(--ln-c),transparent)}
:is(.hs.hs-opt .hs-slide,.bxo).hls-double{--ln-h:8px;--ln-r:0;--ln-bg:linear-gradient(180deg,var(--ln-c) 0 2px,transparent 2px 6px,var(--ln-c) 6px 8px)}
:is(.hs.hs-opt .hs-slide,.bxo).hls-dashed{--ln-h:4px;--ln-r:0;--ln-bg:repeating-linear-gradient(90deg,var(--ln-c) 0 14px,transparent 14px 22px)}
:is(.hs.hs-opt .hs-slide,.bxo).hls-dots{--ln-h:8px;--ln-r:0;--ln-bg:radial-gradient(circle,var(--ln-c) 3px,transparent 3.5px) 0 50%/14px 8px repeat-x}
/* length */
:is(.hs.hs-opt .hs-slide,.bxo).hll-short{--ln-w:36px}:is(.hs.hs-opt .hs-slide,.bxo).hll-long{--ln-w:150px}:is(.hs.hs-opt .hs-slide,.bxo).hll-full{--ln-w:100%}
/* colour */
:is(.hs.hs-opt .hs-slide,.bxo).hlc-brand{--ln-c:var(--brand)}:is(.hs.hs-opt .hs-slide,.bxo).hlc-white{--ln-c:#fff}:is(.hs.hs-opt .hs-slide,.bxo).hlc-dark{--ln-c:#16191c}:is(.hs.hs-opt .hs-slide,.bxo).hlc-text{--ln-c:currentColor}
/* alignment: with the text by default, or chosen */
:is(.hs.hs-opt .hs-slide,.bxo).hln.htx-center{--ln-ml:auto;--ln-mr:auto;--ln-o:center}
:is(.hs.hs-opt .hs-slide,.bxo).hln.htx-right{--ln-ml:auto;--ln-mr:0;--ln-o:right center}
:is(.hs.hs-opt .hs-slide,.bxo).hln.hlx-left{--ln-ml:0;--ln-mr:auto;--ln-o:left center}
:is(.hs.hs-opt .hs-slide,.bxo).hln.hlx-center{--ln-ml:auto;--ln-mr:auto;--ln-o:center}
:is(.hs.hs-opt .hs-slide,.bxo).hln.hlx-right{--ln-ml:auto;--ln-mr:0;--ln-o:right center}
/* animation (runs while the slide is showing) */
:is(.hs.hs-opt .hs-slide,.bxo).hln.hlan-draw.is-active :is(.hs-title,.promo-title,.hs-promo-title)::after,:is(.hs.hs-opt .hs-slide,.bxo).hln.hlan-draw.is-active :is(.hs-title,.promo-title,.hs-promo-title)::before{animation:hln-draw .9s cubic-bezier(.2,.75,.2,1) .45s both}
:is(.hs.hs-opt .hs-slide,.bxo).hln.hlan-pulse :is(.hs-title,.promo-title,.hs-promo-title)::after,:is(.hs.hs-opt .hs-slide,.bxo).hln.hlan-pulse :is(.hs-title,.promo-title,.hs-promo-title)::before{animation:hln-pulse 2.2s ease-in-out infinite}
:is(.hs.hs-opt .hs-slide,.bxo).hln.hlan-slide :is(.hs-title,.promo-title,.hs-promo-title)::after,:is(.hs.hs-opt .hs-slide,.bxo).hln.hlan-slide :is(.hs-title,.promo-title,.hs-promo-title)::before{animation:hln-slide 2.6s ease-in-out infinite alternate}
:is(.hs.hs-opt .hs-slide,.bxo).hln.hlan-stretch :is(.hs-title,.promo-title,.hs-promo-title)::after,:is(.hs.hs-opt .hs-slide,.bxo).hln.hlan-stretch :is(.hs-title,.promo-title,.hs-promo-title)::before{animation:hln-stretch 1.8s ease-in-out infinite alternate}
@keyframes hln-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hln-pulse{0%,100%{opacity:1;filter:none}50%{opacity:.45;filter:drop-shadow(0 0 6px var(--ln-c))}}
@keyframes hln-slide{from{translate:0 0}to{translate:28px 0}}
@keyframes hln-stretch{from{transform:scaleX(1)}to{transform:scaleX(.35)}}
:is(.hs.hs-opt .hs-slide,.bxo).hln.htx-right.hlan-slide:not(.hlx-left):not(.hlx-center) :is(.hs-title,.promo-title,.hs-promo-title)::after,:is(.hs.hs-opt .hs-slide,.bxo).hln.hlx-right.hlan-slide :is(.hs-title,.promo-title,.hs-promo-title)::after,
:is(.hs.hs-opt .hs-slide,.bxo).hln.htx-right.hlan-slide:not(.hlx-left):not(.hlx-center) :is(.hs-title,.promo-title,.hs-promo-title)::before,:is(.hs.hs-opt .hs-slide,.bxo).hln.hlx-right.hlan-slide :is(.hs-title,.promo-title,.hs-promo-title)::before{animation-direction:alternate-reverse}
@media (prefers-reduced-motion:reduce){:is(.hs.hs-opt .hs-slide,.bxo).hln :is(.hs-title,.promo-title,.hs-promo-title)::after,:is(.hs.hs-opt .hs-slide,.bxo).hln :is(.hs-title,.promo-title,.hs-promo-title)::before{animation:none!important}}
/* Bigger logos (Brand logos → Logo size up to 240px; each logo can be Extra large or Huge) */
.bs-h-104{--bh:104px}.bs-h-108{--bh:108px}.bs-h-112{--bh:112px}.bs-h-116{--bh:116px}.bs-h-120{--bh:120px}.bs-h-124{--bh:124px}.bs-h-128{--bh:128px}.bs-h-132{--bh:132px}.bs-h-136{--bh:136px}.bs-h-140{--bh:140px}.bs-h-144{--bh:144px}.bs-h-148{--bh:148px}.bs-h-152{--bh:152px}.bs-h-156{--bh:156px}.bs-h-160{--bh:160px}.bs-h-164{--bh:164px}.bs-h-168{--bh:168px}.bs-h-172{--bh:172px}.bs-h-176{--bh:176px}.bs-h-180{--bh:180px}.bs-h-184{--bh:184px}.bs-h-188{--bh:188px}.bs-h-192{--bh:192px}.bs-h-196{--bh:196px}.bs-h-200{--bh:200px}.bs-h-204{--bh:204px}.bs-h-208{--bh:208px}.bs-h-212{--bh:212px}.bs-h-216{--bh:216px}.bs-h-220{--bh:220px}.bs-h-224{--bh:224px}.bs-h-228{--bh:228px}.bs-h-232{--bh:232px}.bs-h-236{--bh:236px}.bs-h-240{--bh:240px}
.bs-s-xl .bs-logo{height:calc(var(--bh) * 1.6)}.bs-s-xl .bs-logo img{max-height:calc(var(--bh) * 1.6)}
.bs-s-xxl .bs-logo{height:calc(var(--bh) * 2)}.bs-s-xxl .bs-logo img{max-height:calc(var(--bh) * 2)}
:root[data-theme="dark"] .bs-dark-tiles .bs-s-xl .bs-logo{height:calc(var(--bh) * 1.6 + 24px)}:root[data-theme="dark"] .bs-dark-tiles .bs-s-xxl .bs-logo{height:calc(var(--bh) * 2 + 24px)}
.bs-boxed .bs-s-xl .bs-logo{height:calc(var(--bh) * 1.6 + 28px)}.bs-boxed .bs-s-xxl .bs-logo{height:calc(var(--bh) * 2 + 28px)}
@media (max-width:600px){.brand-strip .bs-logo,.brand-strip .bs-s-lg .bs-logo,.brand-strip .bs-s-xl .bs-logo,.brand-strip .bs-s-xxl .bs-logo{height:clamp(60px,var(--bh),130px)}.brand-strip .bs-logo img,.brand-strip .bs-s-xl .bs-logo img,.brand-strip .bs-s-xxl .bs-logo img{max-height:clamp(60px,var(--bh),130px)}}
/* Logos are scaled to the chosen size (not just capped by it): small or vector logos grow too, keeping their shape */
.brand-strip .bs-logo img{height:var(--bh);object-fit:contain}
.brand-strip .bs-s-sm .bs-logo img{height:calc(var(--bh) * .72)}
.brand-strip .bs-s-lg .bs-logo img{height:calc(var(--bh) * 1.3)}
.brand-strip .bs-s-xl .bs-logo img{height:calc(var(--bh) * 1.6)}
.brand-strip .bs-s-xxl .bs-logo img{height:calc(var(--bh) * 2)}
@media (max-width:600px){.brand-strip .bs-logo img,.brand-strip .bs-s-lg .bs-logo img,.brand-strip .bs-s-xl .bs-logo img,.brand-strip .bs-s-xxl .bs-logo img{height:clamp(60px,var(--bh),130px)}}
/* Promo banners and promo tiles: text position (the product picture moves to the other side, or hides for centred text) */
.promo.bxo.htx-right .promo-copy{margin-left:auto;text-align:right;align-items:flex-end}
.promo.bxo.htx-center{justify-content:center}
.promo.bxo.htx-center .promo-copy{max-width:min(100%,560px);margin-inline:auto;text-align:center;align-items:center}
.hs-promo.bxo.htx-right{align-items:flex-end;text-align:right}
.hs-promo.bxo.htx-right .hs-promo-copy{align-items:flex-end;margin-left:auto}
.hs-promo.bxo.htx-right img.hs-promo-pic{right:auto;left:12px;object-position:left bottom}
.hs-promo.bxo.htx-center{align-items:center;text-align:center}
.hs-promo.bxo.htx-center .hs-promo-copy{align-items:center;max-width:100%;margin-inline:auto}
.hs-promo.bxo.htx-center img.hs-promo-pic{display:none}
.hs-promo.bxo.htx-center .hs-promo-sub{align-self:center}
.hs-promo.bxo.htx-right .hs-promo-sub{align-self:flex-end}
/* Promo banners and tiles: the link text becomes a real button when a button style is chosen */
.bxo:is(.hb-solid,.hb-arrow,.hb-white,.hb-outline,.hb-glass) :is(.promo-cta,.hs-promo-cta){display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  margin-top:10px;padding:10px 18px;border:2px solid transparent;border-radius:var(--btn-radius);font-weight:700;line-height:1;text-decoration:none}
.bxo.htx-right:is(.hb-solid,.hb-arrow,.hb-white,.hb-outline,.hb-glass) :is(.promo-cta,.hs-promo-cta){align-self:flex-end}
.bxo.htx-center:is(.hb-solid,.hb-arrow,.hb-white,.hb-outline,.hb-glass) :is(.promo-cta,.hs-promo-cta){align-self:center}
.hs-promo.bxo:is(.hb-solid,.hb-arrow,.hb-white,.hb-outline,.hb-glass) .hs-promo-cta{padding:7px 13px;margin-top:8px}
.bxo.hb-link :is(.promo-cta,.hs-promo-cta){display:inline-flex;gap:8px}
/* Promo banner picture (page builder → Promo banners → a banner → Picture tab) */
.promo.bxo{--pp-w:40%}
.promo.bxo.pps-small{--pp-w:30%}.promo.bxo.pps-large{--pp-w:50%}.promo.bxo.pps-xl{--pp-w:62%}
/* In the corner: size, side, height position */
.promo.bxo.ppl-corner > img.promo-pic{width:var(--pp-w);max-height:92%}
.promo.bxo.has-pic.ppl-corner .promo-copy{max-width:calc(100% - var(--pp-w) - 30px)}
.promo.bxo.has-pic.ppl-corner:is(.ppsh-rounded,.ppsh-circle,.ppsh-card) .promo-copy{max-width:calc(100% - min(var(--pp-w),var(--pp-px)) - 30px)}
.promo.bxo.ppl-corner.ppd-left > img.promo-pic{right:auto;left:16px}
.promo.bxo.has-pic.ppl-corner.ppd-left .promo-copy{margin-left:auto}
.promo.bxo.ppl-corner.ppv-middle > img.promo-pic{top:50%;bottom:auto;translate:0 -50%;max-height:84%;object-position:center}
.promo.bxo.ppl-corner.ppv-top > img.promo-pic{top:14px;bottom:auto;max-height:80%;object-position:center top;transform-origin:center top}
.promo.bxo.htx-center.ppl-corner > img.promo-pic{display:none}
/* Half and half */
.promo.bxo.ppl-split.has-pic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;padding:0}
.promo.bxo.ppl-split.has-pic .promo-copy{max-width:none;align-self:center;padding:26px 30px}
.promo.bxo.ppl-split > img.promo-pic{position:relative;inset:auto;width:100%;height:100%;min-height:190px;max-height:none;object-fit:contain;object-position:center;z-index:1}
.promo.bxo.ppl-split.ppd-left > img.promo-pic{order:-1}
/* Picture on top */
.promo.bxo.ppl-top.has-pic{flex-direction:column;align-items:stretch;padding:0}
.promo.bxo.ppl-top.has-pic .promo-copy{max-width:none;padding:20px 26px 24px}
.promo.bxo.ppl-top > img.promo-pic{position:relative;inset:auto;order:-1;width:100%;height:210px;max-height:none;object-fit:contain;object-position:center;z-index:1}
.promo.bxo.ppl-top.htx-right .promo-copy{align-items:flex-end}
/* Fit (half and half, on top) */
.promo.bxo.ppf-cover > img.promo-pic{object-fit:cover}
.promo.bxo.ppf-cover:is(.ppsh-rounded,.ppsh-circle) > img.promo-pic{padding:0;background:none}
/* Large and faded behind the text */
.promo.bxo.ppl-behind > img.promo-pic{width:calc(var(--pp-w) + 22%);max-height:100%;opacity:.3;z-index:0}
.promo.bxo.ppl-behind.ppd-left > img.promo-pic{right:auto;left:0}
.promo.bxo.ppl-behind .promo-copy{max-width:min(100%,640px)}
/* Shape */
.promo.bxo.ppsh-rounded > img.promo-pic,.promo.bxo.ppsh-circle > img.promo-pic{object-fit:contain;background:#fff;padding:7%;box-sizing:border-box;mix-blend-mode:normal}
.promo.bxo{--pp-px:160px}.promo.bxo.pps-small{--pp-px:120px}.promo.bxo.pps-large{--pp-px:200px}.promo.bxo.pps-xl{--pp-px:240px}
.promo.bxo.ppl-corner:is(.ppsh-rounded,.ppsh-circle,.ppsh-card) > img.promo-pic{width:min(var(--pp-w),var(--pp-px));height:auto;aspect-ratio:1;max-width:none;max-height:none}
.promo.bxo.ppl-corner.ppv-bottom:is(.ppsh-rounded,.ppsh-circle,.ppsh-card) > img.promo-pic{bottom:14px}
.promo.bxo.ppsh-rounded > img.promo-pic{border-radius:16px}
.promo.bxo.ppsh-circle > img.promo-pic{border-radius:50%}
.promo.bxo.ppl-split.ppsh-rounded > img.promo-pic,.promo.bxo.ppl-split.ppsh-circle > img.promo-pic{width:auto;height:auto;max-height:86%;max-width:86%;aspect-ratio:1;place-self:center;min-height:0}
.promo.bxo.ppl-top.ppsh-circle > img.promo-pic{width:180px;height:180px;align-self:center;margin-top:18px}
.promo.bxo.ppsh-card > img.promo-pic{background:#fff;padding:10px;border-radius:14px;box-shadow:0 14px 30px -14px rgba(0,0,0,.45);object-fit:contain;mix-blend-mode:normal;box-sizing:border-box}
.promo.bxo.ppl-split.ppsh-card > img.promo-pic,.promo.bxo.ppl-top.ppsh-card > img.promo-pic{width:auto;max-width:86%;height:auto;max-height:86%;min-height:0;place-self:center;align-self:center;margin:16px auto}
.promo.bxo.ppsh-shadow > img.promo-pic{filter:drop-shadow(0 16px 18px rgba(0,0,0,.32));mix-blend-mode:normal}
/* White background of the picture: kept white */
.promo.bxo.ppb-keep > img.promo-pic{mix-blend-mode:normal}
/* Effect */
.promo.bxo > img.promo-pic{transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.promo.bxo.ppe-none:hover > img.promo-pic,.promo.bxo.ppe-float:hover > img.promo-pic,.promo.bxo.ppe-slide:hover > img.promo-pic{transform:none}
.promo.bxo.ppe-tilt:hover > img.promo-pic{transform:rotate(-4deg) scale(1.05)}
.promo.bxo.ppe-float > img.promo-pic{animation:pp-float 4.5s ease-in-out infinite}
.promo.bxo.ppe-slide > img.promo-pic{opacity:0}
.promo.bxo.ppe-slide.is-active > img.promo-pic{animation:pp-slide-in .9s cubic-bezier(.2,.75,.2,1) .15s both}
.promo.bxo.ppe-slide.ppd-left.is-active > img.promo-pic{animation-name:pp-slide-in-left}
@keyframes pp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pp-slide-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes pp-slide-in-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
/* Phones: half and half stacks, picture first; the corner picture keeps out of the text's way */
@media (max-width:600px){
  .promo.bxo.ppl-split.has-pic{grid-template-columns:1fr}
  .promo.bxo.ppl-split > img.promo-pic{order:-1;height:190px;min-height:0}
  .promo.bxo.ppl-split.ppsh-card > img.promo-pic,.promo.bxo.ppl-split:is(.ppsh-rounded,.ppsh-circle) > img.promo-pic{height:170px;width:auto}
}
@media (prefers-reduced-motion:reduce){.promo.bxo > img.promo-pic{animation:none!important;opacity:1;transition:none}}/* Narrow banners (two side by side on a tablet, or a phone): a corner picture moves under the text instead of squeezing it */
.promo.bxo.ppl-corner.has-pic{container-type:inline-size;flex-wrap:wrap}
@container (max-width:420px){
  .promo.bxo.has-pic.ppl-corner .promo-copy{flex:1 1 100%;max-width:100%}
  .promo.bxo.ppl-corner > img.promo-pic{position:relative;inset:auto;translate:none;width:62%;max-height:170px;margin:14px 0 -26px auto}
  .promo.bxo.ppl-corner.ppd-left > img.promo-pic{margin-left:0;margin-right:auto}
  .promo.bxo.ppl-corner:is(.ppsh-rounded,.ppsh-circle,.ppsh-card) > img.promo-pic{width:min(46%,var(--pp-px));margin-bottom:0}
  .promo.bxo.ppl-corner.ppv-top > img.promo-pic{order:-1;margin:-12px 0 12px auto}
}/* Product pictures and videos always sit above the shade and the colour glow (slides, promo tiles, promo banners) */
.hs-slide > :is(.hs-img,.hs-video){position:relative;z-index:1}
.hs-promo img.hs-promo-pic,.promo > img.promo-pic{z-index:1}
.promo.promo-has-video .promo-video{position:relative;z-index:1}
.promo .promo-copy,.hs-promo .hs-promo-copy{z-index:2}
/* ...and a large faded picture behind the text stays behind the words, above the fade */
.promo.bxo.ppl-behind > img.promo-pic{z-index:1}/* Text on the left or right: more room between the words and the banner's edge (promo banners and promo tiles) */
.promo.bxo:not(.htx-center){padding-inline:46px}
.promo.bxo.ppl-split.has-pic .promo-copy{padding:28px 42px}
.promo.bxo.ppl-top.has-pic .promo-copy{padding:22px 38px 26px}
.promo.bxo.ppl-corner > img.promo-pic{right:22px}
.promo.bxo.ppl-corner.ppd-left > img.promo-pic{right:auto;left:22px}
.hs-promo.bxo:not(.htx-center){padding-inline:28px}
.hs.promos-below .hs-promo.bxo:not(.htx-center){padding-inline:36px}
@media (max-width:600px){
  .promo.bxo:not(.htx-center){padding-inline:30px}
  .promo.bxo.ppl-split.has-pic .promo-copy,.promo.bxo.ppl-top.has-pic .promo-copy{padding-inline:28px}
  .hs-promo.bxo:not(.htx-center),.hs.promos-below .hs-promo.bxo:not(.htx-center){padding-inline:24px}
}.hs-promo.bxo.has-pic:not(.htx-center) .hs-promo-copy{max-width:52%}
/* Promo tiles and banners: no fill (the page shows through), and a border as well as / instead of the fill */
.bb.bb-none{background:none;color:inherit}
:is(.promo,.hs-promo).bxo{--bd-c:var(--brand);--bd-w:2px}
.bxo.hbc-accent{--bd-c:var(--accent2)}.bxo.hbc-dark{--bd-c:#16191c}.bxo.hbc-light{--bd-c:#d9dde3}.bxo.hbc-white{--bd-c:#fff}.bxo.hbc-text{--bd-c:currentColor}
.bxo.hbw-1{--bd-w:1px}.bxo.hbw-4{--bd-w:4px}.bxo.hbw-6{--bd-w:6px}
:is(.promo,.hs-promo).bxo:is(.hbd-solid,.hbd-dashed,.hbd-dotted,.hbd-glow){border:var(--bd-w) solid var(--bd-c)}
:is(.promo,.hs-promo).bxo.hbd-dashed{border-style:dashed}
:is(.promo,.hs-promo).bxo.hbd-dotted{border-style:dotted}
:is(.promo,.hs-promo).bxo.hbd-double{border:max(var(--bd-w),4px) double var(--bd-c)}
:is(.promo,.hs-promo).bxo.hbd-inset{outline:var(--bd-w) solid var(--bd-c);outline-offset:calc(-10px - var(--bd-w))}
:is(.promo,.hs-promo).bxo.hbd-glow,:is(.promo,.hs-promo).bxo.hbd-glow:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--bd-c) 35%,transparent),0 0 22px color-mix(in srgb,var(--bd-c) 55%,transparent),inset 0 0 16px color-mix(in srgb,var(--bd-c) 28%,transparent)}/* Hero slider height (page builder → Hero slider → Style → Slider height); phones get a little less */
.hs.hh-taller .hs-slider{min-height:520px}.hs.hh-tall .hs-slider{min-height:600px}.hs.hh-xl .hs-slider{min-height:700px}.hs.hh-full .hs-slider{min-height:max(420px,min(82vh,860px))}
.hs.hh-tall .hs-img,.hs.hh-xl .hs-img,.hs.hh-full .hs-img{max-height:440px}
@media (max-width:860px){.hs.hh-taller .hs-slider{min-height:420px}.hs.hh-tall .hs-slider{min-height:460px}.hs.hh-xl .hs-slider{min-height:520px}.hs.hh-full .hs-slider{min-height:max(420px,70vh)}.hs.hh-tall .hs-img,.hs.hh-xl .hs-img,.hs.hh-full .hs-img{max-height:300px}}/* More side room for left / right text (promo tiles and promo banners) */
.promo.bxo:not(.htx-center){padding-inline:60px}
.promo.bxo.ppl-split.has-pic .promo-copy{padding-inline:52px}
.promo.bxo.ppl-top.has-pic .promo-copy{padding-inline:48px}
.hs-promo.bxo:not(.htx-center){padding-inline:40px}
.hs.promos-below .hs-promo.bxo:not(.htx-center){padding-inline:56px}
@media (max-width:860px){.hs.promos-below .hs-promo.bxo:not(.htx-center){padding-inline:44px}.promo.bxo:not(.htx-center){padding-inline:48px}}
@media (max-width:600px){
  .promo.bxo:not(.htx-center){padding-inline:36px}
  .promo.bxo.ppl-split.has-pic .promo-copy,.promo.bxo.ppl-top.has-pic .promo-copy{padding-inline:32px}
  .hs-promo.bxo:not(.htx-center),.hs.promos-below .hs-promo.bxo:not(.htx-center){padding-inline:32px}
}/* ...and the picture keeps the same kind of distance from the edge */
.hs-promo.bxo img.hs-promo-pic{right:32px}
.hs-promo.bxo.htx-right img.hs-promo-pic{right:auto;left:32px}
.hs.promos-below .hs-promo.bxo img.hs-promo-pic{right:44px}
.hs.promos-below .hs-promo.bxo.htx-right img.hs-promo-pic{right:auto;left:44px}
.hs-promo.bxo img.hs-promo-pic.pic-plain{max-width:36%}
.promo.bxo.ppl-corner > img.promo-pic{right:40px}
.promo.bxo.ppl-corner.ppd-left > img.promo-pic{right:auto;left:40px}
@media (max-width:600px){
  .hs-promo.bxo img.hs-promo-pic,.hs.promos-below .hs-promo.bxo img.hs-promo-pic{right:22px}
  .hs-promo.bxo.htx-right img.hs-promo-pic,.hs.promos-below .hs-promo.bxo.htx-right img.hs-promo-pic{right:auto;left:22px}
  .promo.bxo.ppl-corner > img.promo-pic{right:26px}
  .promo.bxo.ppl-corner.ppd-left > img.promo-pic{right:auto;left:26px}
}.hs-promo.bxo .hs-promo-sub{white-space:nowrap}
.hs.with-promos .hs-promo.bxo img.hs-promo-pic.pic-plain{max-width:32%}
/* A cut-out picture (white background removed): shown as it is, never blended */
.promo.bxo.ppb-cut > img.promo-pic{mix-blend-mode:normal}
/* Block and promo banners: the shade darkens the chosen side and fades out to clear (it no longer covers the whole photo) */
.bxo .bb-tint.tint-shade{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,0) 74%)}
.bxo.bxo.hsd-right .bb-tint.tint-shade{background:linear-gradient(270deg,#000 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,0) 74%)}
.bxo.bxo.hsd-bottom .bb-tint.tint-shade{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,0) 78%)}
.bxo.bxo.hsd-top .bb-tint.tint-shade{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,0) 78%)}
.bxo.bxo.hsd-even .bb-tint.tint-shade{background:#000}/* Block banner picture size (Promo tiles → a tile → Picture size); the text makes room for bigger pictures */
.hs .hs-promo.bxo.tps-small img.hs-promo-pic.pic-plain{max-width:24%;height:72%}
.hs .hs-promo.bxo.tps-small img.hs-promo-pic:is(.pic-circle,.pic-rounded){height:62%}
.hs .hs-promo.bxo.tps-large img.hs-promo-pic.pic-plain{max-width:46%}
.hs .hs-promo.bxo.tps-xl img.hs-promo-pic.pic-plain{max-width:56%}
.hs .hs-promo.bxo.tps-xl img.hs-promo-pic:is(.pic-circle,.pic-rounded),.hs .hs-promo.bxo.tps-large img.hs-promo-pic:is(.pic-circle,.pic-rounded){height:calc(100% - 12px)}
.hs .hs-promo.bxo.has-pic.tps-small:not(.htx-center) .hs-promo-copy{max-width:64%}
.hs .hs-promo.bxo.has-pic.tps-large:not(.htx-center) .hs-promo-copy{max-width:44%}
.hs .hs-promo.bxo.has-pic.tps-xl:not(.htx-center) .hs-promo-copy{max-width:36%}/* Beside the slider (narrow block banners), a large picture gets a little more of the width */
.hs.with-promos .hs-promo.bxo:is(.tps-large,.tps-xl):not(.htx-center){padding-inline:28px}
.hs.with-promos .hs-promo.bxo:is(.tps-large,.tps-xl) img.hs-promo-pic{right:14px}
.hs.with-promos .hs-promo.bxo.htx-right:is(.tps-large,.tps-xl) img.hs-promo-pic{right:auto;left:14px}
.hs.with-promos .hs-promo.bxo.tps-xl img.hs-promo-pic.pic-plain{max-width:52%}
.hs.with-promos .hs-promo.bxo.has-pic.tps-xl:not(.htx-center) .hs-promo-copy{max-width:42%}.hs.promos-below .hs-promo.bxo:is(.tps-large,.tps-xl):not(.htx-center){padding-inline:32px}
.hs.promos-below .hs-promo.bxo:is(.tps-large,.tps-xl) img.hs-promo-pic{right:16px}
.hs.promos-below .hs-promo.bxo.htx-right:is(.tps-large,.tps-xl) img.hs-promo-pic{right:auto;left:16px}
.hs.promos-below .hs-promo.bxo.tps-large img.hs-promo-pic.pic-plain{max-width:42%}
.hs.promos-below .hs-promo.bxo.tps-xl img.hs-promo-pic.pic-plain{max-width:48%}.hs .hs-promo.bxo.has-pic:is(.tps-large,.tps-xl):not(.htx-center) .hs-promo-sub{white-space:normal}
.hs-promo.bxo .hs-promo-cta{white-space:nowrap}
/* Phones: a large or extra-large Promo Block picture gives the words more room, so they don't stack a word per line */
@media (max-width:560px){
  .hs .hs-promo.bxo.has-pic:is(.tps-large,.tps-xl):not(.htx-center){padding-inline:24px}
  .hs .hs-promo.bxo.has-pic:is(.tps-large,.tps-xl):not(.htx-center) .hs-promo-copy{max-width:58%}
  .hs .hs-promo.bxo:is(.tps-large,.tps-xl) img.hs-promo-pic.pic-plain{max-width:40%}
}
/* Narrow promo banners: the picture under the text ignores the height position (middle / top), which would push it out of the banner */
@container (max-width:420px){
  .promo.bxo.ppl-corner:is(.ppv-middle,.ppv-top,.ppv-bottom) > img.promo-pic{top:auto;bottom:auto;translate:none;max-height:170px}
  .promo.bxo.ppl-corner.ppv-top > img.promo-pic{order:0;margin:14px 0 -26px auto}
  .promo.bxo.ppl-corner.ppv-top.ppd-left > img.promo-pic{margin-left:0;margin-right:auto}
}/* Middle Banners on phones and tablets (banner up to 520px wide): the picture goes under the text, much bigger and centred */
@container (max-width:520px){
  .promo.bxo.has-pic.ppl-corner .promo-copy{flex:1 1 100%;max-width:100%}
  .promo.bxo.ppl-corner > img.promo-pic,.promo.bxo.ppl-corner:is(.ppv-middle,.ppv-top,.ppv-bottom) > img.promo-pic,.promo.bxo.ppl-corner.ppd-left > img.promo-pic{
    position:relative;inset:auto;top:auto;bottom:auto;translate:none;order:0;width:94%;max-width:none;height:auto;max-height:300px;margin:18px auto -26px}
  .promo.bxo.ppl-corner:is(.ppsh-rounded,.ppsh-circle,.ppsh-card) > img.promo-pic{width:min(74%,300px);max-height:none;margin:18px auto 0}
}@container (max-width:520px){
  .promo.bxo.ppl-corner > img.promo-pic,.promo.bxo.ppl-corner:is(.ppv-middle,.ppv-top,.ppv-bottom) > img.promo-pic,.promo.bxo.ppl-corner.ppd-left > img.promo-pic{width:calc(100% + 40px);max-height:340px;margin:18px -20px -26px}
  .promo.bxo.ppl-corner:is(.ppsh-rounded,.ppsh-circle,.ppsh-card) > img.promo-pic{width:min(80%,320px);margin:18px auto 0}
}/* A Middle Banner without a picture: the words use the whole banner */
.promo.bxo:not(.has-pic):not(.promo-has-video) .promo-copy{max-width:min(100%,720px)}
.promo.bxo.htx-center:not(.has-pic) .promo-copy{margin-inline:auto}
/* Promo Block picture shown as it is (white background kept, or cut out): never blended into the block's colour */
.hs .hs-promo.bxo.tpb-plain img.hs-promo-pic{mix-blend-mode:normal}
/* "Photo with shade" in a colour: the colour fades in from the chosen side, like the black shade (even = all over) */
.bb-tint.tint-col{-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 30%,transparent 74%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 30%,transparent 74%)}
.hsd-right .bb-tint.tint-col{-webkit-mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.72) 30%,transparent 74%);mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.72) 30%,transparent 74%)}
.hsd-bottom .bb-tint.tint-col{-webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.72) 30%,transparent 78%);mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.72) 30%,transparent 78%)}
.hsd-top .bb-tint.tint-col{-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 30%,transparent 78%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 30%,transparent 78%)}
.hsd-even .bb-tint.tint-col{-webkit-mask-image:none;mask-image:none}
.tint-black{background:#000}
/* Over a background photo the slide's picture sits above the shade and colour glow, never blended into them */
.hs .hs-slide.bb-photo .hs-img{position:relative;z-index:2;mix-blend-mode:normal}
/* The small line (often a price) on a photo block: fully opaque and on a solid pill, so the shade never dims it */
.hs-promo.bb-photo .hs-promo-sub{opacity:1}
.hs.look-showcase .hs-promo.bb-photo:not([class*=" hl-"]) .hs-promo-sub{background:rgba(10,12,16,.72);color:#fff;text-shadow:none}
/* ---- About SaleCart (democart_intro section, internal name kept from DemoCart): SaleCart's own blue/cyan, one warm buy button ---- */
.sec-democart_intro{padding:0}
.dci{--dci-ink:#0b1630;--dci-text:#3b4a66;--dci-muted:#6b7a96;--dci-surface:#fff;--dci-soft:#f3f7ff;--dci-line:#dfe7f5;--dci-a:#1e8bff;--dci-b:#22d3ee;--dci-buy:#ff8a1f;--dci-buy2:#ffb11a;--dci-dark:#050b1c;--dci-dark2:#0a1a3d;
  color:var(--dci-text);line-height:1.6;background:var(--dci-soft);overflow:hidden;overflow-wrap:break-word}
:root[data-theme="dark"] .dci{--dci-ink:#eef4ff;--dci-text:#c3cfe6;--dci-muted:#8f9dba;--dci-surface:#0f1b33;--dci-soft:#091224;--dci-line:#1f2e4d}
.dci *,.dci *::before,.dci *::after{box-sizing:border-box}
.dci a{color:var(--dci-a)}
.dci h1,.dci h2,.dci h3{color:var(--dci-ink);letter-spacing:-.025em;line-height:1.12;margin:0}
.dci-wrap{width:100%;max-width:72rem;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.dci-section{padding:clamp(3.2rem,7vw,5.5rem) 0}
.dci-kicker{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .8rem;font-family:var(--heading-font);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dci-a)}
.dci-kicker::before{content:"";width:1.6rem;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--dci-a),var(--dci-b))}
.dci-h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.dci-lead{max-width:44rem;margin:.9rem 0 0;font-size:clamp(1rem,1.6vw,1.12rem)}
.dci-center{text-align:center}
.dci-center .dci-lead{margin-left:auto;margin-right:auto}
.dci-gap{margin-top:clamp(3rem,6vw,4.5rem)}
/* buy button */
.dci .dci-buy{position:relative;display:inline-flex;align-items:center;gap:.9rem;padding:.85rem 1.15rem .85rem 1.6rem;border-radius:999px;overflow:hidden;isolation:isolate;text-decoration:none;color:#1b0e00;background:linear-gradient(95deg,var(--dci-buy2),var(--dci-buy) 55%,#ff6a1f);box-shadow:0 18px 40px -16px rgba(255,138,31,.95),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .18s ease,filter .2s ease;animation:dci-pulse 2.8s ease-out infinite}
.dci .dci-buy:hover{transform:translateY(-2px);filter:brightness(1.05)}
.dci .dci-buy:focus-visible{outline:3px solid #fff;outline-offset:3px}
.dci-buy::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:dci-sheen 4.2s ease-in-out infinite 1s}
.dci-buy-text{display:flex;flex-direction:column;line-height:1.15}
.dci-buy-text b{font-family:var(--heading-font);font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.dci-buy-text small{font-size:.74rem;font-weight:600;opacity:.8}
.dci-buy-go{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:#1b0e00;color:var(--dci-buy2);flex-shrink:0;transition:transform .2s ease}
.dci-buy-go svg{width:1.15rem;height:1.15rem}
.dci-buy:hover .dci-buy-go{transform:translateX(3px) rotate(-8deg)}
@keyframes dci-sheen{0%,62%{left:-60%}100%{left:130%}}
@keyframes dci-pulse{0%{box-shadow:0 18px 40px -16px rgba(255,138,31,.95),0 0 0 0 rgba(255,177,26,.55)}70%,100%{box-shadow:0 18px 40px -16px rgba(255,138,31,.95),0 0 0 .9rem rgba(255,177,26,0)}}
.dci .dci-ghost{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.1rem;border-radius:999px;font-family:var(--heading-font);font-weight:700;font-size:.9rem;text-decoration:none;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);transition:background-color .2s ease,border-color .2s ease}
.dci .dci-ghost:hover{background:rgba(30,139,255,.25);border-color:rgba(79,179,255,.7)}
.dci-ghost svg{width:.95rem;height:.95rem}
/* hero */
.dci-hero{position:relative;isolation:isolate;color:#dbe6ff;padding:clamp(3rem,7vw,5.5rem) 0 clamp(4rem,8vw,5.5rem);background:radial-gradient(110% 85% at 88% 8%,#0f3a8a 0,transparent 55%),radial-gradient(80% 70% at 0% 100%,#06305a 0,transparent 60%),linear-gradient(160deg,var(--dci-dark2),var(--dci-dark))}
.dci-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 70% at 70% 40%,#000 0,transparent 75%);mask-image:radial-gradient(70% 70% at 70% 40%,#000 0,transparent 75%)}
.dci-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none;animation:dci-drift 16s ease-in-out infinite alternate}
.dci-glow-a{width:34rem;height:34rem;right:-10rem;top:-12rem;background:radial-gradient(circle,rgba(30,139,255,.7),transparent 65%)}
.dci-glow-b{width:26rem;height:26rem;left:-8rem;bottom:-12rem;background:radial-gradient(circle,rgba(34,211,238,.45),transparent 65%);animation-duration:21s}
@keyframes dci-drift{to{transform:translate3d(-3rem,2.5rem,0) scale(1.08)}}
.dci-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.6rem;align-items:center}
.dci-pill{display:inline-flex;align-items:center;gap:.5rem;margin:0;padding:.32rem .8rem .32rem .6rem;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#dbe6ff}
.dci-pill i{width:.5rem;height:.5rem;border-radius:50%;background:#3dff9a;animation:dci-ping 2s ease-out infinite}
@keyframes dci-ping{0%{box-shadow:0 0 0 0 rgba(61,255,154,.6)}80%,100%{box-shadow:0 0 0 .55rem rgba(61,255,154,0)}}
.dci .dci-title{margin-top:1rem;color:#fff;font-weight:800;font-size:clamp(2.2rem,5.4vw,3.7rem);letter-spacing:-.04em;line-height:1.04}
.dci-grad{background:linear-gradient(90deg,#4fb3ff,var(--dci-b) 50%,#8ff0ff);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:dci-shine 6s ease-in-out infinite}
@keyframes dci-shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.dci-hero .dci-lead{color:#b4c3e2}
.dci-hero .dci-lead strong{color:#fff;font-weight:600}
.dci-offer{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:1.8rem}
.dci-price{display:flex;align-items:baseline;gap:.5rem;color:#fff}
.dci-price b{font-family:var(--heading-font);font-weight:800;font-size:clamp(2.2rem,4.4vw,2.9rem);letter-spacing:-.03em;line-height:1}
.dci-price span{display:flex;flex-direction:column;font-size:.76rem;line-height:1.3;color:#a9b8d8}
.dci-price span strong{color:#fff;font-size:.86rem}
.dci-try{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.dci-ticks{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1.4rem 0 0;padding:0;list-style:none;font-size:.82rem;font-weight:500;color:#d7e3ff}
.dci-ticks li{display:inline-flex;align-items:center;gap:.4rem}
.dci-ticks svg{width:.95rem;height:.95rem;color:#3dff9a;flex-shrink:0}
/* hero picture: a store window with floating chips */
.dci-visual{position:relative;width:100%;max-width:32rem;margin:0 auto;padding:1.6rem 0 2.2rem}
.dci-window{position:relative;border-radius:1rem;background:#fff;color:#1d2340;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;animation:dci-bob 7s ease-in-out infinite}
@keyframes dci-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.dci-bar{display:flex;align-items:center;gap:.3rem;padding:.55rem .7rem;background:#eef0f7}
.dci-bar i{width:.55rem;height:.55rem;border-radius:50%;background:#ff5f57}
.dci-bar i:nth-child(2){background:#febc2e}
.dci-bar i:nth-child(3){background:#28c840}
.dci-bar span{flex:1;margin-left:.4rem;padding:.18rem .6rem;border-radius:999px;background:#fff;font-size:.66rem;color:#6a7090}
.dci-shop{padding:.8rem}
.dci-shop-hero{height:5rem;border-radius:.6rem;background:linear-gradient(110deg,#0a1a3d,#1e5bd6 60%,#22d3ee);position:relative}
.dci-shop-hero::before,.dci-shop-hero::after{content:"";position:absolute;left:.8rem;height:.38rem;border-radius:9px;background:rgba(255,255,255,.9)}
.dci-shop-hero::before{top:1.2rem;width:44%}
.dci-shop-hero::after{top:2rem;width:28%;background:rgba(255,255,255,.55)}
.dci-shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:.7rem}
.dci-shop-grid div{border-radius:.55rem;background:#f6f7fb;padding:.4rem}
.dci-shop-grid div::before{content:"";display:block;height:3.4rem;border-radius:.4rem;background:linear-gradient(135deg,#ffd36b,#ff9a3c)}
.dci-shop-grid div:nth-child(2)::before{background:linear-gradient(135deg,#7cf3ff,#1e8bff)}
.dci-shop-grid div:nth-child(3)::before{background:linear-gradient(135deg,#a8f0c6,#16b47a)}
.dci-shop-grid div::after{content:"";display:block;height:.32rem;width:70%;margin-top:.45rem;border-radius:9px;background:#dfe2ee}
.dci-badge{position:absolute;left:-.6rem;top:.2rem;z-index:3;width:4.4rem;height:4.4rem;border-radius:1.2rem;background:linear-gradient(135deg,var(--dci-a),var(--dci-b));color:#fff;display:grid;place-items:center;box-shadow:0 18px 40px -16px rgba(0,0,0,.75);animation:dci-bob 6.5s ease-in-out infinite .3s}
.dci-badge svg{width:2.1rem;height:2.1rem}
.dci-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .75rem;border-radius:999px;background:#fff;color:#1d2340;font-size:.72rem;font-weight:700;box-shadow:0 14px 30px -14px rgba(0,0,0,.7);white-space:nowrap}
.dci-chip svg{width:.95rem;height:.95rem}
.dci-chip-1{right:-.4rem;top:0;animation:dci-bob 6s ease-in-out infinite .5s}
.dci-chip-1 svg{color:var(--dci-buy)}
.dci-chip-2{left:-.8rem;bottom:.6rem;animation:dci-bob 7.5s ease-in-out infinite 1.1s}
.dci-chip-2 svg{color:#16b47a}
.dci-chip-3{right:-.4rem;bottom:2.6rem;background:rgba(10,26,61,.95);color:#fff;border:1px solid rgba(255,255,255,.14);animation:dci-bob 8s ease-in-out infinite .2s}
.dci-chip-3 b{font-family:var(--heading-font);font-size:1rem;color:var(--dci-b)}
/* stats */
.dci-stats{position:relative;z-index:2;margin-top:-2.4rem}
.dci-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.dci-stat{position:relative;padding:1.2rem 1.1rem;border-radius:1.1rem;background:var(--dci-surface);border:1px solid var(--dci-line);box-shadow:0 22px 50px -32px rgba(11,22,48,.45);overflow:hidden}
.dci-stat::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--dci-a),var(--dci-b))}
.dci-stat b{display:block;font-family:var(--heading-font);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.03em;line-height:1.05;background:linear-gradient(90deg,var(--dci-a),var(--dci-b));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.dci-stat span{display:block;margin-top:.3rem;font-size:.84rem;font-weight:600;color:var(--dci-muted)}
/* what it is */
.dci-about{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start}
.dci-about p{margin:.9rem 0 0}
.dci-note{padding:.9rem 1rem;border-radius:.9rem;background:var(--dci-surface);border:1px solid var(--dci-line);font-size:.92rem}
.dci-for{padding:1.5rem;border-radius:1.2rem;background:linear-gradient(150deg,var(--dci-dark2),var(--dci-dark));color:#d7e3ff;box-shadow:0 30px 60px -36px rgba(5,11,28,.9)}
.dci .dci-for h3{color:#fff;font-size:1.1rem}
.dci-for ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .8rem;margin:1rem 0 0;padding:0;list-style:none;font-size:.88rem}
.dci-for li{display:flex;gap:.45rem;align-items:flex-start}
.dci-for li svg{width:.95rem;height:.95rem;margin-top:.25rem;color:var(--dci-b);flex-shrink:0}
/* included */
.dci-included{background:var(--dci-surface);border-block:1px solid var(--dci-line)}
.dci-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:2.2rem}
.dci-card{position:relative;padding:1.4rem 1.3rem;border-radius:1.1rem;background:var(--dci-soft);border:1px solid var(--dci-line);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.dci-card:hover{transform:translateY(-4px);border-color:rgba(30,139,255,.4);box-shadow:0 26px 50px -30px rgba(30,139,255,.55)}
.dci-card-ic{display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:.85rem;background:linear-gradient(135deg,var(--dci-a),var(--dci-b));color:#fff;box-shadow:0 12px 24px -12px rgba(30,139,255,.9)}
.dci-card-ic svg{width:1.4rem;height:1.4rem}
.dci-card h3{margin-top:1rem;font-size:1.06rem}
.dci-card ul{margin:.7rem 0 0;padding:0;list-style:none;font-size:.88rem}
.dci-card li{display:flex;gap:.45rem;align-items:flex-start;padding:.18rem 0}
.dci-card li svg{width:.9rem;height:.9rem;margin-top:.3rem;color:var(--dci-a);flex-shrink:0}
.dci-more{margin:1.6rem 0 0;text-align:center;font-weight:600;color:var(--dci-muted)}
.dci-more a{text-decoration:none}
/* uses */
.dci-uses{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:2.2rem}
.dci-use{display:flex;gap:1rem;align-items:flex-start;padding:1.3rem;border-radius:1.1rem;background:var(--dci-surface);border:1px solid var(--dci-line)}
.dci-use-ic{display:grid;place-items:center;flex-shrink:0;width:2.7rem;height:2.7rem;border-radius:50%;background:rgba(30,139,255,.1);color:var(--dci-a);box-shadow:inset 0 0 0 1px rgba(30,139,255,.25)}
.dci-use-ic svg{width:1.25rem;height:1.25rem}
.dci-use h3{font-size:1rem}
.dci-use p{margin:.35rem 0 0;font-size:.9rem}
/* steps */
.dci-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin:2.2rem 0 0;padding:0;list-style:none;counter-reset:dci}
.dci-step{position:relative;padding:1.4rem 1.3rem 1.3rem;border-radius:1.1rem;background:var(--dci-surface);border:1px solid var(--dci-line);counter-increment:dci}
.dci-step::before{content:counter(dci);display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;font-family:var(--heading-font);font-weight:800;color:#fff;background:linear-gradient(135deg,var(--dci-a),var(--dci-b));box-shadow:0 0 0 6px rgba(30,139,255,.12)}
.dci-step h3{margin-top:.9rem;font-size:1.04rem}
.dci-step p{margin:.35rem 0 0;font-size:.9rem}
/* faq */
.dci-faq{max-width:52rem;margin:2rem auto 0;display:grid;gap:.7rem}
.dci-faq details{border-radius:1rem;background:var(--dci-surface);border:1px solid var(--dci-line);overflow:hidden}
.dci-faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;cursor:pointer;list-style:none;font-family:var(--heading-font);font-weight:700;color:var(--dci-ink)}
.dci-faq summary::-webkit-details-marker{display:none}
.dci-faq summary::after{content:"+";display:grid;place-items:center;flex-shrink:0;width:1.8rem;height:1.8rem;border-radius:50%;background:rgba(30,139,255,.1);color:var(--dci-a);font-size:1.2rem;transition:transform .2s ease}
.dci-faq details[open] summary::after{transform:rotate(45deg)}
.dci-faq details p{margin:0;padding:0 1.2rem 1.1rem;font-size:.92rem}
/* closing call to action */
.dci-cta{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(2.5rem,5vw,3.5rem);padding:clamp(2rem,5vw,3.2rem);border-radius:1.6rem;text-align:center;color:#d7e3ff;background:radial-gradient(90% 120% at 100% 0%,#0f3a8a 0,transparent 60%),linear-gradient(150deg,var(--dci-dark2),var(--dci-dark));box-shadow:0 40px 80px -40px rgba(5,11,28,.9)}
.dci .dci-cta h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.5rem)}
.dci-cta p{max-width:36rem;margin:.8rem auto 0;color:#b4c3e2}
.dci-cta .dci-offer,.dci-cta .dci-try{justify-content:center}
/* "Try a live demo store": one card per demo site, coloured by its theme (.tm-<theme> sets the colour) */
.dci-demos{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem;margin-top:2rem}
.dci-demo{flex:1 1 12.5rem;max-width:19rem;min-width:min(100%,12.5rem);display:flex;flex-direction:column;padding:.8rem .8rem 1.1rem;border-radius:1.1rem;background:var(--dci-surface);border:1px solid var(--dci-line);box-shadow:0 18px 40px -30px rgba(11,22,48,.45);transition:transform .2s ease,box-shadow .2s ease}
.dci-demo:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(11,22,48,.55)}
.dci-demo-shot{position:relative;display:flex;align-items:flex-end;aspect-ratio:16/9;border-radius:.8rem;overflow:hidden;text-decoration:none;background-image:linear-gradient(135deg,rgba(255,255,255,.22),rgba(0,0,0,.25)),radial-gradient(60% 80% at 85% 10%,rgba(255,255,255,.35),transparent 60%)}
.dci-demo-shot::before{content:"";position:absolute;left:12%;right:12%;top:18%;height:42%;border-radius:.5rem;background:rgba(255,255,255,.92);box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.dci-demo-shot::after{content:"";position:absolute;left:12%;right:12%;top:66%;height:10%;border-radius:.35rem;background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 30%,transparent 30% 35%)}
.dci-demo-host{position:relative;z-index:1;margin:.5rem;padding:.2rem .55rem;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.02em}
.dci-demo-theme{display:flex;align-items:center;gap:.4rem;margin:.9rem .2rem 0;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dci-muted)}
.dci-demo-theme .tm-dot{width:.65rem;height:.65rem;border-radius:50%;display:inline-block}
.dci .dci-demo h3{margin:.3rem .2rem 0;font-size:1.15rem;color:var(--dci-ink)}
.dci-demo-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:auto .2rem 0;padding-top:.9rem}
.dci-demo-links a{font-weight:700;font-size:.9rem;color:var(--dci-a);text-decoration:none}
.dci-demo-links a:hover{text-decoration:underline}
.dci-demo-links .dci-demo-go{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem 1rem;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--dci-a),var(--dci-b))}
.dci-demo-links .dci-demo-go:hover{text-decoration:none;filter:brightness(1.08)}
.dci-demo-links .dci-demo-go svg{width:.8rem;height:.8rem}
:root[data-theme="dark"] .dci-demo{background:#111a2e;border-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] .dci .dci-demo h3{color:#fff}
/* Feature odometer in the top banner (as on the afriweb.co.za SaleCart banner): one rolling drum per digit, built by store.js */
.dci-visual-col{display:flex;flex-direction:column;align-items:center;min-width:0}
.dci-count{display:flex;width:max-content;max-width:100%;align-items:center;gap:.9rem;margin:.4rem auto 0;padding:.2rem .3rem;text-decoration:none;color:inherit;opacity:.55;transform:translateY(4px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.22,1,.36,1)}
.dci-count.on,.dci-count:hover,.dci-count:focus-visible{opacity:1;transform:none}
.dci-count:focus-visible{outline:2px solid #7fd8ff;outline-offset:6px;border-radius:.6rem}
.dci-odo{--cell:1.18em;display:inline-flex;gap:.1em;padding:.12em;border-radius:.22em;font-family:var(--heading-font);font-weight:800;font-size:clamp(2.3rem,4vw,3.3rem);line-height:var(--cell);color:#e6f6ff;background:linear-gradient(180deg,#0c1a36,#050b1c);box-shadow:inset 0 0 0 1px rgba(120,195,255,.22),0 16px 34px -16px rgba(30,139,255,.75)}
.dci-odo-d{position:relative;display:block;width:.74em;height:var(--cell);overflow:hidden;border-radius:.13em;background:linear-gradient(180deg,#01050f 0%,#0d2350 50%,#01050f 100%);box-shadow:inset 0 0 0 1px rgba(120,195,255,.2)}
.dci-odo-d::before{content:"";position:absolute;left:0;right:0;top:50%;z-index:2;height:1px;background:rgba(0,0,0,.55);box-shadow:0 1px 0 rgba(120,195,255,.12)}
.dci-odo-d::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(1,5,15,.92) 0%,rgba(1,5,15,0) 30%,rgba(1,5,15,0) 70%,rgba(1,5,15,.92) 100%)}
.dci-odo-strip{display:block;transform:translateY(calc(var(--p,0) * var(--cell) * -1));transition:transform var(--t,.45s) cubic-bezier(.2,.8,.25,1);will-change:transform}
.dci-odo-strip b{display:block;height:var(--cell);line-height:var(--cell);text-align:center;font-weight:800;font-variant-numeric:tabular-nums;color:transparent;background:linear-gradient(180deg,#e6f6ff 15%,#7fd8ff 55%,#22d3ee 90%);-webkit-background-clip:text;background-clip:text}
.dci-count-l{display:flex;flex-direction:column;gap:.3rem;text-align:left;font-family:var(--heading-font);font-size:clamp(.8rem,1.1vw,1rem);font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:rgba(200,225,255,.9)}
.dci-count-l small{font-size:.72em;letter-spacing:.3em;color:#7fd8ff}
@media (max-width:480px){.dci-count{gap:.6rem}.dci-odo{font-size:2.1rem}.dci-count-l{letter-spacing:.16em}}
@media (prefers-reduced-motion:reduce){.dci-count,.dci-odo-strip{transition:none}.dci-count{opacity:1;transform:none}}
/* scroll-in (only once store.js has marked the page) */
.dci-js .dci-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.dci-js .dci-reveal.dci-seen{opacity:1;transform:none}
.dci-js .dci-d1{transition-delay:.08s}.dci-js .dci-d2{transition-delay:.16s}.dci-js .dci-d3{transition-delay:.24s}
@media (min-width:640px){
  .dci-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dci-cards,.dci-uses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dci-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .dci-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem}
  .dci-about{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:3rem}
  .dci-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dci-uses{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:480px){
  .dci .dci-buy{width:100%;justify-content:space-between}
  .dci-for ul{grid-template-columns:minmax(0,1fr)}
  .dci-chip{font-size:.64rem}
  .dci-badge{width:3.6rem;height:3.6rem;left:-.2rem}
  .dci-chip-1,.dci-chip-3{right:0}
  .dci-chip-2{left:0}
}
@media (prefers-reduced-motion:reduce){
  .dci *,.dci *::before,.dci *::after{animation:none!important;transition:none!important}
  .dci-js .dci-reveal{opacity:1;transform:none}
}
/* Promo Blocks on large screens: more room at the sides (words and picture move in from the edges) */
@media (min-width:1200px){
  .hs .hs-promo.bxo.bxo:not(.htx-center){padding-inline:48px}
  .hs.promos-below .hs-promo.bxo.bxo:not(.htx-center){padding-inline:64px}
  .hs .hs-promo.bxo.bxo.htx-center{padding-inline:40px}
  .hs.with-promos .hs-promo.bxo.bxo:is(.tps-large,.tps-xl):not(.htx-center){padding-inline:40px}
  .hs.promos-below .hs-promo.bxo.bxo:is(.tps-large,.tps-xl):not(.htx-center){padding-inline:52px}
  .hs .hs-promo.bxo.bxo:not(.htx-right) img.hs-promo-pic{right:28px}
  .hs.promos-below .hs-promo.bxo.bxo:not(.htx-right) img.hs-promo-pic{right:40px}
  .hs .hs-promo.bxo.bxo.htx-right img.hs-promo-pic{right:auto;left:28px}
  .hs.promos-below .hs-promo.bxo.bxo.htx-right img.hs-promo-pic{left:40px}
}
/* About SaleCart: the features number links to the Features page */
.dci .dci-stat-link{display:block;text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease}
.dci .dci-stat-link:hover{transform:translateY(-3px);border-color:rgba(30,139,255,.45)}
.dci .dci-stat-link span{color:var(--dci-a)}
/* Menu icons (Navigation): beside the name, above it, or the icon alone */
.menu-ico{flex:none;vertical-align:-3px}
:not(.mi) > .menu-ico{margin-right:8px}
.mi{display:inline-flex;align-items:center;gap:7px}
.menu-drop .mi{display:flex}
.mi-above{flex-direction:column;gap:3px;font-size:.9em;line-height:1.1;text-align:center}
.mi-only .mi-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mi-only{gap:2px}
/* Wholesale: the "Trade price" tag beside prices a trade buyer sees */
.trade-tag{display:inline-flex;align-items:center;gap:4px;margin:0 0 4px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;width:max-content}
.trade-tag-lg{font-size:12px;padding:4px 10px;margin-bottom:8px}
.trade-tag span{font-weight:500;text-transform:none;letter-spacing:0;opacity:.8}
:root[data-theme="dark"] .trade-tag{color:color-mix(in srgb,var(--brand) 60%,#fff)}
.auth-form textarea{width:100%;min-width:0;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--ground);color:var(--ink);resize:vertical}
.auth-form textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
.acct-trade-ok{margin:0;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--brand) 9%,transparent)}
/* Quotations: the cart button and the quote pages */
.quote-cta{display:block;width:100%;box-sizing:border-box;text-align:center;margin-top:10px;color:var(--ink);text-decoration:none}
.quote-cta-note{margin:6px 0 0}
.quote-page h1{margin:0 0 8px}
.quote-kicker{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.quote-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;margin-top:18px;align-items:start}
@media (max-width:860px){.quote-grid{grid-template-columns:minmax(0,1fr)}}
.quote-lines{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:10px}
.quote-lines li{display:flex;align-items:center;gap:12px}
.quote-lines img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:var(--surface,#fff);flex:none}
.ql-name{flex:1;display:flex;flex-direction:column;min-width:0}
.ql-qty{font-weight:700;white-space:nowrap}
.quote-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 0}
.quote-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.quote-accepted{background:var(--ok-soft);color:var(--ok)}
.quote-declined,.quote-cancelled,.quote-expired{background:var(--bad-soft);color:var(--bad)}
.quote-message{margin:14px 0 0;padding:12px 16px;border-left:3px solid var(--brand);background:color-mix(in srgb,var(--brand) 6%,transparent);border-radius:0 8px 8px 0}
.quote-table{width:100%;border-collapse:collapse}
.quote-table th,.quote-table td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.quote-table .num{text-align:right;white-space:nowrap}
.quote-table tfoot td{border-bottom:0;padding:5px 6px}
.quote-total td{font-weight:800;font-size:1.08em;border-top:2px solid var(--line)}
.quote-steps{margin:0;padding-left:20px;display:grid;gap:6px}
.quote-decline{margin-top:10px;text-align:center}
/* Editor preview: the Promo Blocks have their own Edit button */
.pv-promos-host{position:relative}
.pv-promos-host:hover>.pv-tools-promos,.pv-promos-host.ed-sel>.pv-tools-promos{display:flex}
.pv-tools-promos{top:6px;right:6px}
/* Maps: more heights, map colours, frames and layouts (full width with a card, strip, compact) */
.map-h-strip{--map-h:220px}.map-h-xl{--map-h:680px}.map-h-screen{--map-h:80vh}
.map-look-grey .map-canvas iframe{filter:grayscale(1) contrast(1.05)}
.map-look-dark .map-canvas iframe{filter:invert(.9) hue-rotate(180deg) brightness(.95) contrast(.9)}
.map-frame-square .map-canvas{border-radius:0;box-shadow:none}
.map-wide,.map-band{display:block}
.map-wide{position:relative}
.map-wide .map-canvas,.map-band .map-canvas{border-radius:0;border-left:0;border-right:0;box-shadow:none}
.map-wide .map-card-wrap{position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none}
.map-card{pointer-events:auto;width:min(400px,100%);padding:24px 26px;border-radius:calc(var(--radius) + 6px);background:var(--ground);border:1px solid var(--line);box-shadow:0 24px 50px -24px rgba(0,0,0,.45)}
.map-card .map-details{margin-bottom:16px}
/* Card positions over the big map (on phones the card sits under the map instead) */
.map-wide .map-card-wrap{padding-block:24px}
.map-card-right .map-card-wrap{justify-content:flex-end}
.map-card-top_left .map-card-wrap,.map-card-top_right .map-card-wrap{align-items:flex-start}
.map-card-bottom_left .map-card-wrap,.map-card-bottom_right .map-card-wrap{align-items:flex-end}
.map-card-top_right .map-card-wrap,.map-card-bottom_right .map-card-wrap{justify-content:flex-end}
/* "Show map" sits in the open part of the map, not under the card */
.map-wide:is(.map-card-left,.map-card-top_left,.map-card-bottom_left) .map-ph{padding-left:min(460px,42%)}
.map-wide:is(.map-card-right,.map-card-top_right,.map-card-bottom_right) .map-ph{padding-right:min(460px,42%)}
@media (max-width:860px){.map-wide .map-ph{padding-inline:24px}}
.map-band-head{text-align:center}
.map-band-head h2{margin:0 0 16px}
.map-band .map-open{margin-left:clamp(16px,4vw,32px)}
.map-compact{max-width:880px;margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch}
.map-compact .map-info{padding:22px 24px;border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);background:var(--soft)}
.map-compact .map-info h2{font-size:1.35em}
.map-compact .map-ph{padding:14px}
.map-compact .map-frame{display:flex;flex-direction:column}
.map-compact .map-canvas{flex:1;height:auto;min-height:var(--map-h,300px)}
@media (max-width:860px){
  .map-wide .map-card-wrap{position:relative;z-index:2;display:block;margin-top:-40px;pointer-events:auto;padding-block:0}
  .map-card{width:100%}
  .map-compact{grid-template-columns:1fr}
  .map-h-xl{--map-h:460px}.map-h-screen{--map-h:70vh}
}
/* Footer: a small map in a column */
.nc-foot-map .map-canvas{height:var(--map-h,170px);border-radius:var(--radius);box-shadow:none}
.nc-foot-map.map-size-xs .map-canvas{--map-h:120px}.nc-foot-map.map-size-medium .map-canvas{--map-h:230px}
.nc-foot-map.map-size-large .map-canvas{--map-h:300px}.nc-foot-map.map-size-xl .map-canvas{--map-h:380px}
.nc-foot-map.map-size-square .map-canvas{height:auto;aspect-ratio:1}
.nc-foot-map .map-frame-round .map-canvas{border-radius:calc(var(--radius) + 14px)}
.nc-foot-map .map-frame-square .map-canvas{border-radius:0}
.nc-foot-map.map-size-xs .map-ph-pin{width:32px;height:32px}.nc-foot-map.map-size-xs .map-ph{gap:4px;padding:6px}
.nc-foot-map .map-ph{gap:6px;padding:10px}
.nc-foot-map .map-ph-pin{width:40px;height:40px}
.nc-foot-map .map-open{margin-top:6px;font-size:13px;color:inherit;opacity:.8}
.nc-foot-map-place{margin:0 0 8px;font-size:14px;opacity:.85}

/* Heading effects (each slide, Promo Block and Middle Banner): help the heading stand out on busy photos.
   Classes are repeated so they win over the looks' own heading shadows.
   Dark effects by default; on light backgrounds (light grey, sunshine) the shadow/outline turn white. */
:is([class*="hte-"]){--hte:0,0,0}
:is(.bg-light,.bg-sun)[class*="hte-"]{--hte:255,255,255}
.hte-shadow.hte-shadow.hte-shadow :is(.hs-title,.promo-title,.hs-promo-title){text-shadow:0 2px 14px rgba(var(--hte),.55),0 1px 3px rgba(var(--hte),.35)}
.hte-strong.hte-strong.hte-strong :is(.hs-title,.promo-title,.hs-promo-title){text-shadow:0 2px 3px rgba(var(--hte),.75),0 4px 18px rgba(var(--hte),.7),0 0 40px rgba(var(--hte),.45)}
.hte-glow.hte-glow.hte-glow :is(.hs-title,.promo-title,.hs-promo-title){text-shadow:0 0 6px color-mix(in srgb,var(--brand) 90%,transparent),0 0 22px color-mix(in srgb,var(--brand) 75%,transparent),0 0 44px color-mix(in srgb,var(--brand) 55%,transparent)}
.hte-outline.hte-outline.hte-outline :is(.hs-title,.promo-title,.hs-promo-title){-webkit-text-stroke:.09em rgba(var(--hte),.85);paint-order:stroke fill}
.hte-backing.hte-backing.hte-backing :is(.hs-title-in,.promo-title,.hs-promo-title),.hte-highlight.hte-highlight.hte-highlight :is(.hs-title-in,.promo-title,.hs-promo-title){padding:.04em .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.12em}
.hte-backing.hte-backing.hte-backing .hs-title,.hte-highlight.hte-highlight.hte-highlight .hs-title{line-height:1.3}
.hte-backing.hte-backing.hte-backing :is(.hs-title-in,.promo-title,.hs-promo-title){background:rgba(10,12,16,.62);color:#fff}
.hte-highlight.hte-highlight.hte-highlight :is(.hs-title-in,.promo-title,.hs-promo-title){background:var(--brand);color:var(--on-brand,#fff)}
.hte-lifted.hte-lifted.hte-lifted :is(.hs-title,.promo-title,.hs-promo-title){text-shadow:1px 1px 0 rgba(var(--hte),.45),2px 2px 0 rgba(var(--hte),.4),3px 3px 0 rgba(var(--hte),.35),4px 4px 0 rgba(var(--hte),.3),6px 8px 14px rgba(var(--hte),.35)}
.hte-gradient.hte-gradient.hte-gradient :is(.hs-title,.promo-title,.hs-promo-title){background:linear-gradient(100deg,var(--brand),var(--accent2,var(--brand)));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}

/* Width of the Promo Blocks beside the hero slider, and of the smaller banners beside a hero banner
   (only where they sit side by side; narrower screens keep their own layout). */
@media (min-width:1101px){
  .hs.with-depts.with-promos.pw-narrow{grid-template-columns:260px minmax(0,1fr) 250px}
  .hs.with-depts.with-promos.pw-wide{grid-template-columns:260px minmax(0,1fr) min(360px,28%)}
  .hs.with-depts.with-promos.pw-xwide{grid-template-columns:260px minmax(0,1fr) min(420px,32%)}
  .hs.with-depts.with-promos.pw-third{grid-template-columns:260px minmax(0,2fr) minmax(0,1fr)}
  .hs.no-depts.with-promos.pw-narrow{grid-template-columns:minmax(0,1fr) 250px}
  .hs.no-depts.with-promos.pw-wide{grid-template-columns:minmax(0,1fr) min(360px,28%)}
  .hs.no-depts.with-promos.pw-xwide{grid-template-columns:minmax(0,1fr) min(420px,32%)}
  .hs.no-depts.with-promos.pw-third{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}
@media (min-width:861px){
  .hero-set.tiles-right.tw-quarter{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
  .hero-set.tiles-right.tw-wide{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .hero-set.tiles-right.tw-half{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* Bundle shown as "build your own" (a configurator, e.g. a PC): full-width choices, the price change per part */
.kit-build .kit-text{align-items:stretch}
.kit-build .kit-select{width:100%;padding:9px 12px;font-size:15px}
.kit-build .kit-line{font-size:14px;color:var(--muted);font-weight:600}
.kit-build .kit-item:has(.kit-select) .kit-line,.kit-build .kit-item.is-extra:not(.is-off) .kit-line{color:var(--ink)}
@media (max-width:560px){.kit-build .kit-item{grid-template-columns:48px minmax(0,1fr)}.kit-build .kit-line{grid-column:2;justify-self:start;margin-top:-4px}}
/* ---- Phones and tablets: header that gets out of the way, department chips, drill-down menu, bottom bar ---- */
.m-chips,.m-bar{display:none}
@media (max-width:860px){
  /* Header → "Keep the header handy": slides away on scroll down, back on scroll up (store.js) */
  body.m-sticky .nc-head{position:sticky;top:0;z-index:30}
  body.m-sticky .nc-head,body.m-sticky .store-head{transition:transform .25s ease}
  body.m-sticky .head-hidden{transform:translateY(-100%)}
  /* The chips already lead to every department, so the "Shop by department" button isn't repeated */
  body:has(.m-chips) .head-btn.hb-m{display:none}
  .m-chips{display:block;background:var(--panel);border-bottom:1px solid var(--line)}
  .m-chips-row{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .m-chips-row::-webkit-scrollbar{display:none}
  .m-chips a{flex:none;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--ground);color:inherit;text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
  .m-chips a[aria-current="page"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
  /* App-style bottom bar */
  body.m-has-bar{--mb-h:calc(60px + env(safe-area-inset-bottom,0px));padding-bottom:calc(var(--mb-h) + var(--tk-b,0px))}
  .m-bar{position:fixed;left:0;right:0;bottom:0;z-index:46;display:flex;background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(0,0,0,.06);padding-bottom:env(safe-area-inset-bottom,0px)}
  .m-bar>a,.m-bar>button{flex:1;min-width:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 2px;border:0;background:none;color:var(--muted);font:inherit;font-size:11px;font-weight:600;text-decoration:none;cursor:pointer}
  .m-bar>a>span:last-child,.m-bar>button>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .m-bar>[aria-current="page"]{color:var(--brand)}
  .m-bar>a:focus-visible,.m-bar>button:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
  .m-bar-ico{position:relative;display:grid}
  .m-bar-ico svg{width:22px;height:22px}
  .m-bar .cart-count{top:-6px;right:-11px;box-shadow:0 0 0 2px var(--panel)}
  /* Everything else fixed to the bottom moves up above the bar */
  body.m-has-bar .ticker-bottom{bottom:var(--mb-h)}
  body.m-has-bar .to-top{bottom:calc(14px + var(--mb-h) + var(--tk-b,0px))}
  body.m-has-bar .edit-fab{bottom:calc(14px + var(--mb-h) + var(--tk-b,0px))}
  body.m-has-bar .edit-fab ~ .to-top{bottom:calc(74px + var(--mb-h) + var(--tk-b,0px))}
  body.m-has-bar .compare-bar{bottom:calc(10px + var(--mb-h) + var(--tk-b,0px))}
  body.m-has-bar .compare-bar:not([hidden]) ~ .to-top{bottom:calc(80px + var(--mb-h) + var(--tk-b,0px))}
  body.m-has-bar .toast{bottom:calc(20px + var(--mb-h) + var(--tk-b,0px))}
  body.m-has-bar .wa:not(.wa-tab){bottom:calc(14px + var(--mb-h) + var(--tk-b,0px))}
}
@media (max-width:560px){
  body.m-no-topbar .nc-top{display:none}
  /* Bigger thumb targets on product cards; quick view and compare stay on the product page */
  .card-actions{gap:8px}
  .card-action{width:44px;height:44px}
  .card-action svg{width:20px;height:20px}
  .card-actions .card-act-quick,.card-actions .list-toggle:has(.lt-compare){display:none}
}
:root[data-theme="dark"] .m-chips,:root[data-theme="dark"] .m-bar{background:var(--ground)}
:root[data-theme="dark"] .m-bar .cart-count{box-shadow:0 0 0 2px var(--ground)}
/* Phone menu: account first, departments open one level at a time */
.m-acct{display:flex;align-items:center;gap:12px;margin:14px 20px 4px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:inherit;text-decoration:none}
.m-acct svg{flex:none}
.m-acct>span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.m-acct b{font-size:16px}
.m-acct small{font-size:13px;color:var(--muted)}
.m-acct::after{content:"›";margin-left:auto;font-size:24px;line-height:1;color:var(--muted)}
.m-acct[aria-current="page"]{border-color:var(--brand)}
.m-drill{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 20px;border:0;border-left:3px solid transparent;background:none;color:inherit;font:inherit;font-weight:600;font-size:16px;text-align:left;cursor:pointer}
.m-drill::after{content:"›";font-size:24px;line-height:1;color:var(--muted);margin-left:12px}
.m-drill:hover,.m-drill:focus-visible{background:var(--soft)}
.m-inner.m-drilled>:not(.m-head):not(.m-panel){display:none}
.m-panel{padding:4px 0}
.m-panel[hidden]{display:none}
.m-panel a{display:block;padding:12px 20px;border-left:3px solid transparent;color:inherit;text-decoration:none;font-weight:600;font-size:16px}
.m-panel a:hover,.m-panel a:focus-visible{background:var(--soft)}
.m-panel a[aria-current="page"]{color:var(--brand);border-left-color:var(--brand);background:var(--soft)}
.m-back{display:flex;align-items:center;gap:6px;margin:10px 12px 0;padding:8px;border:0;background:none;color:var(--muted);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.m-back::before{content:"‹";font-size:24px;line-height:1}
.m-back:hover{color:var(--ink)}
.m-panel-title{margin:4px 20px 8px;font-size:20px;font-weight:800}
@media (prefers-reduced-motion:reduce){body.m-sticky .nc-head,body.m-sticky .store-head{transition:none}}

/* ==== SaleCart front page revamp (2026-10-04): hero in the style of the afriweb.co.za SaleCart banner ==== */
.dci-hero{overflow:hidden}
.dci-hero::before{content:none}
.dci-gridbg{position:absolute;inset:0;z-index:-1;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 70% at 70% 40%,#000 0,transparent 75%);mask-image:radial-gradient(70% 70% at 70% 40%,#000 0,transparent 75%)}
.dci-sparks{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.dci-spark{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(34,211,238,.85);opacity:0;animation:dci-rise var(--d,9s) linear var(--w,0s) infinite}
.dci-spark-b{box-shadow:0 0 8px 2px rgba(30,139,255,.85)}
@keyframes dci-rise{0%{transform:translateY(0);opacity:0}10%{opacity:var(--o,.8)}90%{opacity:var(--o,.8)}100%{transform:translateY(calc(-1 * var(--h,500px))) translateX(var(--x,20px));opacity:0}}
.dci-pill-by{margin-left:.2rem;padding-left:.6rem;border-left:1px solid rgba(255,255,255,.22)}
.dci-pill-by b{color:#7fd8ff}
.dci .dci-title > span{display:block}
.dci-up{animation:dci-up .8s cubic-bezier(.22,1,.36,1) both}
.dci-s1{animation-delay:.09s}.dci-s2{animation-delay:.18s}.dci-s3{animation-delay:.27s}.dci-s4{animation-delay:.36s}.dci-s5{animation-delay:.45s}.dci-s6{animation-delay:.54s}
@keyframes dci-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* the offer: price + the one big button + reassurance + where buying happens */
.dci-offer2{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin:1.6rem 0 0;padding:1.15rem 1.2rem;max-width:40rem;border-radius:1.1rem;background:linear-gradient(135deg,rgba(30,139,255,.18),rgba(34,211,238,.06));border:1px solid rgba(79,179,255,.35);box-shadow:0 20px 50px -30px rgba(30,139,255,.9)}
.dci-price2{position:relative;display:flex;align-items:baseline;gap:.55rem;padding-top:.3rem}
.dci-price-tag{position:absolute;left:-.3rem;top:-1.15rem;padding:.12rem .5rem;border-radius:.35rem;background:#ffd36b;color:#1b1206;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transform-origin:top left;animation:dci-swing 3.2s ease-in-out infinite;white-space:nowrap}
@keyframes dci-swing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(3deg)}}
.dci-price2 b{font-family:var(--heading-font);font-weight:800;font-size:clamp(2.1rem,6vw,2.7rem);letter-spacing:-.03em;line-height:1;color:#fff}
.dci-price-note{display:flex;flex-direction:column;font-size:.74rem;color:#a9b8d8;line-height:1.3}
.dci-price-note strong{color:#fff;font-size:.84rem}
.dci .dci-buy2{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3.25rem;padding:.75rem 1.6rem;margin-left:auto;border-radius:999px;overflow:hidden;font-family:var(--heading-font);font-weight:800;font-size:1.02rem;color:#1b0e00;text-decoration:none;white-space:nowrap;background:linear-gradient(90deg,#ffb11a,#ff8a1f);box-shadow:0 14px 32px -12px rgba(255,138,31,.95);transition:transform .15s ease,filter .2s ease;animation:dci-pulse 2.6s ease-out infinite}
.dci .dci-buy2:hover{filter:brightness(1.07);color:#1b0e00}
.dci .dci-buy2:active{transform:scale(.96)}
.dci .dci-buy2:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dci-buy2 svg{width:1.15rem;height:1.15rem;flex-shrink:0;transition:transform .2s ease}
.dci-buy2:hover svg{transform:translateX(3px)}
.dci-buy2::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:dci-sheen 4s ease-in-out infinite 1.2s}
@keyframes dci-sheen{0%,65%{left:-60%}100%{left:130%}}
@keyframes dci-pulse{0%{box-shadow:0 14px 32px -12px rgba(255,138,31,.95),0 0 0 0 rgba(255,177,26,.55)}70%,100%{box-shadow:0 14px 32px -12px rgba(255,138,31,.95),0 0 0 .8rem rgba(255,177,26,0)}}
.dci-trust{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;width:100%;margin:0;padding:.75rem 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.1);font-size:.76rem;font-weight:500;color:#d7e3ff}
.dci-trust li{display:inline-flex;align-items:center;gap:.35rem}
.dci-trust svg{width:.9rem;height:.9rem;color:#3dff9a;flex-shrink:0}
.dci-afriweb-note{display:flex;gap:.55rem;align-items:flex-start;width:100%;margin:0;padding:.7rem .85rem;border-radius:.8rem;background:rgba(255,211,107,.08);border:1px solid rgba(255,211,107,.3);font-size:.8rem;line-height:1.45;color:#ecdfbd}
.dci-afriweb-note svg{flex:none;width:1.05rem;height:1.05rem;margin-top:.1rem;color:#ffd36b}
.dci-afriweb-note b{color:#fff}
/* three steps, lit one after another */
.dci-hsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:1.2rem 0 0;padding:0;list-style:none;max-width:40rem}
.dci-hstep{position:relative;padding:.6rem .65rem .7rem;border-radius:.85rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.dci-hstep-n{display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:rgba(255,255,255,.1);font-family:var(--heading-font);font-size:.72rem;font-weight:700;color:#fff;animation:dci-stepdot 7.5s ease-in-out infinite}
.dci-hstep-t{display:block;margin-top:.3rem;font-size:.8rem;font-weight:600;line-height:1.25;color:#e6eeff}
.dci-hstep::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--dci-a),var(--dci-b));transform-origin:left;transform:scaleX(0);animation:dci-stepbar 7.5s ease-in-out infinite}
.dci-hstep-1::after,.dci-hstep-1 .dci-hstep-n{animation-delay:2.5s}
.dci-hstep-2::after,.dci-hstep-2 .dci-hstep-n{animation-delay:5s}
@keyframes dci-stepbar{0%{transform:scaleX(0)}26%{transform:scaleX(1)}33%,100%{transform:scaleX(1);opacity:0}}
@keyframes dci-stepdot{0%,4%{background:rgba(255,255,255,.1)}10%,30%{background:linear-gradient(135deg,var(--dci-a),var(--dci-b));box-shadow:0 0 14px rgba(34,211,238,.6)}40%,100%{background:rgba(255,255,255,.1)}}
.dci-hero .dci-try{margin-top:1.3rem}
/* the animated store scene */
.dci-hero-side{display:flex;flex-direction:column;align-items:center;min-width:0}
.dci-scene{position:relative;width:100%;max-width:34rem;margin:0 auto;aspect-ratio:1.12}
.dci-browser{position:absolute;left:2%;top:6%;width:84%;border-radius:.9rem;background:#fff;color:#1d2340;box-shadow:0 30px 60px -25px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;animation:dci-bob 7s ease-in-out infinite,dci-slidein .9s cubic-bezier(.22,1,.36,1) both}
@keyframes dci-slidein{from{opacity:0;transform:translateY(24px) rotate(-1.5deg)}to{opacity:1;transform:none}}
.dci-browser .dci-bar{display:flex;align-items:center;gap:.3rem;padding:.45rem .6rem;background:#eef0f7}
.dci-browser .dci-bar i{width:.48rem;height:.48rem;border-radius:50%;background:#ff5f57}
.dci-browser .dci-bar i:nth-child(2){background:#febc2e}
.dci-browser .dci-bar i:nth-child(3){background:#28c840}
.dci-url{flex:1;margin-left:.35rem;padding:.16rem .55rem;border-radius:999px;background:#fff;font-size:.6rem;color:#6a7090;white-space:nowrap;overflow:hidden}
.dci-url::before{content:"\1F512  "}
.dci-shop-head{display:flex;align-items:center;justify-content:space-between;padding:.55rem .75rem;border-bottom:1px solid #eceef6}
.dci-shop-logo{font-family:var(--heading-font);font-weight:800;font-size:.82rem;letter-spacing:-.02em;color:#1d2340}
.dci-shop-logo em{font-style:normal;color:var(--dci-a)}
.dci-navl{display:flex;gap:.5rem}
.dci-navl span{width:1.6rem;height:.3rem;border-radius:9px;background:#dfe2ee}
.dci-cart{position:relative;display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:.45rem;background:#f3f4fa}
.dci-cart svg{width:.9rem;height:.9rem;color:#1d2340}
.dci-cart-n{position:absolute;top:-.35rem;right:-.4rem;min-width:.95rem;height:.95rem;padding:0 .2rem;border-radius:999px;background:#ff8a1f;color:#fff;font-size:.55rem;font-weight:700;line-height:.95rem;text-align:center;animation:dci-cartpop 6s ease-in-out infinite}
@keyframes dci-cartpop{0%,40%{transform:scale(1)}46%{transform:scale(1.5)}52%,100%{transform:scale(1)}}
.dci-hero-strip{position:relative;margin:.6rem .75rem 0;height:3.1rem;border-radius:.55rem;background:linear-gradient(110deg,#0a1a3d,#1e5bd6 60%,#22d3ee);overflow:hidden}
.dci-hero-strip::before,.dci-hero-strip::after{content:"";position:absolute;left:.65rem;height:.32rem;border-radius:9px;background:rgba(255,255,255,.85)}
.dci-hero-strip::before{top:.75rem;width:42%}
.dci-hero-strip::after{top:1.35rem;width:28%;background:rgba(255,255,255,.5)}
.dci-products{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;padding:.6rem .75rem .75rem}
.dci-prod{border-radius:.55rem;background:#f6f7fb;padding:.35rem;animation:dci-pop .6s cubic-bezier(.34,1.56,.64,1) both}
.dci-prod-0{animation-delay:.45s}.dci-prod-1{animation-delay:.59s}.dci-prod-2{animation-delay:.73s}
@keyframes dci-pop{from{opacity:0;transform:scale(.6) translateY(10px)}to{opacity:1;transform:none}}
.dci-prod img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:.4rem;background:#fff}
.dci-prod-l{height:.28rem;margin-top:.35rem;border-radius:9px;background:#dfe2ee;width:80%}
.dci-prod-p{margin-top:.3rem;font-family:var(--heading-font);font-size:.58rem;font-weight:700;color:#1d2340}
.dci-add{margin-top:.3rem;padding:.18rem 0;border-radius:.35rem;background:#1d2340;color:#fff;font-size:.5rem;font-weight:700;text-align:center;letter-spacing:.02em}
.dci-prod-1 .dci-add{animation:dci-press 6s ease-in-out infinite}
@keyframes dci-press{0%,34%,46%,100%{transform:scale(1);background:#1d2340}38%,42%{transform:scale(.92);background:var(--dci-a)}}
.dci-cursor{position:absolute;z-index:6;width:1.2rem;height:1.2rem;left:0;top:0;animation:dci-cursor 6s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
@keyframes dci-cursor{0%{transform:translate(85%,560%);opacity:0}10%{opacity:1}36%{transform:translate(1450%,1180%)}40%{transform:translate(1450%,1180%) scale(.85)}44%{transform:translate(1450%,1180%) scale(1)}72%{transform:translate(2380%,330%);opacity:1}88%,100%{transform:translate(2380%,330%);opacity:0}}
.dci-toast{position:absolute;z-index:5;right:0;top:46%;display:flex;align-items:center;gap:.55rem;padding:.55rem .75rem .55rem .55rem;border-radius:.8rem;background:rgba(10,26,61,.94);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -18px rgba(0,0,0,.8);color:#fff;animation:dci-toast 6s ease-in-out infinite}
@keyframes dci-toast{0%,48%{transform:translateX(30%);opacity:0}56%,90%{transform:translateX(0);opacity:1}100%{transform:translateX(0);opacity:0}}
.dci-toast-ic{display:grid;place-items:center;flex:none;width:1.8rem;height:1.8rem;border-radius:.55rem;background:linear-gradient(135deg,#3dff9a,#1fbf73);color:#06281a}
.dci-toast-ic svg{width:1rem;height:1rem}
.dci-toast b{display:block;font-size:.72rem}
.dci-toast span span{display:block;font-size:.62rem;color:#a9b8d8}
.dci-salescard{position:absolute;z-index:4;left:0;bottom:2%;width:46%;padding:.65rem .75rem;border-radius:.9rem;background:rgba(10,26,61,.94);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -18px rgba(0,0,0,.85);color:#fff;animation:dci-bob 8s ease-in-out infinite .8s}
.dci-sales-k{font-size:.58rem;color:#a9b8d8;text-transform:uppercase;letter-spacing:.08em}
.dci-sales-v{font-family:var(--heading-font);font-weight:800;font-size:1.05rem}
.dci-sales-v em{font-style:normal;font-size:.62rem;font-weight:600;color:#3dff9a;margin-left:.3rem}
.dci-spark-line{display:block;width:100%;height:2.2rem;margin-top:.2rem}
.dci-spark-line .dci-line{fill:none;stroke:url(#dciLine);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:dci-draw 6s ease-in-out infinite}
.dci-spark-line .dci-area{stroke:none;fill:url(#dciArea);animation:dci-fadearea 6s ease-in-out infinite}
@keyframes dci-draw{0%{stroke-dashoffset:240}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes dci-fadearea{0%,25%{opacity:0}55%,85%{opacity:1}100%{opacity:0}}
.dci-badge2{position:absolute;z-index:5;left:-2%;top:-2%;display:grid;place-items:center;width:4.2rem;height:4.2rem;border-radius:1.2rem;background:linear-gradient(135deg,var(--dci-a),var(--dci-b));color:#fff;box-shadow:0 18px 40px -16px rgba(30,139,255,.75);animation:dci-bob 6.5s ease-in-out infinite .2s}
.dci-badge2 svg{width:2rem;height:2rem}
.dci-chip2{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .65rem;border-radius:999px;background:#fff;color:#1d2340;font-size:.64rem;font-weight:700;box-shadow:0 14px 30px -14px rgba(0,0,0,.7);white-space:nowrap}
.dci-chip2 svg{width:.85rem;height:.85rem}
.dci-chip2-1{right:4%;top:0;animation:dci-bob 6s ease-in-out infinite .4s}
.dci-chip2-1 svg{color:#ff8a1f}
.dci-chip2-2{right:10%;bottom:6%;animation:dci-bob 7.5s ease-in-out infinite 1.2s}
.dci-chip2-2 svg{color:var(--dci-a)}
@keyframes dci-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* The feature counter under the store window: clear of the floating chips, centred under the window;
   on phones the number sits above its words, both centred */
.dci-hero-side .dci-count{margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:639px){
  .dci-hero-side .dci-count{flex-direction:column;gap:.75rem;margin-top:2.6rem}
  .dci-hero-side .dci-odo{font-size:2.8rem}
  .dci-hero-side .dci-count-l{align-items:center;text-align:center;letter-spacing:.2em}
}
/* who makes SaleCart */
.dci-maker{position:relative;background:linear-gradient(90deg,#06122e,#0b2457 50%,#06122e);border-block:1px solid rgba(120,195,255,.16);color:#c9d6f3}
.dci-maker-row{display:flex;align-items:center;gap:1rem;padding-block:1.05rem}
.dci-maker p{margin:0;font-size:.92rem;line-height:1.5}
.dci-maker b{color:#fff}
.dci-maker a{color:#7fd8ff;font-weight:600}
.dci-maker-badge{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:.8rem;background:linear-gradient(135deg,var(--dci-a),var(--dci-b));color:#fff;box-shadow:0 10px 24px -10px rgba(34,211,238,.8)}
.dci-maker-badge svg{width:1.3rem;height:1.3rem}
/* the five demo stores: a mini browser with three of the store's own products, in its theme colour */
.dci-demos-sec{background:radial-gradient(55% 45% at 8% 0%,rgba(30,139,255,.09),transparent 60%),radial-gradient(50% 50% at 92% 100%,rgba(34,211,238,.09),transparent 60%)}
.dci-demo{--tc:#0a6fd6;position:relative}
.dci-demo-neon{--tc:#cc1414}.dci-demo-karoo{--tc:#a4471f}.dci-demo-coastal{--tc:#1f6f8b}.dci-demo-stoep{--tc:#6b4fa0}
.dci-demo::before{content:"";position:absolute;inset:-1px;z-index:1;border-radius:inherit;padding:2px;background:linear-gradient(135deg,var(--tc),transparent 40%,transparent 60%,var(--tc));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s ease;pointer-events:none}
.dci-demo:hover::before{opacity:1}
.dci-demo:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--tc) 75%,transparent)}
/* Every live demo has a card: equal widths, three a row on wide screens, two on tablets (a short last row sits centred) */
@media (min-width:600px){.dci .dci-demo{flex:0 1 calc((100% - 1.1rem) / 2);max-width:none;min-width:0}}
@media (min-width:900px){.dci .dci-demo{flex-basis:calc((100% - 2.2rem) / 3)}}
.dci .dci-demo-shot{display:block;aspect-ratio:auto;border-radius:.85rem;overflow:hidden;border:1px solid var(--dci-line);background:#fff}
.dci .dci-demo-shot::before,.dci .dci-demo-shot::after{content:none}
.dci-demo-bar{display:flex;align-items:center;gap:.25rem;padding:.4rem .55rem;background:#eef0f7}
.dci-demo-bar i{flex:none;width:.42rem;height:.42rem;border-radius:50%;background:#ff5f57}
.dci-demo-bar i:nth-child(2){background:#febc2e}
.dci-demo-bar i:nth-child(3){background:#28c840}
.dci-demo-bar span{min-width:0;margin-left:.3rem;padding:.1rem .45rem;border-radius:999px;background:#fff;font-size:.6rem;color:#6a7090;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dci-demo-band{display:block;height:.5rem;background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 45%,#fff))}
.dci-demo-pics{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:.35rem;padding:.45rem;background:#fff}
.dci-demo-pics img,.dci-demo-pic-ph{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:.45rem;transition:transform .45s ease}
.dci-demo-pics > :first-child{grid-row:1 / 3;aspect-ratio:auto}
.dci-demo-pic-ph{background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 25%,#fff),#f3f6fb)}
.dci-demo:hover .dci-demo-pics img{transform:scale(1.06)}
.dci-demo .dci-demo-theme .tm-dot{background:var(--tc)}
.dci-demo-blurb{margin:.35rem .2rem 0;font-size:.86rem;line-height:1.45;color:var(--dci-text)}
.dci .dci-demo-links .dci-demo-go{background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 70%,#000))}
.dci .dci-demo-links .dci-demo-admin{display:inline-flex;align-items:center;gap:.3rem;color:var(--tc)}
.dci-demo-links .dci-demo-admin svg{width:.75rem;height:.75rem}
.dci-demos-note{margin:1.6rem auto 0;text-align:center;font-size:.86rem;color:var(--dci-muted)}
:root[data-theme="dark"] .dci-demo-blurb{color:#b4c3e2}
:root[data-theme="dark"] .dci .dci-demo-links .dci-demo-admin{color:color-mix(in srgb,var(--tc) 55%,#fff)}
/* fancier sections and the closing call to action */
.dci-card,.dci-use{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.dci-card:hover,.dci-use:hover{transform:translateY(-4px);border-color:rgba(30,139,255,.4);box-shadow:0 24px 48px -30px rgba(30,139,255,.55)}
.dci-cta-glow{position:absolute;z-index:-1;left:50%;top:-40%;width:70%;height:120%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.28),transparent 65%);filter:blur(40px);animation:dci-drift 14s ease-in-out infinite alternate;pointer-events:none}
.dci-cta-by{max-width:34rem;margin:1.2rem auto 0;font-size:.84rem;line-height:1.5;color:#9fb0d0}
.dci-cta-by b{color:#fff}
/* "You're heading to afriweb.co.za" (store.js): shown before a buy link leaves a SaleCart demo */
.dc-buy-dlg{width:min(30rem,calc(100vw - 2rem));max-width:none;padding:0;border:0;border-radius:1.2rem;background:#fff;color:#0b1630;box-shadow:0 40px 80px -30px rgba(5,11,28,.6)}
.dc-buy-dlg::backdrop{background:rgba(5,11,28,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dc-buy-dlg[open]{animation:dci-up .35s cubic-bezier(.22,1,.36,1)}
.dc-buy-in{padding:1.6rem 1.5rem 1.4rem}
.dc-buy-ic{display:grid;place-items:center;width:3rem;height:3rem;border-radius:.9rem;background:linear-gradient(135deg,#ffb11a,#ff8a1f);color:#1b0e00;box-shadow:0 12px 26px -12px rgba(255,138,31,.9)}
.dc-buy-ic svg{width:1.5rem;height:1.5rem}
.dc-buy-dlg h2{margin:.9rem 0 0;font-size:1.3rem;line-height:1.25}
.dc-buy-dlg p{margin:.5rem 0 0;font-size:.95rem;line-height:1.5;color:#3b4a66}
.dc-buy-dlg ol{margin:.7rem 0 0;padding-left:1.25rem;font-size:.92rem;line-height:1.5;color:#3b4a66}
.dc-buy-dlg li{margin:.25rem 0}
.dc-buy-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.dc-buy-go{flex:1 1 auto;padding:.8rem 1.2rem;border:0;border-radius:999px;font:inherit;font-weight:800;color:#1b0e00;background:linear-gradient(90deg,#ffb11a,#ff8a1f);cursor:pointer}
.dc-buy-go:hover{filter:brightness(1.06)}
.dc-buy-stay{padding:.8rem 1.2rem;border:1px solid #dfe7f5;border-radius:999px;background:#fff;font:inherit;font-weight:700;color:#0b1630;cursor:pointer}
.dc-buy-go:focus-visible,.dc-buy-stay:focus-visible{outline:2px solid #1e8bff;outline-offset:3px}
:root[data-theme="dark"] .dc-buy-dlg{background:#111a2e;color:#fff}
:root[data-theme="dark"] .dc-buy-dlg p,:root[data-theme="dark"] .dc-buy-dlg ol{color:#b4c3e2}
:root[data-theme="dark"] .dc-buy-stay{background:transparent;color:#fff;border-color:rgba(255,255,255,.2)}
@media (min-width:1024px){
  .dci-scene{max-width:none;aspect-ratio:auto;padding:1.8rem 0 1.4rem}
  .dci-browser{position:relative;left:auto;top:auto;margin-left:6%;width:84%}
  .dci-salescard{left:-2%;bottom:0;width:40%}
  .dci-badge2{left:1%}
}
@media (min-width:640px) and (max-width:1023px){.dci-scene{max-width:27rem}}
@media (max-width:639px){.dci-scene{max-width:22rem}}
@media (max-width:480px){
  .dci .dci-buy2{width:100%;margin-left:0}
  .dci-hstep-t{font-size:.7rem}
  .dci-chip2{font-size:.56rem}
  .dci-badge2{width:3.4rem;height:3.4rem}
  .dci-badge2 svg{width:1.6rem;height:1.6rem}
  .dci-maker-row{align-items:flex-start}
  .dci-pill-by{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dci-toast{opacity:1}
  .dci-cursor{display:none}
  .dci-spark-line .dci-line{stroke-dashoffset:0}
}

/* ==== SaleCart front page footer (store/_brand_footer.php, brand site only) ==== */
.dcf{position:relative;isolation:isolate;overflow:hidden;color:#b4c3e2;background:radial-gradient(70% 90% at 100% 0%,#0f3a8a 0,transparent 60%),linear-gradient(160deg,#0a1a3d,#050b1c);font-size:.93rem}
.dcf-glow{position:absolute;z-index:-1;left:-10rem;bottom:-14rem;width:32rem;height:32rem;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.25),transparent 65%);filter:blur(60px);pointer-events:none}
.dcf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;padding-block:clamp(2.5rem,6vw,4rem) 2.2rem}
.dcf-logo{display:inline-flex;padding:.55rem .8rem;border-radius:.9rem;background:#fff;box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
.dcf-logo img{display:block;height:2.6rem;width:auto}
.dcf-logo .logo-for-dark{display:none}
.dcf-about p{max-width:26rem;margin:.9rem 0 0;line-height:1.6}
.dcf-by{display:flex;align-items:center;gap:.6rem;color:#dbe6ff}
.dcf-by-ic{display:grid;place-items:center;flex:none;width:2.1rem;height:2.1rem;border-radius:.65rem;background:linear-gradient(135deg,#1e8bff,#22d3ee);color:#fff}
.dcf-by-ic svg{width:1.1rem;height:1.1rem}
.dcf a{color:#dbe6ff;text-decoration:none}
.dcf a:hover{color:#7fd8ff}
.dcf-by a{color:#7fd8ff;font-weight:700}
.dcf .dcf-buy{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;padding:.65rem 1.2rem;border-radius:999px;font-weight:800;color:#1b0e00;background:linear-gradient(90deg,#ffb11a,#ff8a1f);box-shadow:0 12px 26px -12px rgba(255,138,31,.9)}
.dcf .dcf-buy:hover{color:#1b0e00;filter:brightness(1.07)}
.dcf-buy svg{width:.8rem;height:.8rem}
.dcf-col{display:flex;flex-direction:column;gap:.55rem}
.dcf-col h3{margin:0 0 .4rem;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.dcf-col a{display:inline-flex;align-items:center;gap:.5rem;width:max-content;max-width:100%}
.dcf-col .tm-dot{flex:none;width:.6rem;height:.6rem;border-radius:50%}
.dcf-col .dcf-small{font-size:.8rem;color:#8fa3c7}
.dcf-note{margin:0 0 .2rem;font-size:.84rem;line-height:1.5;color:#8fa3c7}
.dcf-bottom{border-top:1px solid rgba(120,195,255,.14);background:rgba(0,0,0,.18)}
.dcf-bottom-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.4rem;padding-block:1rem;font-size:.82rem;color:#8fa3c7}
.dcf-bottom a{color:#dbe6ff}
.dcf-legal{display:inline-flex;flex-wrap:wrap;gap:1rem}
.dcf-pay{display:inline-flex;align-items:center;gap:.4rem}
.dcf-pay svg{width:.9rem;height:.9rem;color:#3dff9a}
@media (min-width:700px){.dcf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.dcf-grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.5rem}}
/* SaleCart demos: the way back to salecart.co.za (demo bar, Demos menu, phone menu) */
.demo-bar .demo-bar-home{margin-left:.7rem;font-weight:700;white-space:nowrap}
.menu-drop .tm-home{font-weight:700;border-bottom:1px solid var(--line);margin-bottom:.25rem;padding-bottom:.6rem}
.m-links .m-dc-home{font-weight:700;color:var(--brand)}
/* The SaleCart Demos drop-down lists every live demo site (DemoPack::sites): two columns on wide screens */
.store-nav .demo-menu .dm-drop,.nc-links .demo-menu .dm-drop{display:grid;grid-template-columns:repeat(2,minmax(15rem,1fr));column-gap:4px;padding:6px}
.demo-menu .dm-drop .tm-home{grid-column:1 / -1}
.store-nav .demo-menu .dm-drop a,.nc-links .demo-menu .dm-drop a{padding:8px 12px;border-radius:8px}
.store-nav .demo-menu .dm-drop a[aria-current="true"],.nc-links .demo-menu .dm-drop a[aria-current="true"]{background:var(--soft)}
.demo-menu .dm-drop .tm-note{margin-left:18px;white-space:nowrap}
.demo-menu .dm-drop .tm-now{margin-left:4px;font-size:10px}
/* …and the phone menu shows them as a two-column grid of short names */
.m-links .m-demos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:4px 16px 8px}
.m-links .m-demos a{display:flex;align-items:center;gap:8px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:10px;font-size:15px}
.m-links .m-demos a[aria-current="true"]{border-color:var(--brand);color:var(--brand);background:var(--soft)}
.m-demos .tm-dot{flex:none;margin-right:0}
.m-demo-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Phones (simple header): the logo gives way, shrinking within its space, so the header icons never sit on it.
   On small phones the icons that are also in the phone menu (prices in, wishlist, then account) leave the
   header row, in both header layouts, so the logo keeps a readable size. */
@media (max-width:860px){
  .head-row > .m-burger,.head-row > .head-tools{flex:none}
  .head-row .store-brand img{max-width:100%;object-position:left center}
}
@media (max-width:480px){.head-row{column-gap:8px}.head-tools > .cur-switch{display:none}}
@media (max-width:400px){.head-tools > .wish-link,.nc-tools > .wish-link{display:none}.nc-tools{gap:6px}}
@media (max-width:360px){.head-tools > .acct-link,.nc-tools > .nc-acct,.nc-tools > .acct-link{display:none}}
/* SaleCart front page header: Afriweb's number and email (icons only where space is tight) */
.dc-contact{display:flex;align-items:center;gap:1.1rem;margin-right:.3rem}
.dc-contact a{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:600;color:inherit;text-decoration:none;white-space:nowrap}
.dc-contact a:hover{color:var(--brand)}
.dc-contact svg{flex:none;color:var(--brand)}
@media (max-width:1199px){
  .dc-contact{gap:.45rem}
  .dc-contact span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dc-contact a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line)}
}
@media (max-width:420px){.dc-contact a{width:36px;height:36px}.dc-contact{gap:.3rem;margin-right:0}}/* the brand site's one-row header never wraps: the logo gives way first */
@media (min-width:861px){
  .brand-head .head-row{flex-wrap:nowrap}
  .brand-head .store-brand{flex:0 1 auto;min-width:0}
  .brand-head .store-brand img{max-width:100%}
  .brand-head .store-nav{flex:1 1 auto;min-width:0}
  .brand-head .head-tools{flex:none}
}
@media (min-width:861px) and (max-width:1279px){.brand-head .store-brand img{height:52px;max-height:52px}.brand-head .store-nav{gap:14px}}
@media (max-width:560px){.brand-head .store-brand img{height:40px;max-height:40px;max-width:100%}.brand-head .head-row{gap:8px}}
/* ==== Images → "Box around each product" (body.cs-<style>): product cards in grids and sliders ==== */
:is(.cs-outline,.cs-shadow,.cs-lift,.cs-frame,.cs-accent) .card{padding:10px 10px 14px;border-radius:calc(var(--radius) + 8px);background:var(--panel);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cs-outline .card{border:1px solid var(--line)}
.cs-outline .card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.cs-shadow .card{border:1px solid color-mix(in srgb,var(--line) 55%,transparent);box-shadow:0 12px 28px -20px rgba(15,23,42,.4),0 2px 6px -4px rgba(15,23,42,.12)}
.cs-shadow .card:hover{transform:translateY(-3px);box-shadow:0 20px 38px -22px rgba(15,23,42,.45),0 2px 8px -4px rgba(15,23,42,.14)}
.cs-lift .card{border:1px solid transparent;box-shadow:0 10px 26px -20px rgba(15,23,42,.35)}
.cs-lift .card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--brand) 30%,transparent);box-shadow:0 28px 46px -24px color-mix(in srgb,var(--brand) 70%,transparent)}
.cs-frame .card{border:1px solid var(--line);padding:12px 12px 16px}
.cs-frame .card-media{padding:7px;border-radius:calc(var(--radius) + 4px);background:color-mix(in srgb,var(--brand) 7%,var(--soft));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 12%,var(--line))}
.cs-frame .card:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.cs-accent .card{position:relative;overflow:hidden;border:1px solid var(--line)}
.cs-accent .card::before{content:"";position:absolute;z-index:2;left:0;top:0;height:3px;width:34%;background:var(--brand);border-radius:0 3px 3px 0;transition:width .35s ease}
.cs-accent .card:hover::before,.cs-accent .card:focus-within::before{width:100%;border-radius:0}
.cs-accent .card:hover{box-shadow:0 18px 34px -24px rgba(15,23,42,.4)}
:root[data-theme="dark"] :is(.cs-shadow,.cs-lift) .card{border-color:rgba(255,255,255,.08);box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
:root[data-theme="dark"] .cs-lift .card:hover{box-shadow:0 28px 46px -22px color-mix(in srgb,var(--brand) 55%,transparent)}
/* Equal boxes: a card fills its slider slot (grids already stretch), and the price sits on the bottom edge,
   so a card with a reviews line or a two-line name lines up with its neighbours. */
:is(.cs-outline,.cs-shadow,.cs-lift,.cs-frame,.cs-accent) .car-item{display:flex;flex-direction:column}
:is(.cs-outline,.cs-shadow,.cs-lift,.cs-frame,.cs-accent) .car-item>.card{flex:1 1 auto}
:is(.cs-outline,.cs-shadow,.cs-lift,.cs-frame,.cs-accent) .card>:is(.card-price,.trade-tag){margin-top:auto}
:is(.cs-outline,.cs-shadow,.cs-lift,.cs-frame,.cs-accent) .card>.trade-tag~.card-price{margin-top:0}
/* A slider scrolls sideways, so it clips anything outside its box, including a hovered card's lift and glow.
   Give boxed cards room inside the track (more below, where the glow falls) and take the same space back
   outside it, so the row doesn't move. */
:is(.cs-shadow,.cs-lift,.cs-accent) .car-track{padding:12px 16px 48px;margin:-10px -14px -40px;scroll-padding-inline:16px}
@media (max-width:560px){:is(.cs-shadow,.cs-lift,.cs-accent) .car-track{padding:10px 12px 40px;margin:-8px -10px -32px;scroll-padding-inline:12px}}
@media (max-width:560px){:is(.cs-outline,.cs-shadow,.cs-lift,.cs-frame,.cs-accent) .card{padding:7px 7px 11px}.cs-frame .card-media{padding:5px}}
@media (prefers-reduced-motion:reduce){:is(.cs-shadow,.cs-lift) .card:hover{transform:none}.cs-accent .card::before{transition:none}}
/* ==== Banner product pictures: always above the banner's photo, shade and decoration, and bigger on large
   screens (the main slide's product used to stop at ~340px tall even on a 1920px screen). ==== */
.hs .hs-promo.hs-promo img.hs-promo-pic.hs-promo-pic,.promo.promo > img.promo-pic.promo-pic,.hs .hs-slide.hs-slide .hs-img.hs-img{z-index:2}
.promo.promo .promo-copy.promo-copy,.hs .hs-promo.hs-promo .hs-promo-copy.hs-promo-copy,.hs .hs-slide.hs-slide .hs-copy.hs-copy{position:relative;z-index:3}
@media (min-width:1200px){
  .hs .hs-img{max-height:min(30vw,480px)}
  .hs.hh-taller .hs-img,.hs.hh-tall .hs-img,.hs.hh-xl .hs-img,.hs.hh-full .hs-img{max-height:min(34vw,560px)}
  .hs .hs-promo:not(.tps-small) img.hs-promo-pic.pic-plain{max-width:50%}
  .hs .hs-promo.has-pic:not(.tps-small):not(.htx-center) .hs-promo-copy{max-width:50%}
}
@media (min-width:1600px){
  .hs .hs-img{max-height:min(30vw,540px)}
  .hs .hs-promo:not(.tps-small) img.hs-promo-pic.pic-plain{max-width:54%}
}
/* ==== Social media (Online store → Social media): profile icons, share buttons, "Follow us" section ==== */
.so-facebook{--net:#1877f2}.so-instagram{--net:#e1306c}.so-tiktok{--net:#111}.so-x{--net:#111}.so-youtube{--net:#f00}.so-linkedin{--net:#0a66c2}
.so-pinterest{--net:#e60023}.so-whatsapp{--net:#1fae54}.so-telegram{--net:#229ed9}.so-email,.so-copy,.so-share{--net:#5b6472}
:root[data-theme="dark"] :is(.so-tiktok,.so-x){--net:#f2f2f2;--fg:#111}
/* black marks (TikTok, X) keep a faint ring so they show on dark footers and bars too */
.so-c-brand:is(.so-st-round,.so-st-square) :is(.so-tiktok,.so-x),.so-c-brand .sf-card:is(.so-tiktok,.so-x) .sf-ic{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.so-c-brand:is(.so-st-outline,.so-st-plain,.so-section) :is(.so-tiktok,.so-x),.so-c-brand .share-btn:is(.so-tiktok,.so-x){--net:currentColor}
.so-c-brand .share-btn:is(.so-tiktok,.so-x){background:#111;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}:root[data-theme="dark"] .so-c-brand .share-btn:is(.so-tiktok,.so-x){background:#f2f2f2;color:#111}
:root[data-theme="dark"] :is(.so-email,.so-copy,.so-share){--net:#aab3c2;--fg:#111}
.so-c-store :is(.so-link,.share-btn,.sf-card){--net:var(--brand);--fg:#fff}
.so-c-mono :is(.so-link,.share-btn,.sf-card){--net:currentColor}
.so-icons{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.so-sz-sm{--so-s:30px}.so-sz-md{--so-s:38px}.so-sz-lg{--so-s:46px}.so-sz-xl{--so-s:64px}
.so-link{display:inline-grid;place-items:center;width:var(--so-s,38px);height:var(--so-s,38px);border-radius:50%;text-decoration:none;color:var(--net);
  transition:transform .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,filter .2s ease}
.so-link svg{display:block}
.so-st-round .so-link,.so-st-square .so-link{background:var(--net);color:var(--fg,#fff)}
.so-st-square .so-link{border-radius:28%}
.so-st-outline .so-link{border:1.6px solid var(--net);color:var(--net)}
.so-st-plain .so-link{width:auto;height:auto;min-width:var(--so-s,38px);min-height:var(--so-s,38px)}
.so-c-brand.so-st-round .so-instagram,.so-c-brand.so-st-square .so-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 6%,#fd5949 45%,#d6249f 62%,#285aeb 92%)}
.so-c-mono.so-st-round .so-link,.so-c-mono.so-st-square .so-link{background:color-mix(in srgb,currentColor 9%,transparent);color:inherit}
.so-link:hover,.so-link:focus-visible{transform:translateY(-2px)}
.so-st-round .so-link:hover,.so-st-square .so-link:hover{filter:brightness(1.1);box-shadow:0 8px 18px -10px var(--net)}
.so-st-outline .so-link:hover{background:var(--net);color:var(--fg,#fff)}
.so-c-mono.so-st-outline .so-link:hover{background:color-mix(in srgb,currentColor 12%,transparent);color:inherit}
.so-c-mono.so-st-round .so-link:hover,.so-c-mono.so-st-square .so-link:hover{background:color-mix(in srgb,currentColor 16%,transparent);box-shadow:none}
.so-st-plain .so-link:hover{filter:brightness(1.15)}
.so-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* where they sit */
.so-topbar{gap:2px}
.so-topbar .so-link{width:28px;height:28px;min-width:0;min-height:0;background:none !important;border:0 !important;color:inherit !important;opacity:.85}
.so-topbar .so-link:hover{opacity:1;transform:none}
.foot-social{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:18px;padding-bottom:6px}
.foot-social-left{justify-content:flex-start}.foot-social-center{justify-content:center}.foot-social-right{justify-content:flex-end}
.foot-social-label{font-weight:700;font-size:.92rem}
.m-social{padding:14px 18px 6px;border-top:1px solid var(--line)}
.m-social .so-icons{gap:10px}
/* share buttons on product pages */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:18px 0 6px;position:relative}
.share-label{font-weight:700;font-size:.9rem}
.share-row{display:flex;flex-wrap:wrap;gap:8px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border:0;border-radius:999px;font:inherit;font-size:.86rem;font-weight:600;
  cursor:pointer;text-decoration:none;color:var(--fg,#fff);background:var(--net);transition:transform .2s ease,filter .2s ease,background-color .2s ease}
.share-btn:hover{transform:translateY(-1px);filter:brightness(1.1)}
.share-btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.share-icons .share-btn{width:38px;padding:0}
.share-icons .share-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.share-labels .share-btn{padding:0 14px 0 11px}
.so-c-mono .share-btn{background:color-mix(in srgb,currentColor 9%,transparent);color:inherit}
.so-c-mono .share-btn:hover{background:color-mix(in srgb,currentColor 16%,transparent);filter:none}
.share-menu{position:relative}
.share-menu summary{list-style:none;padding:0 16px 0 12px;background:transparent;color:inherit;border:1.5px solid var(--line)}
.share-menu summary::-webkit-details-marker{display:none}
.share-menu[open] summary{border-color:var(--brand)}
.share-pop{position:absolute;z-index:30;left:0;top:calc(100% + 8px);display:grid;gap:6px;min-width:210px;padding:10px;border-radius:14px;background:var(--panel,#fff);
  border:1px solid var(--line);box-shadow:0 22px 44px -22px rgba(15,23,42,.45)}
.share-pop .share-btn{justify-content:flex-start;padding:0 14px 0 10px;width:100%}
.share-done{font-size:.85rem;font-weight:600;color:var(--brand);opacity:0;transition:opacity .2s}
.share-said .share-done{opacity:1}
/* "Follow us" section */
.sf-head{text-align:center;max-width:640px;margin:0 auto 22px}
.sf-head h2{margin:0 0 6px}
.sf-head p{margin:0;opacity:.8}
.sf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;list-style:none;margin:0;padding:0}
.sf-card{display:flex;align-items:center;gap:14px;height:100%;padding:16px 18px;border-radius:calc(var(--radius) + 8px);background:var(--panel);border:1px solid var(--line);
  color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.sf-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--net) 45%,var(--line));box-shadow:0 18px 36px -24px var(--net)}
.sf-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--net);color:var(--fg,#fff)}
.so-c-brand .sf-card.so-instagram .sf-ic{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 6%,#fd5949 45%,#d6249f 62%,#285aeb 92%)}
.so-c-mono .sf-ic{background:color-mix(in srgb,currentColor 9%,transparent);color:inherit}
.sf-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.sf-txt b{font-size:1rem}
.sf-txt span{font-size:.85rem;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-btn{flex:none;padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:700;border:1.5px solid var(--net);color:var(--net);transition:background-color .2s,color .2s}
.so-c-mono .sf-btn{border-color:currentColor;color:inherit}
.sf-card:hover .sf-btn{background:var(--net);color:var(--fg,#fff)}
.so-c-mono .sf-card:hover .sf-btn{background:color-mix(in srgb,currentColor 12%,transparent);color:inherit}
.sf-l-strip .so-icons,.sf-l-big .so-icons{justify-content:center;gap:14px 22px}
.sf-l-strip .so-link{display:inline-flex;align-items:center;gap:8px;width:auto;padding:0 6px;font-weight:600;color:var(--net)}
.sf-l-strip .sf-name{color:inherit}
.sf-l-big .so-icons{gap:18px}
@media (max-width:560px){.sf-card{padding:13px 14px;gap:12px}.sf-ic{width:42px;height:42px}.share-pop{min-width:190px}}
@media (prefers-reduced-motion:reduce){.so-link,.share-btn,.sf-card{transition:none}.so-link:hover,.share-btn:hover,.sf-card:hover{transform:none}}
/* Order page: updates from the store */
.op-update-list{list-style:none;margin:8px 0 0;padding:0 0 0 18px;border-left:2px solid color-mix(in srgb,var(--brand) 45%,transparent)}
.op-update-list li{position:relative;padding:2px 0 12px}
.op-update-list li:last-child{padding-bottom:0}
.op-update-list li::before{content:"";position:absolute;left:-24px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--ground);border:2px solid var(--brand)}
.op-update-list li.latest::before{background:var(--brand)}
.op-update-list time{margin-left:6px}
.op-update-list p{margin:4px 0 0;overflow-wrap:anywhere}

/* Footer logo wall (use in a footer column's HTML): white logo tiles, a call button and a payments strip.
   <div class="ft-logos"><a class="ft-logo" href="…"><img src="…" alt="…"></a>…</div>
   <a class="ft-pill" href="tel:…"><b>0861 711 712</b><small>Mon–Fri 8:00–17:00</small></a>  <p class="ft-pay"><img …></p> */
footer .ft-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:2px 0 8px}
footer .ft-logo{position:relative;display:flex;align-items:center;justify-content:center;height:62px;padding:9px 12px;background:#fff;border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08);transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}
footer .ft-logo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s ease}
footer .ft-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
footer a.ft-logo:hover,footer a.ft-logo:focus-visible{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.35),0 0 0 2px var(--brand)}
footer a.ft-logo:hover::after{transform:translateX(120%)}
footer .ft-note{margin:0 0 14px;font-size:12px;opacity:.7}
footer a.ft-pill{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 18px 10px 46px;border-radius:999px;background:var(--brand);color:var(--on-brand);
  text-decoration:none;position:relative;box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 35%,transparent);transition:transform .2s ease,box-shadow .2s ease}
footer a.ft-pill::before{content:"";position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
footer a.ft-pill b{font-size:17px;letter-spacing:.02em;line-height:1.2}
footer a.ft-pill small{font-size:11px;opacity:.85;line-height:1.2}
footer a.ft-pill:hover{transform:translateY(-2px);box-shadow:0 10px 22px color-mix(in srgb,var(--brand) 45%,transparent)}
footer .ft-pay{margin:14px 0 0;padding:8px 12px;background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
footer .ft-pay img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){footer .ft-logo,footer .ft-logo::after,footer a.ft-pill{transition:none}}
/* Compare bar: close button */
.cmp-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;margin-left:-6px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;opacity:.75;cursor:pointer}
.cmp-close:hover,.cmp-close:focus-visible{opacity:1;background:color-mix(in srgb,currentColor 16%,transparent)}
.cmp-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.compare-bar .btn-brand{white-space:nowrap}
@media (max-width:420px){.compare-bar{gap:10px;padding-left:16px}.compare-bar .btn-brand{padding:9px 14px}}

/* Checkout section headings: inside the box (not on its border), numbered, with a line under them */
.co-box>legend{float:left;width:100%;display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--line);font-family:var(--heading-font);font-size:18px;font-weight:800;line-height:1.2;color:var(--ink)}
.co-box>legend+*{clear:both}
.co-step{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--on-brand);font-family:var(--font);font-size:14px;font-weight:800}
/* Billing address: only asked for when it differs from the delivery address */
.bill-fields{margin-top:14px}
.co-bill:has(input[name="bill_same"]:checked) .bill-fields{display:none}
.co-bill:has(#bill_country option[value="ZA"]:checked) .bill-region{display:none}
.co-bill:has(#bill_country):not(:has(#bill_country option[value="ZA"]:checked)) .bill-province{display:none}
.op-sub{font-size:14px;margin:14px 0 4px}

/* ==== Banner decoration (a slide's, promo block's or middle banner's Background → Decoration, on solid and
   gradient colours): twinkling stars with a little ringed planet, or confetti. Drawn in CSS from empty <i>
   elements behind the text and the picture; the busy part stays clear of the text; still for reduced motion. ==== */
.bb-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.bb-deco::before{content:"";position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(ellipse 42% 52% at 27% 52%,transparent 50%,#000 100%);mask-image:radial-gradient(ellipse 42% 52% at 27% 52%,transparent 50%,#000 100%)}
.htx-center > .bb-deco::before{-webkit-mask-image:radial-gradient(ellipse 46% 52% at 50% 52%,transparent 50%,#000 100%);mask-image:radial-gradient(ellipse 46% 52% at 50% 52%,transparent 50%,#000 100%)}
.htx-right > .bb-deco{transform:scaleX(-1)}
.bb-deco i{position:absolute;display:block;width:var(--dk-s,10px);aspect-ratio:1}
.bb-deco i:nth-child(1){left:4%;top:9%;--dk-s:14px;--dk-d:0s}
.bb-deco i:nth-child(2){left:45%;top:6%;--dk-s:10px;--dk-d:-1.1s}
.bb-deco i:nth-child(3){left:67%;top:13%;--dk-s:16px;--dk-d:-2.2s}
.bb-deco i:nth-child(4){left:95%;top:40%;--dk-s:11px;--dk-d:-.6s}
.bb-deco i:nth-child(5){left:57%;top:87%;--dk-s:12px;--dk-d:-1.7s}
.bb-deco i:nth-child(6){left:88%;top:86%;--dk-s:9px;--dk-d:-2.6s}
.bb-deco i:nth-child(7){left:2.5%;top:86%;--dk-s:11px;--dk-d:-.3s}
.bb-deco i:nth-child(8){left:33%;top:92%;--dk-s:8px;--dk-d:-1.4s}
/* Stars: a faint field of dots in the text's colour, eight sparkles and a planet in the second accent colour */
.deco-stars::before{opacity:.5;animation:deco-field 4.5s ease-in-out infinite alternate;
  background-image:radial-gradient(circle,currentColor 0 1px,transparent 1.6px),radial-gradient(circle,currentColor 0 1.3px,transparent 1.9px),radial-gradient(circle,currentColor 0 .8px,transparent 1.3px);
  background-size:97px 89px,151px 133px,61px 71px;background-position:13px 7px,41px 59px,29px 31px}
.deco-stars i:not(:nth-child(9)){background:currentColor;opacity:.9;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:deco-twinkle 3.2s ease-in-out infinite;animation-delay:var(--dk-d)}
.deco-stars i:nth-child(9){right:7%;top:9%;width:clamp(26px,7%,74px);border-radius:50%;animation:deco-drift 6s ease-in-out infinite alternate;
  background:radial-gradient(circle at 32% 30%,#fff7d6 0,var(--accent2) 42%,color-mix(in srgb,var(--accent2) 50%,#2a1460) 100%);
  box-shadow:0 0 22px color-mix(in srgb,var(--accent2) 45%,transparent),inset -5px -6px 10px rgba(0,0,0,.18)}
.deco-stars i:nth-child(9)::before{content:"";position:absolute;left:-40%;right:-40%;top:39%;height:22%;border-radius:50%;rotate:-18deg;
  border:2px solid color-mix(in srgb,currentColor 80%,transparent);border-top-color:transparent}
/* Confetti: bright dots and paper strips (fixed party colours, each with a hair of shadow to stand out on its own colour) */
.deco-confetti::before{opacity:.85;
  background-image:radial-gradient(circle,#ff3b3b 0 3px,transparent 3.6px),radial-gradient(circle,#1f6bff 0 2.6px,transparent 3.2px),radial-gradient(circle,#22c55e 0 3px,transparent 3.6px),radial-gradient(circle,#ffffff 0 2.2px,transparent 2.8px),radial-gradient(circle,#a855f7 0 2.4px,transparent 3px);
  background-size:173px 149px,131px 167px,211px 127px,97px 113px,157px 181px;background-position:21px 17px,77px 63px,140px 30px,50px 90px,110px 120px}
.deco-confetti i{border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.18);animation:deco-drift 5s ease-in-out infinite alternate;animation-delay:var(--dk-d)}
.deco-confetti i:nth-child(even){aspect-ratio:auto;width:calc(var(--dk-s) * .55);height:calc(var(--dk-s) * 1.6);border-radius:3px}
.deco-confetti i:nth-child(1){background:#ff3b3b}
.deco-confetti i:nth-child(2){background:#1f6bff;rotate:25deg}
.deco-confetti i:nth-child(3){background:#22c55e}
.deco-confetti i:nth-child(4){background:#ff4f9a;rotate:-32deg}
.deco-confetti i:nth-child(5){background:#ffffff}
.deco-confetti i:nth-child(6){background:#a855f7;rotate:60deg}
.deco-confetti i:nth-child(7){background:#ff8a00}
.deco-confetti i:nth-child(8){background:#38c6ff;rotate:-14deg}
.deco-confetti i:nth-child(9){right:7%;top:11%;--dk-s:15px;background:#ffc400;--dk-d:-3s}
@keyframes deco-twinkle{0%,100%{opacity:.35;scale:.55}50%{opacity:1;scale:1}}
@keyframes deco-field{from{opacity:.32}to{opacity:.6}}
@keyframes deco-drift{from{translate:0 0}to{translate:0 -7px}}
@media (prefers-reduced-motion:reduce){.bb-deco::before,.bb-deco i{animation:none}.deco-stars i:not(:nth-child(9)){opacity:.8}}/* Phones: the text runs the full width across the top, so the sparkles there stand aside and the dot field clears that band */
@media (max-width:560px){.bb-deco i:nth-child(1),.bb-deco i:nth-child(2){display:none}
  .bb-deco::before,.htx-center > .bb-deco::before{-webkit-mask-image:radial-gradient(ellipse 70% 34% at 40% 32%,transparent 55%,#000 100%);mask-image:radial-gradient(ellipse 70% 34% at 40% 32%,transparent 55%,#000 100%)}}
/* ==== Sale slides (2026-10-06; hero slider → a slide's Products, Show price, Key features, Countdown and Sale
   backdrop). Only slides that use them get .hs-deal, so every other slide looks exactly as before. A big
   cut-out product on a lit stage, ticked features, a was/now price with the saving, a countdown in boxes and
   four drawn backdrops (spotlight, brand, studio, neon). Movement stops for reduced motion. ==== */
.hs .hs-slide.hs-deal{--fx-x:72%;--fx-y:50%;isolation:isolate;overflow:hidden;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(20px,3vw,56px)}
.hs .hs-slide.hs-deal.htx-right{--fx-x:28%;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.hs .hs-slide.hs-deal.htx-right>.hs-stage{grid-column:1;grid-row:1}
.hs .hs-deal .hs-copy{max-width:600px;min-width:0}
@media (min-width:1500px){.hs .hs-slider .hs-slide.hs-deal{padding-inline:max(84px,calc((100% - 1480px) / 2))}}
.hs .hs-deal.htx-right .hs-copy{justify-self:start}
.hs .hs-deal .hs-title{font-size:clamp(38px,4.8vw,76px);font-weight:800;line-height:.95;letter-spacing:-.035em;margin:0 0 20px;text-wrap:balance}
.hs .hs-deal.hs-long .hs-title{font-size:clamp(32px,3.7vw,58px);line-height:1}
.hs .hs-deal:is(.hfx-spotlight,.hfx-neon) .hs-title-in{background:linear-gradient(180deg,#fff 35%,#c4cad3 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs .hs-deal .hs-sub{margin-bottom:16px}
.hs .hs-deal.hfx-studio .hs-title{text-shadow:none}
.hs .hs-deal .hs-copy>.btn-brand{padding:15px 30px;font-size:16px;font-weight:800}
.hs .hs-slide.hs-deal.is-active .hs-copy>:nth-child(5){animation-delay:.4s}
.hs .hs-slide.hs-deal.is-active .hs-copy>:nth-child(6){animation-delay:.5s}
.hs .hs-slide.hs-deal.is-active .hs-copy>:nth-child(7){animation-delay:.6s}
/* Key features, ticked */
.hs-feats{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;font-size:clamp(14px,1.12vw,17px);font-weight:500;line-height:1.35}
.hs-feats li{display:flex;align-items:flex-start;gap:12px}
.hs-feats svg{flex:none;width:24px;height:24px;padding:5px;margin-top:-1px;border-radius:50%;background:var(--brand);color:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 24%,transparent),0 6px 14px -6px color-mix(in srgb,var(--brand) 80%,#000)}
.hs .hs-deal.hfx-brand .hs-feats svg,.hs .hs-deal.bg-brand:not([class*="hfx-"]) .hs-feats svg{background:#fff;color:var(--brand);box-shadow:0 0 0 4px rgba(255,255,255,.2)}
/* Price: big now price (small currency and cents), the old price struck through, the saving in a sale tag */
.hs-deal-price{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 18px;margin:0 0 26px}
.hs-deal-from{flex-basis:100%;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.hs-deal-now{display:inline-flex;align-items:flex-start;font-family:var(--heading-font);font-size:clamp(44px,4.6vw,72px);font-weight:800;line-height:.86;letter-spacing:-.03em}
.hs-deal-now .pr-cur{font-size:.4em;margin:.14em .1em 0 0;letter-spacing:0}
.hs-deal-now .pr-dec{font-size:.38em;margin:.14em 0 0 .04em;letter-spacing:0}
.hs-deal-meta{display:grid;justify-items:start;gap:7px;padding-bottom:2px}
.hs-deal-was{font-size:clamp(15px,1.25vw,19px);font-weight:600;opacity:.7;text-decoration-thickness:2px}
.hs-deal-save{display:inline-block;padding:6px 12px 5px;border-radius:5px;background:#ffd43b;color:#1a1400;font-size:clamp(12px,1vw,14px);font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  transform:skewX(-10deg);box-shadow:0 8px 18px -8px rgba(0,0,0,.55)}
/* Several products: a short price list, each line a link */
.hs-deal-list{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;max-width:500px}
.hs-deal-list a{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:12px;color:inherit;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,border-color .2s,translate .2s}
.hs-deal-list a:hover{background:rgba(255,255,255,.13);border-color:color-mix(in srgb,var(--brand) 70%,#fff);translate:4px 0}
.hs-dl-name{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-dl-price{flex:none;white-space:nowrap;font-size:13px}
.hs-dl-price b{font-family:var(--heading-font);font-size:18px;font-weight:800}
.hs-dl-price s{margin-left:4px;opacity:.55}
.hs-dl-price small{font-size:11px;opacity:.75}
.hs-dl-pct{flex:none;min-width:46px;text-align:center;padding:4px 7px;border-radius:6px;background:var(--brand);color:#fff;font-size:12px;font-weight:900}
/* Countdown in boxes */
.hs-cd{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 26px}
.hs-cd-lbl{flex-basis:100%;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.hs-cd-u{display:grid;justify-items:center;min-width:66px;padding:10px 8px 8px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.hs-cd-u b{font-family:var(--heading-font);font-size:clamp(24px,2.3vw,34px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.hs-cd-u i{margin-top:5px;font-size:10px;font-style:normal;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.hs-cd.is-over .hs-cd-u{display:none}
/* The stage: the product, big and floating over a glow, with a soft shadow on the floor */
.hs-stage{position:relative;z-index:2;align-self:stretch;display:grid;place-items:center;min-height:clamp(280px,32vw,520px)}
.hs-stage::before{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:10%;bottom:10%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 55%,transparent),transparent);opacity:.85}
.hs-stage::after{content:"";position:absolute;z-index:-1;left:18%;right:18%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.hs-stage .hs-pic{display:block;width:100%;max-width:660px;max-height:min(38vw,540px);object-fit:contain;filter:drop-shadow(0 30px 34px rgba(0,0,0,.5));
  animation:hs-deal-float 7s ease-in-out infinite}
@keyframes hs-deal-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* A group of products: laptop in front, screen behind, a small accessory to the side */
.hs-stage[class*="hs-pics-"]{display:block;align-self:center;justify-self:center;width:min(100%,700px);aspect-ratio:4/3;min-height:0}
.hs-stage[class*="hs-pics-"] .hs-pic{position:absolute;max-width:none;max-height:none;height:auto}
.hs-stage[class*="hs-pics-"] .hs-pic:nth-child(2){animation-delay:-2.3s}
.hs-stage[class*="hs-pics-"] .hs-pic:nth-child(3){animation-delay:-4.6s}
.hs-pics-2 .hs-pic:nth-child(1){left:0;bottom:4%;width:60%;z-index:2}
.hs-pics-2 .hs-pic:nth-child(2){right:0;top:2%;width:64%;z-index:1}
.hs-pics-3 .hs-pic:nth-child(1),.hs-pics-4 .hs-pic:nth-child(1){left:-6%;bottom:-10%;width:58%;z-index:3}
.hs-pics-3 .hs-pic:nth-child(2),.hs-pics-4 .hs-pic:nth-child(2){right:-4%;top:-12%;width:82%;z-index:1}
.hs-pics-3 .hs-pic:nth-child(3),.hs-pics-4 .hs-pic:nth-child(3){right:-4%;bottom:-6%;width:34%;z-index:4}
.hs-pics-4 .hs-pic:nth-child(4){left:4%;top:4%;width:30%;z-index:2}
/* "Save 12%" / "Up to 25% off": a round sale sticker with a slowly turning dashed ring */
.hs-burst{position:absolute;z-index:5;top:7%;right:5%;display:grid;place-content:center;justify-items:center;width:clamp(86px,8.4vw,128px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe680,#ffd43b 55%,#f5b800);color:#1a1400;line-height:.95;text-transform:uppercase;font-family:var(--heading-font);rotate:10deg;
  box-shadow:0 16px 30px -12px rgba(0,0,0,.6),inset 0 -4px 0 rgba(0,0,0,.08)}
.hs-burst::before{content:"";position:absolute;inset:6px;border-radius:50%;border:2px dashed rgba(26,20,0,.35);animation:hs-burst-turn 18s linear infinite}
.hs-burst b{font-size:clamp(26px,2.6vw,40px);font-weight:900;letter-spacing:-.04em}
.hs-burst small{font-size:clamp(9px,.8vw,12px);font-weight:900;letter-spacing:.12em}
.hs-stage[class*="hs-pics-"] .hs-burst{top:-4%;right:-2%}
.htx-right>.hs-stage .hs-burst{right:auto;left:5%;rotate:-10deg}
@keyframes hs-burst-turn{to{rotate:360deg}}
/* Backdrops: drawn behind the words and the picture (empty <i> shapes in .hs-fx) */
.hs-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.hs-fx i{position:absolute;display:block}
.hs .hs-slide.hs-slide.hfx-spotlight{color:#fff;background:
  radial-gradient(ellipse 50% 70% at var(--fx-x) var(--fx-y),color-mix(in srgb,var(--brand) 46%,transparent) 0,transparent 72%),
  radial-gradient(ellipse 70% 50% at calc(100% - var(--fx-x)) 115%,color-mix(in srgb,var(--brand) 22%,transparent) 0,transparent 70%),
  linear-gradient(120deg,#1c1f25 0%,#0d0e11 55%,#08090b 100%)}
.hfx-spotlight .hs-fx i:nth-child(-n+3){left:-30%;width:160%;height:2px;rotate:-16deg;opacity:.7;
  background:linear-gradient(90deg,transparent 10%,rgba(255,255,255,.4) 50%,transparent 90%);animation:hs-streak 9s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 30%,#000 62%)}
.hfx-spotlight .hs-fx i:nth-child(1){top:22%}
.hfx-spotlight .hs-fx i:nth-child(2){top:56%;height:1px;opacity:.45;animation-delay:-3s}
.hfx-spotlight .hs-fx i:nth-child(3){top:86%;height:3px;opacity:.3;animation-delay:-6s}
.hfx-spotlight .hs-fx i:nth-child(4),.hfx-neon .hs-fx i:nth-child(5){inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 45% 60% at var(--fx-x) var(--fx-y),#000,transparent 75%);mask-image:radial-gradient(ellipse 45% 60% at var(--fx-x) var(--fx-y),#000,transparent 75%)}
.hfx-spotlight .hs-fx i:nth-child(5){left:var(--fx-x);top:var(--fx-y);width:min(48vw,640px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 0 120px color-mix(in srgb,var(--brand) 14%,transparent)}
@keyframes hs-streak{0%,100%{translate:-12% 0}50%{translate:12% 0}}
.hs .hs-slide.hs-slide.hfx-brand{color:#fff;background:radial-gradient(circle at var(--fx-x) var(--fx-y),color-mix(in srgb,var(--brand) 70%,#ffb199) 0,var(--brand) 32%,
  color-mix(in srgb,var(--brand) 62%,#000) 78%,color-mix(in srgb,var(--brand) 40%,#000) 100%)}
.hfx-brand .hs-fx i:nth-child(-n+3){left:var(--fx-x);top:var(--fx-y);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px solid rgba(255,255,255,.2)}
.hfx-brand .hs-fx i:nth-child(1){height:72%}
.hfx-brand .hs-fx i:nth-child(2){height:112%;border-color:rgba(255,255,255,.12)}
.hfx-brand .hs-fx i:nth-child(3){height:156%;border-color:rgba(255,255,255,.07)}
.hfx-brand .hs-fx i:nth-child(4){inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.13) 49%,transparent 56%);animation:hs-streak 11s ease-in-out infinite}
.hfx-brand .hs-fx i:nth-child(5){inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.6px);background-size:20px 20px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 40%);mask-image:linear-gradient(90deg,#000,transparent 40%)}
.hfx-brand.htx-right .hs-fx i:nth-child(5){-webkit-mask-image:linear-gradient(270deg,#000,transparent 40%);mask-image:linear-gradient(270deg,#000,transparent 40%)}
.hfx-brand .hs-stage::before{background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent)}
.hs .hs-slide.hs-slide.hfx-studio{color:#15181c;background:linear-gradient(160deg,#ffffff 0%,#f4f5f7 55%,#e8eaee 100%)}
.hfx-studio .hs-fx i:nth-child(1){right:-6%;top:-25%;width:36%;height:150%;rotate:16deg;transform-origin:50% 50%;
  background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 68%,#000));box-shadow:0 0 60px color-mix(in srgb,var(--brand) 45%,transparent)}
.hfx-studio .hs-fx i:nth-child(2){right:31%;top:-25%;width:10px;height:150%;rotate:16deg;background:color-mix(in srgb,var(--brand) 85%,#fff);opacity:.5}
.hfx-studio .hs-fx i:nth-child(3){left:var(--fx-x);top:var(--fx-y);width:58%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 22%,transparent),transparent)}
.hfx-studio .hs-fx i:nth-child(4){inset:0;background-image:radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 45%);mask-image:linear-gradient(90deg,#000,transparent 45%)}
.hfx-studio.htx-right .hs-fx{transform:scaleX(-1)}
.hfx-studio .hs-stage::before{background:radial-gradient(closest-side,rgba(255,255,255,.75),transparent)}
.hfx-studio .hs-stage::after{background:radial-gradient(closest-side,rgba(0,0,0,.35),transparent)}
.hfx-studio .hs-stage .hs-pic{filter:drop-shadow(0 26px 26px rgba(0,0,0,.32))}
.hs .hfx-studio .hs-cd-u,.hs .hfx-studio .hs-deal-list a{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 10px 24px -16px rgba(0,0,0,.35)}
.hs .hfx-studio .hs-sub{background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 6px 16px -10px rgba(0,0,0,.3)}
:root[data-theme="dark"] .hs .hs-slide.hs-slide.hfx-studio{color:#fff;background:linear-gradient(160deg,#262a31 0%,#16191d 60%,#101215 100%)}
:root[data-theme="dark"] .hfx-studio .hs-fx i:nth-child(4){background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.6px)}
:root[data-theme="dark"] .hfx-studio .hs-stage::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 40%,transparent),transparent)}
:root[data-theme="dark"] .hfx-studio .hs-stage::after{background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
:root[data-theme="dark"] .hs .hfx-studio :is(.hs-cd-u,.hs-deal-list a,.hs-sub){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:none}
.hs .hs-slide.hs-slide.hfx-neon{--fx-y:42%;color:#fff;background:radial-gradient(ellipse 55% 55% at var(--fx-x) var(--fx-y),color-mix(in srgb,var(--brand) 42%,transparent),transparent 72%),
  linear-gradient(180deg,#06070a 0%,#0c0e14 58%,color-mix(in srgb,var(--brand) 18%,#07080b) 100%)}
.hfx-neon .hs-fx i:nth-child(1){left:-30%;right:-30%;bottom:-4%;height:44%;transform:perspective(360px) rotateX(64deg);transform-origin:50% 100%;opacity:.9;
  background-image:linear-gradient(color-mix(in srgb,var(--brand) 80%,transparent) 1.5px,transparent 1.5px),linear-gradient(90deg,color-mix(in srgb,var(--brand) 80%,transparent) 1.5px,transparent 1.5px);
  background-size:56px 56px;-webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 88%);mask-image:linear-gradient(0deg,#000 0%,transparent 88%);animation:hs-grid 2.4s linear infinite}
.hfx-neon .hs-fx i:nth-child(2){left:42%;right:0;bottom:36%;height:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand) 85%,#fff),transparent);
  box-shadow:0 0 22px 3px color-mix(in srgb,var(--brand) 70%,transparent)}
.hfx-neon .hs-fx i:nth-child(3),.hfx-neon .hs-fx i:nth-child(4){right:-10%;width:55%;height:3px;rotate:-24deg;border-radius:3px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand) 90%,#fff),transparent);box-shadow:0 0 16px color-mix(in srgb,var(--brand) 80%,transparent);animation:hs-streak 6s ease-in-out infinite}
.hfx-neon .hs-fx i:nth-child(3){top:14%}
.hfx-neon .hs-fx i:nth-child(4){top:26%;width:35%;height:2px;opacity:.6;animation-delay:-2.5s}
.hfx-neon.htx-right .hs-fx{transform:scaleX(-1)}
@keyframes hs-grid{to{background-position:0 56px}}
/* Tablets and phones: the words on top, the picture under them */
@media (max-width:860px){
  .hs .hs-slide.hs-deal,.hs .hs-slide.hs-deal.htx-right{--fx-x:50%;--fx-y:76%;grid-template-columns:minmax(0,1fr);text-align:left;row-gap:4px;padding:30px 22px 58px}
  .hs .hs-slide.hs-deal.htx-right .hs-copy{grid-column:1;grid-row:1;order:0;justify-self:start}
  .hs .hs-slide.hs-deal.htx-right>.hs-stage{grid-column:1;grid-row:2}
  .hs .hs-deal .hs-copy{max-width:none}
  .hs-stage{min-height:0;height:clamp(220px,62vw,360px)}
  .hs-stage[class*="hs-pics-"]{height:auto;width:min(92%,520px);margin-top:10px}
  .hfx-spotlight .hs-fx i:nth-child(-n+2){display:none}
  .hs-stage .hs-pic{max-height:100%}
  .hfx-studio .hs-fx i:nth-child(1){left:-20%;right:-20%;top:auto;bottom:-14%;width:auto;height:36%;rotate:-7deg}
  .hfx-studio .hs-fx i:nth-child(2){left:-20%;right:-20%;top:auto;bottom:22%;width:auto;height:6px;rotate:-7deg}
  .hfx-studio.htx-right .hs-fx,.hfx-neon.htx-right .hs-fx{transform:none}
  .hfx-neon .hs-fx i:nth-child(2){left:0;bottom:30%}
  .hfx-neon .hs-fx i:nth-child(1){height:34%}
}
@media (max-width:560px){
  .hs .hs-deal .hs-title,.hs .hs-deal.hs-long .hs-title{font-size:clamp(30px,9vw,42px);margin-bottom:16px}
  .hs-feats{gap:8px;margin-bottom:20px;font-size:15px}
  .hs-feats li:nth-child(n+4){display:none}
  .hs-deal-now{font-size:46px}
  .hs-deal-price{margin-bottom:22px}
  .hs-cd{gap:6px}
  .hs-cd-u{min-width:0;flex:1;padding:8px 4px 7px}
  .hs-cd-u b{font-size:24px}
  .hs-dl-name{font-size:13px}
  .hs-dl-price s{display:none}
  .hs-deal-list a{padding:9px 10px 9px 12px;gap:8px}
  .hs .hs-deal .hs-copy>.btn-brand{width:100%;justify-content:center}
  .hs-burst{width:80px;top:4%;right:2%}
}
@media (prefers-reduced-motion:reduce){
  .hs-stage .hs-pic,.hs-burst::before,.hs-fx i{animation:none!important}
  .hs-deal-list a{transition:none}
}
/* Phones: shorter sale slides (2026-10-06). The words and the picture share one grid (.hs-copy steps aside with
   display:contents), in fixed rows: label, title, two features, a group's price list, then the price with the
   picture beside it (a group of products: a smaller picture under its price list), the countdown and the button.
   The slider is as tall as its tallest slide; on the others the picture row takes the spare room, so the button
   always sits just above the dots and nothing is left empty above the label. */
@media (max-width:560px){
  .hs .hs-slide.hs-slide.hs-deal{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto auto;
    column-gap:10px;row-gap:0;align-content:stretch;align-items:start;padding:24px 18px 52px}
  .hs .hs-slide.hs-slide.hs-deal>.hs-copy{display:contents}
  .hs .hs-slide.hs-slide.hs-deal>.hs-copy>*{grid-column:1/-1;position:relative;z-index:3;justify-self:stretch}
  .hs .hs-slide.hs-slide.hs-deal>.hs-copy>.hs-sub{grid-row:1;justify-self:start;margin-bottom:10px}
  .hs .hs-slide.hs-slide.hs-deal>.hs-copy>.hs-title{grid-row:2;font-size:clamp(28px,8.4vw,36px);margin-bottom:10px}
  .hs .hs-slide.hs-slide.hs-deal>.hs-copy>.hs-price{grid-row:3}
  .hs .hs-slide.hs-slide.hs-deal>.hs-copy>.hs-feats{grid-row:4;gap:6px;margin-bottom:12px;font-size:14px}
  .hs .hs-deal .hs-feats li{gap:10px}
  .hs .hs-deal .hs-feats li:nth-child(n+3){display:none}
  .hs .hs-deal .hs-feats svg{width:20px;height:20px;padding:4px;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 24%,transparent)}
  .hs .hs-slide.hs-slide.hs-deal>.hs-copy>.hs-deal-list{grid-row:5;gap:5px;margin-bottom:8px}
  .hs .hs-deal .hs-deal-list a{padding:6px 8px 6px 12px}
  .hs .hs-deal .hs-dl-price b{font-size:16px}
  .hs .hs-slide.hs-slide.hs-deal>.hs-copy>.hs-deal-price{grid-row:6;grid-column:1;align-self:center;margin:0;gap:4px 10px}
  .hs .hs-deal .hs-deal-now{font-size:clamp(32px,9.6vw,40px)}
  .hs .hs-deal .hs-deal-meta{gap:5px}
  .hs .hs-deal .hs-deal-was{font-size:14px}
  .hs .hs-deal .hs-deal-save{font-size:11px;padding:5px 9px 4px}
  .hs .hs-slide.hs-slide.hs-deal>.hs-stage{grid-row:6;grid-column:2;align-self:stretch;height:auto;min-height:150px;margin:0}
  .hs .hs-slide.hs-slide.hs-deal:not(:has(.hs-deal-price))>.hs-stage{grid-column:1/-1;margin-bottom:8px}
  .hs .hs-slide.hs-slide.hs-deal>.hs-stage[class*="hs-pics-"]{grid-column:1/-1;align-self:center;justify-self:center;width:min(38%,170px);height:auto;min-height:0;margin:2px 0 10px}
  .hs .hs-deal .hs-stage .hs-pic{max-height:100%;filter:drop-shadow(0 14px 14px rgba(0,0,0,.45))}
  .hs .hs-deal .hs-burst{width:54px;top:-2%;right:-2%;left:auto}
  .hs .hs-deal .hs-burst b{font-size:17px}
  .hs .hs-deal .hs-burst small{font-size:7px;letter-spacing:.08em}
  .hs .hs-deal .hs-burst::before{inset:4px;border-width:1.5px}
  .hs .hs-deal .hs-stage[class*="hs-pics-"] .hs-burst{top:-8%;right:-34%}
  .hs .hs-slide.hs-slide.hs-deal>.hs-copy>.hs-cd{grid-row:7;gap:5px;margin:12px 0 12px}
  .hs .hs-slide.hs-slide.hs-deal:has(.hs-deal-list)>.hs-copy>.hs-cd{margin-top:0}
  .hs .hs-deal .hs-cd-lbl{font-size:11px}
  .hs .hs-deal .hs-cd-u{padding:5px 4px 4px;border-radius:10px}
  .hs .hs-deal .hs-cd-u b{font-size:19px}
  .hs .hs-deal .hs-cd-u i{margin-top:2px;font-size:9px}
  .hs .hs-slide.hs-slide.hs-deal>.hs-copy>.btn-brand{grid-row:8;align-self:end;margin-top:12px;padding:12px 24px}
  .hs .hs-slide.hs-slide.hs-deal>.hs-copy>.hs-cd~.btn-brand{margin-top:0}
}
/* ==== end Sale slides ==== */
/* ==== Glass buttons on light cards (2026-10-06): the text follows the card's own ink, so it stays dark on a light
   Promo Block or slide in the dark theme too (it used the page's --ink, which is light in dark mode). ==== */
:is(.hs.hs-opt .hs-slide,.bxo).hb-glass:is(.bg-light,.bg-sun) :is(.btn-brand,.promo-cta,.hs-promo-cta){color:inherit}
/* ==== end Glass buttons on light cards ==== */
/* ==== Header button + simple header (2026-10-06, jewellery job) ==== */
/* The price tag on the header button (Header → Header button) is in the site's own brand colour, darkened just
   enough to read on its white pill (--brand-on-white, Theme::css), never the default blue second accent. */
.head-btn:not(.head-btn-outline) .hb-badge{color:var(--brand-on-white,var(--brand))}
/* Simple header (Fynbos, Karoo, Coastal…) with the header button beside the icons: logo, menu and icons stay on
   one row from 1200px (the icons no longer drop under the logo). A long menu wraps onto a second line inside its
   own column instead. On laptop widths the gaps tighten, the button's cart icon goes, and long menus (7+ items)
   and narrow screens lose the little menu icons and step down to 14px, so most menus stay on one line. */
@media (min-width:1200px){
  .store-head:not(.menu-below) .head-row:has(.hb-header){flex-wrap:nowrap}
  .store-head:not(.menu-below) .head-row:has(.hb-header) > :is(.store-brand,.head-tools){flex:none}
  .store-head:not(.menu-below) .head-row:has(.hb-header) > .store-nav{flex:1 1 auto;min-width:0;flex-wrap:wrap;row-gap:2px}
}
@media (min-width:1200px) and (max-width:1439px){
  .store-head .head-row:has(.hb-header){column-gap:16px}
  .store-head .head-row:has(.hb-header) .store-nav{column-gap:14px}
  .store-head .head-row:has(.hb-header) .head-tools{gap:6px}
  .store-head .head-row:has(.hb-header) .head-btn.hb-header{gap:8px;padding-left:16px}
  .store-head .head-row:has(.hb-header) .head-btn.hb-header .hb-icon{display:none}
  .store-head .head-row:has(.hb-header) .store-nav:has(> :nth-child(7)){column-gap:12px}
  .store-head .head-row:has(.hb-header) .store-nav:has(> :nth-child(7)) > a,
  .store-head .head-row:has(.hb-header) .store-nav:has(> :nth-child(7)) > .menu-item > a{font-size:14px}
  .store-head .head-row:has(.hb-header) .store-nav:has(> :nth-child(7)) .mi .menu-ico{display:none}
}
@media (min-width:1200px) and (max-width:1299px){
  .store-head .head-row:has(.hb-header) .store-nav .mi .menu-ico{display:none}
}
/* ==== end Header button + simple header ==== */
/* ==== Photo banners with a White shade (2026-10-06, jewellery job) ==== */
/* "Photo with shade" banners, slides and Promo Blocks always had white words; with the White shade colour
   (a light wash over a light photo) they get dark words instead, without the dark glow behind them. */
.bb.bb-photo:has(> .bb-tint.tint-light){color:#1b1b1b}
.bb.bb-photo:has(> .bb-tint.tint-light) :is(.hs-title,.promo-title,.hs-sub,.hs-price,.promo-sub,.promo-text,.hs-promo-copy){text-shadow:none}
/* A plain photo (Background → Photo, no shade) with a light "Text colours" choice (Light grey, Sunshine) gets dark
   words too, with only a faint light halo; on darker choices the words stay white with their soft shadow. */
.bb.bb-plain:is(.bg-light,.bg-sun){color:#1b1b1b}
.bb.bb-plain:is(.bg-light,.bg-sun) :is(.hs-title,.promo-title,.hs-sub,.hs-price,.promo-sub,.promo-text,.hs-promo-copy){text-shadow:0 0 14px rgba(255,255,255,.7)}
/* Phones: a Middle Banner on a plain (unshaded) photo crops to the middle of the photo, where the words land on the
   subject, so they get a small frosted label of their own. The photo itself is never darkened. */
@media (max-width:700px){
  .promo.bb-plain:not(.bg-light):not(.bg-sun) .promo-copy{position:relative;z-index:1;max-width:100%;padding:16px 18px;border-radius:calc(var(--radius) / 2);background:rgba(14,16,20,.5);-webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1)}
  .promo.bb-plain:is(.bg-light,.bg-sun) .promo-copy{position:relative;z-index:1;max-width:100%;padding:16px 18px;border-radius:calc(var(--radius) / 2);background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
/* ==== end Photo banners with a White shade ==== */
/* ==== Image with text → Look: Elegant (2026-10-06, jewellery job) ==== */
/* More air, a small capitals line with a fine second-accent rule before it, a lighter body, a quiet underlined text
   link instead of a button, and the picture with a hairline frame set just off it and a soft shadow. */
.split-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--brand)}
.split-elegant{gap:clamp(36px,7vw,110px);padding-block:clamp(16px,3.5vw,48px)}
.split-elegant .split-eyebrow::before{content:"";flex:none;width:44px;height:1px;background:var(--accent2,#c9a227)}
:root[data-theme="dark"] .split-elegant .split-eyebrow{color:var(--accent2,#c9a227)}
.split-elegant .split-text{max-width:520px}
.split-elegant .split-text h2{font-size:clamp(32px,3.4vw,46px);line-height:1.1;margin-bottom:20px}
.split-elegant .rte{color:var(--muted);font-size:16.5px;line-height:1.75}
.split-elegant .split-img{position:relative;padding:0 18px 18px 0}
.split-elegant.image-right .split-img{padding:0 0 18px 18px}
.split-elegant .split-img::before{content:"";position:absolute;inset:18px 0 0 18px;border:1px solid var(--accent2,#c9a227);pointer-events:none}
.split-elegant.image-right .split-img::before{inset:18px 18px 0 0}
.split-elegant .split-img :is(img,.img-ph){position:relative;z-index:1;border-radius:2px;box-shadow:0 26px 50px -26px rgba(0,0,0,.5)}
.split-link{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding-bottom:6px;border-bottom:1px solid var(--accent2,#c9a227);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:gap .25s,color .2s}
.split-link::after{content:"→";letter-spacing:0}
.split-link:hover{gap:16px;color:var(--brand)}
:root[data-theme="dark"] .split-link:hover{color:var(--accent2,#c9a227)}
@media (prefers-reduced-motion:reduce){.split-link{transition:none}}
/* ==== end Image with text → Elegant ==== */
/* ==== Buttons & search: soft, outline and gradient store buttons on coloured sections and photos (2026-10-07) ====
   A soft tint or a brand-coloured outline disappears on a brand-coloured section; an outline in the brand colour
   barely shows on a dark photo. There the button turns light, as the theme's own solid button already does. */
:root body:is(.bst-soft,.btns-outline,.bst-gradient) .scheme-brand .btn-brand{background:var(--on-brand);color:var(--brand);border-color:var(--on-brand)}
:root body:is(.bst-soft,.btns-outline,.bst-gradient) .scheme-brand .btn-brand:hover{background:var(--on-brand);color:var(--brand);filter:brightness(.95)}
:root body:is(.bst-soft,.btns-outline) :is(.scheme-dark,.hero2.has-image) .btn-brand{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.85)}
:root body:is(.bst-soft,.btns-outline) :is(.scheme-dark,.hero2.has-image) .btn-brand:hover{background:#fff;color:#1f2328;border-color:#fff}
/* Header button "Charcoal" in dark mode: a light pill, so it doesn't vanish into the dark header */
:root[data-theme="dark"] .head-btn-dark{background:#eceae6;color:#1f2328;box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
:root[data-theme="dark"] .head-btn-dark .hb-badge{background:#1f2328;color:#fff}
/* Header button "Outline" in dark mode: a lighter tint of the brand colour, so a deep brand still reads on the dark header */
:root[data-theme="dark"] .head-btn-outline{color:color-mix(in srgb,var(--brand) 55%,#fff)}
/* ==== end Buttons on coloured sections ==== */
/* ==== Picture sizes per screen (2026-10-07): hero slides (a slide's Picture size on computers / tablets / phones:
   .hpd- / .hpt- / .hpp- small, medium, large, xl, fill; .hpp-above puts a large phone picture over the words),
   Promo Blocks (.tpt- / .tpp-: tablets / phones) and Middle Banners (.ppt- / .ppp-). "As designed" / "Same as"
   add no class, so every slide and block keeps exactly the size it had. Computers: 1101px and up; tablets:
   561 to 1100px; phones: up to 560px. ==== */
/* -- Computers -- */
@media (min-width:1101px){
  .hs .hs-slider .hs-slide.hs-slide.hpd-small>.hs-img{max-height:220px}
  .hs .hs-slider .hs-slide.hs-slide.hpd-medium>.hs-img{max-height:min(28vw,360px)}
  .hs .hs-slider .hs-slide.hs-slide.hpd-large>.hs-img{max-height:min(40vw,580px)}
  .hs .hs-slider .hs-slide.hs-slide.hpd-xl>.hs-img{max-height:min(48vw,700px)}
  .hs .hs-slider .hs-slide.hs-slide.hpd-xl:not(.htx-center){grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
  .hs .hs-slider .hs-slide.hs-slide.hpd-xl.htx-right{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .hs .hs-slider .hs-slide.hs-slide.hpd-fill:not(.htx-center)>.hs-img{position:absolute;top:0;bottom:0;right:0;left:auto;width:50%;height:100%;max-height:none;object-fit:cover;filter:none;border-radius:0}
  .hs .hs-slider .hs-slide.hs-slide.hpd-fill.htx-right>.hs-img{left:0;right:auto}
  /* sale slides: the product on its stage */
  .hs .hs-slider .hs-slide.hs-deal.hpd-small>.hs-stage{min-height:clamp(240px,24vw,380px)}
  .hs .hs-slider .hs-slide.hs-deal.hpd-small>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:min(24vw,320px);max-width:440px}
  .hs .hs-slider .hs-slide.hs-deal.hpd-medium>.hs-stage{min-height:clamp(260px,28vw,460px)}
  .hs .hs-slider .hs-slide.hs-deal.hpd-medium>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:min(32vw,450px);max-width:580px}
  .hs .hs-slider .hs-slide.hs-deal.hpd-large>.hs-stage{min-height:clamp(320px,38vw,640px)}
  .hs .hs-slider .hs-slide.hs-deal.hpd-large>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:min(44vw,640px);max-width:820px}
  .hs .hs-slider .hs-slide.hs-deal:is(.hpd-xl,.hpd-fill):not(.htx-right){grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr)}
  .hs .hs-slider .hs-slide.hs-deal:is(.hpd-xl,.hpd-fill).htx-right{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr)}
  .hs .hs-slider .hs-slide.hs-deal.hpd-xl>.hs-stage{min-height:clamp(360px,44vw,760px)}
  .hs .hs-slider .hs-slide.hs-deal.hpd-xl>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:min(52vw,780px);max-width:none}
  .hs .hs-slider .hs-slide.hs-deal.hpd-fill>.hs-stage{min-height:clamp(380px,44vw,780px);margin-block:-40px}
  .hs .hs-slider .hs-slide.hs-deal.hpd-fill>.hs-stage:not([class*="hs-pics-"]) .hs-pic{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
  .hs .hs-slider .hs-slide.hs-deal.hpd-small>.hs-stage[class*="hs-pics-"]{width:min(80%,520px)}
  .hs .hs-slider .hs-slide.hs-deal.hpd-large>.hs-stage[class*="hs-pics-"]{width:min(100%,840px)}
  .hs .hs-slider .hs-slide.hs-deal:is(.hpd-xl,.hpd-fill)>.hs-stage[class*="hs-pics-"]{width:min(100%,980px)}
}
/* -- Tablets, two columns (861 to 1100px) -- */
@media (min-width:861px) and (max-width:1100px){
  .hs .hs-slider .hs-slide.hs-slide.hpt-small>.hs-img{max-height:180px}
  .hs .hs-slider .hs-slide.hs-slide.hpt-medium>.hs-img{max-height:260px}
  .hs .hs-slider .hs-slide.hs-slide.hpt-large>.hs-img{max-height:380px}
  .hs .hs-slider .hs-slide.hs-slide.hpt-xl>.hs-img{max-height:460px}
  .hs .hs-slider .hs-slide.hs-slide.hpt-xl:not(.htx-center){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .hs .hs-slider .hs-slide.hs-slide.hpt-xl.htx-right{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .hs .hs-slider .hs-slide.hs-slide.hpt-fill:not(.htx-center)>.hs-img{position:absolute;top:0;bottom:0;right:0;left:auto;width:50%;height:100%;max-height:none;object-fit:cover;filter:none;border-radius:0}
  .hs .hs-slider .hs-slide.hs-slide.hpt-fill.htx-right>.hs-img{left:0;right:auto}
  .hs .hs-slider .hs-slide.hs-deal.hpt-small>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:240px}
  .hs .hs-slider .hs-slide.hs-deal.hpt-medium>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:320px}
  .hs .hs-slider .hs-slide.hs-deal.hpt-large>.hs-stage{min-height:400px}
  .hs .hs-slider .hs-slide.hs-deal.hpt-large>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:min(46vw,480px)}
  .hs .hs-slider .hs-slide.hs-deal:is(.hpt-xl,.hpt-fill):not(.htx-right){grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}
  .hs .hs-slider .hs-slide.hs-deal:is(.hpt-xl,.hpt-fill).htx-right{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr)}
  .hs .hs-slider .hs-slide.hs-deal.hpt-xl>.hs-stage{min-height:460px}
  .hs .hs-slider .hs-slide.hs-deal.hpt-xl>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:min(54vw,560px);max-width:none}
  .hs .hs-slider .hs-slide.hs-deal.hpt-fill>.hs-stage{min-height:480px;margin-block:-40px}
  .hs .hs-slider .hs-slide.hs-deal.hpt-fill>.hs-stage:not([class*="hs-pics-"]) .hs-pic{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
}
/* -- Tablets, words over the picture (561 to 860px) -- */
@media (min-width:561px) and (max-width:860px){
  .hs .hs-slider .hs-slide.hs-slide.hpt-small>.hs-img{max-height:160px}
  .hs .hs-slider .hs-slide.hs-slide.hpt-medium>.hs-img{max-height:240px}
  .hs .hs-slider .hs-slide.hs-slide.hpt-large>.hs-img{max-height:360px}
  .hs .hs-slider .hs-slide.hs-slide.hpt-xl>.hs-img{max-height:460px}
  .hs .hs-slider .hs-slide.hs-slide.hpt-fill:not(.htx-center)>.hs-img{width:calc(100% + 48px);max-width:none;margin:18px -24px -44px;height:clamp(300px,52vw,420px);max-height:none;object-fit:cover;filter:none;border-radius:0}
  .hs .hs-slider .hs-slide.hs-deal.hpt-small>.hs-stage{height:200px}
  .hs .hs-slider .hs-slide.hs-deal.hpt-medium>.hs-stage{height:280px}
  .hs .hs-slider .hs-slide.hs-deal.hpt-large>.hs-stage{height:clamp(320px,56vw,440px)}
  .hs .hs-slider .hs-slide.hs-deal.hpt-xl>.hs-stage{height:clamp(380px,66vw,520px)}
  .hs .hs-slider .hs-slide.hs-deal.hpt-fill>.hs-stage{height:clamp(420px,72vw,560px);margin-inline:-22px}
  .hs .hs-slider .hs-slide.hs-deal:is(.hpt-small,.hpt-medium,.hpt-large,.hpt-xl,.hpt-fill)>.hs-stage[class*="hs-pics-"]{height:auto}
  .hs .hs-slider .hs-slide.hs-deal.hpt-small>.hs-stage[class*="hs-pics-"]{width:min(70%,380px)}
  .hs .hs-slider .hs-slide.hs-deal.hpt-large>.hs-stage[class*="hs-pics-"]{width:min(100%,600px)}
  .hs .hs-slider .hs-slide.hs-deal:is(.hpt-xl,.hpt-fill)>.hs-stage[class*="hs-pics-"]{width:100%;margin-inline:0}
}
/* -- Phones -- */
@media (max-width:560px){
  .hs .hs-slider .hs-slide.hs-slide.hpp-small>.hs-img{max-height:130px}
  .hs .hs-slider .hs-slide.hs-slide.hpp-medium>.hs-img{max-height:210px}
  .hs .hs-slider .hs-slide.hs-slide.hpp-large>.hs-img{width:100%;max-height:320px;margin-top:14px}
  .hs .hs-slider .hs-slide.hs-slide.hpp-xl>.hs-img{width:100%;max-height:420px;margin-top:14px}
  .hs .hs-slider .hs-slide.hs-slide.hpp-fill:not(.htx-center)>.hs-img{width:calc(100% + 48px);max-width:none;margin:18px -24px -44px;height:min(92vw,400px);max-height:none;object-fit:cover;filter:none;border-radius:0}
  .hs .hs-slider .hs-slide.hs-slide.hpp-above:not(.hs-deal)>.hs-img{order:-1;margin:0 0 16px}
  .hs .hs-slider .hs-slide.hs-slide.hpp-above.hpp-fill:not(.hs-deal)>.hs-img{margin:-28px -24px 20px}
  /* sale slides: small and medium stay beside the price; large, extra large and fill get a row of their own */
  .hs .hs-slider .hs-slide.hs-deal.hpp-small>.hs-stage{min-height:110px}
  .hs .hs-slider .hs-slide.hs-deal.hpp-small>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:120px}
  .hs .hs-slider .hs-slide.hs-deal.hpp-medium>.hs-stage{min-height:170px}
  .hs .hs-slider .hs-slide.hs-deal.hpp-medium>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:200px}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal:is(.hpp-large,.hpp-xl,.hpp-fill){grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto auto auto}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal:is(.hpp-large,.hpp-xl,.hpp-fill)>.hs-stage{grid-row:6;grid-column:1/-1;align-self:stretch;margin:2px 0 6px}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal:is(.hpp-large,.hpp-xl,.hpp-fill)>.hs-copy>.hs-deal-price{grid-row:7;grid-column:1/-1;margin:6px 0 0}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal:is(.hpp-large,.hpp-xl,.hpp-fill)>.hs-copy>.hs-cd{grid-row:8}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal:is(.hpp-large,.hpp-xl,.hpp-fill)>.hs-copy>.btn-brand{grid-row:9}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-large>.hs-stage{min-height:clamp(230px,64vw,290px)}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-xl>.hs-stage{min-height:clamp(270px,80vw,350px)}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-fill>.hs-stage{min-height:clamp(290px,90vw,400px);margin-inline:-18px}
  .hs .hs-slider .hs-slide.hs-deal.hpp-large>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:clamp(230px,64vw,290px)}
  .hs .hs-slider .hs-slide.hs-deal.hpp-xl>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:clamp(270px,80vw,350px)}
  .hs .hs-slider .hs-slide.hs-deal.hpp-fill>.hs-stage:not([class*="hs-pics-"]) .hs-pic{max-height:clamp(290px,90vw,400px);max-width:100%}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal:is(.hpp-large,.hpp-xl,.hpp-fill)>.hs-stage[class*="hs-pics-"]{align-self:center;justify-self:center;height:auto;min-height:0;margin:6px 0 10px}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-large>.hs-stage[class*="hs-pics-"]{width:min(80%,320px)}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal:is(.hpp-xl,.hpp-fill)>.hs-stage[class*="hs-pics-"]{width:min(96%,420px)}
  .hs .hs-slider .hs-slide.hs-deal:is(.hpp-large,.hpp-xl,.hpp-fill) .hs-burst{width:70px;top:2%;right:0}
  .hs .hs-slider .hs-slide.hs-deal:is(.hpp-large,.hpp-xl,.hpp-fill) .hs-burst b{font-size:22px}
  .hs .hs-slider .hs-slide.hs-deal:is(.hpp-large,.hpp-xl,.hpp-fill) .hs-burst small{font-size:8px}
  .hs .hs-slider .hs-slide.hs-deal:is(.hpp-large,.hpp-xl,.hpp-fill) .hs-stage[class*="hs-pics-"] .hs-burst{top:-6%;right:-6%}
  /* the picture over the words */
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-above{grid-template-rows:minmax(0,1fr) auto auto auto auto auto auto auto auto}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-above>.hs-stage{grid-row:1;margin:0 0 12px}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-above.hpp-fill>.hs-stage{margin-top:-24px}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-above>.hs-copy>.hs-sub{grid-row:2}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-above>.hs-copy>.hs-title{grid-row:3}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-above>.hs-copy>.hs-price{grid-row:4}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-above>.hs-copy>.hs-feats{grid-row:5}
  .hs .hs-slider .hs-slide.hs-slide.hs-deal.hpp-above>.hs-copy>.hs-deal-list{grid-row:6}
}
/* -- Promo Blocks: their own size on tablets and phones (a large picture makes the block taller) -- */
@media (min-width:561px) and (max-width:1100px){
  .hs.hs .hs-promo.hs-promo.bxo.tpt-small img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:26%;height:68%}
  .hs.hs .hs-promo.hs-promo.bxo.tpt-small img.hs-promo-pic.hs-promo-pic:is(.pic-circle,.pic-rounded){height:58%}
  .hs.hs .hs-promo.hs-promo.bxo.has-pic.tpt-small:not(.htx-center) .hs-promo-copy{max-width:66%}
  .hs.hs .hs-promo.hs-promo.bxo.tpt-normal img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:42%;height:100%}
  .hs.hs .hs-promo.hs-promo.bxo.tpt-normal img.hs-promo-pic.hs-promo-pic:is(.pic-circle,.pic-rounded){height:calc(100% - 20px)}
  .hs.hs .hs-promo.hs-promo.bxo.has-pic.tpt-normal:not(.htx-center) .hs-promo-copy{max-width:54%}
  .hs.hs .hs-promo.hs-promo.bxo.tpt-large{min-height:190px}
  .hs.hs .hs-promo.hs-promo.bxo.tpt-large img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:50%;height:100%}
  .hs.hs .hs-promo.hs-promo.bxo.tpt-large img.hs-promo-pic.hs-promo-pic.pic-fill{width:50%}
  .hs.hs .hs-promo.hs-promo.bxo.tpt-large img.hs-promo-pic.hs-promo-pic:is(.pic-circle,.pic-rounded){height:calc(100% - 14px)}
  .hs.hs .hs-promo.hs-promo.bxo.has-pic.tpt-large:not(.htx-center) .hs-promo-copy{max-width:48%}
  .hs.hs .hs-promo.hs-promo.bxo.tpt-xl{min-height:240px}
  .hs.hs .hs-promo.hs-promo.bxo.tpt-xl img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:58%;height:100%}
  .hs.hs .hs-promo.hs-promo.bxo.tpt-xl img.hs-promo-pic.hs-promo-pic.pic-fill{width:56%}
  .hs.hs .hs-promo.hs-promo.bxo.tpt-xl img.hs-promo-pic.hs-promo-pic:is(.pic-circle,.pic-rounded){height:calc(100% - 12px)}
  .hs.hs .hs-promo.hs-promo.bxo.has-pic.tpt-xl:not(.htx-center) .hs-promo-copy{max-width:42%}
}
@media (max-width:560px){
  .hs.hs .hs-promo.hs-promo.bxo.tpp-small img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:26%;height:68%}
  .hs.hs .hs-promo.hs-promo.bxo.tpp-small img.hs-promo-pic.hs-promo-pic:is(.pic-circle,.pic-rounded){height:58%}
  .hs.hs .hs-promo.hs-promo.bxo.has-pic.tpp-small:not(.htx-center) .hs-promo-copy{max-width:66%}
  .hs.hs .hs-promo.hs-promo.bxo.tpp-normal img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:42%;height:100%}
  .hs.hs .hs-promo.hs-promo.bxo.tpp-normal img.hs-promo-pic.hs-promo-pic:is(.pic-circle,.pic-rounded){height:calc(100% - 20px)}
  .hs.hs .hs-promo.hs-promo.bxo.has-pic.tpp-normal:not(.htx-center) .hs-promo-copy{max-width:54%}
  .hs.hs .hs-promo.hs-promo.bxo.tpp-large{min-height:170px}
  .hs.hs .hs-promo.hs-promo.bxo.tpp-large img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:50%;height:100%}
  .hs.hs .hs-promo.hs-promo.bxo.tpp-large img.hs-promo-pic.hs-promo-pic.pic-fill{width:50%}
  .hs.hs .hs-promo.hs-promo.bxo.tpp-large img.hs-promo-pic.hs-promo-pic:is(.pic-circle,.pic-rounded){height:calc(100% - 14px)}
  .hs.hs .hs-promo.hs-promo.bxo.has-pic.tpp-large:not(.htx-center) .hs-promo-copy{max-width:50%}
  .hs.hs .hs-promo.hs-promo.bxo.tpp-xl{min-height:220px}
  .hs.hs .hs-promo.hs-promo.bxo.tpp-xl img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:60%;height:100%}
  .hs.hs .hs-promo.hs-promo.bxo.tpp-xl img.hs-promo-pic.hs-promo-pic.pic-fill{width:56%}
  .hs.hs .hs-promo.hs-promo.bxo.tpp-xl img.hs-promo-pic.hs-promo-pic:is(.pic-circle,.pic-rounded){height:calc(100% - 12px)}
  .hs.hs .hs-promo.hs-promo.bxo.has-pic.tpp-xl:not(.htx-center) .hs-promo-copy{max-width:42%}
}
/* -- Middle Banners: their own size on tablets and phones (also when a narrow banner puts the picture under the words) -- */
@media (min-width:561px) and (max-width:1100px){
  .promo.bxo.ppt-small{--pp-w:30%;--pp-px:120px}.promo.bxo.ppt-medium{--pp-w:40%;--pp-px:160px}.promo.bxo.ppt-large{--pp-w:50%;--pp-px:200px}.promo.bxo.ppt-xl{--pp-w:62%;--pp-px:240px}
  @container (max-width:420px){
    .promo.bxo.ppl-corner.ppt-small > img.promo-pic{width:44%;max-height:120px}
    .promo.bxo.ppl-corner.ppt-large > img.promo-pic{width:82%;max-height:240px}
    .promo.bxo.ppl-corner.ppt-xl > img.promo-pic{width:100%;max-height:300px}
  }
}
@media (max-width:560px){
  .promo.bxo.ppp-small{--pp-w:30%;--pp-px:120px}.promo.bxo.ppp-medium{--pp-w:40%;--pp-px:160px}.promo.bxo.ppp-large{--pp-w:50%;--pp-px:200px}.promo.bxo.ppp-xl{--pp-w:62%;--pp-px:240px}
  @container (max-width:420px){
    .promo.bxo.ppl-corner.ppp-small > img.promo-pic{width:44%;max-height:120px}
    .promo.bxo.ppl-corner.ppp-medium > img.promo-pic{width:62%;max-height:170px}
    .promo.bxo.ppl-corner.ppp-large > img.promo-pic{width:82%;max-height:240px}
    .promo.bxo.ppl-corner.ppp-xl > img.promo-pic{width:100%;max-height:300px}
  }
}
/* ==== end Picture sizes per screen ==== */
/* ==== More sale backdrops (2026-10-07; a slide's Sale backdrop): stripes (charcoal with bold brand-colour speed
   stripes), split (light, with an angled brand-colour panel behind the product) and horizon (a fresh sky-to-sea
   gradient with a low sun and soft waves). Each has a dark-mode version; the shapes mirror for text on the right. ==== */
.hs .hs-slide.hs-slide.hfx-stripes{color:#fff;background:radial-gradient(ellipse 55% 70% at var(--fx-x) var(--fx-y),color-mix(in srgb,var(--brand) 22%,transparent),transparent 70%),
  linear-gradient(120deg,color-mix(in srgb,var(--accent2) 45%,#23272e) 0%,#1d2127 50%,#121418 100%)}
.hfx-stripes .hs-fx i:nth-child(1){right:-12%;top:-30%;width:40%;height:160%;rotate:18deg;
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 85%,#fff) 0%,var(--brand) 40%,color-mix(in srgb,var(--brand) 72%,#000) 100%);box-shadow:0 0 80px color-mix(in srgb,var(--brand) 45%,transparent)}
.hfx-stripes .hs-fx i:nth-child(2){right:31%;top:-30%;width:16px;height:160%;rotate:18deg;background:var(--brand);opacity:.9}
.hfx-stripes .hs-fx i:nth-child(3){right:36%;top:-30%;width:6px;height:160%;rotate:18deg;background:color-mix(in srgb,var(--brand) 70%,#fff);opacity:.5}
.hfx-stripes .hs-fx i:nth-child(4){left:0;top:0;bottom:0;width:62%;background:repeating-linear-gradient(-72deg,rgba(255,255,255,.04) 0 2px,transparent 2px 24px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.hfx-stripes .hs-fx i:nth-child(5){inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.8px);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(ellipse 30% 40% at 58% 18%,#000,transparent 75%);mask-image:radial-gradient(ellipse 30% 40% at 58% 18%,#000,transparent 75%)}
.hfx-stripes.htx-right .hs-fx{transform:scaleX(-1)}
.hfx-stripes .hs-stage::before{background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent)}
.hs .hs-slide.hs-slide.hfx-split{color:#15191d;background:linear-gradient(160deg,#ffffff 0%,#f3f4f6 58%,#e6e8eb 100%)}
.hfx-split .hs-fx i:nth-child(1){right:-10%;top:-10%;bottom:-10%;width:50%;transform:skewX(-12deg);
  background:linear-gradient(165deg,color-mix(in srgb,var(--brand) 82%,#fff) 0%,var(--brand) 45%,color-mix(in srgb,var(--brand) 78%,#000) 100%);box-shadow:-18px 0 50px -20px color-mix(in srgb,var(--brand) 70%,transparent)}
.hfx-split .hs-fx i:nth-child(2){right:42.5%;top:-10%;bottom:-10%;width:14px;transform:skewX(-12deg);background:var(--accent2)}
.hfx-split .hs-fx i:nth-child(3){right:45%;top:-10%;bottom:-10%;width:5px;transform:skewX(-12deg);background:var(--accent2);opacity:.45}
.hfx-split .hs-fx i:nth-child(4){right:-10%;top:-10%;bottom:-10%;width:50%;transform:skewX(-12deg);background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 46%,transparent 60%),
  repeating-linear-gradient(-60deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px)}
.hfx-split .hs-fx i:nth-child(5){inset:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 42%);mask-image:linear-gradient(90deg,#000,transparent 42%)}
.hfx-split.htx-right .hs-fx{transform:scaleX(-1)}
.hfx-split .hs-stage::before{background:radial-gradient(closest-side,rgba(255,255,255,.4),transparent)}
.hfx-split .hs-stage::after{background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent)}
.hfx-split .hs-stage .hs-pic{filter:drop-shadow(0 26px 28px rgba(0,0,0,.4))}
.hs .hs-slide.hs-slide.hfx-horizon{color:#0f2a33;background:linear-gradient(180deg,#d7eef2 0%,#eef8f8 52%,#fbf7ee 100%)}
.hfx-horizon .hs-fx i:nth-child(1){left:var(--fx-x);top:38%;width:min(32vw,440px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,#ffe3a3 0%,color-mix(in srgb,#ffd27a 55%,transparent) 38%,transparent 72%)}
.hfx-horizon .hs-fx i:nth-child(2){left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 55%,#bfe6ea) 0%,var(--brand) 55%,color-mix(in srgb,var(--brand) 70%,#06222a) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 18%,#000 58%);mask-image:linear-gradient(90deg,transparent 18%,#000 58%)}
.hfx-horizon .hs-fx i:nth-child(3),.hfx-horizon .hs-fx i:nth-child(4){left:30%;right:-10%;height:120px;border-radius:50%;border-top:2px solid rgba(255,255,255,.55);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%);animation:hs-streak 12s ease-in-out infinite}
.hfx-horizon .hs-fx i:nth-child(3){bottom:calc(30% - 110px)}
.hfx-horizon .hs-fx i:nth-child(4){bottom:calc(16% - 110px);opacity:.6;animation-delay:-5s}
.hfx-horizon .hs-fx i:nth-child(5){left:0;right:0;top:0;height:30%;background:radial-gradient(ellipse 40% 60% at 22% 0,rgba(255,255,255,.7),transparent 70%)}
.hfx-horizon.htx-right .hs-fx{transform:scaleX(-1)}
.hfx-horizon .hs-stage::before{background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent)}
.hfx-horizon .hs-stage::after{background:radial-gradient(closest-side,rgba(6,34,42,.4),transparent)}
.hfx-horizon .hs-stage .hs-pic{filter:drop-shadow(0 24px 26px rgba(6,34,42,.35))}
/* light backdrops: light count-down boxes, price list and label */
.hs :is(.hfx-split,.hfx-horizon) :is(.hs-cd-u,.hs-deal-list a){background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 10px 24px -16px rgba(0,0,0,.35)}
.hs :is(.hfx-split,.hfx-horizon) .hs-sub{background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 6px 16px -10px rgba(0,0,0,.3)}
.hs .hs-deal:is(.hfx-split,.hfx-horizon) .hs-title{text-shadow:none}
:root[data-theme="dark"] .hs .hs-slide.hs-slide.hfx-split{color:#fff;background:linear-gradient(160deg,#2a2f37 0%,#1a1d22 60%,#121418 100%)}
:root[data-theme="dark"] .hfx-split .hs-fx i:nth-child(5){background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.6px)}
:root[data-theme="dark"] .hfx-split .hs-fx i:nth-child(2),:root[data-theme="dark"] .hfx-split .hs-fx i:nth-child(3){background:color-mix(in srgb,var(--accent2) 60%,#fff)}
:root[data-theme="dark"] .hs .hs-slide.hs-slide.hfx-horizon{color:#fff;background:linear-gradient(180deg,#0e2531 0%,#123341 55%,#18303a 100%)}
:root[data-theme="dark"] .hfx-horizon .hs-fx i:nth-child(1){background:radial-gradient(closest-side,rgba(255,236,200,.5) 0%,rgba(255,214,140,.16) 40%,transparent 72%)}
:root[data-theme="dark"] .hfx-horizon .hs-fx i:nth-child(2){background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 60%,#123341) 0%,color-mix(in srgb,var(--brand) 55%,#04141a) 100%)}
:root[data-theme="dark"] .hfx-horizon .hs-fx i:nth-child(5){display:none}
:root[data-theme="dark"] .hfx-horizon .hs-stage::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 40%,transparent),transparent)}
:root[data-theme="dark"] .hs :is(.hfx-split,.hfx-horizon) :is(.hs-cd-u,.hs-deal-list a,.hs-sub){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:none}
/* sale slides over a photo: a softer glow behind the product */
.hs .hs-deal.bb-photo .hs-stage::before,.hs .hs-deal.bb-plain .hs-stage::before{opacity:.45}
/* tablets and phones: the words, price and button may run anywhere down the slide, so the brand-colour band (stripes,
   split) or the sea (horizon) is drawn behind the picture itself (its stage), never behind the button */
@media (max-width:860px){
  :is(.hfx-stripes,.hfx-split) .hs-fx i:nth-child(-n+4),.hfx-horizon .hs-fx i:nth-child(-n+4){display:none}
  .hfx-stripes.htx-right .hs-fx,.hfx-split.htx-right .hs-fx,.hfx-horizon.htx-right .hs-fx{transform:none}
  .hs .hs-deal:is(.hfx-stripes,.hfx-split,.hfx-horizon)>.hs-stage::before{left:-60px;right:-60px;top:16%;bottom:12%;border-radius:0;opacity:1;transform:skewY(-7deg);
    background:linear-gradient(165deg,color-mix(in srgb,var(--brand) 82%,#fff) 0%,var(--brand) 45%,color-mix(in srgb,var(--brand) 78%,#000) 100%);
    box-shadow:0 -10px 0 -4px var(--accent2),0 -16px 0 -8px color-mix(in srgb,var(--accent2) 50%,transparent)}
  .hs .hs-deal.hfx-horizon>.hs-stage::before{top:46%;bottom:4%;transform:none;border-radius:50% 50% 0 0/18% 18% 0 0;box-shadow:none;
    background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 55%,#bfe6ea) 0%,var(--brand) 60%,color-mix(in srgb,var(--brand) 70%,#06222a) 100%)}
  .hs .hs-deal.hfx-horizon>.hs-stage::after{left:30%;right:30%;top:8%;bottom:auto;height:auto;aspect-ratio:1;background:radial-gradient(closest-side,#ffe3a3,rgba(255,210,122,.4) 45%,transparent 72%);z-index:-2}
  :root[data-theme="dark"] .hs .hs-deal.hfx-horizon>.hs-stage::after{background:radial-gradient(closest-side,rgba(255,236,200,.45),rgba(255,214,140,.12) 45%,transparent 72%)}
}
/* tablets (words above, picture last): the sea runs on to the bottom edge */
@media (min-width:561px) and (max-width:860px){.hs .hs-deal.hfx-horizon>.hs-stage::before{bottom:-120px}}
/* a large group of products: its sale sticker stays inside the slide */
@media (min-width:1101px){.hs .hs-slider .hs-slide.hs-deal:is(.hpd-large,.hpd-xl,.hpd-fill)>.hs-stage[class*="hs-pics-"] .hs-burst{top:3%;right:1%}}
@media (min-width:861px) and (max-width:1100px){.hs .hs-slider .hs-slide.hs-deal:is(.hpt-large,.hpt-xl,.hpt-fill)>.hs-stage[class*="hs-pics-"] .hs-burst{top:3%;right:1%}}
@media (prefers-reduced-motion:reduce){.hfx-horizon .hs-fx i{animation:none}}
/* ==== end More sale backdrops ==== */

/* ==== Header → Icons on phones: "In two rows" (2026-10-07). On phones the icons (light/dark, account, wishlist,
   cart…) stack in two rows of small buttons, freeing the width for a bigger logo. Hidden icons stay hidden. ==== */
@media (max-width:560px){
  .phi-stack :is(.nc-tools,.head-tools){display:grid;grid-auto-flow:column;grid-template-rows:auto auto;gap:2px 4px;align-items:center;justify-items:center}
  .phi-stack :is(.nc-tools,.head-tools) > :is(.theme-btn,.acct-link,.wish-link,.cart-link,.nc-cart,.nc-acct,.signin-btn){width:38px;height:38px;min-height:0;padding:0;border:0;background:none;box-shadow:none}
  .phi-stack :is(.nc-tools,.head-tools) > :is(.wish-link,.acct-link,.nc-acct){display:inline-flex;align-items:center;justify-content:center}
  .phi-stack .nc-cart .nc-cart-icon{width:36px;height:36px}
  .phi-stack .signin-btn{border-radius:50%;background:var(--brand);color:var(--on-brand,#fff)}
  .phi-stack :is(.nc-tools,.head-tools) svg{width:21px;height:21px}
  .phi-stack .store-brand{flex:1 1 auto;min-width:0;display:flex;align-items:center}
  .phi-stack .store-brand img{width:auto;height:auto;max-height:58px;max-width:100%}
  .phi-stack :is(.head-tools,.nc-tools){flex:none}
  .phi-stack .head-row{flex-wrap:nowrap;column-gap:10px}
  .phi-stack.nc-head .nc-head-row{column-gap:10px}
}
/* ==== end Icons on phones ==== */

/* ==== Header → Icons on phones: "bottom bar" (phi-bottom) and "centred logo" (phi-centre), 2026-10-07.
   Phones and tablets (up to 860px, where the phone menu and the bottom bar show): the top row is only the menu
   button, the logo and the cart, so the logo can be bigger. 'bottom': account, wishlist (and light/dark when there
   is room) are in the bottom bar, which is always on with this choice. 'centre': the logo is centred; search,
   account, wishlist and light/dark are in the phone menu. Wider screens are unchanged. ==== */
/* light / dark switch in the phone menu (only printed for these two choices) */
.m-theme{display:flex;align-items:center;gap:12px;width:calc(100% - 40px);margin:10px 20px 4px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:none;color:inherit;font:inherit;font-size:16px;font-weight:600;text-align:left;cursor:pointer}
.m-theme svg{flex:none}
.m-theme .i-sun{display:none}
:root[data-theme="dark"] .m-theme .i-sun{display:block}
:root[data-theme="dark"] .m-theme .i-moon{display:none}
.m-theme-sw{position:relative;flex:none;margin-left:auto;width:44px;height:26px;border-radius:13px;background:var(--line);transition:background .2s ease}
.m-theme-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s ease}
:root[data-theme="dark"] .m-theme-sw{background:var(--brand)}
:root[data-theme="dark"] .m-theme-sw::after{transform:translateX(18px)}
.m-theme:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* light / dark in the bottom bar */
.m-bar-theme .mbt-sun{display:none}
:root[data-theme="dark"] .m-bar-theme .mbt-sun{display:inline}
:root[data-theme="dark"] .m-bar-theme .mbt-moon{display:none}
@media (max-width:860px){
  /* the top row keeps only the cart from the icons */
  :is(.phi-bottom,.phi-centre) :is(.nc-tools,.head-tools) > :not(.cart-link,.nc-cart){display:none}
  /* a bigger logo (the phone logo when there is one), never wider than its space */
  :is(.phi-bottom,.phi-centre) .store-brand img{height:60px;max-height:60px;width:auto;max-width:100%;object-fit:contain}
  :is(.phi-bottom,.phi-centre) .head-row{min-height:76px}
  :is(.phi-bottom,.phi-centre).nc-head .nc-head-row{padding-block:10px}
  .phi-bottom .store-brand{flex:1 1 auto;min-width:0}
  .phi-bottom .store-brand img{object-position:left center}
  /* centred: menu | logo | cart, the two sides the same width so the logo sits in the true middle */
  .phi-centre .head-row,.phi-centre.nc-head .nc-head-row{display:grid;grid-template-columns:minmax(44px,1fr) minmax(0,auto) minmax(44px,1fr);column-gap:12px;row-gap:8px;align-items:center}
  .phi-centre :is(.head-row,.nc-head-row) > .m-burger{grid-column:1;grid-row:1;justify-self:start;border-color:transparent;margin-left:-8px}
  .phi-centre :is(.head-row,.nc-head-row) > :is(.store-brand,.nc-logo-gap){grid-column:2;grid-row:1;justify-self:center;min-width:0;max-width:100%}
  .phi-centre :is(.head-row,.nc-head-row) > :is(.head-tools,.nc-tools){grid-column:3;grid-row:1;justify-self:end}
  .phi-centre :is(.head-row,.nc-head-row) > .head-btn.hb-m{grid-column:1/-1;grid-row:2;margin-top:0}
  .phi-centre .store-brand img{object-position:center}
  .phi-centre.nc-head :is(.nc-search,.nc-search-gap){display:none}
  .phi-centre .nc-logo{text-align:center}
}
@media (max-width:360px){
  :is(.phi-bottom,.phi-centre) .store-brand img{height:54px;max-height:54px}
  .phi-centre .head-row,.phi-centre.nc-head .nc-head-row{column-gap:8px}
}
/* ==== end Icons on phones: bottom bar / centred logo ==== */

/* ==== Units: size / contents and price per unit (App\Core\Units, migration 051_metric_units) ==== */
.card-size{font-size:13px;color:var(--muted);line-height:1.3;margin-top:-2px}
.card-unit{display:block;font-size:12.5px;color:var(--muted);line-height:1.3}
.unit-line{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:2px 0 10px;font-size:14px;color:var(--muted)}
.unit-line .unit-size{font-weight:600;color:var(--ink)}
.unit-line [hidden]{display:none}
.cart-size{display:block}
/* ==== end Units ==== */

/* ==== Product list paging (2026-10-07) =====================================================================
   Catalogue → Images → Product list paging: page numbers (.pgn), Load more and lazy load (.plist-*).
   Colours and corners come from the theme (--brand, --on-brand, --btn-radius, --line, --panel), so every
   theme and dark mode fit. The old .pager rule above is still used by other pages. */
.plist{display:flex;flex-direction:column}
.pgn-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px}
.pgn-count{margin:0;color:var(--muted);font-size:14px}
.pgn-count b{color:var(--ink);font-weight:600}
.pgn{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;max-width:100%}
.pgn-list{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.pgn-list li{margin:0}
.pgn-num,.pgn-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--btn-radius);background:var(--panel);color:var(--ink);
  font:600 15px/1 var(--font);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease,background .18s ease}
.pgn-num{padding:0 6px;font-variant-numeric:tabular-nums}
.pgn-num:hover,a.pgn-btn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);box-shadow:0 6px 14px -8px color-mix(in srgb,var(--brand) 60%,transparent)}
.pgn-num.is-current{background:var(--brand);border-color:var(--brand);color:var(--on-brand);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--brand) 70%,transparent)}
.pgn-num.is-current:hover{color:var(--on-brand);transform:none}
.pgn-btn.is-off{opacity:.45;cursor:default}
.pgn-num:focus-visible,.pgn-btn:focus-visible,.plist-btn:focus-visible,.plist-top:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.pgn-gap{min-width:28px;text-align:center;color:var(--muted);font-weight:700;letter-spacing:.1em;user-select:none}
.pgn-compact{display:none;color:var(--muted);font-size:15px;white-space:nowrap}
.pgn-compact b{color:var(--ink)}
@media (max-width:600px){
  .pgn{flex-wrap:nowrap;gap:10px;width:100%;justify-content:space-between}
  .pgn-list{display:none}
  .pgn-compact{display:block}
  .pgn-btn{min-width:52px;height:48px;padding:0 14px}
  .pgn-word{display:none}
}

/* Load more and lazy load */
.plist-foot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px;text-align:center}
.plist-seen{margin:0;color:var(--muted);font-size:14px}
.plist-seen b{color:var(--ink);font-weight:600}
.plist-meter{-webkit-appearance:none;appearance:none;width:min(260px,70%);height:4px;border:0;border-radius:4px;background:var(--line);overflow:hidden;color:var(--brand)}
.plist-meter::-webkit-progress-bar{background:var(--line);border-radius:4px}
.plist-meter::-webkit-progress-value{background:var(--brand);border-radius:4px;transition:width .4s ease}
.plist-meter::-moz-progress-bar{background:var(--brand);border-radius:4px}
.plist-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 30px;margin-top:4px;
  border:2px solid var(--brand);border-radius:var(--btn-radius);background:var(--brand);color:var(--on-brand);
  font:700 15px/1 var(--font);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--brand) 75%,transparent);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.plist-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 24px -10px color-mix(in srgb,var(--brand) 80%,transparent)}
.plist-btn-ghost{background:transparent;color:var(--brand);box-shadow:none}
.plist-btn-ghost:hover{background:color-mix(in srgb,var(--brand) 8%,transparent);box-shadow:none}
.plist-earlier{display:flex;justify-content:center;margin:0 0 24px}
.plist-spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--on-brand) 35%,transparent);border-top-color:var(--on-brand);animation:plist-spin .7s linear infinite}
.plist-btn-ghost .plist-spin{border-color:color-mix(in srgb,var(--brand) 30%,transparent);border-top-color:var(--brand)}
.plist-btn.is-busy{pointer-events:none;filter:saturate(.85)}
.plist-btn.is-busy .plist-spin{display:inline-block}
.plist-top{font-size:14px;font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:3px}
@keyframes plist-spin{to{transform:rotate(360deg)}}
/* With JavaScript the page links step aside for the button (they stay in the page for search engines). */
.plist.js-on .pgn-fallback{display:none}
.pgn-fallback{margin-top:28px}
/* Lazy load: store.js hides the button while products load by themselves and shows it every few pages
   (or if loading fails). The sentinel sits under the grid; when it nears the screen, the next page loads. */
.plist-sentinel{height:1px;margin-top:-1px}
.plist-loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.plist-loading .plist-spin{display:inline-block;border-color:color-mix(in srgb,var(--brand) 30%,transparent);border-top-color:var(--brand)}
/* New cards fade in; skeleton cards hold their place while they load. */
.card.plist-new{animation:plist-in .45s ease both}
@keyframes plist-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.plist-skel{display:flex;flex-direction:column;gap:10px}
.plist-skel i{display:block;border-radius:var(--radius);background:var(--soft);position:relative;overflow:hidden}
.plist-skel i:nth-child(1){aspect-ratio:1}
.plist-skel i:nth-child(2){height:14px;width:80%;border-radius:6px}
.plist-skel i:nth-child(3){height:14px;width:45%;border-radius:6px}
.plist-skel i::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--panel) 70%,transparent),transparent);animation:plist-shine 1.2s ease-in-out infinite}
@keyframes plist-shine{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .pgn-num,.pgn-btn,.plist-btn{transition:none}
  .pgn-num:hover,a.pgn-btn:hover,.plist-btn:hover{transform:none}
  .card.plist-new{animation:none}
  .plist-skel i::after{animation:none}
  .plist-spin{animation-duration:1.6s}
}
@media print{.plist-foot,.plist-earlier,.pgn{display:none}}
/* ==== end of product list paging ==== */

/* ==== Promo Blocks: bigger Large / Extra large pictures (2026-10-07). The picture (its empty margin trimmed off on
   the server) fills most of the block's height, blocks under the slider grow with the screen (no fixed px cap), and
   the words keep a readable column. "Normal" and "Small" are unchanged. Plus the "Picture frame: Frosted glass"
   panel (.tpf-glass) that lifts a dark product off a dark block. ==== */
.hs.hs.hs .hs-promo.hs-promo.bxo:is(.tps-large,.tps-xl,.tpt-large,.tpt-xl,.tpp-large,.tpp-xl) img.hs-promo-pic.hs-promo-pic.pic-plain{top:auto;bottom:7%;height:86%;object-position:right center}
.hs.hs.hs .hs-promo.hs-promo.bxo.htx-right:is(.tps-large,.tps-xl,.tpt-large,.tpt-xl,.tpp-large,.tpp-xl) img.hs-promo-pic.hs-promo-pic.pic-plain{object-position:left center}
@media (min-width:1101px){
  .hs.hs.promos-below .hs-promo.hs-promo.bxo.tps-large{min-height:clamp(180px,10.5vw,290px)}
  .hs.hs.promos-below .hs-promo.hs-promo.bxo.tps-xl{min-height:clamp(200px,12.5vw,340px)}
  .hs.hs.hs .hs-promo.hs-promo.bxo.tps-large img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:46%}
  .hs.hs.hs .hs-promo.hs-promo.bxo.tps-xl img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:52%}
  .hs.hs.hs .hs-promo.hs-promo.bxo.has-pic.tps-large:not(.htx-center) .hs-promo-copy.hs-promo-copy{max-width:50%}
  .hs.hs.hs .hs-promo.hs-promo.bxo.has-pic.tps-xl:not(.htx-center) .hs-promo-copy.hs-promo-copy{max-width:46%}
  /* beside the slider the blocks are narrow: less side padding, and the picture takes the larger share */
  .hs.hs.hs.with-promos .hs-promo.hs-promo.bxo:is(.tps-large,.tps-xl):not(.htx-center){padding-inline:22px}
  .hs.hs.hs.with-promos .hs-promo.hs-promo.bxo:is(.tps-large,.tps-xl):not(.htx-right) img.hs-promo-pic{right:10px}
  .hs.hs.hs.with-promos .hs-promo.hs-promo.bxo.htx-right:is(.tps-large,.tps-xl) img.hs-promo-pic{right:auto;left:10px}
  .hs.hs.hs.with-promos .hs-promo.hs-promo.bxo.tps-large img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:54%}
  .hs.hs.hs.with-promos .hs-promo.hs-promo.bxo.tps-xl img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:60%}
  .hs.hs.hs.with-promos .hs-promo.hs-promo.bxo.has-pic.tps-large:not(.htx-center) .hs-promo-copy.hs-promo-copy{max-width:48%}
  .hs.hs.hs.with-promos .hs-promo.hs-promo.bxo.has-pic.tps-xl:not(.htx-center) .hs-promo-copy.hs-promo-copy{max-width:44%}
}
/* Frosted glass frame: the picture sits on a light, see-through panel that hugs it */
.hs.hs.hs .hs-promo.hs-promo.tpf-glass img.hs-promo-pic.hs-promo-pic.pic-plain{
  box-sizing:content-box;top:50%!important;bottom:auto!important;translate:0 -50%;width:auto!important;height:auto!important;
  max-height:calc(84% - 24px);padding:12px;object-fit:contain;object-position:center;
  background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.34);border-radius:max(10px,var(--radius,10px));
  box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.4);
  mix-blend-mode:normal!important;filter:none!important;transform-origin:center}
.hs.hs.hs .hs-promo.hs-promo.tpf-glass img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:calc(46% - 24px)!important}
.hs.hs.hs .hs-promo.hs-promo.tpf-glass:is(.tps-large,.tpt-large,.tpp-large) img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:calc(50% - 24px)!important}
.hs.hs.hs .hs-promo.hs-promo.tpf-glass:is(.tps-xl,.tpt-xl,.tpp-xl) img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:calc(54% - 24px)!important}
@media (min-width:1101px){.hs.hs.hs.with-promos .hs-promo.hs-promo.tpf-glass:is(.tps-large,.tps-xl) img.hs-promo-pic.hs-promo-pic.pic-plain{max-width:calc(56% - 26px)!important;max-height:calc(80% - 24px)}.hs.hs.hs.with-promos .hs-promo.hs-promo.bxo.has-pic.tpf-glass:is(.tps-large,.tps-xl):not(.htx-center) .hs-promo-copy.hs-promo-copy{max-width:42%}}
.hs.hs.hs.look-showcase .hs-promo.hs-promo.tpf-glass:hover img.hs-promo-pic.hs-promo-pic{rotate:none;scale:1.04}
.theme-neon .hs.hs.hs .hs-promo.hs-promo.tpf-glass img.hs-promo-pic.hs-promo-pic,.hs.hc-square .hs-promo.hs-promo.tpf-glass img.hs-promo-pic.hs-promo-pic.hs-promo-pic{border-radius:0!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hs.hs.hs .hs-promo.hs-promo.tpf-glass img.hs-promo-pic.hs-promo-pic.pic-plain{background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(255,255,255,.3))}
}
@media (max-width:560px){
  .hs.hs.hs .hs-promo.hs-promo.tpf-glass.tpf-glass.tpf-glass img.hs-promo-pic.hs-promo-pic.pic-plain{padding:8px;max-height:calc(80% - 16px);max-width:calc(44% - 16px)!important}
}
@media (prefers-reduced-motion:reduce){.hs.hs.hs .hs-promo.hs-promo.tpf-glass:hover img.hs-promo-pic.hs-promo-pic{scale:none}}
/* ==== end Promo Blocks bigger pictures + glass frame ==== */
/* ==== More couriers (2026-10-07): counter-to-counter store box at checkout (Paxi, PostNet ...) ==== */
.pp-counter input[type=text]{width:100%;max-width:100%;box-sizing:border-box}
.pp-counter p{margin:0}
.pp-counter label{margin:0}
/* ==== end More couriers ==== */
/* ==== Product list "See all" button (2026-10-08) ==========================================================
   Catalogue → Images → "Show a 'See all' button" (off by default). Beside the page numbers (.pgn-row), beside
   Load more / under the lazy-load count (.plist-actions), and the see-all page's "Show fewer" (.plist-allview).
   Uses the theme's .plist-btn-ghost look, so every theme and dark mode fit. ==== */
.pgn-row{display:flex;align-items:center;justify-content:center;gap:12px 16px;flex-wrap:wrap;max-width:100%}
.pgn-row .pgn{max-width:100%}
.plist-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;max-width:100%}
.plist-actions:empty{display:none}
.plist-btn.plist-all,.plist-btn.plist-fewer{min-height:44px;padding:0 20px;margin-top:0;font-size:15px;max-width:100%}
.plist-actions .plist-btn{margin-top:0}
.plist-all-n{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;
  background:color-mix(in srgb,var(--brand) 14%,transparent);color:inherit;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.plist-allview{gap:14px}
@media (max-width:600px){
  .pgn-row{flex-direction:column;width:100%}
  .pgn-row .pgn{width:100%}
  .plist-actions{flex-direction:column;width:100%}
  .plist-actions .plist-btn{width:100%;max-width:340px;box-sizing:border-box}
}
.plist-actions .plist-btn.plist-all{min-height:50px}
:root[data-theme="dark"] .plist-btn.plist-all,:root[data-theme="dark"] .plist-btn.plist-fewer{color:color-mix(in srgb,var(--brand) 55%,#fff);border-color:color-mix(in srgb,var(--brand) 75%,#fff)}
@media print{.plist-all,.plist-fewer{display:none}}
/* ==== end of product list "See all" ==== */