/** Shopify CDN: Minification failed

Line 733:0 All "@import" rules must come first

**/
.cs-cw{--cs-stone:#5B5E62;--cs-stone-2:#62656A;--cs-line-soft:rgba(38,41,43,.09);--cs-brass-deep:#9A7A45;--cs-cream:#EDEDF0;--cs-sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}




  .cspd{ font-family:var(--cs-sans,sans-serif); color:var(--cs-ink,#1E2022); background:var(--cs-bg,#FBF9F5); }

  .cspd .cspd-eyebrow{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--cs-stone,#5B5E62); }

  .cspd-ph{ background:var(--cs-frame,#ECE5D7); position:relative; overflow:hidden; }

  .cspd-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  .cspd-crumb{ padding:34px 40px 0; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cs-stone-2,#8A8D90); }

  .cspd-crumb a{ color:inherit; text-decoration:none; }
 .cspd-crumb a:hover{ color:var(--cs-cyan-deep,#9A7A45); }
 .cspd-crumb b{ color:var(--cs-ink,#1E2022); }

  .cspd-top{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; padding:22px 40px 34px; align-items:start; border-bottom:1px solid var(--cs-line,rgba(38,41,43,.18)); }

  .cspd-gmain{ aspect-ratio:1/1; width:100%; }

  .cspd-thumbs{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }

  .cspd-thumbs .cspd-th{ width:74px; height:74px; border:1px solid var(--cs-line,rgba(38,41,43,.18)); background:var(--cs-frame,#ECE5D7); position:relative; overflow:hidden; cursor:pointer; }

  .cspd-thumbs .cspd-th.on{ border-color:var(--cs-ink,#1E2022); }

  .cspd-thumbs .cspd-th img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  .cspd-pv{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--cs-stone-2,#8A8D90); }

  .cspd-pname{ font-family:var(--cs-serif,serif); font-weight:400; font-size:33px; line-height:1.07; margin:8px 0 4px; }

  .cspd-pdesc{ font-size:13px; color:var(--cs-stone,#5B5E62); line-height:1.7; margin:9px 0 2px; max-width:52ch; }

  .cspd-stars{ font-size:11px; color:var(--cs-stone,#5B5E62); }

  .cspd-pricerow{ display:flex; align-items:baseline; gap:14px; margin:18px 0; flex-wrap:wrap; }

  .cspd-psqft{ font-size:25px; font-weight:500; }
 .cspd-psqft .u{ font-size:13px; color:var(--cs-stone,#5B5E62); font-weight:400; }

  .cspd-pbox{ font-size:13px; color:var(--cs-stone,#5B5E62); }

  .cspd-blk{ border-top:1px solid var(--cs-line,rgba(38,41,43,.18)); margin:20px 0; padding-top:18px; }

  .cspd-lbl{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--cs-ink,#1E2022); margin-bottom:12px; display:flex; justify-content:space-between; }

  .cspd-lbl a{ color:var(--cs-cyan-deep,#9A7A45); text-decoration:none; }

  .cspd-colorways{ display:flex; flex-wrap:wrap; gap:7px; }

  .cspd-cw{ width:30px; height:30px; border-radius:50%; border:1px solid var(--cs-line,rgba(38,41,43,.18)); display:block; overflow:hidden; background:var(--cs-frame,#ECE5D7); }

  .cspd-cw img{ width:100%; height:100%; object-fit:cover; display:block; }

  .cspd-cw.on{ outline:2px solid var(--cs-ink,#1E2022); outline-offset:2px; }

  .cspd-calc .two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

  .cspd-calc label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:6px; }

  .cspd-calc input,.cspd-calc select{ width:100%; border:1px solid var(--cs-line,rgba(38,41,43,.18)); background:#fff; padding:10px; font-family:var(--cs-sans,sans-serif); font-size:12.5px; }

  .cspd-calc .res{ margin-top:11px; font-size:12.5px; }
 .cspd-calc .res b{ font-size:15px; }

  .cspd-cta{ display:flex; flex-direction:column; gap:9px; margin-top:18px; }

  .cspd-btnd{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:16px; background:var(--cs-deep,#1B1D1F); color:#fff; text-decoration:none; text-align:center; border:1px solid var(--cs-deep,#1B1D1F); cursor:pointer; width:100%; }

  .cspd-btno{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:16px; background:transparent; color:var(--cs-ink,#1E2022); text-decoration:none; text-align:center; border:1px solid var(--cs-ink,#1E2022); cursor:pointer; width:100%; display:block; }

  .cspd-reassure{ display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-size:11px; color:var(--cs-stone,#5B5E62); }

  .cspd-sec{ padding:46px 40px 0; }

  .cspd-sec h2{ font-family:var(--cs-serif,serif); font-weight:300; font-size:30px; margin-bottom:6px; }
 .cspd-sec h2 em{ font-style:italic; }

  .cspd-sec p.d{ font-size:13px; color:var(--cs-stone,#5B5E62); line-height:1.9; max-width:74ch; }

  .cspd-spectable{ border-top:1px solid var(--cs-ink,#1E2022); margin-top:10px; }

  .cspd-specrow{ display:flex; justify-content:space-between; border-bottom:1px solid var(--cs-line-soft,rgba(38,41,43,.09)); padding:11px 0; font-size:12.5px; }
 .cspd-specrow .k{ color:var(--cs-stone,#5B5E62); }

  .cspd-care div{ font-size:12.5px; color:var(--cs-stone,#5B5E62); line-height:1.7; padding-left:16px; position:relative; margin-bottom:7px; }
 .cspd-care div::before{ content:'\2014'; position:absolute; left:0; color:var(--cs-ink,#1E2022); }

  .cspd-docs{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
 .cspd-doc{ border:1px solid var(--cs-line,rgba(38,41,43,.18)); padding:13px 18px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cs-ink,#1E2022); background:#fff; text-decoration:none; }

  .cspd-revsum{ display:flex; gap:30px; align-items:center; margin:12px 0 16px; flex-wrap:wrap; }
 .cspd-revsum .score{ font-family:var(--cs-serif,serif); font-size:44px; }
 .cspd-revbar{ font-size:11px; color:var(--cs-stone,#5B5E62); }

  .cspd-rev{ border-top:1px solid var(--cs-line-soft,rgba(38,41,43,.09)); padding:14px 0; max-width:760px; }
 .cspd-rev .rn{ font-size:12px; font-weight:500; }
 .cspd-rev .rt{ font-size:12.5px; color:var(--cs-stone,#5B5E62); margin-top:4px; line-height:1.7; }

  .cspd-ctl{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px; }

  .cspd-pcard{ background:#fff; border:1px solid var(--cs-line,rgba(38,41,43,.18)); text-decoration:none; display:block; }
 .cspd-pcard .cspd-ph{ aspect-ratio:1/1; }
 .cspd-pcard .pc{ padding:11px 12px 13px; }
 .cspd-pcard .pcv{ font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cs-stone-2,#8A8D90); }
 .cspd-pcard .pcn{ font-family:var(--cs-serif,serif); font-size:14px; margin:2px 0 5px; color:var(--cs-ink,#1E2022); }
 .cspd-pcard .pcp{ font-size:11px; color:var(--cs-stone,#5B5E62); }

  .cspd-faqi{ border-top:1px solid var(--cs-line,rgba(38,41,43,.18)); padding:15px 0; display:flex; justify-content:space-between; max-width:820px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }

  .cspd-faqa{ display:none; max-width:820px; padding:0 0 15px; font-size:12.5px; text-transform:none; letter-spacing:normal; color:var(--cs-stone,#5B5E62); line-height:1.8; }

  .cspd-faqa.open{ display:block; }

  /* universal brand bottom */
  .cspd-about{ margin-top:54px; display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--cs-line,rgba(38,41,43,.18)); }

  .cspd-about .txt{ padding:54px 48px; display:flex; flex-direction:column; justify-content:center; }

  .cspd-about h2{ font-family:var(--cs-serif,serif); font-weight:300; font-size:clamp(30px,3.4vw,44px); line-height:1.1; margin:14px 0 16px; }
 .cspd-about h2 em{ font-style:italic; }

  .cspd-about p{ font-size:13px; color:var(--cs-stone,#5B5E62); line-height:1.95; max-width:50ch; }

  .cspd-stats{ display:flex; gap:34px; margin-top:24px; flex-wrap:wrap; }
 .cspd-stats .s b{ font-family:var(--cs-serif,serif); font-weight:500; font-style:normal; font-size:30px; line-height:1.1; display:block; }
 .cspd-stats .s span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--cs-stone,#5B5E62); }

  .cspd-about .img{ min-height:360px; position:relative; background:var(--cs-deep,#1B1D1F); }

  .cspd-about .img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

  .cspd-about .img::after{ content:""; position:absolute; inset:0; background:rgba(27,29,31,.15); pointer-events:none; }

  .cspd-contact{ background:var(--cs-deep,#1B1D1F); color:#fff; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:34px 48px; flex-wrap:wrap; }

  .cspd-contact .cl{ display:flex; gap:48px; flex-wrap:wrap; }
 .cspd-contact .ci b{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:#cfc9bd; display:block; margin-bottom:6px; }
 .cspd-contact .ci span{ font-family:var(--cs-serif,serif); font-size:19px; }

  .cspd-contact .cb{ display:flex; gap:12px; flex-wrap:wrap; }
 .cspd-btnw{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; padding:14px 24px; border:1px solid rgba(255,255,255,.6); color:#fff; text-decoration:none; }

  .cspd-blogrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }

  .cspd-bcardx{ text-decoration:none; }
 .cspd-bcardx .cspd-ph{ aspect-ratio:16/10; }
 .cspd-bcardx .bk{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--cs-cyan-deep,#9A7A45); margin:12px 0 5px; }
 .cspd-bcardx .bt{ font-family:var(--cs-serif,serif); font-size:21px; color:var(--cs-ink,#1E2022); line-height:1.2; }
 .cspd-bcardx .bm{ font-size:11px; color:var(--cs-stone,#5B5E62); margin-top:6px; }

  .cspd-rotsec{ margin-top:54px; padding:46px 40px 50px; border-top:1px solid var(--cs-line,rgba(38,41,43,.18)); background:#fff; }

  .cspd-rothead{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; gap:16px; flex-wrap:wrap; }

  .cspd-rotview{ overflow:hidden; }
 .cspd-rottrack{ display:flex; gap:4px; will-change:transform; }
 .cspd-rottrack .rc{ flex:0 0 calc((100% - 8px)/3); position:relative; height:300px; overflow:hidden; text-decoration:none; }

  .cspd-rc .cspd-ph{ position:absolute; inset:0; }
 .cspd-rc .ov{ position:absolute; inset:0; background:linear-gradient(transparent 28%,rgba(20,18,15,.5) 62%,rgba(20,18,15,.9)); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.4); }

  .cspd-rc .k{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.82); }
 .cspd-rc .n{ font-family:var(--cs-serif,serif); font-weight:300; font-size:27px; color:#fff; margin-top:5px; }
 .cspd-rc .sl{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-top:10px; }
 .cspd-rc .sl::after{ content:' \2192'; }

  .cspd-rotdots{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
 .cspd-rotdots .d{ width:28px; height:3px; background:var(--cs-line,rgba(38,41,43,.18)); }
 .cspd-rotdots .d.on{ background:var(--cs-ink,#1E2022); }

  .cspd-calcsec .cspd-calcwrap{ max-width:640px; margin-top:16px; }
@media(max-width:900px){
 .cspd-top,.cspd-about{ grid-template-columns:1fr; }
 .cspd-ctl,.cspd-blogrow{ grid-template-columns:1fr 1fr; }
 .cspd-rottrack .rc{ flex:0 0 calc((100% - 4px)/2); }
 .cspd-crumb,.cspd-top,.cspd-sec,.cspd-rotsec{ padding-left:22px; padding-right:22px; }
}




    .cspd-prose{ margin-top:14px; font-size:14px; line-height:1.85; color:var(--cs-stone,#5B5E62); max-width:74ch; }

    .cspd-prose p{ margin:0 0 14px; }
 .cspd-prose p:last-child{ margin-bottom:0; }

    .cspd-prose ul,.cspd-prose ol{ margin:0 0 14px 20px; }
 .cspd-prose li{ margin:5px 0; }

    .cspd-prose strong,.cspd-prose b{ color:var(--cs-ink,#1E2022); font-weight:600; }

    .cspd-prose h3,.cspd-prose h4{ font-family:var(--cs-serif,serif); font-weight:400; color:var(--cs-ink,#1E2022); font-size:18px; margin:20px 0 8px; }
@media(max-width:760px){
 .cspd-prose{ font-size:14px; }
}

  


    .cspd-inforow{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:24px; }

    .cspd-infocard b{ font-family:var(--cs-sans,sans-serif); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cs-ink,#1E2022); display:block; margin-bottom:9px; }

    .cspd-infocard p{ font-size:13.5px; line-height:1.8; color:var(--cs-stone,#5B5E62); }

    .cspd-infobody{ margin-top:20px; font-size:13.5px; line-height:1.85; color:var(--cs-stone,#5B5E62); max-width:70ch; }
@media(max-width:760px){
 .cspd-inforow{ grid-template-columns:1fr; gap:18px; }
}

  


    .cspd-faq details{ border-top:1px solid var(--cs-line,rgba(38,41,43,.16)); }

    .cspd-faq details:last-child{ border-bottom:1px solid var(--cs-line,rgba(38,41,43,.16)); }

    .cspd-faq summary{ list-style:none; cursor:pointer; padding:18px 40px 18px 0; position:relative; font-family:var(--cs-serif,serif); font-size:18px; color:var(--cs-ink,#1E2022); }

    .cspd-faq summary::-webkit-details-marker{ display:none; }

    .cspd-faq summary::after{ content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:22px; color:#B08D57; }

    .cspd-faq details[open] summary::after{ content:'\2212'; }

    .cspd-faq .a{ padding:0 40px 20px 0; color:var(--cs-stone,#5B5E62); font-size:14px; line-height:1.8; max-width:64ch; }

  


    .cspd-rv2{text-align:center;margin-top:72px}

    .cspd-rv2-head{max-width:760px;margin:0 auto}

    .cspd-rv2 .cspd-eyebrow{display:block}

    .cspd-rv2-title{font-family:var(--cs-serif,Georgia,serif);font-weight:500;font-style:italic;font-size:clamp(28px,3.4vw,40px);line-height:1.06;margin:14px 0 0;white-space:nowrap}

    .cspd-rv2-sub{font-family:var(--cs-sans,sans-serif);font-size:14px;line-height:1.7;color:var(--cs-stone,#5B5E62);max-width:580px;margin:18px auto 0}

    .cspd-rv2-sum{display:inline-flex;align-items:center;gap:9px;margin:16px auto 0;font-family:var(--cs-sans,sans-serif);font-size:12.5px;color:var(--cs-stone,#5B5E62)}

    .cspd-rv2-sum .num{font-family:var(--cs-serif,Georgia,serif);font-style:italic;font-weight:600;font-size:18px;line-height:1;color:var(--cs-ink,#1E2022)}

    .cspd-rv2-sum .stars{display:inline-flex;gap:2px}

    .cspd-rv2-sum .stars svg{width:13px;height:13px}

    .cspd-rv2-sum .div{width:1px;height:13px;background:var(--cs-line,#E3DDD2)}

    .cspd-rv2-sum .cnt{letter-spacing:.04em}

    .cspd-rv2-stage{margin-top:46px}

    .cspd-rv2-vp{overflow:hidden}

    .cspd-rv2-track{display:flex;gap:20px;will-change:transform}

    .cspd-rv2-track .cspd-rv2-card{flex:0 0 calc((100% - 60px)/4)}

    .cspd-rv2-card{background:var(--cs-paper,#FBF9F5);border:1px solid var(--cs-line,#E3DDD2);padding:34px 22px 28px;display:flex;flex-direction:column;align-items:center;text-align:center}

    .cspd-rv2-mono{width:46px;height:46px;border-radius:50%;background:var(--cs-paper,#FBF9F5);border:1px solid var(--cs-line,#E3DDD2);display:flex;align-items:center;justify-content:center;font-family:var(--cs-serif,Georgia,serif);font-style:italic;font-size:16px;color:var(--cs-ink,#1E2022);box-shadow:inset 0 0 0 4px var(--cs-cream,#F6F3EE)}

    .cspd-rv2-cs{display:flex;gap:3px;margin-top:18px}

    .cspd-rv2-cs svg{width:14px;height:14px}

    .cspd-rv2-q{font-family:var(--cs-serif,Georgia,serif);font-size:18px;line-height:1.5;color:var(--cs-ink,#1E2022);margin:16px 0 0;flex:1}

    .cspd-rv2-q::before{content:"\201C"}
.cspd-rv2-q::after{content:"\201D"}

    .cspd-rv2-name{margin-top:18px;font-family:var(--cs-sans,sans-serif);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--cs-ink,#1E2022);line-height:1.2;-webkit-font-smoothing:antialiased}

    .cspd-rv2-loc{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-family:var(--cs-sans,sans-serif);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-stone,#5B5E62)}

    .cspd-rv2-loc svg{flex:none;width:11px;height:11px}

    .cspd-rv2-ver{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--cs-sans,sans-serif);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-stone,#5B5E62)}

    .cspd-rv2-ver svg{width:14px;height:14px}

    .cspd-rv2-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:42px}

    .cspd-rv2-nav{height:38px;padding:0 20px;border:1px solid var(--cs-line,#E3DDD2);background:var(--cs-paper,#FBF9F5);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s,background .25s,color .25s;color:var(--cs-ink,#1E2022);font-family:var(--cs-sans,sans-serif);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}

    .cspd-rv2-nav:hover{border-color:var(--cs-ink,#1E2022);background:var(--cs-cream,#F6F3EE)}

    .cspd-rv2-dots{display:flex;gap:8px;flex-wrap:wrap;max-width:240px;justify-content:center}

    .cspd-rv2-dot{width:7px;height:7px;border-radius:50%;background:var(--cs-line,#E3DDD2);cursor:pointer;transition:background .3s,transform .3s;border:0;padding:0}

    .cspd-rv2-dot.on{background:var(--cs-ink,#1E2022);transform:scale(1.18)}
@media(max-width:1024px){
.cspd-rv2-track .cspd-rv2-card{flex-basis:calc((100% - 20px)/2)}
}
@media(max-width:600px){
.cspd-rv2-track .cspd-rv2-card{flex-basis:100%}
.cspd-rv2-title{white-space:normal}
}

  


    .cspd-band{ position:relative; min-height:420px; overflow:hidden; background:var(--cs-deep,#1B1D1F); display:flex; align-items:center; }

    .cspd-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

    .cspd-band__scrim{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,18,15,.72),rgba(20,18,15,.34) 60%,rgba(20,18,15,.18)); }

    .cspd-band__in{ position:relative; z-index:2; padding:0 7%; max-width:680px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 18px rgba(0,0,0,.38); }

    .cspd-band__eyebrow{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--cs-cream,#EFE9DD); display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; }
 .cspd-band__eyebrow::before{ content:''; width:24px; height:1px; background:#B08D57; }

    .cspd-band__in h2{ font-family:var(--cs-serif,serif); font-weight:300; font-size:clamp(26px,3vw,40px); line-height:1.1; color:#fff; margin:0 0 12px; }

    .cspd-band__in p{ font-size:14px; line-height:1.8; color:rgba(255,255,255,.9); margin:0; max-width:46ch; }
@media(max-width:760px){
 .cspd-band{ min-height:320px; }
}
@media(max-width:560px){

      /* all multi-column grids collapse to one */
      .cspd-ctl,.cspd-blogrow,.cspd-inforow{ grid-template-columns:1fr !important; }

      .cspd-rottrack .rc{ flex:0 0 100% !important; }

      .cspd-sec > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }

      /* tighter horizontal padding */
      .cspd-crumb,.cspd-top,.cspd-sec,.cspd-rotsec{ padding-left:18px !important; padding-right:18px !important; }

      .cspd-about .txt{ padding-left:18px; padding-right:18px; padding-top:36px; padding-bottom:36px; }

      .cspd-contact{ padding-left:18px; padding-right:18px; }

      .cspd-band__in{ padding:0 18px; }

      /* primary content first: gallery already first; ensure stack order natural */
      .cspd-top{ gap:24px !important; }

      /* tame oversized headings further */
      .cspd-pname{ font-size:clamp(23px,8vw,28px); line-height:1.1; }

      .cspd-sec h2{ font-size:clamp(22px,7vw,26px); }

      .cspd-about h2{ font-size:clamp(24px,8vw,32px) !important; }

      .cspd-revsum .score{ font-size:36px; }

      /* keep body text legible */
      .cspd-pdesc,.cspd-infocard p,.cspd-infobody,.cspd-sec p.d{ font-size:14px; }

      /* contact rows stack cleanly */
      .cspd-contact .cl{ gap:24px; }

      /* stats: 3 even columns, no 2-up wrap */
      .cspd-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

      .cspd-stats .s b{ font-size:20px; }

      .cspd-stats .s span{ font-size:8.5px; letter-spacing:.1em; }

      /* contact buttons side by side, full width */
      .cspd-contact{ flex-direction:column; align-items:stretch; }

      .cspd-contact .cb{ flex-wrap:nowrap; width:100%; gap:10px; margin-top:20px; }

      .cspd-contact .cb .cspd-btnw{ flex:1; text-align:center; padding:13px 8px; font-size:9.5px; letter-spacing:.1em; }
}

  


    .cspd-ctlsec .cspd-ctl-vp{overflow:hidden}

    .cspd-ctlsec .cspd-ctl-track{display:flex;gap:14px;will-change:transform}

    .cspd-ctlsec .cspd-ctl-track .cspd-ctlcard{flex:0 0 calc((100% - 42px)/4)}

    .cspd-ctlsec .cspd-ctlcard .cspd-ph{aspect-ratio:3/2}

    .cspd-ctlsec .cspd-ctlcard .cspd-pp{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--cs-stone-2,#8A8D90);margin-left:5px}
@media(max-width:1024px){
.cspd-ctlsec .cspd-ctl-track .cspd-ctlcard{flex-basis:calc((100% - 14px)/2)}
}
@media(max-width:600px){
.cspd-ctlsec .cspd-ctl-track .cspd-ctlcard{flex-basis:100%}
}


.z0-banner{position:sticky;top:0;z-index:99;background:#1B1D1F;color:#FBF9F5;
font:500 10px/1.6 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;
padding:8px 40px;}


/* ── THE FILTER-BY-TYPE ICON BAR (declared design, built to his RTA reference) ──
   cabinet pictograms in ink line-art, hairline borders, ledger tokens only. */
.pdf-bar{padding:34px 40px 8px;text-align:center;}

.pdf-eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--cs-stone,#5B5E62);margin-bottom:16px;}

.pdf-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;}

.pdf-chip{display:flex;flex-direction:column;align-items:center;gap:13px;width:152px;padding:20px 15px;border:1px solid var(--cs-line,rgba(38,41,43,.2));text-decoration:none;color:var(--cs-ink,#1E2022);transition:border-color .2s;}

.pdf-chip:hover,.pdf-chip.on{border-color:var(--cs-ink,#1E2022);}

/* the glyph COMMANDS the chip (Paul 2026-07-15: the old 34px read too small in a
   132px card). It now fills the clear majority of the chip's width. */
.pdf-ic{color:var(--cs-ink,#1E2022);width:100%;display:flex;justify-content:center;}

/* halfway chip (152px), glyph held at the accepted ~60% commanding fill (Paul
   2026-07-15: "halfway between original and this version", keeping the glyph big) */
.pdf-ic svg{width:91px;height:91px;display:block;}

.pdf-lb{font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:center;line-height:1.4;}


/* ── THE CARD GRID (his sketch-sample + rich-card anatomy) ── */
.pdg{padding:20px 40px 40px;}

.pdg-sec{margin-top:30px;}

.pdg-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--cs-ink,#1E2022);padding-bottom:10px;margin-bottom:22px;}

.pdg-head h2{font-family:var(--cs-serif,'Cormorant Garamond',serif);font-weight:300;font-size:28px;color:var(--cs-ink,#1E2022);}

.pdg-head span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-stone,#5B5E62);}

.pdg-grid{display:grid;gap:20px;}

.grid-wide .pdg-grid{grid-template-columns:repeat(3,1fr);}

.grid-medium .pdg-grid{grid-template-columns:repeat(4,1fr);}

.grid-tight .pdg-grid{grid-template-columns:repeat(5,1fr);gap:14px;}

.pdc{position:relative;border:1px solid var(--cs-line,rgba(38,41,43,.2));background:#FFFFFF;display:flex;flex-direction:column;}

.pdc-art{aspect-ratio:1/1;background:var(--cs-frame,#ECE5D7);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}

.pdc-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.pdc-art .ph-tag{position:absolute;top:8px;left:8px;z-index:2;font-size:8px;letter-spacing:.14em;text-transform:uppercase;background:var(--cs-ink,#1E2022);color:#FFFFFF;padding:3px 7px;}

.pdc-sketch{background:#FFFFFF;padding:10px;}

/* the drawing scales to FILL the square (Paul 2026-07-14: it read too small). A
   tall narrow cabinet fills the height; height:100%/width:auto keeps it
   proportioned, and object-fit-style scaling comes from the intrinsic ratio. */
.pdc-sketch svg,.pdc-sketch img{height:100%;width:auto;max-width:100%;display:block;object-fit:contain;}
.pdc-art{min-height:0;}

.pdc-sep{flex:0 0 1px;height:1px;background:rgba(30,32,34,.35);margin:0;display:block!important;}

.pdc-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1;}

.pdc-name{font-family:var(--cs-serif,'Cormorant Garamond',serif);font-weight:400;font-size:16px;color:var(--cs-ink,#1E2022);line-height:1.2;}

.pdc-size{font-size:11.5px;color:var(--cs-stone,#5B5E62);}

.pdc-sku{align-self:flex-start;font-size:9.5px;letter-spacing:.1em;color:var(--cs-ink,#1E2022);border:1px solid var(--cs-line,rgba(38,41,43,.2));padding:3px 8px;}

.pdc-cfg{font-size:11px;color:var(--cs-stone,#5B5E62);}

.pdc-stock{font-size:10px;letter-spacing:.08em;text-transform:uppercase;}

.pdc-stock.in{color:#3F6B4C;}

.pdc-stock.out{color:var(--cs-stone-2,#85888C);}

.pdc-pricerow{display:flex;align-items:baseline;gap:8px;margin-top:2px;}

.pdc-was{font-size:12px;color:var(--cs-stone-2,#85888C);text-decoration:line-through;}

.pdc-now{font-size:16px;font-weight:500;color:var(--cs-ink,#1E2022);}

.pdc-buy{display:flex;gap:8px;margin-top:auto;padding-top:10px;}

.pdc-step{display:flex;align-items:center;border:1px solid var(--cs-line,rgba(38,41,43,.2));}

.pdc-mn,.pdc-pl{background:none;border:none;cursor:pointer;color:var(--cs-ink,#1E2022);padding:0 9px;height:34px;display:flex;align-items:center;}

.pdc-q{width:38px;border:none;border-left:1px solid var(--cs-line,rgba(38,41,43,.2));border-right:1px solid var(--cs-line,rgba(38,41,43,.2));text-align:center;font-family:inherit;font-size:12px;height:34px;-moz-appearance:textfield;}

.pdc-q::-webkit-outer-spin-button,.pdc-q::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.pdc-add{flex:1;font-family:inherit;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--cs-deep,#1B1D1F);color:#FFFFFF;border:1px solid var(--cs-deep,#1B1D1F);cursor:pointer;height:34px;}

.pdc-add:disabled{background:#FFFFFF;color:var(--cs-stone-2,#85888C);border-color:var(--cs-line,rgba(38,41,43,.2));cursor:not-allowed;}

.pdc-o .pdc-now{color:var(--cs-stone-2,#85888C);}

.pdc-oos{position:absolute;top:0;left:0;z-index:3;font-size:8px;letter-spacing:.14em;text-transform:uppercase;background:var(--cs-ink,#1E2022);color:#FFFFFF;padding:4px 8px;}
@media(max-width:1100px){
.grid-tight .pdg-grid{grid-template-columns:repeat(3,1fr);}
.grid-medium .pdg-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:800px){
.pdg-grid{grid-template-columns:repeat(2,1fr)!important;}
}

.ts-swatch .ph-tag,.ts-ph .ph-tag,.ts-room-ph .ph-tag{position:absolute;top:8px;left:8px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;background:var(--cs-ink,#1E2022);color:#FFFFFF;padding:3px 7px;}

.sz-in{max-width:1360px;margin:0 auto;}

.sz-eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--cs-stone,#5B5E62);margin-bottom:14px;}

.sz-center{text-align:center;}

.sz-lede{font-size:13px;color:var(--cs-stone,#5B5E62);line-height:1.85;max-width:74ch;}

.sz-center.sz-lede{margin-left:auto;margin-right:auto;margin-bottom:26px;}

.sz-tag{position:absolute;top:8px;left:8px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;background:var(--cs-ink,#1E2022);color:#FFFFFF;padding:3px 7px;}

.sz-btnd{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:var(--cs-deep,#1B1D1F);color:#FFFFFF;padding:15px 28px;text-decoration:none;white-space:nowrap;border:1px solid var(--cs-deep,#1B1D1F);}

.sz-btno{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:none;color:var(--cs-ink,#1E2022);padding:14px 26px;text-decoration:none;white-space:nowrap;border:1px solid var(--cs-ink,#1E2022);}


/* 1 whats in box (data-driven) */
.sz-box-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}

.sz-box-i{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;border-top:2px solid var(--cs-ink,#1E2022);padding-top:16px;}

.sz-box-ic{color:var(--cs-ink,#1E2022);}

.sz-box-ic svg{width:32px;height:32px;display:block;}

.sz-box-i b{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink,#1E2022);font-weight:600;}

.sz-box-v{font-size:12px;color:var(--cs-stone,#5B5E62);line-height:1.6;}


/* 2 construction anatomy */
.sz-an-in{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;}

.sz-an-svg{width:100%;max-width:320px;color:var(--cs-ink,#1E2022);margin-top:16px;}

.sz-an-list{list-style:none;}

.sz-an-row{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--cs-line-soft,rgba(38,41,43,.1));}

.sz-an-row:first-child{border-top:none;}

.sz-an-n{font-family:var(--cs-serif,'Cormorant Garamond',serif);font-size:20px;color:var(--cs-brass,#B08D57);}

.sz-an-row b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cs-ink,#1E2022);margin-bottom:4px;}

.sz-an-row span{font-size:12.5px;color:var(--cs-stone,#5B5E62);line-height:1.6;}


/* 3 finish and colorway */
.sz-cw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}

.sz-cw-sw{position:relative;aspect-ratio:4/3;background:var(--cs-frame,#ECE5D7);border:1px solid var(--cs-line,rgba(38,41,43,.2));}

.sz-cw figcaption{margin-top:12px;}

.sz-cw figcaption b{display:block;font-family:var(--cs-serif,'Cormorant Garamond',serif);font-size:20px;color:var(--cs-ink,#1E2022);margin-bottom:4px;}

.sz-cw figcaption span{font-size:12.5px;color:var(--cs-stone,#5B5E62);line-height:1.7;}


/* 4 all sizes */
.sz-size-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;}

.sz-size-ph{position:relative;aspect-ratio:3/4;background:var(--cs-frame,#ECE5D7);border:1px solid var(--cs-line,rgba(38,41,43,.2));}

.sz-size figcaption{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--cs-stone,#5B5E62);margin-top:8px;text-align:center;line-height:1.4;}


/* 5 10x10 comparison */
.sz-cmp-tbl{max-width:760px;margin:0 auto;border:1px solid var(--cs-line,rgba(38,41,43,.2));background:#FFFFFF;}

.sz-cmp-row{display:flex;justify-content:space-between;align-items:baseline;padding:16px 22px;}

.sz-cmp-row + .sz-cmp-row{border-top:1px solid var(--cs-line-soft,rgba(38,41,43,.1));}

.sz-cmp-row.is-this{background:var(--cs-frame,#ECE5D7);}

.sz-cmp-n{font-family:var(--cs-serif,'Cormorant Garamond',serif);font-size:18px;color:var(--cs-ink,#1E2022);}

.sz-cmp-v{font-size:15px;font-weight:500;color:var(--cs-ink,#1E2022);letter-spacing:.02em;}

.sz-cmp-row:not(.is-this) .sz-cmp-v{color:var(--cs-stone-2,#85888C);font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;}


/* 7 room inspiration */
.sz-room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px;}

.sz-room-t{position:relative;aspect-ratio:4/3;background:var(--cs-frame,#ECE5D7);border:1px solid var(--cs-line,rgba(38,41,43,.2));}


/* mix-ins: design + financing */
.sz-design{background:var(--cs-frame,#ECE5D7);}

.sz-design-in{max-width:760px;margin:0 auto;text-align:center;}

.sz-design-in .sz-lede{margin:0 auto 22px;}

.sz-design h2{font-size:34px;}

.sz-fin-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}

.sz-fin-in .sz-lede{margin:0;max-width:56ch;}


/* faq bookend (identical cs-mfaq clone carries its own cascade) */
.sz-faq{border-top:1px solid var(--cs-line-soft,rgba(38,41,43,.1));}
@media(max-width:1100px){

  .sz-box-grid{grid-template-columns:repeat(2,1fr);}

  .sz-an-in{grid-template-columns:1fr;gap:24px;}

  .sz-cw-grid{grid-template-columns:repeat(3,1fr);}

  .sz-size-strip{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:700px){

  .sz-size-strip{grid-template-columns:1fr 1fr;}

  .sz-fin-in,.sz-design-in{flex-direction:column;align-items:flex-start;text-align:left;}

  .sz-design-in{align-items:center;text-align:center;}
}


/* ── THE FLAT-PACK / ASSEMBLED PRICE TOGGLE (mini-section below Browse by Type) ── */
/* two SEPARATE pills in the site .csd1-pill standard, centered, section rhythm. */
.cabtog{padding:30px 40px 10px;text-align:center;}

.cabtog-eye{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--cs-stone,#5B5E62);margin-bottom:16px;}

.cabtog-pills{display:inline-flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.csd1-pill.cabtog-pill{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cs-charcoal,#2A2A2A);border:1px solid var(--cs-line,rgba(38,41,43,.16));padding:9px 16px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:none;font-family:inherit;transition:background .2s,color .2s,border-color .2s;}

.csd1-pill.cabtog-pill.on{background:var(--cs-charcoal,#2A2A2A);color:#FFFFFF;border-color:var(--cs-charcoal,#2A2A2A);}

.cabtog-delta{font-size:10px;letter-spacing:.03em;text-transform:none;color:var(--cs-stone,#5B5E62);}

.csd1-pill.cabtog-pill.on .cabtog-delta{color:rgba(251,249,245,.75);}

.cabtog-note{font-size:12px;color:var(--cs-stone,#5B5E62);line-height:1.7;margin:16px auto 0;max-width:52ch;}
@media(max-width:700px){
.cabtog{padding:24px 22px 8px;}
}

.mat-sec{margin-top:16px;border:1px solid var(--cs-line,rgba(38,41,43,.16));background:#fff;padding:22px 24px;}
.mat-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink,#1E2022);margin:0 0 16px;font-weight:600;}
.mat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;}
.mat-item{display:flex;gap:12px;align-items:center;}
.mat-item svg{width:30px;height:30px;flex:0 0 30px;}
.mat-item span{font-size:13px;color:var(--cs-ink,#1E2022);line-height:1.5;}
.mat-ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;}
.mat-group{padding:10px 0;}
.mat-group h4{font-family:var(--cs-serif,serif);font-size:17px;font-weight:500;margin:0 0 8px;color:var(--cs-ink,#1E2022);}
.mat-row{display:flex;justify-content:space-between;gap:14px;padding:5px 0;border-bottom:1px solid var(--cs-line-soft,rgba(38,41,43,.09));}
.mat-row:last-child{border-bottom:0;}
.mat-row b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cs-stone,#5B5E62);font-weight:600;flex:0 0 88px;padding-top:2px;}
.mat-row span{font-size:12.5px;color:var(--cs-ink,#1E2022);text-align:right;line-height:1.5;}
.mat-call{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;align-items:center;}
.mat-call img{width:100%;}
.mat-chips{display:flex;flex-direction:column;gap:9px;}
.mat-chip{display:flex;gap:10px;align-items:flex-start;border-left:2px solid var(--cs-brass,#B08D57);padding-left:12px;}
.mat-chip b{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-brass-deep,#9A7A45);display:block;font-weight:600;}
.mat-chip span{font-size:12.5px;color:var(--cs-ink,#1E2022);line-height:1.45;}
.mat-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.mat-card{border:1px solid var(--cs-line,rgba(38,41,43,.16));padding:14px 16px;}
.mat-card .hd{display:flex;gap:9px;align-items:center;margin-bottom:8px;}
.mat-card .hd svg{width:24px;height:24px;}
.mat-card .hd b{font-family:var(--cs-serif,serif);font-size:16px;font-weight:500;}
.mat-card .mat-row b{flex-basis:78px;}
.mat-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.mat-pill{display:inline-flex;gap:7px;align-items:center;border:1px solid var(--cs-line,rgba(38,41,43,.16));border-radius:999px;padding:6px 13px;font-size:11.5px;color:var(--cs-ink,#1E2022);}
.mat-pill svg{width:17px;height:17px;}
.cs-acc{margin-top:14px;border-top:1px solid var(--cs-line,rgba(38,41,43,.16));}
.cs-acc details{border-bottom:1px solid var(--cs-line,rgba(38,41,43,.16));}
.cs-acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:15px 2px;font-family:var(--cs-serif,serif);font-size:19px;color:var(--cs-ink,#1E2022);}
.cs-acc summary::-webkit-details-marker{display:none;}
.cs-acc summary:after{content:"\2304";font-size:16px;color:var(--cs-stone,#5B5E62);transition:transform .2s;line-height:.4;}
.cs-acc details[open] summary:after{transform:rotate(180deg);}
.cs-acc .bd{padding:2px 2px 16px;font-size:13px;line-height:1.75;color:var(--cs-stone,#5B5E62);}
.cs-acc .bd p{margin:0 0 10px;}.q-row{display:flex;justify-content:space-between;align-items:center;padding:16px 2px;border-bottom:1px solid var(--cs-line,rgba(38,41,43,.16));font-family:var(--cs-serif,serif);font-size:19px;color:var(--cs-ink,#1E2022);}.q-row a{font-family:var(--cs-sans,sans-serif);font-size:13px;color:var(--cs-brass-deep,#9A7A45);font-weight:600;text-decoration:none;border-bottom:1px solid var(--cs-brass,#B08D57);padding-bottom:2px;}.tenrow{display:flex;justify-content:space-between;align-items:center;gap:16px;}.cabcalc .cspd-lbl{display:block;}.cspd-lbl .nt{text-transform:none;}.ten-price{font-family:var(--cs-serif,serif);font-size:25px;color:var(--cs-ink,#1E2022);border:1px solid var(--cs-brass,#B08D57);background:rgba(176,141,87,.07);padding:7px 18px;white-space:nowrap;}


.pdc-assembly{border:1px solid var(--cs-brass,#B08D57);display:flex;flex-direction:column;background:#fff;}
.pdc-assembly .asm-img{flex:1 1 0;min-height:150px;position:relative;overflow:hidden;}
.pdc-assembly .asm-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
.pdc-assembly .asm-bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:0 0 auto;}
.pdc-assembly .asm-eye{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-brass-deep,#9A7A45);font-weight:600;}
.pdc-assembly h3{font-family:var(--cs-serif,serif);font-size:20px;font-weight:500;margin:0;color:var(--cs-ink,#1E2022);}
.pdc-assembly p{font-size:12.5px;line-height:1.65;color:var(--cs-stone,#5B5E62);margin:0;}
.asm-pills{display:inline-flex;border:1px solid var(--cs-line,rgba(38,41,43,.2));}
.asm-pill{flex:1;padding:9px 8px;font-size:11.5px;font-weight:600;letter-spacing:.04em;background:#fff;border:0;cursor:pointer;color:var(--cs-stone,#5B5E62);}
.asm-pill small{display:block;font-weight:500;font-size:10px;letter-spacing:0;}
.asm-pill.on{background:var(--cs-ink,#1E2022);color:#fff;}

.pdc-art.pdc-sketch img{width:100%;height:100%;object-fit:contain;display:block;}

/* ORPHAN RESCUE 2026-07-22 (Paul: cabfact jam): 58 rules used by the colorway page markup but dropped by the CSS splitter; restored verbatim from the built sources. */
/* === Layout offset for fixed announcement-bar + header (May 2026) === */
  /* Body needs to clear the 36px announcement bar + 72px header on desktop, 32 + 72 on mobile.
     The hero section on the home page is intentionally full-bleed so we exclude it.
     Other body templates get a top padding so content isn't clipped. */
  body.product-template,
  body.template-product,
  body.page-template,
  body.template-page,
  body.collection-template,
  body.template-collection,
  body.template-search,
  body.template-list-collections {
    padding-top: 108px;
  }
@import 'https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,700&family=Manrope:ital,wght@0,400;0,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,700&family=Quicksand:ital,wght@0,400;0,500;0,700&display=swap';




  /* neutralize legacy fixed-header body offsets */
  body.product-template,body.template-product,body.page-template,body.template-page,
  body.template-collection,body.collection-template,body.template-search,body.template-cart,
  body.template-list-collections,body.template-404,body.template-blog,body.template-article,
  body.template-index{ padding-top:0 !important; }
/* === Layout offset for fixed announcement-bar + header (May 2026) === */
  /* Body needs to clear the 36px announcement bar + 72px header on desktop, 32 + 72 on mobile.
     The hero section on the home page is intentionally full-bleed so we exclude it.
     Other body templates get a top padding so content isn't clipped. */
  body.product-template,
  body.template-product,
  body.page-template,
  body.template-page,
  body.collection-template,
  body.template-collection,
  body.template-search,
  body.template-list-collections {
    padding-top: 108px;
  }
/* neutralize legacy fixed-header body offsets */
  body.product-template,body.template-product,body.page-template,body.template-page,
  body.template-collection,body.collection-template,body.template-search,body.template-cart,
  body.template-list-collections,body.template-404,body.template-blog,body.template-article,
  body.template-index{ padding-top:0 !important; }
.cs-mfaq{ background:var(--cs-bg,#FBF9F5); padding:56px 0; }
.cs-mfaq__wrap{ max-width:860px; margin:0 auto; padding:0 28px; }
.cs-mfaq__eyebrow{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:#B08D57; }
.cs-mfaq__title{ font-family:var(--cs-serif,serif); font-weight:300; font-size:clamp(28px,4vw,40px); margin:12px 0 28px; color:var(--cs-ink,#1E2022); }
.cs-mfaq__title em{ font-style:italic; }
.cs-mfaq__i{ border-top:1px solid var(--cs-line,rgba(38,41,43,.16)); }
.cs-mfaq__i:last-child{ border-bottom:1px solid var(--cs-line,rgba(38,41,43,.16)); }
.cs-mfaq__i summary{ list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative; font-family:var(--cs-serif,serif); font-size:19px; color:var(--cs-ink,#1E2022); }
.cs-mfaq__i summary::-webkit-details-marker{ display:none; }
.cs-mfaq__i summary::after{ content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:22px; color:#B08D57; }
.cs-mfaq__i[open] summary::after{ content:'\2212'; }
.cs-mfaq__a{ padding:0 40px 22px 0; color:var(--cs-stone,#5B5E62); font-size:14.5px; line-height:1.8; max-width:64ch; }
.cs-mfaq__a a{ color:var(--cs-ink,#1E2022); text-decoration:underline; text-underline-offset:2px; }
.cabcalc-out{font-size:14px;color:var(--cs-ink,#1E2022);}
.cabcalc-out b{font-family:var(--cs-serif,'Cormorant Garamond',serif);font-size:22px;font-weight:400;}
.cabcalc-note{font-size:11px;color:var(--cs-stone,#5B5E62);line-height:1.7;margin-top:8px;}
.cabfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
.cabfact{border-top:2px solid var(--cs-ink,#1E2022);padding-top:10px;}
.cabfact b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-ink,#1E2022);margin-bottom:4px;}
.cabfact span{font-size:11.5px;color:var(--cs-stone,#5B5E62);line-height:1.6;}
/* ── LOCKED CTA BOOKEND: the DESIGN PATH as an image-overlay banner. VERBATIM
   carbon-copy of the live countertops csd1c banner (1:1 CSS, 520px inner). ── */
.csd1c-sec{background:#ffffff;padding:0;font-family:'Montserrat',sans-serif;}
.csd1c-inner{position:relative;width:100%;height:520px;overflow:hidden;background:#1B1D1F center/cover no-repeat;}
.csd1c-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(27,29,31,.92),rgba(27,29,31,.65) 46%,rgba(27,29,31,.28));}
.csd1c-tint{position:absolute;inset:0;z-index:1;background:rgba(27,29,31,.05);}
.csd1c-c{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:0 72px;max-width:760px;color:#ffffff;}
.csd1c-eye{font-weight:500;font-size:11px;letter-spacing:.42em;text-transform:uppercase;display:flex;align-items:center;gap:18px;margin-bottom:20px;text-shadow:0 1px 6px rgba(0,0,0,.6);}
.csd1c-eye:before{content:'';width:36px;height:1.5px;background:#ffffff;}
.csd1c-t{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:44px;line-height:1.06;color:#fff;margin:0 0 16px;text-shadow:0 2px 14px rgba(0,0,0,.5);}
.csd1c-t em{font-style:italic;}
.csd1c-sub{font-size:13px;line-height:1.85;color:rgba(251,249,245,.9);max-width:460px;margin:0 0 26px;text-shadow:0 1px 8px rgba(0,0,0,.5);}
.csd1c-btns{display:flex;gap:14px;flex-wrap:wrap;}
.csd1c-solid{font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:#2A2A2A;background:#ffffff;border:1px solid #ffffff;padding:15px 30px;text-decoration:none;transition:background .3s,color .3s;}
.csd1c-solid:hover{background:transparent;color:#ffffff;}
.csd1c-out{font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:#ffffff;background:transparent;border:1px solid #ffffff;padding:15px 30px;text-decoration:none;transition:background .3s,color .3s;}
.csd1c-out:hover{background:#ffffff;color:#2A2A2A;}
@media(max-width:600px){
  .csd1c-c{padding:0 40px;}
  .csd1c-t{font-size:34px;}
  .csd1c-inner{height:auto;aspect-ratio:4/5;}
}
.csd1c-ov{background:linear-gradient(180deg,rgba(27,29,31,.25),rgba(27,29,31,.55) 50%,rgba(27,29,31,.85));}
.csd1c-c{padding:0 24px 30px;justify-content:flex-end;}
.csd1c-t{font-size:28px;}
.cs-mfaq{ background:var(--cs-bg,#FBF9F5); padding:56px 0; }
.cs-mfaq__wrap{ max-width:860px; margin:0 auto; padding:0 28px; }
.cs-mfaq__eyebrow{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:#B08D57; }
.cs-mfaq__title{ font-family:var(--cs-serif,serif); font-weight:300; font-size:clamp(28px,4vw,40px); margin:12px 0 28px; color:var(--cs-ink,#1E2022); }
.cs-mfaq__title em{ font-style:italic; }
.cs-mfaq__i{ border-top:1px solid var(--cs-line,rgba(38,41,43,.16)); }
.cs-mfaq__i:last-child{ border-bottom:1px solid var(--cs-line,rgba(38,41,43,.16)); }
.cs-mfaq__i summary{ list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative; font-family:var(--cs-serif,serif); font-size:19px; color:var(--cs-ink,#1E2022); }
.cs-mfaq__i summary::-webkit-details-marker{ display:none; }
.cs-mfaq__i summary::after{ content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:22px; color:#B08D57; }
.cs-mfaq__i[open] summary::after{ content:'\2212'; }
.cs-mfaq__a{ padding:0 40px 22px 0; color:var(--cs-stone,#5B5E62); font-size:14.5px; line-height:1.8; max-width:64ch; }
.cs-mfaq__a a{ color:var(--cs-ink,#1E2022); text-decoration:underline; text-underline-offset:2px; }

/* THE DOOR HERO TAKES THE DOOR'S OWN SHAPE (Paul 2026-07-30).
   The square frame letterboxed every portrait door: on harvest oak an 800x1496 door
   rendered 505x943 inside a 943x943 box, leaving 219px of white each side. The frame now
   carries the door's true aspect ratio, set inline per page from the door's real pixels,
   with a width that keeps the hero's HEIGHT identical to the old square. The door fills
   it edge to edge, so there are no bands and no crop, and the right-hand buy column does
   not move. Below 900px, where .cspd-top is already one column, the hero takes the full
   width and grows proportionally.
   SCOPED TWICE: this stylesheet is referenced only by sections/cs-cabinet-colorway.liquid,
   and the rules below are prefixed .cs-cw, the wrapper that exists only on the 17 colorway
   pages. sections/cs-product.liquid carries its own copy of the .cspd-* rules and does not
   load this file, so no other product page can be reached from here. */
.cs-cw .cspd-gmain,
.cs-cw .cspd-thumbs{ width:var(--cs-hero-w,100%); margin-left:auto; margin-right:auto; }
@media(max-width:900px){ .cs-cw .cspd-gmain,
                         .cs-cw .cspd-thumbs{ width:100%; } }

/* THE SHIP-MODE SWITCH (Paul 2026-07-30). Unhidden: .cabtog{display:none} had buried the
   intended control since the go-live commit. It sits under FILTER BY TYPE and governs every
   code price in the catalog below, and assets/cs-cabinet-cart.js already owns the state for
   both this switch and the buy-box pills through one delegated listener.
   Restyled as ONE PLANE, the same segmented device the live-catalog re-skin established:
   two halves in a single bordered box, the active half filled, the sub-label beneath.
   Type and colour come from this stylesheet's own tokens, --cs-sans and --cs-ink and
   --cs-brass, so there is not one foreign value here. Scoped .cs-cw, which exists only on
   the 17 colorway pages. */
.cs-cw .cabtog{ padding:30px 40px 10px; text-align:center; }
.cs-cw .cabtog-eye{ font-family:var(--cs-sans); font-size:10px; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase; color:var(--cs-brass,#B08D57);
  margin-bottom:16px; }
.cs-cw .cabtog-pills{ display:inline-flex; gap:0;
  border:1px solid var(--cs-ink,#1E2022); }
.cs-cw .csd1-pill.cabtog-pill{ font-family:var(--cs-sans); font-size:10px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cs-ink,#1E2022);
  background:none; border:0; border-right:1px solid var(--cs-line,rgba(38,41,43,.16));
  padding:13px 30px; display:block; text-align:left; cursor:pointer; line-height:1.3;
  transition:background .3s,color .3s; }
.cs-cw .csd1-pill.cabtog-pill:last-child{ border-right:0; }
.cs-cw .csd1-pill.cabtog-pill.on{ background:var(--cs-ink,#1E2022); color:#FFFFFF; }
.cs-cw .csd1-pill.cabtog-pill:hover:not(.on){ background:var(--cs-frame,#ECE5D7); }
.cs-cw .cabtog-pill .cabtog-delta{ display:block; font-family:var(--cs-sans); font-size:9px;
  font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cs-stone,#5B5E62); margin-top:4px; }
.cs-cw .csd1-pill.cabtog-pill.on .cabtog-delta{ color:rgba(255,255,255,.64); }
.cs-cw .cabtog-note{ font-family:var(--cs-sans); font-size:12px;
  color:var(--cs-stone,#5B5E62); line-height:1.7; margin:16px auto 0; max-width:52ch; }
@media(max-width:600px){ .cs-cw .cabtog{ padding:24px 18px 8px; }
  .cs-cw .cabtog-pills{ display:flex; }
  .cs-cw .csd1-pill.cabtog-pill{ flex:1; padding:13px 16px; } }
/* the buy-box control drives the same state, so it wears the same type. A button does not
   inherit font-family, and .asm-pill never set one, so it had been falling back to
   Quicksand at weight 600 while the page runs Montserrat. */
.cs-cw .asm-pill{ font-family:var(--cs-sans); }

/* R2, RTA IN HOUSE DRESS (Paul locked 2026-07-30). Carbon-copied from
   preview/citadel-cabinets/strike-on-card.html section R2, including the enlarged strike.
   Reading order: the live price first in the serif at 25px, the struck original after it at
   19px in the same serif so it stays legible, then the brass parenthetical. No chip here:
   Paul keeps the chip for the big singular moments, the collection cards and the receipt
   subtotal. The row is a plain block with non-breaking spaces exactly as R2 draws it, so it
   wraps naturally at any width. Scoped .cs-cw. */
.cs-cw .pdc-pricerow{ display:block; line-height:1.4; margin-top:4px; }
.cs-cw .pdc-now{ font-family:var(--cs-serif); font-weight:400; font-size:25px;
  color:var(--cs-ink,#1E2022); }
.cs-cw .pdc-was{ font-family:var(--cs-serif); font-weight:400; font-size:19px;
  color:#7A756A; text-decoration:line-through; text-decoration-thickness:1.5px; }
.cs-cw .pdc-pct{ font-family:var(--cs-sans); font-size:12px; font-weight:600;
  color:var(--cs-brass,#B08D57); white-space:nowrap; }
@media(max-width:600px){ .cs-cw .pdc-now{ font-size:22px; }
  .cs-cw .pdc-was{ font-size:17px; }
  .cs-cw .pdc-pct{ font-size:11px; } }

/* A2 THE FACT STRIP, LEFT-JUSTIFIED (Paul locked 2026-07-30). Carbon-copied from
   strike-on-card.html, section FINAL - A2: values left-aligned with the small brass label
   beneath, a hairline rule above the strip, thin dividers between the facts. It replaces the
   duplicate Flat-pack / Assembled toggle that used to close this card; the working switch
   above the catalog is now the only ship-mode control on the page.
   Below 600px the three facts stack, each keeping its own hairline, because at a phone's card
   width three columns would crush the labels. Scoped .cs-cw, tokens only. */
.cs-cw .asm-facts{ display:flex; border-top:1px solid rgba(38,41,43,.14); margin-top:14px; }
.cs-cw .asm-fact{ flex:1; text-align:left; padding:12px 14px 2px 0; }
.cs-cw .asm-fact + .asm-fact{ border-left:1px solid rgba(38,41,43,.12); padding-left:14px; }
.cs-cw .asm-fact:last-child{ padding-right:0; }
.cs-cw .asm-fact b{ display:block; font-family:var(--cs-sans); font-size:12px;
  letter-spacing:.08em; font-weight:600; color:var(--cs-ink,#1E2022); }
.cs-cw .asm-fact span{ font-family:var(--cs-sans); font-size:8.5px; letter-spacing:.12em;
  font-weight:600; color:var(--cs-brass,#B08D57); }
@media(max-width:600px){ .cs-cw .asm-facts{ flex-direction:column; }
  .cs-cw .asm-fact{ padding:10px 0 2px; }
  .cs-cw .asm-fact + .asm-fact{ border-left:0;
    border-top:1px solid rgba(38,41,43,.12); padding-left:0; } }




/* ---- Cabinet colourway PDP, mobile (Paul 2026-08-02) ----
   Faults, all measured:
   1. .pdg wasted 80px of a 500px viewport on side padding.
   2. .pdg-grid used 1fr, whose minimum is min-content, so 2 columns computed to 303.7px
      inside a 420px parent and cards ran off screen. minmax(0,1fr) + min-width:0 fixes it.
   3. .pdc-add is 162px and could not shrink, so Add to Cart clipped by 86px.
   4. GRID ROW-STRETCH: grid items default to align-items:stretch, so the tallest card in a
      row set the height of every sibling. That is why the Expert Assembly card and the first
      base cabinet looked elongated with dead space. align-items:start sizes each to its own
      content. .pdc-buy loses its margin-top:auto pin as a result, which is the correct trade. */
@media(max-width:800px){
  .pdg{ padding-left:16px !important; padding-right:16px !important; }
  .pdg-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important;
             align-items:start !important; }
  .pdg-grid > *{ min-width:0 !important; }
  .pdg-grid img{ max-width:100%; height:auto; }
  /* Buy row stacks: the qty stepper on one line, a full-width button under it, so the
     label never has to shrink to 8px to fit beside the stepper. */
  .pdc-buy{ flex-direction:column !important; align-items:stretch !important;
            gap:8px !important; margin-top:12px !important; padding-top:10px; }
  .pdc-add{ flex:none !important; width:100% !important; min-width:0 !important;
            font-size:9.5px !important; letter-spacing:.1em !important; padding:12px 8px !important; }
  .pdc-qty{ width:100%; justify-content:center !important; gap:22px !important; }
  /* The assembly card is built differently from a code card: a 150px image over a long
     body, against the code cards 226px diagram over a 294px body. On a 228px column that
     reads as a different component. Match the art height and tighten the copy so the two
     sit as siblings. Paul 2026-08-02. */
  .pdc-assembly .asm-img{ height:226px !important; }
  .pdc-assembly .asm-bd{ padding:16px 16px 18px !important; font-size:12px !important;
                         line-height:1.6 !important; }
  .pdc-assembly .asm-bd h3,.pdc-assembly .asm-bd h2{ font-size:19px !important;
                         line-height:1.15 !important; margin:6px 0 8px !important; }
  .pdc-assembly .asm-bd p{ margin:0 0 10px !important; }
}
@media(max-width:430px){
  .pdg{ padding-left:12px !important; padding-right:12px !important; }
  .pdg-grid{ gap:10px !important; }
}
/* Accordion headings uppercase, matching every other label on the site. */
.cs-acc summary{
  font-family:var(--cs-sans,"Montserrat",sans-serif);
  font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
}
/* "Have a question?" sits in .q-row, not the accordion, so it missed that treatment. */
.q-row > span:first-child{
  font-family:var(--cs-sans,"Montserrat",sans-serif);
  font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
}

/* ---- Colourway PDP mobile, corrections (Paul 2026-08-02) ----
   1. The stepper is .pdc-step, not .pdc-qty. My earlier centring rule targeted an element
      that does not exist, which is why it read as left-aligned.
   2. .pdc-assembly .asm-img is flex:1 1 0 with min-height:150px. Once align-items:start
      stopped the row stretching, the card became content-height and the image collapsed to
      its 150px minimum, against the 226px art on a code card. Pin it explicitly. */
@media(max-width:800px){
  .pdc-buy .pdc-step{ width:100% !important; justify-content:center !important; gap:22px !important; }
  .pdc-buy .pdc-step input{ text-align:center; }
  .pdc-assembly .asm-img{ flex:0 0 226px !important; height:226px !important; min-height:226px !important; }
}

/* ---- Cabinet code diagrams: one consistent scale (Paul 2026-08-02) ----
   Every drawing is natively 150px tall with a VARYING width (113, 125, 132, 164...).
   They were fitted into a 206x206 square with object-fit:contain, so a wide cabinet
   filled more of the box than a narrow one and B36 read larger than B39. They were also
   upscaled 150 -> 206, which is why they looked soft. Constrain by HEIGHT instead: every
   drawing then renders at its native scale and all codes match. */
/* SCOPED TO MOBILE ONLY (Paul 2026-08-02). These were written unscoped and silently
   changed the desktop renderings, which he never asked for. Desktop is untouched again. */
@media(max-width:800px){
  .pdc-art img{
    height:150px !important;
    width:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
  }
  .pdc-art{ display:flex !important; align-items:center !important; justify-content:center !important; }
}

@media(max-width:800px){
  /* The assembly card is a promo, not a product. As a 228px sibling it will never match a
     code card because it carries a paragraph plus three stat rows. Give it the full row so
     it stops being compared to one, and lay it out horizontally to keep it short. */
  .pdc-assembly{ grid-column:1 / -1 !important; flex-direction:row !important; }
  .pdc-assembly .asm-img{ flex:0 0 40% !important; height:auto !important; min-height:0 !important; }
  .pdc-assembly .asm-bd{ flex:1 1 auto !important; justify-content:center !important; }
  .pdc-art{ height:170px !important; }
  .pdc-art img{ height:140px !important; }
}
@media(max-width:430px){
  .pdc-assembly{ flex-direction:column !important; }
  .pdc-assembly .asm-img{ flex:0 0 190px !important; height:190px !important; min-height:190px !important; }
}

/* ---- Quantity stepper (Paul 2026-08-02) ----
   Centring it with a flex gap left the number field a different width from the two buttons,
   so the cell spacing read uneven. A three-column grid with no gap gives equal cells and a
   properly centred number, with hairline dividers instead of empty space. */
@media(max-width:800px){
  .pdc-buy .pdc-step{
    display:grid !important;
    grid-template-columns:1fr 1.35fr 1fr !important;
    gap:0 !important;
    width:100% !important;
    align-items:stretch !important;
  }
  .pdc-buy .pdc-step > *{ min-width:0 !important; }
  .pdc-buy .pdc-step > button{
    display:flex !important; align-items:center !important; justify-content:center !important;
    padding:14px 0 !important; margin:0 !important; width:100% !important; font-size:16px !important; line-height:1 !important;
  }
  .pdc-buy .pdc-step > input{
    text-align:center !important; width:100% !important; padding:14px 0 !important; margin:0 !important;
    font-size:14px !important; letter-spacing:.04em !important; line-height:1 !important;
    border-left:1px solid var(--cs-line,rgba(38,41,43,.2)) !important;
    border-right:1px solid var(--cs-line,rgba(38,41,43,.2)) !important;
    border-top:0 !important; border-bottom:0 !important;
  }
}

/* Stepper proportions: the number cell gets 1.35fr so the digit is not cramped between two
   equal buttons, and the whole control gets a taller touch target. Paul 2026-08-02. */
@media(max-width:800px){
  .pdc-buy .pdc-step{ min-height:46px !important; }
  .pdc-buy .pdc-step > button{ font-weight:400 !important; color:var(--cs-ink,#1E2022) !important; }
}

/* ---- Stepper, final proportions (Paul 2026-08-02) ----
   Measured: Add to Cart is 34px tall. The stepper box was 46px but its cells were 34px,
   leaving an 11px dead strip at the bottom, which is why the divider lines stopped short
   of the edge. Match the button height exactly, make every cell fill the box so the
   dividers run corner to corner, and centre the number with flex rather than padding. */
@media(max-width:800px){
  .pdc-buy .pdc-step{
    min-height:0 !important;
    height:34px !important;
    align-items:stretch !important;
    box-sizing:border-box !important;
  }
  .pdc-buy .pdc-step > *{
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    align-self:stretch !important;
  }
  .pdc-buy .pdc-step > button{
    display:flex !important; align-items:center !important; justify-content:center !important;
    font-size:15px !important; line-height:1 !important;
  }
  .pdc-buy .pdc-step > input{
    text-align:center !important; font-size:13px !important; line-height:34px !important;
    border-left:1px solid var(--cs-line,rgba(38,41,43,.2)) !important;
    border-right:1px solid var(--cs-line,rgba(38,41,43,.2)) !important;
    border-top:0 !important; border-bottom:0 !important;
    -moz-appearance:textfield;
  }
  .pdc-buy .pdc-step > input::-webkit-outer-spin-button,
  .pdc-buy .pdc-step > input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
}

/* Children were resolving to 44px inside a 34px box and spilling 11px below it, so the
   dividers ran past the border. Pin them to the exact box height and clip. Paul 2026-08-02. */
@media(max-width:800px){
  .pdc-buy .pdc-step{ overflow:hidden !important; }
}

/* ---- Equal card heights per row (Paul 2026-08-02) ----
   align-items:start was added to stop the assembly promo card stretching a whole row. That
   card now spans the full width, so it can no longer distort a row, and the remaining cards
   are all product cards. Restore stretch so siblings in a row match: LAZ36 carries no
   dimension line, so on content-height it sat shorter than DB12 beside it. The buy block is
   pushed to the bottom so the Add to Cart buttons line up across the row. */
@media(max-width:800px){
  .pdg-grid{ align-items:stretch !important; }
  .pdg-grid > .pdc{ display:flex !important; flex-direction:column !important; }
  .pdg-grid > .pdc .pdc-body{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; }
  .pdg-grid > .pdc .pdc-buy{ margin-top:auto !important; }
  .pdc-assembly{ align-self:start !important; }
}

/* VANITY FULL-WIDTH (mobile only, Paul 2026-08-02)
   The chip row is flex-wrap with a fixed 152px chip, so with five types the fifth (Vanity
   Cabinets) wrapped onto its own line and sat centred and narrow under a full-width pair.
   On mobile the chips share the row evenly and the last one spans both columns. Desktop is
   untouched: above 800px the original fixed-width centred wrap still applies. */
@media(max-width:800px){
  .pdf-chips{flex-wrap:wrap;gap:14px;}
  .pdf-chips .pdf-chip{width:auto;flex:1 1 calc(50% - 7px);min-width:0;}
  .pdf-chips .pdf-chip:last-child{flex-basis:100%;flex-grow:1;}
}

/* SHIP TOGGLE, CENTRE THE LABEL (mobile, Paul 2026-08-02)
   .cabtog centres the pills box and the pills box is already centred on the page. What leaned
   was the text INSIDE each pill: the button computes text-align:left, and under
   @media(max-width:600px) each pill takes flex:1, so the label sat against the left edge of its
   half instead of the middle. Scoped to the same breakpoint; desktop pills are content-sized
   and unaffected either way. */
@media(max-width:600px){
  .cabtog-pills .csd1-pill.cabtog-pill{ text-align:center; }
  .cabtog-pills .cabtog-delta{ text-align:center; }
}

/* CARD LINKS TO THE PRODUCT PAGE (Paul 2026-08-02, option 1)
   The art tile and the name are anchors now; the stepper and Add to cart stay plain buttons so
   a tap on them never navigates. .pdc-art was a div, and an <a> is inline by default, so it
   must be re-declared block or the tile collapses. */
.pdc-art.pdc-link{ display:block; }
a.pdc-link{ color:inherit; text-decoration:none; }
.pdc-name a.pdc-link:hover{ color:var(--cs-brass,#B08D57); }