/* =====================================================================
   SAPCOTE KIT — shop layer (loads after sgc-kit.css + sgc-kit-v8.css + sgc-kit-pages.css)
   The WooCommerce templates, v1.0, 7-Nov-2026: the category page (three states: the
   department root, a department with its filters, a filtered leaf) and, in the second
   delivery, the product page. Built by _build_shop_pages.py from the live Store API
   data in shop-data.json; the chrome and the shared blocks are the range-page builder's.
   Designed neutral; the Christmas skin (body.season-xmas, the xmas section classes the
   pages css already skins) is a switch on top, because the shop will one day hold other
   departments. Every class here was grepped against the three kit files first:
   shophead, shopby, plp, tools, rail, facet, prod, ful, pager, whyband, glance, dept,
   sheetbg, moreguides, links (scoped to .also) are new; crumbs, sh2, eyebrow, cards,
   card, leaf-list, faq, rev, btn, pill, tag, ico are the kit's own.
   Decisions (7 Nov 2026):
   - No photo hero on a shop page: a compact title band on the kit tint (the skin's snow)
     under the header and the open-now strip, so the first row of cards is on screen at
     1440 and the first row visible at 390.
   - Filters are a left rail of plain links on WooCommerce's core filter_pa_* / min_price /
     orderby parameters: seven attribute groups with three to fourteen values each do not
     fit a top bar without dropdowns, and dropdowns need script. The same rail markup is the
     phone's full-height sheet (one template part); the only script on the page is the
     sheet's open and close.
   - A card is the kit tile: a 4:5 frame (the product shots are square on white, so they
     sit contained on white), the name, the price, one fulfilment line by state ("£10
     delivery or collect" / "In store"), and a quiet Add to basket only on deliverable lines.
   ===================================================================== */

/* ---- shop icons (basket, sliders, tick) are added to the symbol sheet by the builder ---- */

/* ---- title band: breadcrumb, eyebrow, H1 at the section-heading size, count and one lead line; the shop-by panel under it ---- */
.shophead{background:var(--lime-tint);padding:16px 0 18px}
.shophead .crumbs{margin-bottom:10px}
/* round 38: one column in reading order (breadcrumb, eyebrow, H1, the description under it at the kit's measure), no count; the panel under */
.shophead .title{margin-bottom:12px}
.shophead h1{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.02em}
.shophead h1::after{content:"";display:block;width:52px;height:4px;border-radius:2px;background:var(--lime);margin-top:10px}
.shophead .title .lead{font-size:18px;color:var(--ink);max-width:62ch;margin:8px 0 0}
/* round 36: the category's own description in the band (the live page's subheading). The count on its own line; the description whole
   when it fits three lines, otherwise clamped to three with a Read more (a native details whose open state lifts the clamp), so the
   first card stays put until the reader asks. */
.shophead .lead .desc{margin:0;line-height:1.4}
.shophead .lead .desc.long{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}   /* desktop: a description past three lines shows two and the Read more */
.shophead .lead:has(.readmore[open]) .desc.clamp{display:block;-webkit-line-clamp:unset;overflow:visible}
.shophead .readmore{margin-top:6px;display:none}
.shophead .lead:has(.desc.long) .readmore{display:block}
.shophead .readmore summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:700 16px/1 var(--font);color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
.shophead .readmore summary::-webkit-details-marker{display:none}
.shophead .readmore summary .ic{width:14px;height:14px;transform:rotate(90deg)}
.shophead .readmore[open] summary .ic{transform:rotate(-90deg)}
.shophead .readmore[open] summary .m,.shophead .readmore:not([open]) summary .l{display:none}
.season-xmas .shophead .readmore summary{color:#8F2430}
.shophead .eyebrow{margin-bottom:6px}
.season-xmas .shophead{background:#F1F4F6}
.season-xmas .shophead .eyebrow{color:#8F2430}
.season-xmas .shophead h1::after{background:#E8B84A}

/* the shop-by panel: a white card, one row per group (Size, Style, Brand), the label hugging the pills; a pill is a plain
   link with the count; the current one is filled. Collapsed (a native details) on a filtered leaf. */
.shopby{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:6px 24px}
.shopby .row{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--hair)}
.shopby .row:first-child,.shopby summary+.row{border-top:0}
.shopby .lbl{font:700 16px/1.2 var(--font);color:var(--muted)}
.shopby .pills{display:flex;flex-wrap:wrap;gap:8px}
/* round 36 (Matt: the band "takes up quite a lot of space on desktop"): the open panel's three groups sit SIDE BY SIDE as three columns,
   the label at the start of each run, 34px pills; 182px became about 100px at 1440 with nothing dropped. The folded panel on a filtered
   leaf keeps its stacked rows; the phone keeps its one scrolling row. */
div.shopby{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px;padding:12px 20px;align-items:start}
div.shopby.one{grid-template-columns:1fr}
div.shopby .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0;border:0}
div.shopby .lbl{margin-right:2px}
div.shopby .pills{display:contents}
div.shopby .pills a{min-height:34px;padding:0 11px}
.shopby .pills a{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border-radius:var(--pill);border:2px solid var(--hair);background:#fff;color:var(--ink);font:700 16px/1 var(--font);text-decoration:none;transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.shopby .pills a span{font-weight:400;color:var(--muted)}
.shopby .pills a:hover{border-color:var(--green);color:var(--green-dark)}
.shopby .pills a[aria-current]{background:var(--green);border-color:var(--green);color:#fff}
.shopby .pills a[aria-current] span{color:rgba(255,255,255,.8)}
.shopby .all{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--green-dark);text-decoration:underline;text-underline-offset:3px;font-size:16px}
.shopby .all .ic{width:16px;height:16px}
details.shopby summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 0;font:700 18px/1.3 var(--font);color:var(--ink)}
details.shopby summary::-webkit-details-marker{display:none}
details.shopby summary .ic{width:18px;height:18px;color:var(--green);transition:transform .3s var(--ease)}
details.shopby[open] summary .ic{transform:rotate(90deg)}
details.shopby summary .all{margin-left:auto}
details.shopby summary .sub{font-weight:400;font-size:16px;color:var(--muted)}
details.shopby[open] summary{border-bottom:1px solid var(--hair)}
.season-xmas .shopby .pills a:hover{border-color:#8F2430;color:#6E1A24}
.season-xmas .shopby .pills a[aria-current]{background:#8F2430;border-color:#8F2430}
.season-xmas .shopby .all,.season-xmas .shopby summary .ic{color:#8F2430}

/* ---- the listing: tools row (count, sort; the phone's Filter and sort button), the active chips, the rail beside the grid ---- */
.plp{padding:20px 0 var(--s8)}
.plp .tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-bottom:12px;border-bottom:1px solid var(--hair);margin-bottom:20px}
.plp .count{margin:0;font-size:18px;color:var(--muted)}
.plp .count b{color:var(--ink)}
.plp .sort{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:16px;color:var(--muted)}
.plp .sort a{color:var(--green-dark);text-decoration:none;font-weight:700;padding:6px 0}
.plp .sort a:hover{text-decoration:underline;text-underline-offset:3px}
.plp .sort a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:5px}
.plp .filtbtn{display:none}
.plp .filtbtn .n{font-weight:400;opacity:.85}
.plp .active{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;font-size:16px;color:var(--muted);flex:1 1 auto}   /* round 38: inside the tools row, between the count and the sort */
.plp .active .chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 14px;border-radius:var(--pill);background:var(--lime-tint);color:var(--green-dark);font:700 16px/1 var(--font);text-decoration:none}
.plp .active .chip .x{font-size:20px;line-height:1;font-weight:400}
.plp .active .chip:hover{background:var(--green);color:#fff}
.plp .active .clear{font-weight:700;color:var(--green-dark);text-decoration:underline;text-underline-offset:3px;margin-left:4px}
.plp .layout{display:grid;grid-template-columns:256px minmax(0,1fr);gap:0 40px;align-items:start}

/* the rail: native details per group, the first few open; a value is a 44px row, the count on the right, the active value ticked and bold with a link that removes it */
.rail .railhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 12px;margin-bottom:6px;border-bottom:1px solid var(--hair)}
.rail .railhead h2{font-size:20px}
.rail .railhead .close{display:none}
.rail .railhead .clear{font-size:16px;font-weight:700;color:var(--green-dark)}
.rail .facet{border-bottom:1px solid var(--hair)}
.rail .facet summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;font:700 17px/1.3 var(--font);color:var(--ink)}
.rail .facet summary::-webkit-details-marker{display:none}
.rail .facet summary .ic{width:18px;height:18px;color:var(--green);transform:rotate(90deg);transition:transform .3s var(--ease)}
.rail .facet[open] summary .ic{transform:rotate(-90deg)}
.rail .facet ul{list-style:none;margin:0;padding:0 0 10px}
.rail .facet li a{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 0;color:var(--ink);text-decoration:none;font-size:17px;line-height:1.3;border-radius:var(--r-sm)}
.rail .facet li a:hover{color:var(--green-dark)}
.rail .facet li a .n{margin-left:auto;color:var(--muted);font-size:16px}
.rail .facet li a .tick{width:22px;height:22px;border-radius:6px;border:2px solid var(--hair);flex:none;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:background .2s var(--ease),border-color .2s var(--ease)}
.rail .facet li a .tick .ic{width:14px;height:14px;stroke-width:3}
.rail .facet li a[aria-current]{font-weight:700;color:var(--green-dark)}
.rail .facet li a[aria-current] .tick{background:var(--green);border-color:var(--green)}
.rail .railsort,.rail .railfoot{display:none}
.season-xmas .rail .facet summary .ic,.season-xmas .rail .railhead .clear,.season-xmas .plp .sort a,.season-xmas .plp .active .clear{color:#8F2430}
.season-xmas .rail .facet li a[aria-current]{color:#6E1A24}
.season-xmas .rail .facet li a[aria-current] .tick{background:#8F2430;border-color:#8F2430}
.season-xmas .plp .sort a[aria-current]{color:var(--ink);text-decoration-color:#E8B84A}
.season-xmas .plp .active .chip{background:#F7E9EA;color:#6E1A24}
.season-xmas .plp .active .chip:hover{background:#8F2430;color:#fff}

/* the grid: four across beside the rail, the kit's 24px gap; the root's department rows are the same grid */
.plp .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s4)}
.plp .grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}

/* the product card: the kit card (white, radius, shadow), a 4:5 frame with the square product shot contained on white, the name
   as the whole-card link (stretched), the price bold, one fulfilment line by state, a quiet Add to basket on deliverable lines
   (its own link above the stretched one). Chips on the photo only when true: Low stock, 3 for 2, Multi-buy. */
.card.prod{position:relative}
.card.prod .img{aspect-ratio:4/5;background:#fff;padding:6%;display:block}
.card.prod .img img{width:100%;height:100%;object-fit:contain;transform:none}
.card.prod .img .chips{left:12px;top:12px;bottom:auto;z-index:1}
.card.prod .body{padding:14px 16px 16px;gap:4px;flex:1}
.card.prod h3{font-size:17px;line-height:1.3;font-weight:700;margin:0}
.card.prod h3 a{color:var(--ink);text-decoration:none}
.card.prod h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.card.prod .price{margin:auto 0 0;padding-top:10px;font:700 20px/1.2 var(--font);color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.card.prod .price s{font-weight:400;color:var(--muted);font-size:16px}
.card.prod .ful{display:flex;align-items:flex-start;gap:7px;margin:0;font-size:16px;line-height:1.35;color:var(--green-dark);font-weight:700}
.card.prod .ful .ic{width:18px;height:18px;color:var(--green);margin-top:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card.prod .ful.store{color:var(--muted);font-weight:400}
.card.prod .ful.store .ic{color:var(--muted)}
.card.prod .add{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;margin-top:8px;border-radius:var(--pill);border:2px solid var(--green);background:#fff;color:var(--green);font:700 16px/1 var(--font);text-decoration:none;align-self:flex-start;transition:background .25s var(--ease),color .25s var(--ease)}
.card.prod .add .ic{width:18px;height:18px}
.card.prod .add:hover{background:var(--green);color:#fff}
.card.prod .pill.low{background:var(--accent-tint);color:#8A3D0C}
.season-xmas .card.prod .ful .ic{color:#8F2430}
.season-xmas .card.prod .ful{color:#6E1A24}
.season-xmas .card.prod .add{border-color:#8F2430;color:#8F2430}
.season-xmas .card.prod .add:hover{background:#8F2430;color:#fff}
.season-xmas .card.prod .pill.xmas{background:#8F2430;color:#fff}
.season-xmas .card.prod .pill.low{background:#F7E9EA;color:#6E1A24}

/* pagination: WooCommerce's core page links as kit pills, Previous and Next as buttons */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:var(--s7)}
.pager a,.pager span.cur{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border-radius:var(--pill);font:700 16px/1 var(--font);text-decoration:none;color:var(--green-dark);border:2px solid var(--hair);background:#fff}
.pager a:hover{border-color:var(--green)}
.pager span.cur{background:var(--green);border-color:var(--green);color:#fff}
.pager .nav{gap:6px;padding:0 18px}
.pager .nav .ic{width:16px;height:16px}
.pager .nav.prev .ic{transform:rotate(180deg)}
.season-xmas .pager a{color:#6E1A24}
.season-xmas .pager a:hover{border-color:#8F2430}
.season-xmas .pager span.cur{background:#8F2430;border-color:#8F2430}

/* the root page: one block per department, its heading row with the count and an "All ..." button, four cards */
.dept+.dept{margin-top:var(--s7);padding-top:var(--s7);border-top:1px solid var(--hair)}
.dept .sh2{margin-bottom:var(--s5)}
.dept .sh2 h2{font-size:36px}
.dept .sh2 h2 small{display:block;font:400 18px/1.4 var(--font);color:var(--muted);letter-spacing:0;margin-top:4px}
.dept .sh2 h2::after{display:none}

/* ---- below the grid: the why cards and the review bar on the band, the range text with the At a glance card, the FAQ, the guides ---- */
.whyband .cards.three .card{padding:24px 24px 22px;gap:10px}
.whyband .cards.three .card .ico{margin-bottom:4px}
.whyband .cards.three .card h3{font-size:20px}
.whyband .cards.three .card p{margin:0;font-size:17px;line-height:1.5;color:var(--muted)}
.whyband .rev.bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px var(--s5);align-items:center;margin-top:var(--s5);padding:20px 24px}
.whyband .rev.bar .mark{min-height:0}
.whyband .rev.bar .say{margin:0}
.whyband .rev.bar .who{text-align:right;white-space:nowrap}
.sec.xmas.dark.whyband .card p{color:var(--muted)}
.glance{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:26px 28px 24px}
.glance h3{font-size:22px;margin-bottom:4px}
.glance .leaf-list{margin-top:var(--s3);gap:12px}
.glance .leaf-list li{font-size:17px;line-height:1.45}
.glance .leaf-list a{color:var(--green-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.range .split{align-items:start}
.range .text h2{font-size:36px;margin-bottom:var(--s4)}
.range .text p{font-size:18px;line-height:1.6;max-width:60ch}
.season-xmas .glance .leaf-list .ic{color:#8F2430}
.season-xmas .glance .leaf-list a{color:#6E1A24}
.moreguides{margin:var(--s5) 0 0;font-size:17px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.moreguides a{color:var(--green-dark);font-weight:700}
.season-xmas .moreguides a{color:#6E1A24}
.also .links{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-8px 0 var(--s6);font-size:16px;color:var(--muted)}
.also .links .tag{font-size:16px}
.season-xmas .also .links .tag{border-color:#8F2430;color:#6E1A24}

/* round 36: "Shop the rest of Christmas" on a department, leaf or product page: the /christmas/ shop tiles minus this department (two rows
   of four), and this department's sub-categories as a chip run with counts under the heading; white pills on the dark band */
.rest .subs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-8px 0 var(--s6)}
.rest .subs .lbl{font:700 16px/1.2 var(--font);color:var(--muted);margin-right:4px}
.sec.xmas.dark.rest .subs .lbl{color:#D9E4D6}
.rest .subs a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border-radius:var(--pill);border:2px solid var(--hair);background:#fff;color:var(--ink);font:700 16px/1 var(--font);text-decoration:none;transition:border-color .25s var(--ease),background .25s var(--ease)}
.rest .subs a span{font-weight:400;color:var(--muted)}
.rest .subs a:hover{border-color:var(--green)}
.rest .subs a[aria-current]{background:var(--green);border-color:var(--green);color:#fff}
.rest .subs a[aria-current] span{color:rgba(255,255,255,.8)}
.sec.xmas.dark.rest .subs a{border-color:#fff}
.sec.xmas.dark.rest .subs a:hover{border-color:#E8B84A}
.sec.xmas.dark.rest .subs a[aria-current]{background:#8F2430;border-color:#8F2430;color:#fff}
@media (min-width:761px){
  .rest .cards.five.rows.four{grid-template-columns:repeat(4,1fr)}
}

/* ---- the sheet backdrop (phone and tablet) ---- */
.sheetbg{display:none}

@media (max-width:1000px){
  .plp .layout{grid-template-columns:1fr}
  .plp .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plp .filtbtn{display:inline-flex;gap:10px;min-height:48px}
  .plp .filtbtn .ic{width:20px;height:20px}
  .plp .sort{display:none}
  .plp .tools{justify-content:flex-start;gap:12px 20px}
  .plp .tools .count{order:2;flex:1}
  .plp .tools .filtbtn{order:1}
  /* the rail becomes the full-height sheet: off-screen to the right until opened, the sort links inside it, a Show button at the foot */
  .rail{position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(92vw,420px);background:#fff;box-shadow:var(--shadow-panel);transform:translateX(104%);transition:transform .35s var(--ease);overflow:auto;padding:18px 20px 110px;visibility:hidden}
  .rail.on{transform:none;visibility:visible}
  .rail .railhead{position:sticky;top:-18px;background:#fff;z-index:2;padding:12px 0;margin:-18px 0 0}
  .rail .railhead .close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--lime-tint);color:var(--ink);cursor:pointer;margin-left:auto}
  .rail .railhead .close .ic{width:20px;height:20px}
  .rail .railsort{display:block;border-bottom:1px solid var(--hair);padding:14px 0}
  .rail .railsort h3{font-size:17px;margin-bottom:8px}
  .rail .railsort .sort{display:flex;flex-direction:column;align-items:stretch;gap:2px;font-size:17px}
  .rail .railsort .sort a{display:flex;align-items:center;gap:10px;min-height:40px;color:var(--ink);text-decoration:none;font-weight:400}
  .rail .railsort .sort a[aria-current]{font-weight:700;color:var(--green-dark);text-decoration:none}
  .rail .railfoot{display:block;position:fixed;right:0;bottom:0;width:min(92vw,420px);padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--hair);z-index:3}
  .rail .railfoot .btn{width:100%}
  .sheetbg{position:fixed;inset:0;z-index:39;background:rgba(31,37,24,.45);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
  .sheetbg.on{display:block;opacity:1;pointer-events:auto}
  body.sheet-open{overflow:hidden}
  .season-xmas .rail .railhead .close{background:#F7E9EA;color:#6E1A24}
  .season-xmas .rail .railsort .sort a[aria-current]{color:#6E1A24}
  .season-xmas .rail .railfoot .btn-primary{background:#8F2430;border-color:#8F2430;color:#fff}
  .shophead .sh2{grid-template-columns:1fr}
  .range .text h2,.dept .sh2 h2{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .rail,.sheetbg{transition:none}
}
@media (max-width:760px){
  .shophead{padding:16px 0 20px}
  /* the trail on one line that scrolls, never three lines */
  .shophead .crumbs{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter)) 12px;padding:0 var(--gutter);font-size:15px}
  .shophead .crumbs::-webkit-scrollbar{display:none}
  .shophead .title{margin-bottom:12px}
  .shophead h1::after{margin-top:10px}
  .shophead .title .lead{font-size:17px;margin-top:10px}
  .shophead .lead .desc.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}   /* the phone clamps every description to two lines, the toggle always there */
  .shophead .readmore{display:block;margin-top:4px}
  /* the open panel is ONE row that scrolls sideways on the phone (the group labels inline), so the first cards come sooner;
     the collapsed panel on a filtered leaf keeps its rows inside the details */
  div.shopby{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:10px 16px;scrollbar-width:none}
  div.shopby::-webkit-scrollbar{display:none}
  div.shopby .row,div.shopby .pills{display:contents}
  div.shopby .lbl{flex:none;padding-left:6px}
  div.shopby .row:first-child .lbl{padding-left:0}
  div.shopby .lbl:empty{display:none}
  .shopby .pills a{flex:none;min-height:38px;padding:0 12px}
  details.shopby{padding:2px 16px}
  details.shopby .row{grid-template-columns:1fr;gap:6px;padding:10px 0}
  details.shopby .pills{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none}
  details.shopby .pills::-webkit-scrollbar{display:none}
  details.shopby summary{font-size:17px;padding:12px 0;flex-wrap:wrap;gap:6px 10px}
  details.shopby summary .sub{display:none}
  details.shopby summary .all{margin-left:auto}
  .plp .active{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);scrollbar-width:none}
  .plp .active::-webkit-scrollbar{display:none}
  .plp .active>*{flex:none}
  .plp{padding:16px 0 var(--s7)}
  .plp .tools{flex-direction:column;align-items:stretch;gap:8px;padding-bottom:12px;margin-bottom:16px}
  .plp .tools .count{order:1}
  .plp .tools .active{order:2}
  .plp .tools .filtbtn{order:3;width:100%}
  .plp .count{font-size:17px}
  .plp .active{margin:-4px 0 16px}
  .plp .grid,.plp .grid.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
  .card.prod .body{padding:12px 12px 12px;gap:3px}
  .card.prod h3{font-size:16px}
  .card.prod .price{font-size:18px;padding-top:8px}
  .card.prod .ful{font-size:16px}
  .card.prod .add{min-height:38px;padding:0 10px;width:100%;white-space:nowrap}
  .card.prod .add .ic{display:none}   /* 145px of card body: the words fit, the words plus the basket do not */
  .card.prod .img .chips{left:8px;top:8px}
  .pager{gap:6px;margin-top:var(--s6)}
  .pager .nav span{display:none}
  .pager .nav{padding:0 14px}
  .dept+.dept{margin-top:var(--s6);padding-top:var(--s6)}
  .dept .sh2 .side{width:100%}
  .whyband .rev.bar{grid-template-columns:1fr;gap:10px;padding:18px 18px 16px;margin-top:var(--s4)}
  .whyband .rev.bar .who{text-align:left;white-space:normal}
  .whyband .cards.three{grid-template-columns:1fr}   /* text cards stack on the phone; the kit's two-up rule is for photo cards */
  .whyband .cards.three .card{padding:20px 18px 18px}
  .glance{padding:20px 18px 18px}
  .range .text h2{font-size:28px}
  .range .text p{font-size:17px}
  .also .links{margin-bottom:var(--s5)}
  .rest .subs{flex-wrap:nowrap;overflow-x:auto;margin:-4px calc(-1 * var(--gutter)) var(--s5);padding:2px var(--gutter) 4px;scrollbar-width:none}
  .rest .subs::-webkit-scrollbar{display:none}
  .rest .subs a,.rest .subs .lbl{flex:none}
}


/* =====================================================================
   THE PRODUCT PAGE (v1.0, 7 Nov 2026). One template, a fulfilment state (deliverable / in store), a department tail.
   Above the fold at 1440: the gallery left (the square product shot on white, a thumbnail row, the video slide where a
   Lemax piece has one), the summary right: H1, the price large in the kit ink, the live stock line in the kit green,
   then by state the £10 delivery line, quantity and Add to basket with Buy in store under it and the pay logos under
   that ("Pay securely by card", monochrome, small), or Get directions and Call. SKU and brand small; three trust lines
   as the kit leaf-list. Classes grepped first: pdpsec, pdp, gallery, thumbs, th, vslot, summary (scoped), pprice,
   stockline, deliv, buy, qty, atc, store, pay, pmeta, pdptrust (the kit owns .trust), details, spec, deptband, related, buybar, playmark.
   ===================================================================== */
.pdpsec{padding:22px 0 var(--s8)}
.pdpsec .crumbs{margin-bottom:22px}
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s7);align-items:start}
.gallery .main{margin:0;aspect-ratio:1/1;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:4%}
.gallery .main img{width:100%;height:100%;object-fit:contain}
.gallery .main .vslot{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.gallery .main .vslot iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.gallery .thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.gallery .th{position:relative;width:84px;height:84px;padding:4px;border:2px solid var(--hair);border-radius:var(--r-sm);background:#fff;cursor:pointer;transition:border-color .25s var(--ease)}
.gallery .th img{width:100%;height:100%;object-fit:contain;border-radius:4px}
.gallery .th.vid img{object-fit:cover}
.gallery .th:hover{border-color:var(--green)}
.gallery .th.on{border-color:var(--green)}
.gallery .th .playmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff}
.gallery .th .playmark .ic{width:34px;height:34px;fill:#fff;stroke:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.pdp .summary h1{font-size:36px;line-height:1.1;letter-spacing:-.02em;margin-bottom:14px}
.pdp .pprice{font:700 40px/1 var(--font);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.pdp .pprice s{font-size:22px;font-weight:400;color:var(--muted)}
.pdp .stockline{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:17px;font-weight:700;color:var(--green-dark)}
.pdp .stockline .ic{width:20px;height:20px;color:var(--green)}
.pdp .stockline.low{color:#8A3D0C}
.pdp .stockline.low .ic{color:#8A3D0C}
.pdp .deliv{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:17px;color:var(--ink)}
.pdp .deliv .ic{width:22px;height:22px;color:var(--green)}
.pdp .buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 12px}
.pdp .buy.cta{margin-top:0}
.pdp .qty{display:inline-flex;align-items:stretch;border:2px solid var(--hair);border-radius:var(--pill);overflow:hidden;background:#fff;height:52px}
.pdp .qty button{width:46px;border:0;background:#fff;color:var(--ink);font:400 24px/1 var(--font);cursor:pointer}
.pdp .qty button:hover{background:var(--lime-tint)}
.pdp .qty input{width:54px;border:0;border-left:1px solid var(--hair);border-right:1px solid var(--hair);text-align:center;font:700 18px var(--font);color:var(--ink);-moz-appearance:textfield}
.pdp .qty input::-webkit-outer-spin-button,.pdp .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp .atc{min-height:52px;padding:0 28px;font-size:18px}
.pdp .store{margin:0 0 14px}
.pdp .pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px}   /* round 37: one row, so the pitch under it lands inside the first screen */
.pdp .pay p{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;color:var(--muted)}
.pdp .pay .ic{width:18px;height:18px;color:var(--muted)}
.pdp .pay .logos{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pdp .pay .logos img{height:20px;width:auto;border-radius:3px;filter:grayscale(1);opacity:.8}
.pdp .pmeta{font-size:16px;color:var(--muted);margin:0 0 14px;padding-top:14px;border-top:1px solid var(--hair)}
.pdp .pdptrust{margin:0;gap:8px}
.pdp .pdptrust li{font-size:17px}
.season-xmas .pdp .stockline,.season-xmas .pdp .deliv .ic,.season-xmas .pdp .stockline .ic,.season-xmas .pdp .pdptrust .ic{color:#8F2430}
.season-xmas .pdp .stockline.good{color:var(--green-dark)}
.season-xmas .pdp .stockline.good .ic{color:var(--green)}
.season-xmas .pdp .atc{background:#8F2430;border-color:#8F2430;color:#fff}
.season-xmas .pdp .atc:hover{background:#6E1A24;border-color:#6E1A24}
.season-xmas .pdp .btn-secondary{color:#8F2430;border-color:#8F2430}
.season-xmas .pdp .btn-secondary:hover{background:#F7E9EA;color:#6E1A24}
.season-xmas .pdp .btn-primary{background:#8F2430;border-color:#8F2430;color:#fff}
.season-xmas .pdp .btn-primary:hover{background:#6E1A24;border-color:#6E1A24}
.season-xmas .gallery .th.on,.season-xmas .gallery .th:hover{border-color:#8F2430}
.season-xmas .pdp .qty button:hover{background:#F7E9EA}

/* details: the description beside the spec table (two columns of label and value at desktop, stacked on the phone) */
.details .split{align-items:start}
.details .text h2{font-size:36px;margin-bottom:var(--s4)}
.details .text p{font-size:18px;line-height:1.6;max-width:60ch}
.details .specs{margin-top:var(--s4);gap:8px}
.details .specs li{font-size:17px}
.spec{margin:0;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:8px 28px;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s6)}
.spec .row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:13px 0;border-top:1px solid var(--hair)}
.spec .row:nth-child(-n+2){border-top:0}
.spec dt{color:var(--muted);font-size:16px;margin:0;flex:0 0 auto}
.spec dd{margin:0;font-weight:700;font-size:17px}
.season-xmas .details .specs .ic{color:#8F2430}

/* round 37: the pitch in the summary ("Why choose Sapcote" over four lines of the kit's why list, under the buy area, above the meta
   line) and the fuller card under the spec table; the live tab's generic emoji block is not carried over */
.pdp .pitch{margin:0 0 14px;padding:14px 18px 12px;background:var(--lime-tint);border-radius:var(--r)}
.pdp .pitch h2{font-size:18px;margin-bottom:6px}
.pdp .pitch .pdptrust{gap:6px}
.pdp .pitch .pdptrust li{font-size:16px;line-height:1.4}
.pdp .pitch .pdptrust .ic{margin-top:1px}
.season-xmas .pdp .pitch{background:#F7E9EA}
.whycard{margin-top:var(--s4);background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:24px 28px 22px}
.whycard h3{display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:10px}
.whycard h3 .ic{width:22px;height:22px;color:var(--green)}
.whycard p{font-size:17px;line-height:1.55;color:var(--ink);margin:0 0 10px;max-width:none}
.whycard p:last-child{margin-bottom:0}
.season-xmas .whycard h3 .ic{color:#8F2430}

/* the department band (round 37: per range again): this range's heading, copy and selling points beside the visit block's map, and a
   strip of example product photos from the range under them, each a white square with the shot contained; the lighter band (lights and
   the rest) runs its text at a reading measure with the strip and no map */
.deptband .split{align-items:center}
.deptband .map{min-height:380px;aspect-ratio:4/3;border-radius:22px}
.deptband .visual{width:100%}
.deptband .text p{max-width:56ch}
.sec.tint.deptband .leaf-list .ic{color:var(--green)}
.deptband .pstrip{margin-top:var(--s6)}
.deptband .pstrip .slbl{font:700 16px/1.2 var(--font);color:var(--muted);margin:0 0 12px}
.sec.xmas.xmas-band.deptband .pstrip .slbl{color:#FBE8EA}
.deptband .pstrip .row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.deptband .pstrip .row a,.deptband .pstrip .row span{display:block;aspect-ratio:1/1;background:#fff;border-radius:var(--r-sm);box-shadow:var(--shadow-card);padding:6%;overflow:hidden;transition:transform .35s var(--ease)}
.deptband .pstrip .row a:hover{transform:translateY(-3px)}
.deptband .pstrip .row img{width:100%;height:100%;object-fit:contain}
.deptband.light .split.solo{grid-template-columns:minmax(0,1fr)}
.deptband.light .text{max-width:72ch}
.deptband.light .pstrip{margin-top:var(--s5)}

/* related: the category cards, four across (the listing grid rules are scoped to .plp, so the row is declared again here) */
.related .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s4)}

/* the sticky Add to basket bar on the phone, deliverable lines only: price and name left, the button right; slides up once the buy box has scrolled off */
.buybar{display:none}

@media (max-width:1000px){
  .pdp{grid-template-columns:1fr;gap:var(--s6)}
  .pdp .summary h1{font-size:32px}
  .spec{grid-template-columns:1fr}
  .spec .row:nth-child(2){border-top:1px solid var(--hair)}
  .related .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .details .text h2{font-size:30px}
}
@media (max-width:760px){
  .pdpsec{padding:14px 0 var(--s7)}
  .pdpsec .crumbs{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter)) 14px;padding:0 var(--gutter);font-size:15px}
  .pdpsec .crumbs::-webkit-scrollbar{display:none}
  .gallery .th{width:64px;height:64px}
  .pdp .summary h1{font-size:28px}
  .pdp .pprice{font-size:34px}
  .pdp .buy{gap:10px}
  .pdp .atc{flex:1 1 auto}
  .pdp .store{width:100%}
  .pdp .buy.cta .btn{flex:1 1 auto}
  .related .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
  .spec{padding:4px 18px}
  .spec .row{padding:11px 0}
  .details .text h2{font-size:28px}
  .deptband .map{min-height:260px;border-radius:16px}
  .pdp .pitch{padding:14px 14px 12px}
  .whycard{padding:20px 18px 18px}
  .deptband .pstrip .row{display:flex;overflow-x:auto;gap:10px;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 10px;scrollbar-width:none;scroll-snap-type:x mandatory}
  .deptband .pstrip .row::-webkit-scrollbar{display:none}
  .deptband .pstrip .row a,.deptband .pstrip .row span{flex:0 0 132px;scroll-snap-align:start}
  .buybar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;gap:12px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -8px 30px -12px rgba(31,37,24,.35);border-top:1px solid var(--hair);transform:translateY(110%);transition:transform .35s var(--ease)}
  .buybar.on{transform:none}
  .buybar .bb{display:flex;flex-direction:column;min-width:0;flex:1}
  .buybar .bb b{font-size:20px;line-height:1.1}
  .buybar .bb span{font-size:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buybar .btn{flex:none;min-height:48px;padding:0 18px}
  .season-xmas .buybar .btn-primary{background:#8F2430;border-color:#8F2430;color:#fff}
  body.has-tooling .buybar{bottom:64px}
}
@media (prefers-reduced-motion:reduce){
  .buybar{transition:none}
}