/* Splendid Trading — approved design 3a, static export */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("fonts/archivo-vietnamese.woff2") format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("fonts/archivo-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("fonts/archivo-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--ink:#1A1712;--paper:#EFE5D3;--sand:#E3D6BE;--card:#F6EFE2;--line:#D6C9B2;--line2:#C9BDA8;--rust:#9C4527;--mute:#4A443B;--mute2:#5F5849;--mute3:#6B6456;--green:#2F6B4F;--amber:#8A5214}
*{box-sizing:border-box}
html{background:var(--sand)}
body{margin:0;background:var(--sand);font-family:'Archivo',system-ui,sans-serif;color:var(--ink)}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--rust)}
img{display:block}
button,input,textarea{font-family:'Archivo',sans-serif}
form{margin:0}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{fill:none;stroke:currentColor;stroke-linejoin:round}
/* page frame: approved design is a fixed 1280px canvas, scaled down on narrow screens */
.page{width:1280px;margin:0 auto;background:var(--paper) radial-gradient(900px 740px at 971px 813px,#FFFFFF 0%,#FFFFFF 36%,#FCF7EE 58%,var(--paper) 100%) no-repeat;min-height:100vh;display:flex;flex-direction:column}
.page>main{flex:1}
@media (max-width:1279px){.page{zoom:.9}}
@media (max-width:1151px){.page{zoom:.8}}
/* below 1024px the page reflows instead of zooming: see the end of this file */
/* header — top bar and logo row scroll away, departments + USPs stay pinned */
.hdr{position:sticky;top:-116px;z-index:30;background:var(--paper)}
.topbar{background:var(--sand);border-bottom:1px solid var(--line);padding:0 48px;height:38px;display:flex;align-items:center;justify-content:space-between}
.toplinks{display:flex;align-items:center;gap:26px;font-size:11.5px;font-weight:500;color:var(--mute)}
.toplinks a{color:var(--mute)}
.toplinks a:hover{color:var(--rust)}
.toplinks a.strong{color:var(--ink);font-weight:600}
.toplinks .member{display:flex;align-items:center;gap:26px}
.toplinks .who{color:var(--ink)}
.linkbtn{border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer}
.linkbtn:hover{color:var(--rust)}
.logorow{padding:22px 48px;height:92px;display:flex;align-items:center;gap:40px;background:linear-gradient(to right,#FFFFFF 0,#FFFFFF 140px,var(--paper) 800px)}
.logo{flex-shrink:0;display:block}
.logo img{width:208px;height:48px;object-fit:contain;object-position:left center;mix-blend-mode:multiply}
.search{flex:1;min-width:0;display:flex;border:1.5px solid var(--ink)}
.search-hint{flex:1;min-width:0;padding:13px 16px;font-size:14px;color:var(--mute3)}
.search-go{background:var(--ink);color:var(--paper);padding:0 22px;font-size:12.5px;font-weight:600;display:flex;align-items:center}
.contact{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.contact .tel{font-size:22px;font-weight:700;letter-spacing:-0.015em;white-space:nowrap}
.contact .mail{font-size:12.5px;font-weight:500;color:var(--mute2)}
.contact .mail:hover{color:var(--rust)}
.hdr-icons{display:flex;gap:10px;flex-shrink:0}
.hdr-icon{position:relative;width:44px;height:44px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.hdr-icon:hover{border-color:var(--rust)}
.catrow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1.5px solid var(--ink);background:linear-gradient(to right,#FFFFFF 0,#FFFFFF 140px,var(--paper) 800px);padding:0 48px}
.catnav{display:flex;flex-wrap:wrap;column-gap:26px;row-gap:8px;padding-bottom:14px;margin:0;list-style:none;padding-left:0}
.catnav [data-iw-depth]:not([data-iw-depth="0"]){display:none}
.catnav a{font-size:13.5px;font-weight:600;white-space:nowrap}
.usps{background:var(--sand);border-bottom:1px solid var(--line);display:grid;grid-template-columns:302px repeat(4,minmax(0,1fr))}
.usp-lead{background:var(--ink);color:var(--paper);padding:13px 28px 13px 48px;display:flex;align-items:center;font-size:16px;font-weight:700;letter-spacing:-0.01em;line-height:1.2}
.usp{position:relative;padding:13px 26px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-right:1px solid var(--line);font-size:14px;font-weight:700;letter-spacing:-0.005em;cursor:default;outline:none}
.usp:last-child{border-right:0;padding-right:48px}
.usp:hover,.usp:focus{background:var(--paper)}
.usp .chev{flex-shrink:0;color:var(--mute2)}
.usp-more{display:none;position:absolute;left:-1px;right:-1px;top:100%;background:var(--paper);border:1px solid var(--line);border-top:0;padding:2px 26px 16px;font-size:12.5px;font-weight:400;line-height:1.45;color:var(--mute);box-shadow:0 12px 18px -12px rgba(26,23,18,0.35)}
.usp:hover .usp-more,.usp:focus .usp-more{display:block}
/* shared blocks */
.crumbs{padding:24px 48px 0;display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--mute2);list-style:none;margin:0}
.crumbs a{color:var(--mute2)}
.crumbs a:hover{color:var(--rust)}
.crumbs .here{color:var(--ink);font-weight:500}
.crumbs li{display:flex;gap:8px}
.crumbs li+li::before{content:"/";color:var(--mute2);font-weight:400}
.pagehead{padding:18px 48px 28px;display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:56px;align-items:end}
.h1{font-size:64px;font-weight:500;line-height:1;letter-spacing:-0.022em;margin:0}
.lede{font-size:17px;line-height:1.55;color:var(--ink);text-wrap:pretty;margin:0}
.lede.soft{font-size:15px;color:var(--mute)}
.eyebrow{font-size:13px;font-weight:500;color:var(--mute3)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-bottom:22px}
.sechead .t{display:flex;flex-direction:column;gap:6px}
.sechead .big{font-size:32px;font-weight:500;letter-spacing:-0.018em;white-space:nowrap}
.underlink{font-size:13.5px;font-weight:600;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);padding:12px 22px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:'Archivo',sans-serif}
.btn:hover{background:var(--rust);border-color:var(--rust);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:transparent;border-color:var(--rust);color:var(--rust)}
.btn.big{height:52px;padding:0 28px;font-size:15px;border:0}
.btn.big:hover{background:var(--rust)}
.panel{border:1px solid var(--line);background:var(--card);padding:64px 32px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.panel .t{font-size:22px;font-weight:500;letter-spacing:-0.015em;max-width:420px;text-wrap:pretty}
.panel .b{font-size:14px;line-height:1.5;color:var(--mute);max-width:400px}
.panel .acts{display:flex;gap:10px;margin-top:6px}
.notice{border:1px solid var(--rust);background:var(--card);padding:13px 16px;display:flex;flex-direction:column;gap:3px;font-size:15px;line-height:1.45}
.notice strong{color:var(--rust);font-weight:700}
.notice.wait{border-color:var(--amber);flex-direction:row;gap:10px}
.notice.wait .icon{stroke:var(--amber);flex-shrink:0;margin-top:2px}
.status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--green)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
/* product card */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;background:var(--card);border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:8px}
.card:hover{border-color:var(--ink)}
.card-img{position:relative;aspect-ratio:1;background:#FFFFFF;display:block;overflow:hidden;margin-bottom:4px}
.card-img img{width:100%;height:100%;object-fit:contain}
.card-name{font-size:14.5px;font-weight:600;line-height:1.3;min-height:38px}
.card-price{font-size:19px;font-weight:700;letter-spacing:-0.015em;margin-top:4px;white-space:nowrap}
.card .btn{width:100%;height:40px;padding:0 16px;border:0;margin-top:4px}
.card-code{font-size:12px;color:var(--mute2);font-variant-numeric:tabular-nums;margin-top:-4px}
.card-pack{font-size:12px;color:var(--mute3);margin-top:-6px}
.fav-inline{flex-shrink:0}
.fav{position:absolute;top:24px;right:24px;z-index:2}
.fav-btn{width:34px;height:34px;padding:0;border:1px solid var(--line2);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.fav-btn:hover{border-color:var(--rust);color:var(--rust)}
.fav-btn>*{grid-area:1/1;display:flex}
.fav-btn [data-iw-favourite-on] .icon{fill:currentColor}
/* forms */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>span{font-size:15px;font-weight:600;color:var(--ink)}
.input{width:100%;border:1.5px solid var(--line2);background:#FFFFFF;padding:14px 16px;font-size:16px;color:var(--ink);outline:none}
.input:focus{border-color:var(--ink)}
.qty{width:88px;height:52px;flex-shrink:0;border:1px solid var(--line2);background:#FFFFFF;text-align:center;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);outline:none;padding:0 6px 0 16px}
.qty:focus{border-color:var(--ink)}
.qty.sm{width:72px;height:40px;font-size:14px}
.dark{background:var(--ink);color:var(--paper);padding:36px;display:flex;flex-direction:column;gap:22px}
.dark .t{font-size:26px;font-weight:600;letter-spacing:-0.015em}
.dark .row{display:flex;gap:14px}
.dark .row .icon{stroke:var(--paper);flex-shrink:0;margin-top:1px}
.dark .row div{display:flex;flex-direction:column;gap:3px}
.dark .row b{font-size:17px;font-weight:700}
.dark .row span{font-size:16px;line-height:1.5}
.dark .foot{padding-top:18px;border-top:1px solid var(--mute3);font-size:15px;line-height:1.5}
/* footer */
.ftr{background:var(--sand);border-top:1px solid var(--line);padding:44px 48px 28px}
.ftr-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.ftr-col{display:flex;flex-direction:column;gap:12px}
.ftr-col .h{font-size:13px;font-weight:600}
.ftr-col a,.ftr-col span{font-size:13.5px;color:var(--mute)}
.ftr-col a:hover{color:var(--rust)}
.ftr-legal{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--mute2);display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap}
/* home */
.hero{padding:56px 48px 48px}
.hero .kicker{font-size:13px;font-weight:500;letter-spacing:0.02em;color:var(--rust);margin-bottom:18px}
.hero h1{font-size:78px;font-weight:500;line-height:1.02;letter-spacing:-0.022em;max-width:860px;text-wrap:pretty;margin:0}
.hero .row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:36px;gap:40px}
.hero .copy{display:flex;flex-direction:column;gap:20px;max-width:440px}
.hero .copy p{font-size:16px;line-height:1.55;color:var(--mute);margin:0}
.hero .acts{display:flex;gap:10px}
.hero .acts .btn{padding:15px 28px;font-size:14px}
.hero-art{position:relative;width:520px;flex-shrink:0}
.hero-art .blob{width:520px;aspect-ratio:1.3;border-radius:62% 38% 44% 56% / 53% 60% 40% 47%;overflow:hidden;background:#EDE3D2}
.hero-art .blob img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.badge{position:absolute;left:-26px;bottom:-14px;width:132px;height:132px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 28px -14px rgba(26,23,18,0.55);transform:rotate(-8deg)}
.badge::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px dashed #8A7F6C}
.badge .in{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.badge .s{font-size:10.5px;font-weight:600;letter-spacing:0.08em;color:var(--line2)}
.badge .n{font-size:40px;font-weight:700;letter-spacing:-0.03em;line-height:0.95}
.section{padding:0 48px 64px}
.depts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.depts [data-iw-depth]:not([data-iw-depth="0"]){display:none}
.dept{background:var(--card);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px;height:100%}
.dept:hover{border-color:var(--ink);color:var(--ink)}
.dept .peb{overflow:hidden;aspect-ratio:1.5;background:repeating-linear-gradient(135deg,#E4D7C2 0 9px,#EDE3D2 9px 18px);border-radius:70% 30% 52% 48% / 62% 36% 64% 38%}
.depts>:nth-child(8n+2) .peb{border-radius:32% 68% 71% 29% / 44% 63% 37% 56%}
.depts>:nth-child(8n+3) .peb{border-radius:66% 34% 28% 72% / 58% 32% 68% 42%}
.depts>:nth-child(8n+4) .peb{border-radius:27% 73% 46% 54% / 67% 47% 53% 33%}
.depts>:nth-child(8n+5) .peb{border-radius:75% 25% 62% 38% / 38% 69% 31% 62%}
.depts>:nth-child(8n+6) .peb{border-radius:45% 55% 26% 74% / 72% 41% 59% 28%}
.depts>:nth-child(8n+7) .peb{border-radius:60% 40% 75% 25% / 30% 58% 42% 70%}
.depts>:nth-child(8n+8) .peb{border-radius:36% 64% 39% 61% / 56% 27% 73% 44%}
.dept .n{font-size:16px;font-weight:600;letter-spacing:-0.01em;margin-top:2px}
.why{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);height:280px;background:var(--ink);color:var(--paper)}
.why .img{overflow:hidden;background:#2E2921}
.why .img img{width:100%;height:100%;object-fit:cover}
.why .txt{padding:28px 40px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-width:0}
.why .lbl{font-size:13px;font-weight:500;color:var(--line2)}
.why .t{font-size:32px;font-weight:500;letter-spacing:-0.018em;line-height:1.1}
.why .b{font-size:15px;line-height:1.5;color:var(--line2);max-width:380px;text-wrap:pretty;margin-top:10px}
/* category */
.cathead{padding:18px 48px 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.cathead .side{display:flex;align-items:flex-end;gap:28px}
.cathead .lede{max-width:460px}
.cat-img{width:180px;aspect-ratio:1.5;flex-shrink:0;border-radius:70% 30% 52% 48% / 62% 36% 64% 38%;overflow:hidden;background:repeating-linear-gradient(135deg,#E4D7C2 0 9px,#EDE3D2 9px 18px)}
.cat-img img{width:100%;height:100%;object-fit:cover}
.listing{padding:0 48px 72px;display:grid;grid-template-columns:232px minmax(0,1fr);gap:40px;align-items:start}
.side-nav{border-top:1.5px solid var(--ink);position:sticky;top:110px}
.side-nav .h{display:block;font-size:15px;font-weight:600;padding:14px 0}
.side-nav ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.side-nav li{border-bottom:1px solid var(--line)}
.side-nav li a{display:block;padding:11px 0;font-size:13.5px;font-weight:600}
.side-nav li[data-iw-depth="1"]{border-bottom:0}
.side-nav li[data-iw-depth="1"] a{padding:0 0 9px 14px;font-weight:400}
.side-nav li[data-iw-depth="2"]{border-bottom:0}
.side-nav li[data-iw-depth="2"] a{padding:0 0 9px 28px;font-weight:400;font-size:13px;color:var(--mute)}
.results{display:flex;flex-direction:column;gap:20px;min-width:0;border-top:1.5px solid var(--ink);padding-top:20px}
/* product */
.pdp{padding:24px 48px 64px;display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:56px;align-items:stretch}
.pdp-media{align-self:start;margin-left:100px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pdp-img{position:relative;aspect-ratio:1;background:#FFFFFF;border:1px solid var(--line);overflow:hidden}
.pdp-img img{display:block;width:100%;height:100%;object-fit:contain}
/* Image frame (SPLENDID-295/297): at the end of this file, so it wins over each box's own image rules. */
.pdp-info{display:flex;flex-direction:column;gap:12px}
.pdp-title{display:flex;flex-direction:column;gap:10px}
.pdp-title .brand{font-size:13px;font-weight:500;color:var(--rust)}
.pdp-title .brand a{color:inherit}
.pdp-title .brand a:hover{text-decoration:underline;text-underline-offset:3px}
.pdp-meta{display:flex;align-items:center;gap:18px;font-size:12.5px;color:var(--mute2);font-variant-numeric:tabular-nums}
.pdp-meta>*,.card-code>*,.card-pack>*,.line .sub>*{white-space:nowrap;flex-shrink:0}
.pdp-desc{font-size:15px;line-height:1.6;color:var(--mute);text-wrap:pretty;margin:0}
.pdp-info h1{font-size:44px;font-weight:500;line-height:1.05;letter-spacing:-0.022em;margin:0}
.buy{border-top:1.5px solid var(--ink);padding-top:12px;margin-top:auto;display:flex;flex-direction:column;gap:16px}
.buy .price{display:flex;align-items:baseline;gap:10px}
.buy .price .p{font-size:34px;font-weight:700;letter-spacing:-0.02em;white-space:nowrap;flex-shrink:0}
.buy .price .x{font-size:12.5px;font-weight:500;color:var(--mute)}
.packbox{display:flex;align-items:center;gap:14px;border:1.5px solid var(--ink);background:#FFFFFF;padding:14px 16px}
.packbox .icon{flex-shrink:0}
.packbox .l{flex:1;font-size:14.5px;font-weight:700}
.packbox .pp{font-size:12.5px;font-weight:500;color:var(--mute);white-space:nowrap}
.packbox .pp b{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.buy-row{display:flex;gap:10px;margin-top:20px}
.buy-row form[data-iw-add-to-basket]{flex:1;display:flex;gap:10px}
.buy-row .add{flex:1;height:52px;border:0;background:var(--ink);color:var(--paper);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
.buy-row .add:hover{background:var(--rust)}
.buy-row .fav-btn{width:52px;height:52px;background:#FFFFFF}
.perks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}
.perk{padding:7px 14px;display:flex;gap:10px;align-items:center;background:var(--sand);border:1px solid var(--line)}
.perk .icon{flex-shrink:0}
.perk div{display:flex;flex-direction:column;gap:2px;min-width:0}
.perk b{font-size:13px;font-weight:700;line-height:1.25}
.perk span{font-size:12px;line-height:1.25;color:var(--mute)}
.talk{padding:0 48px 72px;display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:56px}
.talk .indent{padding-left:100px}
.talk .h{font-size:24px;font-weight:500;letter-spacing:-0.015em;border-bottom:1.5px solid var(--ink);padding-bottom:12px}
.talk .col{display:flex;flex-direction:column;gap:14px}
.talk .stack{gap:40px}
.talk h2.h{margin:0}
.specs{margin:0}
.spec{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec dt{color:var(--mute2)}
.spec dd{margin:0;font-weight:500}
.talk p{font-size:15px;line-height:1.6;color:var(--mute);max-width:460px;margin:0}
.talk .acts{display:flex;gap:10px}
.talk .acts .btn{padding:14px 24px;font-size:14px}
.talk .cats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.talk .cats a{display:block;border:1px solid var(--line2);background:var(--card);padding:11px 18px;font-size:13.5px;font-weight:600}
.talk .cats a:hover{border-color:var(--ink);color:var(--ink)}
/* basket */
.bk{padding:0 48px 72px;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:start}
.bk-head{padding:18px 48px 28px;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:end}
.lines{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.line{display:grid;grid-template-columns:96px minmax(0,1fr) 104px 150px 104px;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.line .thumb{aspect-ratio:1;background:#FFFFFF;border:1px solid var(--line);display:block;overflow:hidden}
.line .thumb img{width:100%;height:100%;object-fit:contain}
.line .name{font-size:15px;font-weight:600;line-height:1.3}
.line .info{display:flex;flex-direction:column;gap:4px;min-width:0}
.line .sub{font-size:12px;color:var(--mute2);font-variant-numeric:tabular-nums}
.line .unit{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.line .unit{display:flex;flex-direction:column;gap:2px}
.line .per{font-size:12px;font-weight:400;color:var(--mute3)}
.line form[data-iw-basket-quantity]{display:flex;align-items:center;gap:8px}
.line .upd{border:0;border-bottom:1px solid var(--line2);background:transparent;padding:0;font-size:12.5px;font-weight:500;color:var(--mute2);cursor:pointer}
.line .upd:hover{color:var(--rust);border-color:var(--rust)}
.line .tot{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.line .lt{font-size:18px;font-weight:700;letter-spacing:-0.015em;font-variant-numeric:tabular-nums}
.bk .more{align-self:flex-start;margin-top:20px}
.summary{border-top:1.5px solid var(--ink);display:flex;flex-direction:column}
.summary .h{padding:14px 0;font-size:15px;font-weight:600}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0 16px;border-top:1px solid var(--line)}
.summary .total .l{font-size:15px;font-weight:600}
.summary .total .v{display:flex;align-items:baseline;gap:6px}
.summary .total .v b{font-size:28px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.summary .total .v span{font-size:12.5px;color:var(--mute3)}
.summary .note{background:var(--sand);padding:14px 16px;font-size:13px;line-height:1.5;color:var(--mute)}
.summary .note strong{color:var(--ink);font-weight:700}
.bk-side{display:flex;flex-direction:column;gap:24px}
.details{background:var(--card);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:16px}
.details .dh{display:flex;flex-direction:column;gap:5px}
.details .dh .t{font-size:20px;font-weight:600;letter-spacing:-0.01em;margin:0}
.details .dh .s{font-size:12.5px;line-height:1.5;color:var(--mute3);margin:0}
.details .dh .s a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--ink)}
.details .dh .s a:hover{color:var(--rust);border-color:var(--rust)}
.details form{display:flex;flex-direction:column;gap:16px}
.details .field>span{font-size:13px}
.details .field .opt{font-weight:500;color:var(--mute3)}
.details .input{border-width:1px;padding:12px 14px;font-size:14px}
.details textarea.input{display:block;line-height:1.5;resize:vertical}
.details .pair{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:12px}
.details .btn.big{width:100%;margin-top:4px}
.details .alt{font-size:12.5px;color:var(--mute3);text-align:center}
.details .alt a{font-weight:600}
.sent{padding:28px 48px 96px;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:56px;align-items:start}
.sent .l{display:flex;flex-direction:column;gap:20px;min-width:0}
.sent .lede{font-size:18px;line-height:1.5;color:var(--mute);max-width:560px}
.sent .btn.big{align-self:flex-start;margin-top:8px}
.sent .r{border-top:1.5px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:12px}
.sent .r .h{font-size:15px;font-weight:600}
.sent .r p{font-size:13.5px;line-height:1.5;color:var(--mute);margin:0}
.sent .r .tel{font-size:28px;font-weight:700;letter-spacing:-0.015em}
.sent .r .mail{font-size:14px;font-weight:500;color:var(--mute2)}
.sent .r a:hover{color:var(--rust)}
/* log in / register / account */
.auth{padding:0 48px 88px;display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:56px;align-items:start}
.auth-main{border-top:1.5px solid var(--ink);padding-top:24px;display:flex;flex-direction:column;gap:18px;max-width:480px}
.auth-main.wide{max-width:none;gap:20px}
.auth form{display:flex;flex-direction:column;gap:16px}
.auth form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.auth .submit{height:52px;border:0;background:var(--ink);color:var(--paper);font-size:15px;font-weight:600;cursor:pointer;margin-top:4px;padding:0 32px}
.auth .submit:hover{background:var(--rust)}
.auth .aside{display:flex;flex-direction:column;gap:16px}
.auth .meta{font-size:15px}
.auth .meta a{font-weight:600;border-bottom:1px solid var(--ink)}
.auth .acts{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:4px}
.hint{font-weight:500;color:#2E2921}
.done{padding:28px 48px 104px;display:flex;flex-direction:column;gap:20px;max-width:900px}
.done .t{font-size:44px;font-weight:500;line-height:1.1;letter-spacing:-0.022em;text-wrap:pretty;margin:0}
.done .acts{display:flex;gap:10px;margin-top:8px}
.acct-head{padding:18px 48px 36px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.acct-head .l{display:flex;flex-direction:column;gap:12px;min-width:0}
.acct-head .r{display:flex;align-items:center;gap:20px;padding-bottom:6px;font-size:13.5px;color:var(--mute)}
.acct-head .out{border:0;border-bottom:1.5px solid var(--ink);background:transparent;padding:0 0 2px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.acct-head .out:hover{color:var(--rust);border-color:var(--rust)}
.panel .icon{stroke:var(--ink)}
.nf{padding:72px 48px 120px;display:flex;flex-direction:column;gap:20px;max-width:760px}
.nf .acts{display:flex;gap:10px;margin-top:8px}
/* ===== HCP-308 additions ===== */
/* pending: blocks whose slot is not in the contract yet. Hidden on the live site; the product removes the attribute once the slot works.
pending-fallback: what shows until then; the product deletes that element at the same time. Review copies (html.review) show the pending design. */
html:not(.review) [data-iw-pending]{display:none!important}
.review [data-iw-pending-fallback]{display:none!important}
.review [data-iw-pending]{outline:1.5px dashed var(--rust);outline-offset:3px}
/* header search form */
form.search{margin:0}
.search-field{flex:1;min-width:0;position:relative;display:flex}
.search-field input{flex:1;min-width:0;border:0;background:transparent;padding:13px 16px;font-family:'Archivo',sans-serif;font-size:14px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.search-field input::-webkit-search-cancel-button{display:none}
.search-field .search-hint{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;white-space:nowrap;overflow:hidden}
.search-field input:not(:placeholder-shown)+.search-hint{display:none}
button.search-go{border:0;cursor:pointer;font-family:'Archivo',sans-serif}
button.search-go:hover{background:var(--rust)}
.catnav a[aria-current]{color:var(--rust);box-shadow:inset 0 -2px 0 var(--rust);padding-bottom:3px}
/* product card */
.card-tag{position:absolute;top:10px;left:10px;background:var(--card);border:1px solid var(--line2);padding:5px 9px;font-size:12px;font-weight:600;white-space:nowrap;color:var(--ink)}
.card-brand{font-size:12px;font-weight:500;color:var(--mute3)}
.card-single{display:none;font-size:12px;color:var(--mute3);margin-top:-6px}
.card:not(:has([data-iw-product-has="pack"])) .card-single{display:block}
.card .stock{padding-top:9px;border-top:1px solid var(--line)}
.card-add{display:flex;gap:8px;margin-top:4px}
.card-add .qty.sm{width:64px}
.card .card-add .btn{flex:1;width:auto;margin-top:0}
.card-remove{align-self:flex-start}
.txtbtn{border:0;border-bottom:1px solid var(--rust);background:transparent;padding:2px 0 0;font-size:13px;font-weight:500;color:var(--rust);cursor:pointer}
.txtbtn:hover{color:var(--ink);border-color:var(--ink)}
/* stock: the product sets data-iw-product-stock to in, back or ask; wording comes from stock.* text keys */
.stock{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--mute2)}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.stock>span{display:none}
.stock[data-iw-product-stock="in"]{color:var(--green)}
.stock[data-iw-product-stock="back"]{color:var(--amber)}
.stock[data-iw-product-stock="in"] .s-in,.stock[data-iw-product-stock="back"] .s-back,.stock[data-iw-product-stock="ask"] .s-ask{display:inline}
.pdp-meta .stock{font-size:12.5px}
/* category: departments list shows top level only; subcategories are chips */
.side-nav li[data-iw-depth]:not([data-iw-depth="0"]){display:none}
.side-nav a[aria-current]{color:var(--rust)}
.side-col{display:flex;flex-direction:column;gap:28px;min-width:0}
.side-col .side-nav{position:static}
.subcats{padding:0 48px 20px}
.subcats ul,.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips [data-iw-depth]:not([data-iw-depth="0"]){display:none}
.chip{display:block;border:1px solid var(--line2);padding:9px 16px;font-size:13.5px;font-weight:600;white-space:nowrap}
.chip:hover{border-color:var(--rust)}
.chip[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-top:-10px}
.toolbar .count{font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.sort{position:relative;font-size:13px;color:var(--mute)}
.sort summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.sort summary::-webkit-details-marker{display:none}
.sort .cur{border:1px solid var(--line2);background:#FFFFFF;padding:9px 12px;font-size:13.5px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:10px}
.sort[open] .cur{border-color:var(--ink)}
.sort ul{position:absolute;right:0;top:calc(100% + 4px);z-index:5;min-width:210px;list-style:none;margin:0;padding:6px 0;background:#FFFFFF;border:1px solid var(--line2);box-shadow:0 12px 18px -12px rgba(26,23,18,0.35)}
.sort li a{display:block;padding:9px 14px;font-size:13.5px}
.sort li a[aria-current]{font-weight:700}
.facets{border-top:1.5px solid var(--ink)}
.facets .fh{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:15px;font-weight:600}
.facets .clear{font-size:13px;font-weight:500;color:var(--rust);border-bottom:1px solid var(--rust)}
.facet{border-top:1px solid var(--line);padding:14px 0 16px;display:flex;flex-direction:column;gap:11px}
.facet .t{font-size:13px;font-weight:600}
.facet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.facet a{display:flex;align-items:center;gap:10px;font-size:13.5px}
.facet a::before{content:"";width:16px;height:16px;border:1.5px solid currentColor;background:#FFFFFF;flex-shrink:0;box-sizing:border-box}
.facet a[aria-current]::before{background:var(--ink);box-shadow:inset 0 0 0 3px #FFFFFF}
.facet .n{margin-left:auto;font-size:12px;color:var(--mute3);font-variant-numeric:tabular-nums}
.pager{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:20px;flex-wrap:wrap}
.pager ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.pg{min-width:40px;height:40px;padding:0 8px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pg:hover{border-color:var(--rust)}
.pg[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pg-gap{width:24px;text-align:center;color:var(--mute3)}
.pg-step{height:40px;padding:0 18px;display:flex;align-items:center;border:1px solid var(--ink);font-size:13.5px;font-weight:600}
.pg-step:hover{border-color:var(--rust)}
.empty-cat{display:none}
.results:not(:has([data-iw-product])) .empty-cat{display:flex}
.results:not(:has([data-iw-product])) :is(.grid,.toolbar,.pager){display:none}
.brand-img{border-radius:0;background:#FFFFFF;border:1px solid var(--line)}
.brand-img img{object-fit:contain;padding:10px}
/* search */
.h1.q{overflow-wrap:anywhere}
.nores{padding:0 48px 96px}
.nores .in{border-top:1.5px solid var(--ink);padding-top:32px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px}
.nores .col{display:flex;flex-direction:column;gap:14px}
.nores .h{font-size:15px;font-weight:600}
.tips{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:t}
.tips li{display:flex;gap:12px;font-size:14.5px;line-height:1.5;color:var(--mute)}
.tips li::before{counter-increment:t;content:counter(t);color:var(--rust);font-weight:700}
.callband{background:var(--ink);color:var(--paper);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px;font-weight:500}
.callband a{font-size:26px;font-weight:700;letter-spacing:-0.015em;color:var(--paper)}
.callband a:hover{color:var(--line2)}
/* product: gallery, in-basket line */
.gallery{display:flex;flex-direction:column;gap:10px}
.g-main{list-style:none;margin:0;padding:0;position:relative;aspect-ratio:1;background:#FFFFFF;border:1px solid var(--line);display:grid;overflow:hidden}
.g-main li{grid-area:1/1;display:none}
.g-main img,.g-thumbs img{display:block;width:100%;height:100%;object-fit:contain}
.gallery:not(:has(input:checked)) .g-main li:first-child{display:block}
.gallery:has(.g-thumbs li:nth-child(1) input:checked) .g-main li:nth-child(1),.gallery:has(.g-thumbs li:nth-child(2) input:checked) .g-main li:nth-child(2),.gallery:has(.g-thumbs li:nth-child(3) input:checked) .g-main li:nth-child(3),.gallery:has(.g-thumbs li:nth-child(4) input:checked) .g-main li:nth-child(4),.gallery:has(.g-thumbs li:nth-child(5) input:checked) .g-main li:nth-child(5),.gallery:has(.g-thumbs li:nth-child(6) input:checked) .g-main li:nth-child(6),.gallery:has(.g-thumbs li:nth-child(7) input:checked) .g-main li:nth-child(7),.gallery:has(.g-thumbs li:nth-child(8) input:checked) .g-main li:nth-child(8){display:block}
.g-thumbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.g-thumbs:not(:has(li+li)){display:none}
.g-thumbs label{display:block;aspect-ratio:1;border:1px solid var(--line);background:#FFFFFF;cursor:pointer;overflow:hidden}
.g-thumbs label:hover{border-color:var(--line2)}
.g-thumbs label:has(input:checked){border-color:var(--ink)}
.g-thumbs label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.gallery:not(:has(input:checked)) .g-thumbs li:first-child label{border-color:var(--ink)}
.inbasket{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:13.5px;color:var(--mute);padding:12px 14px;background:var(--card);border:1px solid var(--line)}
.inbasket b{color:var(--ink);font-variant-numeric:tabular-nums}
.inbasket .underlink{margin-left:auto}
/* basket */
.line .each{display:none}
.line .unit:not(:has([data-iw-product-has="pack"])) .each{display:block}
.bk-acts{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}
.clear-btn{border:0;border-bottom:1px solid var(--line2);background:transparent;padding:0;font-size:13px;font-weight:500;color:var(--mute2);cursor:pointer}
.clear-btn:hover{color:var(--rust);border-color:var(--rust)}
.counts{display:flex;gap:28px;padding:0 0 14px;font-size:13.5px;color:var(--mute)}
.counts b{color:var(--ink);margin-left:6px;font-variant-numeric:tabular-nums}
.sent .meta-row{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}
.ref{font-size:13px;color:var(--mute)}
.ref b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
/* log in, register, account */
.forgot{align-self:flex-start;font-size:13.5px;font-weight:600;border-bottom:1px solid var(--ink);margin-top:-4px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink);flex-shrink:0}
.check a{font-weight:600;border-bottom:1px solid var(--ink)}
select.input{cursor:pointer}
.acct-mail{font-size:13.5px;color:var(--mute)}
/* home */
.dept .peb img{width:100%;height:100%;object-fit:cover}
.brands{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.brand-chip{display:block;border:1px solid var(--line2);background:var(--card);padding:16px 24px;font-size:15px;font-weight:600}
.brand-chip:hover{border-color:var(--ink);color:var(--ink)}
.why .txt{position:relative}
.slides{display:grid}
.slide{grid-area:1/1;display:flex;flex-direction:column;opacity:0;animation:whyfade 24s infinite both}
.slide:nth-child(2){animation-delay:6s}
.slide:nth-child(3){animation-delay:12s}
.slide:nth-child(4){animation-delay:18s}
.slide .n{position:absolute;top:28px;right:40px;font-size:13px;font-weight:500;color:var(--line2);font-variant-numeric:tabular-nums}
.bars{display:flex;gap:6px}
.bars span{position:relative;width:22px;height:3px;background:var(--mute3)}
.bars span::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:0;animation:whyfade 24s infinite both}
.bars span:nth-child(2)::after{animation-delay:6s}
.bars span:nth-child(3)::after{animation-delay:12s}
.bars span:nth-child(4)::after{animation-delay:18s}
.why:hover .slide,.why:hover .bars span::after{animation-play-state:paused}
@keyframes whyfade{0%{opacity:0}2%,23%{opacity:1}25%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.slide,.bars span::after{animation:none}.slide:first-child,.bars span:first-child::after{opacity:1}}
/* ===== narrow screens: reflow instead of zoom ===== */
@media (max-width:1023px){
.page{zoom:1;width:auto;max-width:100%;overflow-x:clip}
.hdr{position:relative;top:auto}
.topbar{padding:0 20px;gap:16px}
.logorow{height:auto;padding:14px 20px;flex-wrap:wrap;gap:12px 20px}
.logo img{width:168px;height:40px}
.search{order:5;flex:1 1 100%}
.contact{margin-left:auto}
.contact .tel{font-size:18px}
.contact .mail{display:none}
.catrow{padding:0 20px}
.catnav{flex-wrap:nowrap;overflow-x:auto;padding-top:4px;scrollbar-width:none}
.catnav::-webkit-scrollbar{display:none}
.usps{grid-template-columns:repeat(2,minmax(0,1fr))}
.usp-lead{display:none!important}
.usp{cursor:pointer}
.usp-more{padding:2px 20px 14px;z-index:5}
.usp,.usp:last-child{padding:10px 20px;font-size:13px;border-bottom:1px solid var(--line)}
.usp:nth-child(odd){border-right:0}
.crumbs{padding:18px 20px 0}
.h1{font-size:44px;overflow-wrap:break-word}
.pagehead,.bk-head{grid-template-columns:minmax(0,1fr);gap:16px;padding:14px 20px 24px}
.cathead,.acct-head{flex-direction:column;align-items:flex-start;gap:16px;padding:14px 20px 24px}
.cathead .side{align-items:center;gap:16px}
.cat-img{width:120px}
.subcats{padding:0 20px 16px}
.subcats ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.hero{padding:32px 20px 40px}
.hero h1{font-size:48px}
.hero .row{flex-direction:column;align-items:stretch;gap:32px}
.hero-art,.hero-art .blob{width:100%}
.badge{left:8px;width:108px;height:108px}
.badge .n{font-size:32px}
.section{padding:0 20px 48px}
.sechead{flex-wrap:wrap}
.sechead .big{font-size:26px;white-space:normal}
.depts,.grid,.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid[data-iw-featured-products],.grid[data-iw-related-products],.grid[data-iw-department-products],.grid[data-iw-brand-products]{grid-template-columns:repeat(2,minmax(0,1fr))}
.why{grid-template-columns:minmax(0,1fr);height:auto}
.why .img{aspect-ratio:16/9}
.why .txt{padding:24px;min-height:240px}
.slide .n{top:24px;right:24px}
.listing{grid-template-columns:minmax(0,1fr);padding:0 20px 56px;gap:32px}
.side-col{order:2}
.pdp{grid-template-columns:minmax(0,1fr);padding:16px 20px 48px;gap:28px}
.pdp-media{margin-left:0;max-width:560px}
.pdp-info h1{font-size:34px}
.talk{grid-template-columns:minmax(0,1fr);padding:0 20px 56px;gap:40px}
.talk .indent{padding-left:0}
.bk,.sent,.auth{grid-template-columns:minmax(0,1fr);padding-left:20px;padding-right:20px;gap:32px}
.sent{padding-top:20px}
.line{grid-template-columns:80px minmax(0,1fr) auto;grid-template-areas:"thumb info info" "thumb unit unit" "thumb qty tot";gap:10px 16px;align-items:start}
.line .thumb{grid-area:thumb}
.line .info{grid-area:info}
.line .unit{grid-area:unit;flex-direction:row;align-items:baseline;gap:6px}
.line form[data-iw-basket-quantity]{grid-area:qty}
.line .tot{grid-area:tot}
.auth-main{max-width:none}
.auth form .two,.details .pair{grid-template-columns:minmax(0,1fr)}
.done,.nf{padding-left:20px;padding-right:20px}
.done .t{font-size:32px}
.nores{padding:0 20px 64px}
.nores .in{grid-template-columns:minmax(0,1fr);gap:40px}
.ftr{padding:36px 20px 24px}
.ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
.dark{padding:24px}
.panel{padding:40px 20px}
.spec{grid-template-columns:140px minmax(0,1fr)}
}
@media (max-width:639px){
.topbar>nav.toplinks{display:none}
.topbar{justify-content:flex-end}
.logo img{width:150px;height:36px}
.contact{display:none}
.hdr-icons{margin-left:auto}
.hdr-icon{width:42px;height:42px}
.usp,.usp:last-child{font-size:12.5px;padding:9px 20px}
.h1{font-size:36px}
.hero h1{font-size:40px}
.depts,.grid,.grid.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card{padding:10px;gap:6px}
.card-name{font-size:13.5px}
.card-price{font-size:17px}
.card-code>*,.card-pack>*{white-space:normal}
.card-tag{top:6px;left:6px;font-size:11px;padding:4px 7px;white-space:normal}
.fav{top:16px;right:16px}
.card-add{flex-direction:column}
.card-add .qty.sm{width:100%}
.card .card-add .btn{flex:none} /* stacked: keep the 40px button height (flex:1 squashed it to the text) */
.pdp-info h1{font-size:30px}
.buy .price .p{font-size:28px}
.packbox{flex-wrap:wrap}
.perks{grid-template-columns:minmax(0,1fr)}
.pdp-meta{flex-wrap:wrap;gap:8px 18px}
.why .t{font-size:24px}
.ftr-cols{grid-template-columns:minmax(0,1fr)}
.toolbar .sort ul{right:auto;left:0}
}
/* v4.1: no side departments list; filters column collapses while facets are pending */
@media (min-width:1024px){
html:not(.review) .listing:not(:has(.facets:not([data-iw-pending]))){grid-template-columns:minmax(0,1fr)}
html:not(.review) .listing:not(:has(.facets:not([data-iw-pending]))) .grid.three{grid-template-columns:repeat(4,minmax(0,1fr))}
}
html:not(.review) .listing:not(:has(.facets:not([data-iw-pending]))) .side-col{display:none}
.side-col .facets{border-top:1.5px solid var(--ink)}
/* box + pack products: unit price reads "per box" when the box wrapper is live */
.u-box{display:none}
.card:has([data-iw-product-has="box"]:not([data-iw-pending])) .u-box,.review .card:has([data-iw-product-has="box"]) .u-box{display:inline}
.card:has([data-iw-product-has="box"]:not([data-iw-pending])) .u-each,.review .card:has([data-iw-product-has="box"]) .u-each{display:none}
/* v4.1: filters on narrow screens open from a Filter button in the toolbar (CSS only) */
.tb-acts{display:flex;align-items:center;gap:10px}
.filter-btn{display:none}
@media (max-width:1023px){
.listing{gap:16px}
.results{display:contents}
.toolbar{order:1;margin-top:0;border-top:1.5px solid var(--ink);padding-top:10px}
.toolbar .count{flex:1 1 100%}
.side-col{order:2;display:none}
.listing:has(#filter-toggle:checked) .side-col{display:flex}
.results>.grid,.results>.empty-cat,.results>.pager{order:3}
.filter-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:#FFFFFF;padding:9px 12px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.filter-btn:hover{border-color:var(--ink)}
.listing:has(#filter-toggle:checked) .filter-btn{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.listing:has(#filter-toggle:focus-visible) .filter-btn{outline:2px solid var(--ink);outline-offset:2px}
.filter-btn .n{min-width:18px;height:18px;padding:0 5px;background:var(--rust);color:var(--paper);font-size:11px;font-weight:700;line-height:18px;text-align:center}
.toolbar .sort ul{right:auto;left:0}
}
/* v4.1: department landing (two-tier) */
.subtiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.subtile{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);padding:14px;height:100%}
.subtile:hover{border-color:var(--ink);color:var(--ink)}
.subtile .im{display:block;aspect-ratio:1.5;background:repeating-linear-gradient(135deg,#E4D7C2 0 9px,#EDE3D2 9px 18px);border-radius:70% 30% 52% 48% / 62% 36% 64% 38%;overflow:hidden}
.subtile .im img{width:100%;height:100%;object-fit:cover}
.subtiles>:nth-child(8n+2) .im{border-radius:32% 68% 71% 29% / 44% 63% 37% 56%}
.subtiles>:nth-child(8n+3) .im{border-radius:66% 34% 28% 72% / 58% 32% 68% 42%}
.subtiles>:nth-child(8n+4) .im{border-radius:27% 73% 46% 54% / 67% 47% 53% 33%}
.subtiles>:nth-child(8n+5) .im{border-radius:75% 25% 62% 38% / 38% 69% 31% 62%}
.subtiles>:nth-child(8n+6) .im{border-radius:45% 55% 26% 74% / 72% 41% 59% 28%}
.subtiles>:nth-child(8n+7) .im{border-radius:60% 40% 75% 25% / 30% 58% 42% 70%}
.subtiles>:nth-child(8n+8) .im{border-radius:36% 64% 39% 61% / 56% 27% 73% 44%}
.subtile .n{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15.5px;font-weight:600;letter-spacing:-0.01em;line-height:1.3}
.subtile .n .icon{flex-shrink:0;color:var(--mute2)}
.subtile:hover .n .icon{color:var(--rust)}
@media (max-width:1023px){.subtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){.subtiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.subtile{padding:10px}.subtile .n{font-size:14px}}
/* v4.1: lighter subcategory tiles (pebble + name, no card) */
.subs{padding-bottom:72px}
.subtiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 20px;border-top:1.5px solid var(--ink);padding-top:24px}
.subtile{background:transparent;border:0;padding:0;gap:10px}
.subtile .n{font-size:14.5px}
.subtile:hover .im{filter:brightness(.96)}
@media (max-width:1023px){.subtiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 14px}}
@media (max-width:639px){.subtiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}.subtile{padding:0}.subtile .n{font-size:13px}.subtile .n .icon{display:none}}
/* v4.1: favourites + basket drop into the department row once the logo row has scrolled away (approved 3a).
CSS scroll-driven animation; browsers without it keep the icons hidden (the logo-row icons are one scroll up). */
.catrow{position:relative}
.catnav{margin-right:76px}
.cat-icons{position:absolute;right:48px;bottom:10px;display:flex;gap:6px;opacity:0;visibility:hidden}
.cat-icon{width:28px;height:28px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.cat-icon:hover{border-color:var(--rust);color:var(--rust)}
@keyframes caticons{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@supports (animation-timeline:scroll()){
.cat-icons{animation:caticons linear both;animation-timeline:scroll(root);animation-range:120px 150px}
}
@media (max-width:1023px){.cat-icons{display:none}.catnav{margin-right:0}}
/* v4.1: saved-products count on the header heart (approved 3a) */
.cat-icon{position:relative}
.fav-count{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;background:var(--rust);color:var(--paper);font-size:10.5px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.cat-icon .fav-count{top:-6px;right:-6px;min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}
.ftr-legal .powered{color:var(--mute2)}
.ftr-legal .powered:hover{color:var(--rust)}
/* ===== v4.2: styles used by /assets/site.js (html.js is set by the script) ===== */
/* panels: tap again to close */
html.js .usp:focus .usp-more{display:none}
@media (hover:hover){html.js .usp:hover .usp-more{display:block}}
@media (hover:none){html.js .usp:hover .usp-more{display:none}html.js .usp:hover:not(.is-open){background:transparent}}
html.js .usp.is-open .usp-more{display:block}
html.js .usp:focus:not(:hover):not(.is-open){background:transparent}
html.js .usp.is-open{background:var(--paper)}
html.js .usp:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* stepper */
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line2);background:#FFFFFF;flex-shrink:0}
.stepper:focus-within{border-color:var(--ink)}
.stepper .qty{border:0;width:44px;height:50px;padding:0;text-align:center;-moz-appearance:textfield;appearance:textfield}
.stepper .qty::-webkit-inner-spin-button,.stepper .qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper button{width:36px;border:0;background:transparent;padding:0;font-family:'Archivo',sans-serif;font-size:18px;line-height:1;color:var(--ink);cursor:pointer}
.stepper button:hover{color:var(--rust)}
.stepper.sm .qty{width:32px;height:38px;font-size:14px}
.stepper.sm button{width:28px;font-size:16px}
@media (max-width:639px){.card-add .stepper{width:100%}.card-add .stepper .qty{flex:1}}
/* added + running total */
.added-label{display:none}
.is-added [data-iw-text="product.add"]{display:none}
.is-added .added-label{display:inline-flex;align-items:center;gap:9px}
.is-added .added-label::before{content:"";width:11px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
button.is-added,button.is-added:hover{background:var(--green)!important}
button.is-busy{opacity:.7;cursor:progress}
.runtotal{display:flex;justify-content:flex-end;align-items:baseline;gap:6px;font-size:13px;color:var(--mute);margin-top:-6px}
.runtotal[hidden]{display:none}
.runtotal b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
/* header icons: script-driven in every browser */
html.js .cat-icons{animation:none!important;transition:opacity .25s ease,visibility .25s}
html.js.is-stuck .cat-icons{opacity:1;visibility:visible}
/* carousel */
.js-car .slide{animation:none;opacity:0;transition:opacity .7s ease}
.js-car .slide.is-on{opacity:1}
.js-car .bars{display:none}
.why-ctrl{display:flex;align-items:center;gap:8px}
.why-dots{display:flex;gap:6px;margin-right:auto}
.why-dots button{padding:8px 0;border:0;background:transparent;cursor:pointer}
.why-dots button span{display:block;width:22px;height:3px;background:var(--mute3);transition:background .3s}
.why-dots button.is-on span,.why-dots button:hover span{background:var(--paper)}
.why-arrow{width:36px;height:36px;border:1px solid var(--mute3);background:transparent;color:var(--paper);display:grid;place-items:center;cursor:pointer;padding:0}
.why-arrow:hover{border-color:var(--paper)}
/* scroll-in */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
html.js .rv.is-in{opacity:1;transform:none}
/* v4.2: thumbnails as a column to the left of the main photo, as in approved 3a */
.gallery{position:relative}
.g-thumbs{position:absolute;top:0;left:-100px;width:84px;display:flex;flex-direction:column;gap:10px}
.g-thumbs label{width:84px;height:84px;aspect-ratio:auto;border:1.5px solid var(--line)}
.gallery:has(.g-thumbs li:nth-child(9) input:checked) .g-main li:nth-child(9){display:block}
@media (max-width:1023px){
.g-thumbs{position:static;width:auto;flex-direction:row;overflow-x:auto;scrollbar-width:none}
.g-thumbs label{width:64px;height:64px}
}
.buy .price .stock{margin-left:auto;font-size:13.5px;align-self:center}
/* v4.2: home department cards match the subcategory tiles (pebble + name, no card) */
.depts{gap:28px 20px;border-top:0}
.dept{background:transparent;border:0;padding:0;gap:10px}
/* home department tiles use the brand-page tile style (.btile, .im): name overlap, size, hover zoom */
.dept:hover .n{color:var(--rust)}
/* v4.2: header icon states: heart red when there are favourites, basket green when it has items */
.ic-none,.ic-some{display:flex}
.ic-some .icon{fill:currentColor}
.ic-favourites{color:var(--rust)}
.ic-basket{color:var(--green)}
.sechead+.subtiles{border-top:0;padding-top:0}
/* v4.2: brand catalogue (PDF) */
.brand-copy{display:flex;flex-direction:column;gap:18px;max-width:460px}
.catalogue{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);background:var(--card);padding:12px 12px 12px 14px}
.catalogue .icon{flex-shrink:0}
.catalogue .cl{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.catalogue .cl b{font-size:14.5px;font-weight:700}
.catalogue .cs{font-size:12px;color:var(--mute3)}
.catalogue .ca{display:flex;gap:8px;flex-shrink:0}
.catalogue .btn{padding:9px 16px;font-size:13px}
@media (max-width:639px){.catalogue{flex-wrap:wrap}.catalogue .ca{width:100%}.catalogue .btn{flex:1}}
/* v4.2: optional brand promo banner, full-bleed image with text over it */
.promo{position:relative;margin:0 0 56px;height:380px;overflow:hidden;background:#2E2921;color:var(--paper);display:flex;align-items:flex-end}
.promo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(26,23,18,.82) 0%,rgba(26,23,18,.55) 42%,rgba(26,23,18,0) 72%)}
.promo-txt{position:relative;z-index:2;padding:40px 48px;max-width:716px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.promo-ey{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--line2)}
.promo-t{margin:0;font-size:48px;font-weight:500;line-height:1.02;letter-spacing:-0.022em;text-wrap:pretty}
.promo-b{margin:0;font-size:16px;line-height:1.5;color:var(--paper);max-width:460px;text-wrap:pretty}
.promo-cta{margin-top:8px;background:var(--paper);border-color:var(--paper);color:var(--ink)}
.promo-cta:hover{background:var(--rust);border-color:var(--rust);color:var(--paper)}
@media (max-width:1023px){
.promo{height:auto;min-height:420px;margin-bottom:40px}
.promo::before{background:linear-gradient(0deg,rgba(26,23,18,.88) 0%,rgba(26,23,18,.6) 50%,rgba(26,23,18,0) 85%)}
.promo-txt{padding:28px 20px}
.promo-t{font-size:34px}
.promo-b{font-size:15px}
}
/* v4.3: key facts, feature pills, range link (pending keyfacts / features / range-link) */
.kf{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border:1px solid var(--line);background:var(--card);margin-bottom:8px}
.kf-t{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-left:1px solid var(--line)}.kf-t:first-child{border-left:0}
.kf-l{font-size:12px;color:var(--mute2)}.kf-v{font-size:19px;font-weight:600;line-height:1.25}.kf-s{font-size:12.5px;color:var(--mute)}
.kf-chips{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kf-chips li{display:flex;gap:6px;align-items:center;padding:6px 12px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:500}.kf-chips svg{color:#3F6B3A;flex-shrink:0}
.range-link{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;width:max-content;max-width:100%}
.range-link:hover{color:var(--rust,#9A3412)}
@media (max-width:639px){.kf{grid-template-columns:repeat(2,minmax(0,1fr))}.kf-t:nth-child(3){border-left:0}.kf-t:nth-child(n+3){border-top:1px solid var(--line)}}
/* v4.4: forgot password, Our brands, content page (HCP-316) */
.cathead .lede.count{white-space:nowrap;text-wrap:wrap}
.notice.ok{border-color:var(--green);flex-direction:row;gap:10px}
.notice.ok .icon{stroke:var(--green);flex-shrink:0;margin-top:2px}
.dark .foot a{color:var(--paper);font-weight:600;border-bottom:1px solid var(--paper)}
.az{list-style:none;margin:0;padding:0 48px 28px;display:flex;flex-wrap:wrap;gap:6px}
.az a{display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border:1px solid var(--line2);background:var(--card);font-size:15px;font-weight:600}
.az a:hover{border-color:var(--ink);color:var(--ink)}
.bgroups{padding:0 48px 88px}
.bgroup{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;border-top:1.5px solid var(--ink);padding:16px 0 32px;scroll-margin-top:120px}
.bgroup-l{font-size:44px;font-weight:500;line-height:1;letter-spacing:-0.022em;margin:0}
.blist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
.blist a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:600}
.blist .bn{min-width:0;overflow-wrap:anywhere}
.blist .n{font-size:13px;font-weight:500;color:var(--mute3);white-space:nowrap}
.blist a:hover .n{color:var(--rust)}
.content{padding:0 48px 96px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:72px;align-items:start}
.prose{max-width:720px;border-top:1.5px solid var(--ink);padding-top:26px;font-size:17px;line-height:1.65}
.prose>:first-child{margin-top:0}
.prose h2{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-0.012em;margin:48px 0 14px;text-wrap:balance;scroll-margin-top:120px}
.prose h3{font-size:19px;font-weight:700;line-height:1.3;margin:32px 0 8px}
.prose p{margin:0 0 16px;text-wrap:pretty}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 6px;padding-left:4px}
.prose li::marker{color:var(--rust)}
.prose a{font-weight:600;border-bottom:1px solid var(--ink)}
.prose .topics{background:var(--card);border:1px solid var(--line);padding:20px 24px;margin:0 0 8px}
.prose .topics-h{font-size:13px;font-weight:600;color:var(--mute3);margin:0 0 10px}
.prose .topics ul{list-style:none;padding:0;margin:0;columns:2;column-gap:32px}
.prose .topics li{padding:0;margin:0;break-inside:avoid}
.prose .topics a{display:block;padding:6px 0;border:0}
.prose .topics a:hover{color:var(--rust)}
.cnav{position:sticky;top:120px;display:flex;flex-direction:column;gap:24px;border-top:1.5px solid var(--ink);padding-top:18px}
.cnav .h{font-size:13px;font-weight:500;color:var(--mute3);margin-bottom:4px}
.cnav ul{list-style:none;margin:0;padding:0}
.cnav a{display:block;padding:7px 0;font-size:15px;font-weight:500}
.cnav a[aria-current="page"]{font-weight:700;color:var(--rust)}
@media (max-width:1023px){
.az{padding:0 20px 20px}
.bgroups{padding:0 20px 56px}
.bgroup{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0 24px}
.bgroup-l{font-size:32px}
.blist{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.content{grid-template-columns:minmax(0,1fr);gap:40px;padding:0 20px 56px}
.cnav{position:static}
.prose{font-size:16px}
.prose h2{font-size:22px;margin-top:36px}
}
@media (max-width:639px){
.blist{grid-template-columns:minmax(0,1fr)}
.prose .topics ul{columns:1}
.az a{min-width:44px}
}
/* v4.5: product page attribute layout */
.pdp-specs{display:flex;flex-direction:column}
.spec-h{margin-top:20px;padding-bottom:10px;font-size:16px;font-weight:600}
.iconfacts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.iconfacts li{display:grid;grid-template-columns:20px 110px minmax(0,1fr);gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.iconfacts svg{color:var(--mute2)}.if-l{color:var(--mute2)}.if-v{font-weight:600;overflow-wrap:anywhere}
.ship{border-bottom:1px solid var(--line)}
.ship-h{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;font-size:16px;font-weight:600;cursor:pointer}
.ship-h::-webkit-details-marker{display:none}
.ship .chev{transition:transform .2s;flex-shrink:0}.ship[open] .chev{transform:rotate(180deg)}
.ship .specs{padding-bottom:6px}.ship .spec:last-child{border-bottom:0}
.pdp-title .range-link{margin:2px 0 4px}
.pdp-desc>p{margin:0 0 10px}
.desc-list{margin:0;padding-left:18px;display:grid;gap:4px}
.packbox .pk-sub{display:block;font-size:13px;font-weight:500;color:var(--mute3);margin-top:2px}
.agecheck{display:flex;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--rust);background:#FFF8EC;font-size:13.5px;line-height:1.45}
.age-b{flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--rust);color:#fff;font-weight:700;font-size:13px}
@media (prefers-reduced-motion:reduce){.ship .chev{transition:none}}
/* v4.5: variant table */
.vt-wrap{border-top:1.5px solid var(--ink);padding-top:14px;margin-top:4px}
.vt-wrap .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vt-h{font-size:15px;font-weight:600;margin:0 0 6px}
.vt{width:100%;border-collapse:collapse;font-size:14px}
.vt th{text-align:left;font-size:12px;font-weight:500;color:var(--mute2);padding:6px 8px 6px 0;border-bottom:1px solid var(--line)}
.vt td{padding:9px 8px 9px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.vt td.n,.vt th.n{text-align:right}
.vt tr[aria-current] td{background:var(--card)}
.vt tr[aria-current] td:first-child{box-shadow:inset 3px 0 0 var(--ink)}
.vt td:first-child,.vt th:first-child{padding-left:10px}
.vt a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.vt .cur{font-weight:700}.vt .tag{display:block;font-size:11.5px;font-weight:500;color:var(--mute2)}
.vt .mute{color:var(--mute2)}
.vt form{display:flex;gap:6px;justify-content:flex-end}
.vt input{width:56px;height:40px;border:1px solid var(--line2);background:#fff;font:inherit;text-align:center}
.vt button{height:40px;padding:0 14px;border:0;background:var(--ink);color:var(--paper);font:inherit;font-weight:600;font-size:13px;cursor:pointer}
html:has(#vp-a:checked) .vp-onlyB,html:has(#vp-b:checked) .vp-onlyA{display:none}
@media (max-width:639px){.vt .code{display:none}}
/* v4.5: category filters, "Show all" */
.facet .more summary{list-style:none;cursor:pointer;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.facet .more summary::-webkit-details-marker{display:none}
.facet .more[open] summary{margin-bottom:11px}
.facet .more ul{max-height:300px;overflow:auto}
/* v4.5: key points */
.kpts{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px;font-size:14px}
.kpts li{display:flex;gap:8px;align-items:flex-start}
.kpts svg{flex-shrink:0;margin-top:3px;color:#3F6B3A}
/* ===== v4.6 (HCP-505): round-2 client feedback, on the UAT build of 8 Oct 2026 ===== */
/* 1. Darker ground (Ben, 8 Oct 2026): surfaces one step deeper (see :root); no page spotlight; the header fades stay.
Product cards: no border, clear cream gaps, and each card is its own glow, white under the photo easing to the card tone at its own edges. The photo's light background is blended into the card; the product itself keeps its colours */
.card{background:#FFFFFF}
.card-img{background:#FFFFFF}
/* Category pages (Ben, 8 Oct 2026): no page spotlight behind product listings. Home and every other page keep it */
.page[data-screen-label="Category"],.page[data-screen-label="Department"]{background:var(--paper)}
/* 2. Home hero: several images (data-iw-hero-images), 7 s each; the new one shrinks into place over the old. First image shows without the script */
.hero-art .blob{position:relative;z-index:0}
.hero-art .badge{z-index:3}
.hero-art .blob img{position:absolute;inset:0}
.hero-art .blob img:not(:first-child){opacity:0}
.hero-art .blob.js-rot img{opacity:0;z-index:1;transform:scale(1.14);transition:opacity .9s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}
.hero-art .blob.js-rot img.is-on{opacity:1;z-index:2;transform:scale(1)}
/* "Why buy from Splendid": one image per message, changing with the text (Ben, 8 Oct 2026). Without the script the images follow the same 24 s cycle as the text */
.why .img{position:relative}
.why .img img{position:absolute;inset:0;opacity:0;animation:whyfade 24s infinite both}
.why .img img:nth-child(2){animation-delay:6s}
.why .img img:nth-child(3){animation-delay:12s}
.why .img img:nth-child(4){animation-delay:18s}
.why:hover .img img{animation-play-state:paused}
.js-car .img img{animation:none;opacity:0;transition:opacity .7s ease}
.js-car .img img.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.why .img img{animation:none}.why .img img:first-child{opacity:1}}
/* 3. Anyone can request a quote: product buy box, log in / register strip, empty basket, logged-out account */
.qline{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.45;color:var(--mute)}
.qline .icon{flex-shrink:0;stroke:var(--green);margin-top:2px}
.qstrip{margin:0 48px 32px;display:flex;align-items:center;gap:20px;padding:16px 20px;border:1px solid var(--line2);background:var(--card)}
.qstrip .icon{flex-shrink:0;stroke:var(--green)}
.qstrip .qt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.qstrip b{font-size:15px;font-weight:700}
.qstrip span{font-size:13.5px;line-height:1.45;color:var(--mute)}
.qstrip .btn{flex-shrink:0}
/* 4. Department pebbles: a soft white glow around each pebble (Ben, 8 Oct 2026) */
@media (max-width:1023px){.qstrip{margin:0 20px 24px;flex-wrap:wrap}}
/* Yes/no features overflow chip (Design option 1a) */
.kf-chips li[hidden]{display:none}
.kf-chips .kf-more{border-style:dashed;border-color:var(--line2);background:transparent;font-weight:600;cursor:pointer}
.kf-chips .kf-more:hover{border-color:var(--ink)}
.kf-chips .kf-more button{all:inherit;cursor:pointer}
/* Brand page content (Design brand page proposal v3): feature chips, why band, collection and department tiles; .btile is also the home page department tile */
.brand-copy .kf-chips{margin:0}
/* brand head (Design v3 + Ben 14 Oct): title centred against the copy and logo; copy column 14px gaps; chips two equal columns; logo 150px in a 180px white box */
.bhead{align-items:center}
.bhead .h1{max-width:520px}
.bhead .brand-copy{gap:14px}
.bhead .kf-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bhead .kf-chips li{white-space:nowrap}
.bhead .brand-img{width:182px;display:flex;align-items:center;justify-content:center}
.bhead .brand-img img{width:150px;height:auto;padding:0;object-fit:contain}
.promo-cta{border:0}
.bwhy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);background:var(--ink);color:var(--paper)}
.bwhy-img{position:relative;overflow:hidden;background:#2E2921;min-height:360px}
.bwhy-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bwhy-txt{padding:28px 40px 30px;display:flex;flex-direction:column;gap:22px;min-width:0}
.bwhy-h{display:flex;flex-direction:column;gap:8px}
.bwhy-ey{font-size:13px;font-weight:500;color:var(--line2)}
.bwhy-t{font-size:32px;font-weight:500;letter-spacing:-0.018em;line-height:1.1}
.bwhy-pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.bwhy-pts li{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--mute3);padding-top:12px}
.bwhy-pts b{font-size:15.5px;font-weight:700}
.bwhy-pts span{font-size:14px;line-height:1.5;color:var(--line2);text-wrap:pretty}
.bwhy-note{margin:0;padding-top:16px;border-top:1px solid var(--mute3);font-size:15px;line-height:1.5}
.bwhy-note b{font-weight:700}
.btiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px;align-items:start}
.bcoll{display:flex;flex-direction:column;gap:12px}
.btile{display:flex;flex-direction:column;gap:10px}
.btile .im{display:block;aspect-ratio:1.5;overflow:hidden;border-radius:70% 30% 52% 48% / 62% 36% 64% 38%;background:repeating-linear-gradient(135deg,#E4D7C2 0 9px,#EDE3D2 9px 18px)}
.btiles>:nth-child(4n+2) .im{border-radius:32% 68% 71% 29% / 44% 63% 37% 56%}
.btiles>:nth-child(4n+3) .im{border-radius:66% 34% 28% 72% / 58% 32% 68% 42%}
.btiles>:nth-child(4n+4) .im{border-radius:27% 73% 46% 54% / 67% 47% 53% 33%}
.btile .im img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.btile:hover .im img{transform:scale(1.06)}
.btile .n{position:relative;z-index:1;margin:-30px 0 0 12px;font-size:34px;font-weight:600;line-height:1;letter-spacing:-0.025em;text-wrap:pretty;transition:color .2s;text-shadow:0 0 14px #FCF7EE,0 0 4px #FCF7EE}
.btile:hover .n{color:var(--rust)}
.btile .d{font-size:13.5px;line-height:1.5;color:var(--mute);text-wrap:pretty}
.bt-ranges{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.bt-l{font-size:12px;font-weight:500;color:var(--mute3)}
.bt-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bt-chip{display:block;border:1px solid var(--line2);background:var(--card);padding:6px 10px;font-size:13px;font-weight:600;transition:background .15s,border-color .15s}
.bt-chip:hover{border-color:var(--ink);background:#FFFFFF;color:var(--ink)}
.bt-other{margin-top:36px;display:flex;flex-direction:column;gap:12px}
.bt-other .brands{gap:8px}
.bt-other .brand-chip{padding:10px 16px;font-size:14px}
@media (prefers-reduced-motion:reduce){.btile .im img{transition:none}.btile:hover .im img{transform:none}}
@media (max-width:1023px){
.bhead{align-items:flex-start}
.bhead .brand-img{width:120px}
.bhead .brand-img img{width:100px}
.bwhy{grid-template-columns:minmax(0,1fr)}
.bwhy-img{min-height:220px}
.bwhy-txt{padding:24px 20px}
.bwhy-t{font-size:26px}
.btiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.btile .n{font-size:28px}
}
@media (max-width:639px){
.bhead .kf-chips{grid-template-columns:minmax(0,1fr)}
.bwhy-pts{grid-template-columns:minmax(0,1fr)}
.btiles{gap:22px 12px}
.btile .n{font-size:22px;margin:-20px 0 0 8px}
}
/* Range page (Design range page proposal v1): head, colourways, in use, shapes and sizes with one add-all form, complete the table.
Reuses the brand page tiles (.btiles .btile .bt-*) and dark band (.bwhy). */
.rshapes [hidden]{display:none!important}
.rhead{padding:24px 48px 56px;display:flex;flex-direction:column;gap:22px}
.rhead .crumbs{padding:0}
.rhead-g{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:48px;align-items:center}
.rhead-t{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.rhead-ey{font-size:13px;font-weight:600;color:var(--mute3)}
.rhead-h{margin:-6px 0 0;font-size:88px;font-weight:500;line-height:.95;letter-spacing:-0.03em}
.rhead-p{margin:0;font-size:16px;line-height:1.55;color:var(--mute);max-width:480px;text-wrap:pretty}
.rhead .kf-chips{margin:0}
.rhead-jump{display:flex;gap:10px;margin-top:4px}
.rbtn{background:var(--ink);color:var(--paper);padding:13px 22px;font-size:13.5px;font-weight:600;transition:background .15s}
.rbtn:hover{background:var(--rust);color:#FFFFFF}
.rbtn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:11.5px 20px}
.rbtn.ghost:hover{background:transparent;color:var(--rust);border-color:var(--rust)}
.rhead-note{font-size:12px;color:var(--mute3)}
.rhead-img{height:420px;overflow:hidden;background:#E4D7C2}
.rhead-img img{width:100%;height:100%;object-fit:cover;display:block}
.btile .im.white{background:#FFFFFF}
.btile .im.white img{object-fit:contain;padding:14px 0}
.bt-chip[aria-current]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.rmix{list-style:none;display:flex;flex-direction:column;gap:10px;padding:18px 20px;border:1px solid var(--line);align-self:stretch}
.rmix b{font-size:15px}
.rmix span{font-size:13.5px;line-height:1.5;color:var(--mute);text-wrap:pretty}
.ruse{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.ruse .bwhy-img{min-height:400px}
.ruse .bwhy-txt{padding:30px 40px}
.ruse .bwhy-pts{display:flex;flex-direction:column;gap:16px}
.rsh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-bottom:18px}
.rsh-head .t{display:flex;flex-direction:column;gap:6px}
.rsh-head .big{font-size:32px;font-weight:500;letter-spacing:-0.018em}
.rsh-showing{font-size:14px;color:var(--mute)}
.rfilters{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.rf-row{display:flex;align-items:center;gap:14px}
.rf-l{width:88px;flex-shrink:0;font-size:12px;font-weight:600;color:var(--mute3)}
.rf-opts{display:flex;flex-wrap:wrap;gap:6px}
.rf-chip{border:1px solid var(--line2);background:var(--card);padding:8px 14px;font-size:13px;font-weight:600}
.rf-chip .c{color:var(--mute3)}
.rf-chip:hover{border-color:var(--ink);background:#FFFFFF;color:var(--ink)}
.rf-chip[aria-current]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.rf-chip[aria-current] .c{color:inherit;opacity:.7}
.rf-tab{border-bottom:2px solid transparent;padding:6px 10px;font-size:13.5px;font-weight:500;color:var(--mute)}
.rf-tab .c{color:var(--mute3)}
.rf-tab:hover{border-color:var(--line2);color:var(--ink)}
.rf-tab[aria-current]{border-color:var(--ink);font-weight:700;color:var(--ink)}
.rf-tab[aria-current] .c{font-weight:500}
.rrow-g{display:grid;grid-template-columns:1.3fr .8fr 1.1fr .8fr 1.2fr 132px;gap:12px}
.rcols{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0 24px;padding:0 0 8px;font-size:11.5px;font-weight:600;color:var(--mute3);text-transform:uppercase;letter-spacing:.06em}
.rcols .rrow-g{padding:0 14px}
.rcols .r{text-align:right}
.rgroups{display:flex;flex-direction:column;gap:30px}
.rgroup{display:flex;flex-direction:column;gap:12px}
.rgroup-h{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.rgroup-h .n{font-size:20px;font-weight:600;letter-spacing:-0.01em}
.rgroup-h .m{font-size:13px;color:var(--mute3)}
.rshape{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:start;padding-bottom:12px;border-bottom:1px solid #EAE0CF}
.rshape-im{width:180px;height:132px;background:#FFFFFF;overflow:hidden}
.rshape-im img{width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box}
.rshape-b{display:flex;flex-direction:column;gap:2px}
.rshape-h{display:flex;align-items:baseline;gap:10px;padding:2px 14px 8px}
.rshape-h b{font-size:16.5px}
.rshape-h span{font-size:12.5px;color:var(--mute3)}
.rrow{align-items:center;padding:7px 14px;font-size:14px;transition:background .12s}
.rrow:hover{background:#F3EADB}
.rrow.on{background:#FFF3C4}
.rrow>b{font-weight:600}
.rrow .h{color:var(--mute)}
.rrow .k{font-size:12.5px;color:var(--mute2);font-family:ui-monospace,Menlo,monospace}
.rrow .e{font-weight:700}
.rq{display:flex;justify-content:flex-end}
.rq-box{display:flex;border:1px solid var(--line2);background:#FFFFFF}
.rq-b{width:38px;height:36px;border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--ink)}
.rq-b:hover{color:var(--rust)}
.rq-v{width:42px;border:0;border-left:1px solid #EAE0CF;border-right:1px solid #EAE0CF;text-align:center;font-weight:700;font-size:14px;color:var(--ink);background:transparent;padding:0;-moz-appearance:textfield;appearance:textfield}
.rq-v::-webkit-inner-spin-button,.rq-v::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.rbar{position:sticky;bottom:0;z-index:5;margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--ink);color:var(--paper);padding:16px 16px 16px 24px}
.rbar-t{font-size:14.5px;color:var(--line2)}
.rbar-t.sel{font-size:15px;color:var(--paper)}
.rbar-t.sel b+b{font-size:19px}
.rbar-clear{margin-left:auto;font:inherit;font-size:13px;color:var(--line2);cursor:pointer;text-decoration:underline;background:none;border:0;padding:0}
.rbar-go{background:var(--paper);color:var(--ink);padding:12px 22px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border:0}
.rbar-go:hover{background:#FFFFFF;color:var(--rust)}
.rmore{grid-column:span 2;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.rmore-all{font-size:13.5px;font-weight:600;text-decoration:underline;margin-top:4px}
@media (max-width:1023px){
.rhead{padding:14px 20px 40px}
.rhead-g{grid-template-columns:minmax(0,1fr);gap:24px}
.rhead-h{font-size:56px}
.rhead-img{height:300px}
.rmore{grid-column:1/-1}
.rcols{display:none}
.rshape{grid-template-columns:120px minmax(0,1fr);gap:14px}
.rshape-im{width:120px;height:88px}
.rshape-h{padding:2px 0 8px;flex-wrap:wrap}
.rrow-g{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
.rrow{padding:8px 0;border-top:1px solid #EAE0CF}
.rrow .h:empty{display:none}
.rrow .rq{grid-row:1 / span 4;grid-column:2;align-self:center}
.rsh-head{flex-direction:column;align-items:flex-start;gap:8px}
.rsh-head .big{font-size:26px}
.rf-row{align-items:flex-start}
.rf-l{width:72px;padding-top:8px}
.rbar{flex-wrap:wrap;gap:12px;padding:12px 14px}
.rbar-t{flex-basis:100%}
.rbar-clear{margin-left:0}
.rbar-go{margin-left:auto}
}
@media (max-width:639px){
.rhead-h{font-size:44px}
.rhead-jump{flex-wrap:wrap}
.rshape{grid-template-columns:88px minmax(0,1fr);gap:12px}
.rshape-im{width:88px;height:66px}
.rshape-im img{padding:6px}
}
/* Collection page (Design collection page proposal): head as the range page, range finder (tiles or compare), why band,
shop by piece, the listing re-headed, more from the brand. Reuses .rhead, .rsh-head, .rf-*, .btile, .bwhy.ruse, .rmix. */
.rhead-img.ink{background:#2E2921}
.cviews{display:flex;border:1px solid var(--ink)}
.cview{padding:9px 16px;font-size:13px;font-weight:600}
.cview:hover{background:#FFFFFF;color:var(--ink)}
.cview[aria-current]{background:var(--ink);color:var(--paper)}
.cbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:26px}
.cbar-l{display:flex;align-items:center;gap:14px}
.cbar-l .rf-l{width:auto}
.cbar-r{display:flex;align-items:center;gap:6px;font-size:13px}
.cbar-r .rf-l{width:auto;margin-right:6px}
.csort{border-bottom:2px solid transparent;padding:4px 8px;color:var(--mute)}
.csort:hover{border-color:var(--line2);color:var(--ink)}
.csort[aria-current]{border-color:var(--ink);font-weight:700;color:var(--ink)}
.ctiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 20px;align-items:start}
.ctile .n{margin:-28px 0 0 12px;font-size:30px}
.ctile .d{line-height:1.45}
.btile .im.cut{background:#FFFFFF}
.btile .im.cut img{object-fit:contain;padding:12px 0}
.cmeta{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:9px;font-size:13px}
.cmeta span{color:var(--mute)}
.ccov{display:flex;flex-wrap:wrap;gap:4px}
.ccov span{background:var(--paper);padding:3px 7px;font-size:11.5px;font-weight:600;color:var(--mute)}
.ctable{display:flex;flex-direction:column}
.ct-h,.ct-r{display:grid;grid-template-columns:200px repeat(6,minmax(0,1fr)) 90px 110px;gap:8px}
.ct-h{padding:0 12px 8px;font-size:11.5px;font-weight:600;color:var(--mute3);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--ink)}
.ct-r{align-items:center;padding:8px 12px;border-bottom:1px solid #EAE0CF;font-size:14px}
.ct-r:hover{background:#F3EADB;color:var(--ink)}
.ct-h .c,.ct-r .c{text-align:center}
.ct-r .c{padding:5px 0;font-weight:600}
.ct-h .r,.ct-r .r{text-align:right}
.ct-r .f{color:var(--mute)}
.ct-n{display:flex;align-items:center;gap:10px}
.ct-n b{font-weight:600}
.ct-im{width:44px;height:30px;flex:none;overflow:hidden;background:#FFFFFF}
.ct-im img{width:100%;height:100%;object-fit:contain}
.cpieces{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.cpiece{display:flex;flex-direction:column;gap:8px}
.cpiece .im{display:block;aspect-ratio:1;background:#FFFFFF;border:1px solid #EAE0CF;overflow:hidden}
.cpiece .im img{width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box;transition:transform .4s ease}
.cpiece:hover .im img{transform:scale(1.06)}
.cpiece b{font-size:16px;letter-spacing:-0.01em}
.cpiece span:last-child{font-size:12.5px;color:var(--mute)}
.clisthead{padding:0 48px}
.clisthead .sechead{margin-bottom:22px}
.card-note,.rnote{display:block;font-size:12px;font-weight:500;color:var(--amber)}
.rrow .e{display:flex;flex-direction:column}
.cother{justify-content:space-between}
.cother .co-t{display:flex;flex-direction:column;gap:8px}
@media (prefers-reduced-motion:reduce){.cpiece .im img{transition:none}.cpiece:hover .im img{transform:none}}
@media (max-width:1023px){
.cbar{flex-direction:column;align-items:flex-start;gap:12px}
.cbar-l{align-items:flex-start}
.ctiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.ctile .n{font-size:26px}
.ctable{overflow-x:auto}
.ct-h,.ct-r{min-width:760px}
.cpieces{grid-template-columns:repeat(3,minmax(0,1fr))}
.clisthead{padding:0 20px}
}
@media (max-width:639px){
.ctile .n{font-size:22px;margin:-20px 0 0 8px}
.cpieces{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
/* Brand page range finder (Design brand page proposal, ranges in place of collections): tiles with a pairing chip, or a
compare table of piece lengths. Reuses .rsh-head, .cviews, .cbar, .rf-*, .csort, .ctiles/.ctile, .cmeta, .ctable. */
.bhead .brand-img.ink{width:182px;height:122px;aspect-ratio:auto;background:var(--ink);border-color:var(--line)}
.bhead .brand-img.ink img{width:140px}
.bfind .ctiles>li{display:flex;flex-direction:column;gap:10px}
.bfind.lengths .ctile .n{margin:-28px 0 0 12px;font-size:28px}
.bfind.lengths .ctile .d{order:1;font-size:13px;line-height:1.45}
.bfind.lengths .btile .im{background:#2E2921}
.bfind .btile .im.cut{background:#FFFFFF}
.bfind .ctable:not(.lengths) .ct-h,.bfind .ctable:not(.lengths) .ct-r{grid-template-columns:240px repeat(var(--n,4),minmax(0,1fr)) 90px 110px}
/* SPLENDID-392 (Ben, 5 Nov 2026): the ranges table stays legible with many piece groups. Every group column keeps at least 92px, the table
scrolls sideways inside its own box, and the RANGE column (photo and name) stays fixed on the left. Row width = 240 + n x 92 + 90 + 110 + gaps + padding. */
.bfind .ctable:not(.lengths){overflow-x:auto}
.bfind .ctable:not(.lengths) .ct-h,.bfind .ctable:not(.lengths) .ct-r{grid-template-columns:240px repeat(var(--n,4),minmax(92px,1fr)) 90px 110px;min-width:calc(464px + var(--n,4) * 100px)}
.bfind .ctable:not(.lengths) .ct-h>:first-child,.bfind .ctable:not(.lengths) .ct-r>.ct-n{position:sticky;left:0;z-index:1;background:#F0E7D8;margin-left:-12px;padding-left:12px;box-shadow:1px 0 0 var(--line)}
.bfind .ctable:not(.lengths) .ct-r:hover>.ct-n{background:#F3EADB}
@media (max-width:639px){
.bfind .ctable:not(.lengths) .ct-h,.bfind .ctable:not(.lengths) .ct-r{grid-template-columns:150px repeat(var(--n,4),minmax(92px,1fr)) 90px 110px;min-width:calc(374px + var(--n,4) * 100px)}
}
.bpair{align-self:flex-start;display:flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--card);padding:6px 10px;font-size:12.5px;font-weight:600;transition:background .15s,border-color .15s}
.bpair:hover{border-color:var(--ink);background:#FFFFFF;color:var(--ink)}
.ctable.lengths .ct-h,.ctable.lengths .ct-r{grid-template-columns:190px repeat(var(--n,14),minmax(0,1fr)) 64px;gap:4px}
.ctable.lengths .ct-h{padding:0 10px 8px;font-size:10.5px;letter-spacing:.03em;line-height:1.2;align-items:end}
.ctable.lengths .ct-r{padding:7px 10px;font-size:13px}
.ctable.lengths .ct-n b{font-size:13.5px}
.ctable.lengths .ct-r .c{font-size:12px}
.ctable.lengths .ct-im img{object-fit:cover}
@media (prefers-reduced-motion:reduce){.bpair{transition:none}}
@media (max-width:1023px){
.bhead .brand-img.ink{width:120px;height:80px}
.bhead .brand-img.ink img{width:94px}
.ctable.lengths .ct-h,.ctable.lengths .ct-r{min-width:1060px}
}
@media (max-width:639px){
.bfind.lengths .ctile .n{font-size:22px;margin:-20px 0 0 8px}
}
/* Brand template (Design brand template proposal): one page for brand, collection and range, with the collections,
ranges and products blocks. Reuses .bhead/.rhead, .btiles, the range finder (.rsh-head, .cbar, .ctiles, .ctable),
.cpieces, the listing and the shapes table (.rshapes). */
.rhead-jump{flex-wrap:wrap}
.rhead-jump .rbtn,.bt-ranges .bt-chip{white-space:nowrap}
.bhead .rhead-jump{margin-top:2px}
.rmore-row{margin-top:30px;display:flex;justify-content:center}
.pblock{padding-bottom:64px}
.pblock .clisthead .rsh-head{margin-bottom:22px}
.ppieces{padding:0 48px 36px}
.pblock .rshapes{padding-bottom:0}
.rcapped{margin:0;padding:18px 0 0;font-size:13.5px;color:var(--mute)}
@media (max-width:1023px){.ppieces{padding:0 20px 28px}.ruse{grid-template-columns:minmax(0,1fr)}.ruse .bwhy-img{min-height:220px}.ruse .bwhy-txt{padding:24px 20px}}
/* Product list (SPLENDID-299, Claude Design handoff approved by Ben 15 Oct 2026): one component on every listing.
Full: heading, section tabs, filter bar (three fields, All filters, Sort, Grid / List), applied filters, grid or
list, pager, the All filters panel over the list. Compact: heading and four cards (home, product page). */
.plist:not(.pl-compact){padding:0 48px 72px;display:flex;flex-direction:column}
.pl-head{display:flex;flex-direction:column;gap:6px;border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-bottom:18px}
.pl-eyebrow{font-size:13px;font-weight:500;color:var(--mute3)}
.pl-title{font-size:32px;font-weight:500;letter-spacing:-0.018em;line-height:1.1}
.pl-tabs{display:flex;align-items:center;column-gap:26px;border-bottom:1px solid var(--line);margin:-4px 0 22px;overflow-x:auto;scrollbar-width:none}
.pl-tabs::-webkit-scrollbar{display:none}
.pl-tabs ul{display:flex;column-gap:26px;list-style:none;margin:0;padding:0}
.pl-up{display:flex;align-items:center;gap:6px;padding:12px 0;font-size:13.5px;font-weight:500;color:var(--mute2);white-space:nowrap;flex-shrink:0}
.pl-tab{display:block;padding:12px 0 10px;margin-bottom:-1px;border-bottom:2px solid transparent;font-size:13.5px;font-weight:500;white-space:nowrap}
.pl-tab:hover,.pl-up:hover{color:var(--rust)}
.pl-tab[aria-current]{font-weight:700;border-bottom-color:var(--ink)}
.pl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pl-fields{display:flex;gap:8px;flex-wrap:wrap}
.pl-field{position:relative}
.pl-fbtn,.pl-sbtn{list-style:none;height:44px;max-width:280px;display:flex;align-items:center;gap:8px;padding:0 12px 0 14px;font-size:14px;cursor:pointer;white-space:nowrap;background:#FFFFFF;border:1px solid var(--line2);color:var(--ink)}
.pl-fbtn::-webkit-details-marker,.pl-sbtn::-webkit-details-marker,.pl-group>summary::-webkit-details-marker{display:none}
.pl-fbtn .l,.pl-sbtn .l{font-weight:600}
.pl-fbtn .v,.pl-sbtn .v{color:var(--mute2);overflow:hidden;text-overflow:ellipsis;min-width:0}
.pl-fbtn .icon,.pl-sbtn .icon,.pl-group>summary .icon{flex-shrink:0;transition:transform .15s}
.pl-field[data-iw-plist-set]>.pl-fbtn{background:var(--ink);color:var(--paper);border:1.5px solid var(--ink)}
.pl-field[data-iw-plist-set]>.pl-fbtn .v{color:var(--paper);font-weight:600}
.pl-field[open]>.pl-fbtn .icon,.pl-sort[open]>.pl-sbtn .icon,.pl-group[open]>summary .icon{transform:rotate(180deg)}
.pl-pop{position:absolute;left:0;top:calc(100% + 4px);z-index:20;width:320px;background:#FFFFFF;border:1px solid var(--line2);box-shadow:0 12px 18px -12px rgba(26,23,18,.35)}
.pl-search{display:flex;align-items:center;gap:8px;height:40px;margin:10px;padding:0 10px;border:1.5px solid var(--ink);background:#FFFFFF}
.pl-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink)}
.pl-search+.pl-opts{border-top:1px solid var(--line)}
.pl-opts{max-height:360px;overflow:auto;padding:4px 0 6px}
.pl-sec ul{list-style:none;margin:0;padding:0}
.pl-sec+.pl-sec{border-top:1px solid var(--line);margin-top:6px;padding-top:2px}
.pl-sech{display:block;padding:10px 14px 4px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute3)}
.pl-opt{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.pl-opt:hover{background:var(--card);color:var(--ink)}
.pl-opt .box{width:16px;height:16px;border:1.5px solid var(--ink);background:#FFFFFF;flex-shrink:0}
[data-iw-plist-selected]>a.pl-opt .box,.pl-opt input:checked+.box{background:var(--ink);box-shadow:inset 0 0 0 3px #FFFFFF}
[data-iw-plist-selected]>a.pl-opt .nm,.pl-opt input:checked~.nm{font-weight:700}
.pl-opt input:focus-visible+.box{outline:2px solid var(--rust);outline-offset:2px}
.pl-opt .n{margin-left:auto;font-size:12px;color:var(--mute3);font-variant-numeric:tabular-nums}
.pl-none{margin:0;padding:12px 14px;font-size:13.5px;color:var(--mute2)}
.pl-opts.is-searching [data-iw-plist-top],.pl-opts.is-searching .pl-sech{display:none}
.pl-opts.is-searching .pl-sec+.pl-sec{border-top:0;margin-top:0}
.pl-all{height:44px;display:flex;align-items:center;gap:8px;padding:0 14px;border:1.5px solid var(--ink);background:#FFFFFF;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.pl-all:hover{background:var(--ink);color:var(--paper)}
.pl-all .m{display:none}
.pl-all .badge{min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;background:var(--rust);color:var(--paper);font-size:11.5px;font-weight:700}
.pl-sort{margin-left:auto}
.pl-sort>ul{right:0}
.pl-views{display:flex;height:44px;border:1px solid var(--ink)}
.pl-views a{display:flex;align-items:center;gap:7px;padding:0 14px;font-size:13px;font-weight:600}
.pl-views a[aria-current]{background:var(--ink);color:var(--paper)}
.pl-compact .pl-views{display:none}
.pl-applied{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:12px;margin-bottom:20px;min-height:36px;flex-wrap:wrap}
.pl-chiprow{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.pl-chips{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.pl-chip{display:flex;align-items:center;gap:6px;padding:7px 10px 7px 12px;border:1.5px solid var(--ink);background:#FFFFFF;font-size:13px;font-weight:600;white-space:nowrap}
.pl-chip .k{font-weight:500;color:var(--mute2)}
.pl-chip:hover,.pl-chip:hover .k{border-color:var(--rust);color:var(--rust)}
.pl-clear{font-size:13px;font-weight:500;color:var(--rust);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pl-count{margin-left:auto;font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.pl-lhead{display:none}
.pl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.pl-card{background:#FFFFFF;border:1px solid transparent}
.pl-card:hover{border-color:var(--ink)}
.pl-info,.pl-price{display:flex;flex-direction:column;gap:8px}
.pl-info .card-code{margin-top:-4px}
.pl-packnote{display:none}
.pl-price .card-price{margin-top:4px}
.pl-card .card-price .u-each,.pl-card .card-price .u-box{font-size:13px;font-weight:500;letter-spacing:0}
.plist:not(:has([data-iw-product])) .pl-empty{display:flex}
.plist:not(:has([data-iw-product])) :is(.pl-grid,.pl-lhead,.pager){display:none}
.plist .pager{padding-top:24px}
.pg-of{display:none;font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.pl-compact .sechead{border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-bottom:22px}
/* List view (full lists only) */
.plist[data-iw-plist-current="list"] .pl-lhead{display:grid;grid-template-columns:104px minmax(0,1fr) 150px 300px;column-gap:24px;border-bottom:1.5px solid var(--ink);padding-bottom:10px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute3)}
.plist[data-iw-plist-current="list"] .pl-lhead span:first-child{grid-column:1/3}
.plist[data-iw-plist-current="list"] .pl-lhead span:not(:first-child){text-align:right}
.plist[data-iw-plist-current="list"] .pl-grid{grid-template-columns:1fr;gap:0}
.plist[data-iw-plist-current="list"] .pl-card{display:grid;grid-template-columns:104px minmax(0,1fr) 150px 300px;grid-template-areas:"img info price add";column-gap:24px;align-items:center;padding:12px 0;background:transparent;border:0;border-bottom:1px solid var(--line)}
.plist[data-iw-plist-current="list"] .pl-card:hover{background:#F3EADB}
.plist[data-iw-plist-current="list"] .card-img{grid-area:img;width:104px;margin:0;border:1px solid var(--line)}
.plist[data-iw-plist-current="list"] .card-tag{display:none}
.plist[data-iw-plist-current="list"] .pl-info{grid-area:info;gap:4px}
.plist[data-iw-plist-current="list"] .card-name{font-size:16px;min-height:0}
.plist[data-iw-plist-current="list"] .card-code{font-size:12.5px;margin-top:0}
.plist[data-iw-plist-current="list"] .pl-packnote{display:inline}
.plist[data-iw-plist-current="list"] .pl-packnote::before{content:"·";margin:0 8px}
.plist[data-iw-plist-current="list"] .pl-price{grid-area:price;text-align:right;gap:2px}
.plist[data-iw-plist-current="list"] .pl-price .card-price{margin:0}
.plist[data-iw-plist-current="list"] .card-pack{margin:0}
.plist[data-iw-plist-current="list"] .card-add,.plist[data-iw-plist-current="list"] .pl-card>.btn{grid-area:add;margin:0;padding-right:48px}
.plist[data-iw-plist-current="list"] .card-add .qty.sm{width:56px}
.pl-card .card-add .btn{white-space:nowrap}
.plist[data-iw-plist-current="list"] .pl-card .fav{top:50%;right:0;transform:translateY(-50%)}
.plist[data-iw-plist-current="list"] .pl-card .fav-btn{width:40px;height:40px;background:#FFFFFF}
/* All filters panel: over the list (the grid never narrows), closed until site.js opens it */
.pl-panel{display:none}
.plist.is-panel .pl-panel{display:block}
.pl-scrim{position:fixed;inset:0;background:rgba(26,23,18,.5);z-index:60}
.pl-side{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:100%;background:var(--paper);box-shadow:0 0 40px rgba(26,23,18,.35);z-index:61;display:flex;flex-direction:column}
.pl-ph{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1.5px solid var(--ink)}
.pl-pt{display:flex;flex-direction:column;gap:4px}
.pl-pt .t{font-size:24px;font-weight:500;letter-spacing:-0.01em}
.pl-pt .m{display:none}
.pl-pt .s{font-size:13px;color:var(--mute2)}
.pl-close{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line2);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.pl-close:hover{border-color:var(--rust);color:var(--rust)}
.pl-pbody{flex:1;overflow:auto}
.pl-group{border-bottom:1px solid var(--line)}
.pl-group>summary{list-style:none;min-height:56px;padding:0 24px;display:flex;align-items:center;gap:10px;cursor:pointer}
.pl-group>summary .l{font-size:15px;font-weight:600}
.pl-group>summary .v{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--rust);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.pl-group>summary .l+.icon{margin-left:auto}
.pl-gpop{margin:0 24px 16px;background:#FFFFFF;border:1px solid var(--line2)}
.pl-gpop .pl-opts{max-height:380px}
.pl-pfoot{display:flex;align-items:center;gap:16px;padding:16px 24px;border-top:1px solid var(--line);background:var(--paper)}
.pl-show{flex:1;height:48px;font-size:15px}
html.pl-locked{overflow:hidden}
@media (max-width:1023px){
.plist:not(.pl-compact){padding:0 20px 48px}
.pl-title{font-size:24px}
.pl-bar{flex-wrap:nowrap}
.pl-fields{display:none}
.pl-all{flex:1;justify-content:center}
.pl-all .d{display:none}
.pl-all .m{display:inline}
.pl-sort{flex:1;margin-left:0}
.pl-sbtn{max-width:none;justify-content:center}
.pl-views{border:0}
.pl-views a{width:44px;justify-content:center;padding:0;border:1px solid var(--line2)}
.pl-views a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pl-views a[aria-current]{display:none}
.pl-applied{flex-direction:column;align-items:stretch;border-top:0;padding-top:0;gap:12px}
.pl-chiprow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pl-chips{flex-wrap:nowrap}
.pl-chip{height:40px}
.pl-clear{white-space:nowrap}
.pl-count{margin-left:0;border-top:1px solid var(--line);padding-top:12px;font-size:13px}
.pl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pl-side{width:100%;box-shadow:none}
.pl-pt .d{display:none}
.pl-pt .m{display:inline}
.plist .pager ol{display:none}
.plist .pg-of{display:inline}
.plist .pg-step{height:44px}
.plist .pager{justify-content:space-between}
.plist[data-iw-plist-current="list"] .pl-lhead{display:none}
}
@media (max-width:639px){
.plist:not(.pl-compact){padding:0 16px 40px}
.pl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pl-card{padding:10px}
.pl-card .card-tag{display:none}
.pl-card .card-name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pl-card .fav{top:14px;right:14px}
.pl-card .fav-btn{width:44px;height:44px}
.pl-card .card-add{flex-direction:row;flex-wrap:nowrap}
.pl-card .card-add .btn{flex:1}
.pl-card .card-add .stepper{width:auto}
.pl-card .card-add .stepper button{display:none}
.pl-card .card-add .qty.sm{width:44px;height:44px}
.pl-card .card-add .btn{height:44px;padding:0 10px;font-size:13px}
.plist[data-iw-plist-current="list"] .pl-card{grid-template-columns:88px minmax(0,1fr);grid-template-areas:"img info" "img price" "add add";column-gap:14px;row-gap:6px;align-items:start}
.plist[data-iw-plist-current="list"] .card-img{width:88px}
.plist[data-iw-plist-current="list"] .pl-price{text-align:left;flex-direction:row;align-items:baseline;gap:8px}
.plist[data-iw-plist-current="list"] .card-pack{display:none}
.plist[data-iw-plist-current="list"] .card-add,.plist[data-iw-plist-current="list"] .pl-card>.btn{padding-right:52px;margin-top:6px}
.plist[data-iw-plist-current="list"] .pl-card .fav{top:auto;bottom:12px;transform:none}
.plist[data-iw-plist-current="list"] .pl-card .fav-btn{width:44px;height:44px}
}
/* Image frame (SPLENDID-295/297): an image with measured focus values (--cx, --cy, --ext on the ![]()
) is zoomed so the product fills 72% of the box's shorter side and sits centred; the file is never cropped or altered. One rule for every box that shows a product image: product page and gallery, cards, tiles (cut-outs), shop by piece, range shapes, compare thumbnails. No values: the whole file, as before. Zoom limit (small-product framing brief, Ben's ruling): the zoom never enlarges the picture past its own pixels (--nat, the larger of its natural width and height in px, set by site.js when it loads) or past the box, whichever is larger, so a small product is always centred but never drawn softer than the unframed picture; until --nat is set the frame is as before. */
:is(.pdp-img,.g-main,.card-img,.btile .im,.cpiece .im,.rshape-im,.ct-im):has(img[style*="--ext"]){position:relative;container-type:size}
:is(.pdp-img,.g-main,.card-img,.btile .im,.cpiece .im,.rshape-im,.ct-im) img[style*="--ext"]{--fill:0.72;--region:calc(var(--ext) / var(--fill));--box:min(100cqw,100cqh);--s:min(calc(var(--box) / var(--region)),max(var(--box),var(--nat,100000px)));position:absolute;width:var(--s);height:var(--s);max-width:none;left:calc(50cqw - var(--cx) * var(--s));top:calc(50cqh - var(--cy) * var(--s));padding:0;object-fit:contain}
/* Ben, 16 Oct: the All filters count badge, not the hero lozenge (filter count badge) */
.pl-all .badge{position:static;left:auto;bottom:auto;width:auto;border-radius:0;box-shadow:none;transform:none}
.pl-all .badge::before{content:none}
/* Ben, 16 Oct: products with no picture - a soft hatch and "Awaiting image from supplier" instead of an empty white shape (awaiting image) */
.rshape-im:has(> img[src*="placeholder.svg"]),.card-img:not(:has(img)),.ctile .im:not(:has(img)),.btile .im:not(:has(img)),.cpiece .im:not(:has(img)),.pdp-media:has(> .gallery[data-iw-pending]) > .pdp-img:not(:has(img)){position:relative;background:repeating-linear-gradient(135deg,#efe6d6 0 6px,#f7f1e6 6px 12px)!important}
.rshape-im > img[src*="placeholder.svg"]{opacity:0}
.rshape-im:has(> img[src*="placeholder.svg"])::after,.card-img:not(:has(img))::after,.ctile .im:not(:has(img))::after,.btile .im:not(:has(img))::after,.cpiece .im:not(:has(img))::after,.pdp-media:has(> .gallery[data-iw-pending]) > .pdp-img:not(:has(img))::after{content:"Awaiting image from supplier";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 22%;font-size:12px;font-weight:600;line-height:1.3;color:var(--mute3,#7a705f);letter-spacing:.02em;pointer-events:none}
.ctile .im:not(:has(img))::after{content:"Awaiting images from supplier"}
.pdp-media:has(> .gallery[data-iw-pending]) > .pdp-img:not(:has(img)){background:repeating-linear-gradient(135deg,#efe6d6 0 8px,#f7f1e6 8px 16px)!important}
.pdp-media:has(> .gallery[data-iw-pending]) > .pdp-img:not(:has(img))::after{font-size:15px}
/* Ben, 16 Oct: no "Unbranded" chip in Our brands (unbranded chip) */
li:has(> .brand-chip[href="/brand/unbranded"]),.brand-chip[href="/brand/unbranded"]{display:none}
/* Featured brands on the home page (Ben, 16 Oct 2026): logo cards, the brands listed in iw-fields.json homeBrands. */
.hbrands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.hbrands{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hbrand{display:flex;flex-direction:column;gap:6px;height:100%;background:var(--card);border:1px solid var(--line);padding:16px}
.hbrand:hover{border-color:var(--ink);color:var(--ink)}
.hb-logo{display:flex;align-items:center;justify-content:center;aspect-ratio:2;background:#fff;border:1px solid var(--line);padding:18px;margin-bottom:6px}
.hb-logo:has(img[data-tile="ink"]){background:var(--ink)}
.hb-logo:empty{display:none}
.hb-logo img{max-width:100%;max-height:100%;object-fit:contain}
.hb-name{font-weight:600;font-size:16px}
.hb-count{font-size:14px;color:var(--mute)}
.hb-go{margin-top:auto;padding-top:6px;font-size:14px;text-decoration:underline;text-underline-offset:3px}
/* Fix 1 (17 Oct): Featured brands logos stay inside their cards (wide logos were pushing the box out). */
.hbrands > li,.hbrand,.hb-logo{min-width:0}
.hb-logo{overflow:hidden}
.hb-logo img{width:100%;height:100%;object-fit:contain}
/* Fix 4 (Ben, 19 Oct): categories shown once. Category pages keep only the product-list tabs; department pages keep only the
picture tiles. */
nav.subcats{display:none}
main:has(.subtiles) .pl-tabs{display:none}
/* Fix 5 (Ben, 19 Oct): the price/basket panel no longer slides down when Shipping & packaging opens - it sits under the
product details instead of being pinned to the bottom of the (growing) row. */
.pdp-info .buy{margin-top:24px}
/* Brand page masthead (Design option 1a "Masthead", approved by Ben 20 Oct 2026): the header block between the nav/USP bar
and the photography band. Tokens, sizes and responsive values as Design's handoff; site font; square corners. */
.mhead{--mh-ink:#1E1A16;--mh-soft:#3A332C;--mh-mute:#5B524A;--mh-rule:#CDBFAB;--mh-line:#D8CCBA;max-width:1280px;box-sizing:border-box;margin:0 auto;padding:40px 72px 56px;display:flex;flex-direction:column;gap:40px;background:linear-gradient(180deg,#EFE7DA,#F8F4EE);box-shadow:0 1px 0 var(--mh-line);color:var(--mh-ink)}
.mh-crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:16px;font-weight:400;color:var(--mh-mute)}
.mh-crumbs a{color:var(--mh-mute)}
.mh-crumbs a:hover{color:var(--mh-ink)}
.mh-crumbs .here{color:var(--mh-ink);font-weight:500}
.mh-mast{display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.mh-logo{width:220px;height:140px;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#FFFFFF;border:1px solid var(--mh-line)}
.mh-logo.ink{background:var(--mh-ink);border-color:var(--mh-ink)} /* a logo supplied white ("tile": "ink") keeps a dark tile */
.mh-logo img{width:190px;max-height:116px;height:auto;display:block;object-fit:contain;padding:0}
.mh-title{display:flex;flex-direction:column;gap:12px;flex:1;min-width:280px}
.mh-ey{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mh-mute)}
.mh-h{margin:0;font-size:76px;font-weight:600;line-height:.98;letter-spacing:-.03em;color:var(--mh-ink)}
.mh-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:40px 64px;border-top:1px solid var(--mh-rule);padding-top:32px}
.mh-p{margin:0;font-size:19px;font-weight:400;line-height:1.6;color:var(--mh-soft);text-wrap:pretty}
.mh-side{display:flex;flex-direction:column;gap:20px}
.mh-stats{margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.mh-stats>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;padding:0 20px}
.mh-stats>div:first-child{padding-left:0}
.mh-stats>div:last-child{padding-right:0}
.mh-stats>div+div{border-left:1px solid var(--mh-rule)}
.mh-stats dt{font-size:16px;font-weight:400;color:var(--mh-mute)}
.mh-stats dd{margin:0;font-size:44px;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--mh-ink)}
.mh-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mh-notes li{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--mh-soft)}
.mh-notes svg{flex-shrink:0;color:#3F6B3A}
.mh-ex{color:var(--mh-mute)}
.mh-ctas{display:flex;flex-wrap:wrap;gap:12px}
.mh-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background:var(--mh-ink);color:#F8F4EE;font-size:18px;font-weight:600;padding:18px 28px;border:0;transition:background .15s,color .15s}
.mh-btn:hover{background:var(--mh-soft);color:#F8F4EE}
.mh-btn.ghost{background:transparent;color:var(--mh-ink);border:2px solid var(--mh-ink);padding:16px 26px}
.mh-btn.ghost:hover{background:var(--mh-ink);color:#F8F4EE}
.mhead .catalogue{margin:0}
@media (max-width:639px){
.mhead{padding:24px 20px 40px}
.mh-logo{width:176px;height:112px}
.mh-logo img{width:150px;max-height:92px}
.mh-h{font-size:46px}
.mh-detail{grid-template-columns:minmax(0,1fr)}
.mh-stats dd{font-size:32px}
.mh-stats>div{padding:0 14px}
.mh-ctas{flex-direction:column}
.mh-btn{width:100%}
}
/* Brand page sections, Design 2b / 3b / 4a "bubbles" (approved by Ben 20 Oct 2026): collections row with count bubble,
ranges grid with breakdown bubbles, departments. Shared blob mask (border-radius only), count bubble, section heading
and container; tokens as the masthead; site font; square corners except the blobs, bubbles and pills. */
.bb-sec{--bb-ink:#1E1A16;--bb-soft:#3A332C;--bb-mute:#5B524A;--bb-rule:#CDBFAB;--bb-line:#D8CCBA;--bb-cream:#F8F4EE;--bb-hot:#A84A2A;max-width:1280px;box-sizing:border-box;margin:0 auto;background:#F0E7D8;padding:48px 72px 64px;display:flex;flex-direction:column;gap:40px;color:var(--bb-ink)}
#ranges.bb-sec{gap:36px}
.bb-sec>.sechead,.bb-sec>.rsh-head{margin:0;border-bottom:2px solid var(--bb-ink);padding-bottom:28px;gap:24px;align-items:flex-end}
.bb-sec .sechead .t,.bb-sec .rsh-head .t{gap:10px}
.bb-sec .eyebrow{font-size:16px;font-weight:500;color:var(--bb-mute)}
.bb-sec h2.big{margin:0;font-size:52px;font-weight:600;line-height:1;letter-spacing:-.025em;white-space:normal;color:var(--bb-ink)}
/* Tiles | Compare */
.bb-sec .cviews{border:2px solid var(--bb-ink)}
.bb-sec .cview{font-size:17px;font-weight:600;padding:12px 20px;color:var(--bb-ink)}
.bb-sec .cview:hover{background:#E6DCCD;color:var(--bb-ink)}
.bb-sec .cview[aria-current]{background:var(--bb-ink);color:var(--bb-cream)}
/* Filter bar */
.bb-sec .cbar{margin:0;flex-wrap:nowrap;align-items:flex-start;gap:12px 20px}
.bb-sec .cbar-l{gap:6px;flex-wrap:nowrap;align-items:flex-start;flex:1 1 auto;min-width:0}
.bb-sec .cbar-l .rf-l{padding-top:9px;white-space:nowrap}
.bb-sec .rf-opts{gap:6px;min-width:0}
.bb-sec .cbar-r{padding-top:9px}
.bb-sec .cbar-l .rf-l{font-size:14px;font-weight:400;color:var(--bb-mute);margin-right:4px}
.bb-sec .rf-chip{display:flex;gap:5px;white-space:nowrap;font-size:14px;font-weight:500;padding:8px 11px;background:var(--bb-cream);border:1px solid var(--bb-line);color:var(--bb-ink)}
.bb-sec .rf-chip .c{color:var(--bb-mute)}
.bb-sec .rf-chip:hover{border-color:var(--bb-ink);background:var(--bb-cream)}
.bb-sec .rf-chip[aria-current]{background:var(--bb-ink);border-color:var(--bb-ink);color:var(--bb-cream);font-weight:600}
.bb-sec .rf-chip[aria-current] .c{color:inherit;opacity:.75}
.bb-sec .cbar-r{margin-left:auto;gap:14px;font-size:14px;white-space:nowrap}
.bb-sec .cbar-r .rf-l{font-size:14px;font-weight:400;color:var(--bb-mute);margin:0}
.bb-sec .csort{padding:0 0 5px;border-bottom:0;color:var(--bb-mute);font-weight:400}
.bb-sec .csort:hover{color:var(--bb-ink)}
.bb-sec .csort[aria-current]{color:var(--bb-ink);font-weight:600;border-bottom:2px solid var(--bb-ink);padding-bottom:3px}
/* Card grids */
.bb-sec .btiles,.bb-sec .ctiles{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:36px;align-items:stretch}
.bb-card{display:flex;flex-direction:column;gap:18px;min-width:0}
/* Blob + count bubble */
.bb-blob{position:relative;display:block}
.bb-blob .im{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;overflow:hidden;background:#2A2520;border-radius:58% 42% 46% 54% / 52% 48% 52% 48% !important}
.bb-card:nth-child(4n+2) .bb-blob .im{border-radius:42% 58% 62% 38% / 46% 56% 44% 54% !important}
.bb-card:nth-child(4n+3) .bb-blob .im{border-radius:50% 50% 40% 60% / 60% 42% 58% 40% !important}
.bb-card:nth-child(4n+4) .bb-blob .im{border-radius:62% 38% 54% 46% / 44% 58% 42% 56% !important}
.bb-blob .im img{width:100%;height:100%;object-fit:cover;display:block;padding:0;transition:transform .5s ease}
.bb-blob:hover .im img,.bb-card:has(.bb-name:hover) .bb-blob .im img{transform:scale(1.05)}
.bb-blob .im.cut{background:#FFFFFF} /* a range cut-out on white, contained; a range photo fills the blob */
.bb-blob .im.cut img{position:static;width:78%;height:86%;max-width:none;object-fit:contain;left:auto;top:auto}
/* 27 Oct 2026: a range or department cut-out tile is framed like every other product image box (the Image frame rule above): a measured picture (--ext) fills the same share of the tile whatever white space its file has */
.bb-blob .im.cut:has(img[style*="--ext"]){container-type:size}
.bb-blob .im.cut img[style*="--ext"]{--fill:0.72;--region:calc(var(--ext) / var(--fill));--box:min(100cqw,100cqh);--s:min(calc(var(--box) / var(--region)),max(var(--box),var(--nat,100000px)));position:absolute;width:var(--s);height:var(--s);max-width:none;left:calc(50cqw - var(--cx) * var(--s));top:calc(50cqh - var(--cy) * var(--s));padding:0;object-fit:contain}
.bb-count{position:absolute;right:-6px;bottom:-14px;width:104px;height:104px;box-sizing:border-box;border-radius:50%;background:var(--bb-cream);border:1px solid var(--bb-line);box-shadow:0 6px 18px rgba(30,26,22,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.bb-count.r{width:96px;height:96px}
.bb-count b{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--bb-ink)}
.bb-count span{font-size:13px;color:var(--bb-mute)}
/* Card text */
.bb-text{display:flex;flex-direction:column;gap:10px;padding:0 4px}
.bb-text.r{gap:8px}
.bb-ey{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bb-mute)}
.bb-text.r .bb-ey{font-size:14px}
.bb-name{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.05;color:var(--bb-ink)}
.bb-text.r .bb-name{font-size:30px}
.bb-name:hover{color:var(--bb-hot)}
.bb-d{margin:0;font-size:17px;line-height:1.5;color:var(--bb-soft);text-wrap:pretty}
.bb-text.r .bb-d{font-size:16px;line-height:1.45}
.bb-pills{list-style:none;margin:0;padding:0 4px;display:flex;flex-wrap:wrap;gap:6px}
.bb-pills li{font-size:13px;padding:5px 10px;border-radius:999px;background:var(--bb-cream);border:1px solid var(--bb-line);color:var(--bb-soft)}
.bb-pills strong{font-weight:600}
.bb-foot{margin-top:auto;display:flex;padding:0 4px}
.bb-foot.rule{padding:14px 4px 0;border-top:1px solid var(--bb-rule);min-height:24px}
.bb-foot.rule:not(:has(a,span)){display:none}
.bb-shop{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--bb-ink);font-size:17px;font-weight:600;padding:12px 18px;color:var(--bb-ink)}
.bb-shop:hover{background:var(--bb-ink);color:var(--bb-cream)}
.bb-pair{font-size:16px;font-weight:600;text-decoration:underline;text-underline-offset:4px;color:var(--bb-ink)}
.bb-pair:hover{color:var(--bb-hot)}
.bb-nopair{font-size:15px;color:var(--bb-mute)}
/* Departments 4a */
.bdepts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px}
.bd-card{display:flex;flex-direction:column;gap:22px;color:var(--bb-ink)}
.bd-card .im{display:block;aspect-ratio:16/9;overflow:hidden;background:#2A2520;border-radius:58% 42% 46% 54% / 52% 48% 52% 48%}
.bdepts>li:nth-child(even) .bd-card .im{border-radius:42% 58% 62% 38% / 46% 56% 44% 54%}
.bd-card .im img{width:100%;height:100%;object-fit:cover;display:block;padding:0;transition:transform .5s ease}
.bd-card:hover .im img{transform:scale(1.05)}
.bd-foot{display:flex;flex-direction:column;gap:6px;padding:0 4px 18px;border-bottom:1px solid var(--bb-rule)}
.bd-foot .bb-ey{font-size:14px}
.bd-name{font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.bd-card:hover .bd-name{color:var(--bb-hot)}
.bb-sec .rmore-row{margin:0}
@media (max-width:639px){
.bb-sec{padding:32px 20px 48px;gap:28px}
#ranges.bb-sec{gap:24px}
.bb-sec>.sechead,.bb-sec>.rsh-head{padding-bottom:20px}
.bb-sec h2.big{font-size:34px}
.bb-sec .btiles,.bb-sec .ctiles{grid-template-columns:minmax(0,1fr);gap:40px}
.bb-sec .cbar{flex-wrap:wrap}
.bb-sec .cbar-r{margin-left:0;flex-wrap:wrap;padding-top:0}
.bdepts{grid-template-columns:minmax(0,1fr);gap:32px}
.bd-name{font-size:30px}
}
/* Brand page "by department": always 4 to a row, never stretched when a brand has only 1-3 departments (Ben, 20 Oct 2026) */
.bdepts{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.bd-card{gap:14px}
.bd-foot{padding:0 2px 12px}
.bd-name{font-size:24px}
@media (max-width:1023px){.bdepts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){.bdepts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}.bd-name{font-size:19px}}
/* Range cards: "Matches ..." links stacked one per line, and every card's rule at the same height (Ben, 20 Oct 2026) */
.bb-foot.rule{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;min-height:62px}
.bb-pair{line-height:1.3}
/* Never say "No matching ..." - show nothing, keep the space so rows stay lined up (Ben, 20 Oct 2026) */
.bb-nopair{display:none !important}
.bb-foot.rule:not(:has(.bb-pair:not([hidden]))){border-top-color:transparent}
/* Back to the earlier "Matches" chip: small bordered box, no underline (Ben, 20 Oct 2026) */
.bb-pair{display:inline-flex;align-items:center;gap:6px;text-decoration:none;border:1px solid var(--line2);background:var(--card);padding:6px 10px;font-size:13px;font-weight:600;line-height:1.3;color:var(--bb-ink);transition:background .15s,border-color .15s}
.bb-pair:hover{border-color:var(--bb-ink);background:#FFFFFF;color:var(--bb-ink)}
.bb-foot.rule{min-height:78px}
/* Home departments (5a) and department subcategory tiles (6a), bubbles (approved by Ben, 20 Oct 2026) */
.bb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 36px;align-items:start;border:0}
.bb-grid.sub{gap:44px 36px}
.bb-sec .sechead+.bb-grid{border-top:0;padding-top:0}
.bb-grid.sub .bb-name{font-size:30px}
.bb-grid.sub .bb-count b{font-size:22px} /* Design had .bb-count.r b here, which outranked the tablet (19px) and phone (15px) sizes below */
@media (max-width:1023px){
.bb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
.bb-grid.sub{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.bb-grid.sub .bb-card{gap:16px}
.bb-grid.sub .bb-name{font-size:24px}
.bb-grid.sub .bb-count{width:80px;height:80px}
.bb-grid.sub .bb-count b{font-size:19px}
.bb-grid.sub .bb-count span{font-size:12px}
}
@media (max-width:639px){
.bb-sec:has(.bb-grid){padding-left:16px;padding-right:16px}
.bb-grid{grid-template-columns:minmax(0,1fr);gap:40px}
.bb-grid .bb-card{gap:16px}
.bb-grid .bb-text{gap:8px}
.bb-grid .bb-ey{font-size:13px}
.bb-grid .bb-name{font-size:28px}
.bb-grid .bb-d{font-size:16px;line-height:1.45}
.bb-grid .bb-count{width:88px;height:88px;right:-4px;bottom:-12px}
.bb-grid .bb-count b{font-size:20px}
.bb-grid .bb-count span{font-size:12px}
.bb-grid.sub{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
.bb-grid.sub .bb-card{gap:14px}
.bb-grid.sub .bb-name{font-size:18px;overflow-wrap:anywhere}
.bb-grid.sub .bb-count{width:68px;height:68px;box-shadow:0 4px 12px rgba(30,26,22,.12)}
.bb-grid.sub .bb-count b{font-size:15px}
.bb-grid.sub .bb-count span{font-size:11px}
}
/* Theme collections (Design 7a, for Ben's approval, 20 Oct 2026).
Home: three featured themes on a light cream band (.th-sec). Department pages: a strip of 1-3 themes (.th-strip).
Builds on the "bubbles" block (.bb-sec tokens, blob masks, count bubble). Append to the END of site.css.
Square corners everywhere except the blobs, the count bubble and the label pill. */
/* ---------- Shared: blob, count bubble, label pill ---------- */
.th-card{display:flex;flex-direction:column;gap:22px;min-width:0;color:var(--bb-ink)}
.th-card:hover{color:var(--bb-ink)}
.th-card:focus-visible{outline:2px solid var(--bb-hot);outline-offset:6px}
.th-im{position:relative;display:block}
.th-im .im{display:block;aspect-ratio:4/5;overflow:hidden;background:#2A2520;border-radius:58% 42% 46% 54% / 52% 48% 52% 48%}
.th-grid>li:nth-child(3n+2) .th-im .im,.th-row>li:nth-child(3n+2) .th-im .im{border-radius:42% 58% 62% 38% / 46% 56% 44% 54%}
.th-grid>li:nth-child(3n+3) .th-im .im,.th-row>li:nth-child(3n+3) .th-im .im{border-radius:50% 50% 40% 60% / 60% 42% 58% 40%}
.th-im .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.th-card:hover .th-im .im img{transform:scale(1.05)}
.th-count{position:absolute;right:-4px;bottom:-12px;width:112px;height:112px;box-sizing:border-box;border-radius:50%;background:#F8F4EE;border:1px solid #D8CCBA;box-shadow:0 6px 18px rgba(30,26,22,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#1E1A16}
.th-count b{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1}
.th-count span{font-size:13px;color:#5B524A}
.th-label{display:inline-flex;align-items:center;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:8px 13px;border-radius:999px;background:#A84A2A;color:#F8F4EE;white-space:nowrap}
.th-im .th-label{position:absolute;left:6%;top:5%;z-index:1;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.th-text{display:flex;flex-direction:column;gap:12px;padding:0 4px}
.th-name{margin:0;font-size:38px;font-weight:600;letter-spacing:-.022em;line-height:1.02;transition:color .15s}
.th-card:hover .th-name{color:var(--bb-hot)}
.th-d{margin:0;font-size:17px;line-height:1.5;color:var(--bb-soft);text-wrap:pretty}
/* ---------- Home: featured themes (3 cards, light cream band) ---------- */
.th-sec{background:#F8F4EE;padding:64px 72px 80px;gap:44px}
.th-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px;align-items:start}
.th-go{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;gap:10px;border:2px solid var(--bb-ink);padding:12px 18px;font-size:16px;font-weight:600;color:var(--bb-ink);transition:background .15s,color .15s}
.th-go .icon{flex-shrink:0}
.th-card:hover .th-go{background:var(--bb-ink);color:var(--bb-cream)}
/* ---------- Department page: theme strip (1-3 cards, never stretched) ---------- */
.th-strip{padding-top:0;gap:24px}
.th-strip:not(:has(.th-card)){display:none} /* safety net: the server should omit the section when no theme applies */
.th-strip>.sechead{padding-bottom:16px}
.th-strip h2.big{font-size:32px;letter-spacing:-.02em}
.th-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.th-mini{display:grid;grid-template-columns:136px minmax(0,1fr);align-items:center;gap:22px;height:100%;padding:16px 20px 16px 16px;background:var(--bb-cream);border:1px solid var(--bb-line)}
.th-mini:hover{border-color:var(--bb-ink)}
.th-mini .th-im .im{aspect-ratio:1/1}
.th-mini .th-count{width:60px;height:60px;right:-10px;bottom:-8px;box-shadow:0 4px 12px rgba(30,26,22,.14)}
.th-mini .th-count b{font-size:15px}
.th-mini .th-count span{font-size:11px}
.th-mini .th-text{gap:7px;padding:0}
.th-mini .th-label{align-self:flex-start;font-size:11px;padding:6px 10px}
.th-mini .th-name{font-size:22px;line-height:1.1}
.th-mini .th-d{font-size:14.5px;line-height:1.45}
.th-more{align-self:flex-start;margin-top:3px;font-size:14px;font-weight:600;border-bottom:1.5px solid var(--bb-ink);padding-bottom:2px}
/* ---------- Tablet 640-1023px: all three stay in one row ---------- */
@media (max-width:1023px){
.th-sec{padding:48px 40px 64px;gap:32px}
.th-grid{gap:32px 20px}
.th-card{gap:18px}
.th-text{gap:9px}
.th-name{font-size:24px;line-height:1.08}
.th-d{font-size:14.5px;line-height:1.45}
.th-go{margin-top:4px;padding:10px 13px;font-size:14px;gap:8px}
.th-count{width:80px;height:80px;bottom:-10px}
.th-count b{font-size:19px}
.th-count span{font-size:12px}
.th-im .th-label{font-size:11px;padding:6px 10px}
.th-row{gap:16px}
.th-mini{grid-template-columns:minmax(0,1fr);align-items:start;gap:16px;padding:14px}
.th-mini .th-im .im{aspect-ratio:3/2}
.th-mini .th-name{font-size:19px}
.th-mini .th-d{font-size:14px}
}
/* ---------- Phone up to 639px: one column, 16px gutters ---------- */
@media (max-width:639px){
.th-sec{padding:36px 16px 52px;gap:28px}
.th-sec h2.big{font-size:34px}
.th-grid{grid-template-columns:minmax(0,1fr);gap:44px}
.th-card{gap:18px}
.th-im .im{aspect-ratio:3/2}
.th-name{font-size:30px}
.th-d{font-size:16px}
.th-go{padding:12px 16px;font-size:15px}
.th-count{width:88px;height:88px;right:-4px;bottom:-12px}
.th-count b{font-size:20px}
.th-strip{padding:0 16px 40px;gap:18px}
.th-strip h2.big{font-size:26px}
.th-row{grid-template-columns:minmax(0,1fr);gap:12px}
.th-mini{grid-template-columns:104px minmax(0,1fr);align-items:center;gap:16px;padding:12px 14px 12px 12px}
.th-mini .th-im .im{aspect-ratio:1/1}
.th-mini .th-count{width:50px;height:50px;right:-8px;bottom:-6px}
.th-mini .th-count b{font-size:13px}
.th-mini .th-count span{font-size:10px}
.th-mini .th-name{font-size:19px}
.th-mini .th-d{font-size:14px}
}
/* Shape-row photo enlarge (Design 8b, approved by Ben, 22 Oct 2026) with the 8b.2 changes (proposed 22 Oct 2026, for Ben's approval).
REPLACES the 8b block at the end of site.css (from "/* Shape-row photo enlarge (Design 8b" to the end of the file).
1. Signal: the shape-row photo is a button (cursor zoom-in) with a small Enlarge bubble on its bottom-right edge,
as the count bubbles. Hover or keyboard focus: the bubble fills ink and says "Enlarge".
2. One shared view,