/* 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}
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}
.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)}

/* 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}
.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)}
.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}
.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{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}
.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{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}}
.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}
@media (max-width:1100px){.pg-c-5,.pg-c-6{--pg-cols:4}}
@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:"99af98f1c6137df0"}

/* ---- 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: a big box under the header, suggestions below it, the chosen feature flashes */
.fg-search{position:relative;max-width:720px;margin:0 auto 18px;z-index:5}
.fg-search[hidden]{display:none}
.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 18px 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::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-results{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;max-height:min(60vh,440px);overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.fg-results li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 12px;border-radius:var(--radius);cursor:pointer}
.fg-results li b{font-size:15px;color:var(--ink)}
.fg-res-group{font-size:12px;font-weight:700;color:var(--fg-accent,var(--brand));white-space:nowrap;align-self:center}
.fg-res-desc{grid-column:1 / -1;font-size:13px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fg-results li:hover,.fg-results li.is-active{background:color-mix(in srgb,var(--fg-accent,var(--brand)) 10%,var(--panel))}
.fg-search-none{margin:10px 4px 0;text-align:center;color:var(--muted);font-size:14px}
.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:560px){.fg-search input{font-size:16px;padding:13px 14px 13px 46px}.fg-search-icon{left:15px;top:24px}.fg-results li{grid-template-columns:1fr}.fg-res-group{align-self:start}}
@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:3;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 DemoCart (democart_intro section): DemoCart'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 DemoCart 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 DemoCart: 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}}

/* ==== DemoCart front page revamp (2026-10-04): hero in the style of the afriweb.co.za DemoCart 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 DemoCart */
.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)}
.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 DemoCart 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}
}

/* ==== DemoCart 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}}
/* DemoCart demos: the way back to democart.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)}
/* DemoCart 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}
@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}}
/* ==== 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}}