/* Print Buddy: styles for the catalogue and family pages. Split out of site.css on 19 Oct 2026 (speed: every shop page loaded all of it);
   linked right after site.css by products.html. New rules that only these pages use go here; see docs/STYLE-GUIDE.md. */
/* ---------- Catalogue page ---------- */
.cat-layout{display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:start}
.filters .fbox{border:1px solid var(--line);background:#fff}
.results-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.results-h .meta{font-size:12px;color:var(--muted)}
.prodgrid{display:grid;gap:14px}
.filters-mobile{display:none;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;scrollbar-width:none}
.filters-mobile button{flex:none;font-weight:500}
.filters-mobile button[aria-pressed="true"]{font-weight:500}
/* a search that also matches the Acrylic & Retail Displays range (its own pages) */
.sem-pages{margin:22px 0 0}
.sem-pages:empty{display:none}
.sem-pages h2{margin:0 0 10px;font-size:14px;font-weight:500;color:var(--ink)}
.sem-pages .dsp-also{flex-wrap:wrap;gap:4px 12px}
.dsp-also{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);text-decoration:none;font-size:13px}
.dsp-also b{font-weight:500}
.dsp-also span{color:var(--muted)}
.dsp-also svg{margin-left:auto;flex:none;color:var(--primary)}
.dsp-also:hover{box-shadow:0 0 0 2px rgba(var(--prgb),.1)}
/* ---------- Responsive ---------- */
@media (max-width:900px){.cat-layout{grid-template-columns:minmax(0,1fr)}
.cat-layout>section{min-width:0}
.filters-mobile{display:flex}}
/* ---- phone width: nothing wider than the screen ---- */
.filters-mobile{max-width:100%;min-width:0}
/* ======================================================================
   PHONES FIRST (Junaid, 15 Oct 2026): one sticky bar, a menu drawer, the product page in money-making order
   (picture, options, price, basket; the trust points and templates card after), the hero picture back, account tabs.
   ====================================================================== */
/* All Products help card (Junaid: redesign properly): icon tile, title, one line, solid quote button, phone row */
.fhelp.fhelp2{display:grid;background:#fff;border:1px solid var(--line);border-radius:var(--radius);font-size:12.5px;line-height:1.5;color:var(--muted)}
.fhelp2 .fh-ic{display:grid;place-items:center}
.fhelp2 b{margin:0;font-size:14px;color:var(--ink)}
.fhelp2 p{margin:0}
.fhelp2 .fh-btn{display:flex;align-items:center;justify-content:center;height:38px;margin-top:4px;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:13px;font-weight:500;text-decoration:none;transition:background .15s}
.fhelp2 .fh-btn:hover{background:var(--primary-dk)}
.fhelp2 .fh-tel{display:flex;align-items:center;justify-content:center;gap:7px;height:36px;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;transition:border-color .15s,background .15s}
.fhelp2 .fh-tel:hover{border-color:rgba(var(--prgb),.4);background:var(--panel)}
.fhelp2 .fh-tel svg{color:var(--primary)}
.fhelp.fhelp2 a.fh-btn{color:#fff}
.fhelp.fhelp2 a.fh-tel{color:var(--ink)}
/* All Products count: a chip with a small grid icon and the number in bold */
.results-h .rcount{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;color:var(--muted);font-size:12px;white-space:nowrap}
.results-h .rcount svg{color:var(--primary);flex:none}
.results-h .rcount b{color:var(--ink);font-weight:500}
.results-h .rcount:empty{display:none}
/* Products side menu (Junaid, 16 Oct 2026): the help card puts its icon beside the title so Request a quote shows without
   scrolling; the chosen category gets a neutral fill and a dot, never a bar down the side (standing design rule) */
.fhelp.fhelp2{grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:center;padding:16px}
.fhelp2 .fh-ic{width:36px;height:36px;border-radius:50%;margin:0;background:#fff;border:1px solid var(--line)}
.fhelp2 b{align-self:center}
.fhelp2 p,.fhelp2 .fh-btn,.fhelp2 .fh-tel{grid-column:1/-1}
@media (min-width:901px){.fhelp.fhelp2{margin-top:10px}}
/* ---- Same-Day pill with its status card; products page banner and Show more (16 Oct 2026) ---- */
.sdbanner{display:flex;margin:0 0 18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.sdbanner .sdb-ic{position:relative;background:var(--panel);display:grid;place-items:center;flex:none}
.sdbanner .sdb-t{flex:1 1 240px;min-width:0}   /* a real basis, so the button drops under the words on phones instead of squeezing them (28 Oct 2026) */
.sdbanner b{display:block;font-weight:500;color:var(--ink)}
.sdbanner small{display:block;color:var(--muted);line-height:1.5}
.sdbanner .sdb-link{flex:none;text-underline-offset:3px}
@media (max-width:640px){.sdbanner{flex-wrap:wrap}}
.prodgrid>[hidden]{display:none!important}
.more-wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.more-wrap[hidden]{display:none}
.more-meta{margin:0;font-size:12.5px;color:var(--muted)}
.more-meta b{color:var(--ink);font-weight:500}
.more-bar{width:100%;border-radius:var(--bar-r);overflow:hidden}
.more-bar i{display:block;height:100%;border-radius:var(--bar-r);transition:width .3s ease}
.more-btn{margin-top:6px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);font-weight:500;justify-content:center}
.more-btn[hidden]{display:none}
/* ======== Help pages refresh (Junaid, 16 Oct 2026: "they look old, not part of our theme") ======== */
/* category introduction under the heading (SEO copy and guide links) */
.plp-intro{margin:-4px 0 20px}
.plp-intro[hidden]{display:none}
.plp-intro p{margin:0}
.plp-guides{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.plp-guides a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;font-size:12px;text-decoration:none;transition:border-color .15s,color .15s}
.plp-guides a svg{width:13px;height:13px;color:var(--muted);transition:transform .15s}
.plp-guides a:hover{border-color:var(--primary)}
.plp-guides a:hover svg{transform:translateX(2px)}
/* ---- Styling audit (Junaid, 17 Oct 2026): sizes back to the theme's measure (intro lines under headings, home reviews),
   help page headers without the box (full width, a hairline under), headings a touch heavier, icons in the text colour
   (Look & Feel > Icon colour, data-icon on html), a wider gap between icon tiles and their words ---- */
.results-h h1{font-size:24px}
.plp-intro{max-width:860px}
/* ---- Detail pass (Junaid, 17 Oct 2026, "corporate, clean"): one hover for every card, the category sidebar, description
   text on one size, dark compact hero cards aligned with the strip, the chat typing line, the Print Journal ---- */
/* category sidebar: a dot marks the open range (no bar down the side), counts sit quietly on the right */
.filters .fbox{padding:14px 10px 10px;border-radius:var(--radius)}
/* ---- Fifth round (Junaid, 17 Oct 2026): top bar without rings, spec icon tiles, catalogue looks, Show more, footer ---- */
/* catalogue looks: A list on the left and cards with a line of copy (default); B chips across the top, five compact cards;
   C list on the left, picture-first cards */
.filters-mobile button[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary)}
main[data-look="b"] .cat-layout{grid-template-columns:minmax(0,1fr)}
main[data-look="b"] .filters-mobile{flex-wrap:wrap;overflow:visible;padding:0}
main[data-look="b"] .filters-mobile button{height:34px;padding:0 14px;font-size:12.5px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);border:1px solid var(--line);background:#fff;color:var(--ink)}
main[data-look="b"] .filters-mobile button[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary)}
main[data-look="b"] .prodgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){main[data-look="b"] .prodgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){main[data-look="b"] .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){main[data-look="b"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Show more */
.more-wrap{max-width:360px;margin:34px auto 10px;gap:12px}
.more-bar{height:4px;background:var(--panel)}
.more-bar i{background:var(--primary)}
.more-btn{height:42px;padding:0 22px;border:1px solid rgba(var(--prgb),.35);background:#fff;color:var(--ink);font-size:13px;gap:9px;display:inline-flex;align-items:center}
.more-btn::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-2px)}
.more-btn:hover{background:var(--panel);border-color:rgba(var(--prgb),.6)}
/* ---- Same-day category banner (Junaid, 17 Oct 2026: improve): the product page notice layout with a label, a
   one-line title and the timing link as an outlined pill ---- */
.sdbanner{align-items:center;gap:14px;padding:14px 16px 14px 14px}
.sdbanner .sdb-ic{width:40px;height:40px;border-radius:var(--radius);color:var(--icon)}
.sdbanner .sdb-ic i{width:8px;height:8px}
.sdbanner .sdb-k{display:block;margin:0 0 2px;font-size:10px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--eyebrow-ink)}
.sdbanner b{font-size:13.5px;line-height:1.3;text-wrap:balance}
.sdbanner small:not(.sdb-k){font-size:12.5px}
.sdbanner .sdb-link{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid rgba(var(--prgb),.35);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;color:var(--ink);font-size:12.5px;font-weight:500;text-decoration:none;transition:background .15s,border-color .15s}
.sdbanner .sdb-link:hover{background:var(--panel);border-color:rgba(var(--prgb),.6)}
@media (max-width:640px){.sdbanner{align-items:flex-start}
.sdbanner .sdb-t{flex-basis:calc(100% - 54px)}
.sdbanner .sdb-link{margin-left:54px}}
/* ---- Minimal catalogue looks D to G (Junaid, 17 Oct 2026: "unique, minimal, elegant, not overcrowded"; he picks one
   tomorrow). Shared base: borderless cards, the picture on the panel grey with 14 px corners, the name under it, no
   rating or footer, the intro paragraph hidden; hover rings the picture only ---- */
/* E and G: no sidebar; the ranges are text tabs across the top */
main[data-look="e"] .cat-layout,main[data-look="g"] .cat-layout{grid-template-columns:minmax(0,1fr)}
main[data-look="e"] .filters-mobile,main[data-look="g"] .filters-mobile{overflow:visible}
main[data-look="e"] .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
main[data-look="g"] .prodgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){main[data-look="e"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
main[data-look="g"] .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){main[data-look="e"] .prodgrid,main[data-look="g"] .prodgrid,main[data-look="d"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---- Range bar above the cards for looks E and G (Junaid, 17 Oct 2026: the plain text tabs looked basic): a white
   rounded track, the open range as an ink pill, the others quiet, counts as small muted figures; wraps to two rows ---- */
main[data-look="e"] .filters-mobile,main[data-look="g"] .filters-mobile{padding:6px;margin:0 0 24px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 1px 2px rgba(20,24,28,.04)}
main[data-look="e"] .filters-mobile button,main[data-look="g"] .filters-mobile button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;margin:0;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:none;font-size:12.5px;font-weight:500;color:var(--ink);transition:background .15s,color .15s}
main[data-look="e"] .filters-mobile button i,main[data-look="g"] .filters-mobile button i{font-style:normal;font-size:11px;font-weight:500;color:var(--muted)}
main[data-look="e"] .filters-mobile button:hover,main[data-look="g"] .filters-mobile button:hover{background:var(--panel);color:var(--ink)}
main[data-look="e"] .filters-mobile button[aria-pressed="true"],main[data-look="g"] .filters-mobile button[aria-pressed="true"]{background:var(--primary);color:#fff;font-weight:500;border-bottom:0}
main[data-look="e"] .filters-mobile button[aria-pressed="true"] i,main[data-look="g"] .filters-mobile button[aria-pressed="true"] i{color:rgba(255,255,255,.7)}
.filters-mobile button i{margin-left:4px;font-style:normal;font-weight:500;opacity:.8}
/* ---- Menu families (Junaid, 17 Oct 2026, after WTTB, Instantprint, Solopress and Vistaprint): six families across the bar,
   each opening a full-width panel under it: groups as columns (small capitals heading over a hairline, product names),
   "N more" into the family page, and a foot row (all of the family, all products, Request a Quote). The phone drawer
   lists the same families as opening sections; the family page (products.html?g=) shows each group as a section ---- */
.fam-groups{display:grid;gap:34px;margin-top:6px}
.fam-groups[hidden]{display:none}
.fam-grp h2{display:flex;align-items:baseline;gap:10px;font-weight:500}
.fam-grp h2 span{font-size:12px;font-weight:500;color:var(--muted)}
.fam-grp{scroll-margin-top:84px}
/* ===== Catalogue looks H to L (Junaid, 18 Oct 2026: more catalogue designs to pick from in Store Settings) =====
   Card tags (cardTags in site.js) are hidden unless a look shows them. */
main[data-look="h"] .prodgrid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense}
main[data-look="h"] .prodgrid>.catcard:first-child{grid-column:span 2;grid-row:span 2;padding:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 70%,#fff),#fff 60%)}
main[data-look="h"] .prodgrid>.catcard:first-child .im{margin-bottom:16px}
main[data-look="h"] .prodgrid>.catcard:first-child b{font-size:20px;font-weight:500;margin:0 2px 8px}
main[data-look="h"] .prodgrid>.catcard:first-child p{display:block;margin:0 2px 12px;font-size:13px;line-height:1.55}
main[data-look="h"] .prodgrid>.catcard:first-child .cc-foot .go{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:var(--radius);background:var(--primary);color:#fff;font-size:12.5px}
main[data-look="h"] .prodgrid>.catcard:first-child .cc-foot{border-top:0;display:flex;justify-content:space-between;align-items:center}
@media (max-width:900px){main[data-look="h"] .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){main[data-look="h"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
main[data-look="h"] .prodgrid>.catcard:first-child{grid-row:auto}
main[data-look="h"] .prodgrid>.catcard:first-child b{font-size:17px}}
/* I: shelves. Range chips across the top; on a range's page each group is a row that scrolls sideways (snap, swipe on phones) */
main[data-look="i"] .cat-layout{grid-template-columns:minmax(0,1fr)}
main[data-look="i"] .filters-mobile{flex-wrap:wrap;overflow:visible;padding:0;margin:0 0 22px}
main[data-look="i"] .filters-mobile button{height:34px;padding:0 14px;font-size:12.5px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);border:1px solid var(--line);background:#fff;color:var(--ink)}
main[data-look="i"] .filters-mobile button[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary)}
main[data-look="i"] .prodgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
main[data-look="i"] .fam-grp{margin-bottom:34px}
main[data-look="i"] .fam-grp .prodgrid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 4*16px)/4.4);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;scrollbar-width:thin}
main[data-look="i"] .fam-grp .prodgrid>.catcard{scroll-snap-align:start}
@media (max-width:900px){main[data-look="i"] .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
main[data-look="i"] .fam-grp .prodgrid{grid-auto-columns:calc((100% - 2*14px)/2.4)}}
@media (max-width:600px){main[data-look="i"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
main[data-look="i"] .fam-grp .prodgrid{grid-auto-columns:62%}}
main[data-look="j"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){main[data-look="j"] .prodgrid{grid-template-columns:minmax(0,1fr)}}
main[data-look="k"] .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
main[data-look="k"] .fam-grp h2{padding-bottom:8px;border-bottom:1px solid var(--ink);margin-bottom:0}
@media (max-width:900px){main[data-look="k"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){main[data-look="k"] .prodgrid{grid-template-columns:minmax(0,1fr)}}
/* L: poster tiles. Tall pictures, the name on a white label over the foot of the picture, tags on the picture */
main[data-look="l"] .cat-layout{grid-template-columns:minmax(0,1fr)}
main[data-look="l"] .prodgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){main[data-look="l"] .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){main[data-look="l"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ===== Parts and spares on the side (18 Oct 2026, Junaid: parts must not take the main attention) ===== */
.fam-side{margin:28px 0 8px;padding-top:16px;border-top:1px solid var(--line)}
.fam-side h2{font-weight:500;color:var(--muted)}
.fam-side-l{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px}
/* ===== Catalogue menus and looks M to O (Junaid, 18 Oct 2026: "the side menu has to be redesigned... work on the top
   menu... mix and match"). Every range and group carries an icon (.ci) and its name (.cl); the old looks hide the icon.
   Icon rail (top menu): looks L and O, and every new look on phones. Range panel (side menu): looks M and N. ===== */
main[data-look="l"] .filters-mobile,main[data-look="o"] .filters-mobile,main[data-look="m"] .filters-mobile,main[data-look="n"] .filters-mobile{
  flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
  margin:0 0 26px;padding:2px 2px 16px;border-bottom:1px solid var(--line)}
main[data-look="l"] .filters-mobile::-webkit-scrollbar,main[data-look="o"] .filters-mobile::-webkit-scrollbar,main[data-look="m"] .filters-mobile::-webkit-scrollbar,main[data-look="n"] .filters-mobile::-webkit-scrollbar{display:none}
main[data-look="l"] .filters-mobile button,main[data-look="o"] .filters-mobile button,main[data-look="m"] .filters-mobile button,main[data-look="n"] .filters-mobile button{
  flex:1 0 auto;min-width:92px;max-width:132px;height:auto;display:grid;justify-items:center;align-content:start;gap:4px;padding:10px 8px 9px;
  border:1px solid transparent;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:none;color:var(--muted);font-size:12px;font-weight:500;line-height:1.25;text-align:center;
  white-space:normal;scroll-snap-align:start;transition:background .15s,border-color .15s,color .15s}
main[data-look="l"] .filters-mobile .ci,main[data-look="o"] .filters-mobile .ci,main[data-look="m"] .filters-mobile .ci,main[data-look="n"] .filters-mobile .ci{
  display:grid;place-items:center;width:44px;height:44px;margin-bottom:4px;border-radius:var(--radius);background:var(--panel);color:var(--icon,var(--ink));transition:background .15s,color .15s,box-shadow .15s}
main[data-look="l"] .filters-mobile i,main[data-look="o"] .filters-mobile i,main[data-look="m"] .filters-mobile i,main[data-look="n"] .filters-mobile i{font-style:normal;font-size:10.5px;font-weight:500;color:var(--muted);opacity:.85}
main[data-look="l"] .filters-mobile button:hover,main[data-look="o"] .filters-mobile button:hover,main[data-look="m"] .filters-mobile button:hover,main[data-look="n"] .filters-mobile button:hover{color:var(--ink)}
main[data-look="l"] .filters-mobile button:hover .ci,main[data-look="o"] .filters-mobile button:hover .ci,main[data-look="m"] .filters-mobile button:hover .ci,main[data-look="n"] .filters-mobile button:hover .ci{box-shadow:0 0 0 2px rgba(var(--prgb),.12)}
main[data-look="l"] .filters-mobile button[aria-pressed="true"],main[data-look="o"] .filters-mobile button[aria-pressed="true"],main[data-look="m"] .filters-mobile button[aria-pressed="true"],main[data-look="n"] .filters-mobile button[aria-pressed="true"]{
  color:var(--ink);font-weight:500;background:#fff;border-color:var(--line);box-shadow:0 10px 24px -18px rgba(20,24,28,.45)}
main[data-look="l"] .filters-mobile button[aria-pressed="true"] .ci,main[data-look="o"] .filters-mobile button[aria-pressed="true"] .ci,main[data-look="m"] .filters-mobile button[aria-pressed="true"] .ci,main[data-look="n"] .filters-mobile button[aria-pressed="true"] .ci{background:var(--primary);color:#fff}
@media (max-width:600px){main[data-look="l"] .filters-mobile button,main[data-look="o"] .filters-mobile button,main[data-look="m"] .filters-mobile button,main[data-look="n"] .filters-mobile button{min-width:82px;padding:8px 6px;font-size:11.5px}
main[data-look="l"] .filters-mobile .ci,main[data-look="o"] .filters-mobile .ci,main[data-look="m"] .filters-mobile .ci,main[data-look="n"] .filters-mobile .ci{width:40px;height:40px;border-radius:var(--radius)}}
main[data-look="a"] .cat-layout,main[data-look="c"] .cat-layout,main[data-look="d"] .cat-layout,main[data-look="f"] .cat-layout,main[data-look="h"] .cat-layout,main[data-look="j"] .cat-layout,main[data-look="k"] .cat-layout,main[data-look="m"] .cat-layout,main[data-look="n"] .cat-layout,main[data-look="p"] .cat-layout{grid-template-columns:268px minmax(0,1fr)}
#plpMain .filters .fbox{padding:18px 12px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 18px 40px -34px rgba(20,24,28,.35)}
#plpMain .filters .fhelp2{margin-top:14px;border-radius:var(--radius);padding:18px;background:linear-gradient(160deg,var(--tint),#fff 72%)}
main[data-look="m"] .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
main[data-look="n"] .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* -- O: the icon rail over large editorial cards, three a row: a big picture, the range as an eyebrow, the name, two lines
   of copy and the tags; no box, the picture frame takes the hover ring */
main[data-look="o"] .cat-layout{grid-template-columns:minmax(0,1fr)}
main[data-look="o"] .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* -- section headings on family pages in the new looks */
main[data-look="m"] .fam-grp h2,main[data-look="n"] .fam-grp h2,main[data-look="o"] .fam-grp h2,main[data-look="l"] .fam-grp h2{font-size:20px;font-weight:500}
@media (max-width:1100px){main[data-look="a"] .cat-layout,main[data-look="c"] .cat-layout,main[data-look="d"] .cat-layout,main[data-look="f"] .cat-layout,main[data-look="h"] .cat-layout,main[data-look="j"] .cat-layout,main[data-look="k"] .cat-layout,main[data-look="m"] .cat-layout,main[data-look="n"] .cat-layout,main[data-look="p"] .cat-layout{grid-template-columns:232px minmax(0,1fr)}
main[data-look="m"] .prodgrid,main[data-look="n"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
main[data-look="o"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){main[data-look="a"] .cat-layout,main[data-look="c"] .cat-layout,main[data-look="d"] .cat-layout,main[data-look="f"] .cat-layout,main[data-look="h"] .cat-layout,main[data-look="j"] .cat-layout,main[data-look="k"] .cat-layout,main[data-look="m"] .cat-layout,main[data-look="n"] .cat-layout,main[data-look="p"] .cat-layout{grid-template-columns:minmax(0,1fr)}
main[data-look="m"] .prodgrid,main[data-look="n"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){main[data-look="o"] .prodgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){main[data-look="a"] .filters-mobile,main[data-look="c"] .filters-mobile,main[data-look="d"] .filters-mobile,main[data-look="f"] .filters-mobile,main[data-look="h"] .filters-mobile,main[data-look="j"] .filters-mobile,main[data-look="k"] .filters-mobile,main[data-look="p"] .filters-mobile{flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 0 22px;padding:2px 2px 14px;border-bottom:1px solid var(--line)}
main[data-look="a"] .filters-mobile button,main[data-look="c"] .filters-mobile button,main[data-look="d"] .filters-mobile button,main[data-look="f"] .filters-mobile button,main[data-look="h"] .filters-mobile button,main[data-look="j"] .filters-mobile button,main[data-look="k"] .filters-mobile button,main[data-look="p"] .filters-mobile button{flex:1 0 auto;min-width:82px;max-width:124px;height:auto;display:grid;justify-items:center;align-content:start;gap:4px;padding:8px 6px;border:1px solid transparent;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:none;color:var(--muted);font-size:11.5px;font-weight:500;line-height:1.25;text-align:center;white-space:normal;scroll-snap-align:start}
main[data-look="a"] .filters-mobile .ci,main[data-look="c"] .filters-mobile .ci,main[data-look="d"] .filters-mobile .ci,main[data-look="f"] .filters-mobile .ci,main[data-look="h"] .filters-mobile .ci,main[data-look="j"] .filters-mobile .ci,main[data-look="k"] .filters-mobile .ci,main[data-look="p"] .filters-mobile .ci{display:grid;place-items:center;width:40px;height:40px;margin-bottom:4px;border-radius:var(--radius);background:var(--panel);color:var(--icon,var(--ink))}
main[data-look="a"] .filters-mobile i,main[data-look="c"] .filters-mobile i,main[data-look="d"] .filters-mobile i,main[data-look="f"] .filters-mobile i,main[data-look="h"] .filters-mobile i,main[data-look="j"] .filters-mobile i,main[data-look="k"] .filters-mobile i,main[data-look="p"] .filters-mobile i{font-style:normal;font-size:10.5px;font-weight:500;color:var(--muted);opacity:.85}
main[data-look="a"] .filters-mobile button[aria-pressed="true"],main[data-look="c"] .filters-mobile button[aria-pressed="true"],main[data-look="d"] .filters-mobile button[aria-pressed="true"],main[data-look="f"] .filters-mobile button[aria-pressed="true"],main[data-look="h"] .filters-mobile button[aria-pressed="true"],main[data-look="j"] .filters-mobile button[aria-pressed="true"],main[data-look="k"] .filters-mobile button[aria-pressed="true"],main[data-look="p"] .filters-mobile button[aria-pressed="true"]{color:var(--ink);font-weight:500;background:#fff;border-color:var(--line);box-shadow:0 10px 24px -18px rgba(20,24,28,.45)}
main[data-look="a"] .filters-mobile button[aria-pressed="true"] .ci,main[data-look="c"] .filters-mobile button[aria-pressed="true"] .ci,main[data-look="d"] .filters-mobile button[aria-pressed="true"] .ci,main[data-look="f"] .filters-mobile button[aria-pressed="true"] .ci,main[data-look="h"] .filters-mobile button[aria-pressed="true"] .ci,main[data-look="j"] .filters-mobile button[aria-pressed="true"] .ci,main[data-look="k"] .filters-mobile button[aria-pressed="true"] .ci,main[data-look="p"] .filters-mobile button[aria-pressed="true"] .ci{background:var(--primary);color:#fff}}
/* -- audit: B and I keep their chips, now with a small icon each, on one line that slides sideways instead of wrapping */
main[data-look="b"] .filters-mobile,main[data-look="i"] .filters-mobile{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 2px 6px;scroll-snap-type:x proximity}
main[data-look="b"] .filters-mobile::-webkit-scrollbar,main[data-look="i"] .filters-mobile::-webkit-scrollbar{display:none}
main[data-look="b"] .filters-mobile button,main[data-look="i"] .filters-mobile button{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 5px;font-size:12.5px;font-weight:500;scroll-snap-align:start;transition:background .15s,border-color .15s,color .15s}
main[data-look="b"] .filters-mobile .ci,main[data-look="i"] .filters-mobile .ci{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel);color:var(--icon,var(--ink))}
main[data-look="b"] .filters-mobile .ci svg,main[data-look="i"] .filters-mobile .ci svg{width:15px;height:15px}
main[data-look="b"] .filters-mobile i,main[data-look="i"] .filters-mobile i{font-style:normal;font-size:11px;color:var(--muted);margin-left:2px}
main[data-look="b"] .filters-mobile button:hover,main[data-look="i"] .filters-mobile button:hover{border-color:rgba(var(--prgb),.35)}
main[data-look="b"] .filters-mobile button[aria-pressed="true"] .ci,main[data-look="i"] .filters-mobile button[aria-pressed="true"] .ci{background:rgba(255,255,255,.16);color:#fff}
main[data-look="b"] .filters-mobile button[aria-pressed="true"] i,main[data-look="i"] .filters-mobile button[aria-pressed="true"] i{color:rgba(255,255,255,.75)}
/* -- audit: E and G keep their text tabs, on one line that slides sideways (they wrapped onto a second line) */
main[data-look="e"] .filters-mobile,main[data-look="g"] .filters-mobile{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
main[data-look="e"] .filters-mobile::-webkit-scrollbar,main[data-look="g"] .filters-mobile::-webkit-scrollbar{display:none}
main[data-look="e"] .filters-mobile button,main[data-look="g"] .filters-mobile button{flex:none;white-space:nowrap}
/* ===== Menus you can always scroll to the end (Junaid, 18 Oct 2026: "we have to scroll all the way down... same issue on
   mobile") ===== */
@media (min-width:901px){.cat-layout .filters{max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:0 6px 8px 2px;margin:0 -6px 0 -2px}
html.sticky-head .cat-layout .filters{max-height:calc(100vh - var(--stick-h,0px) - 32px)}
.cat-layout .filters::-webkit-scrollbar{width:6px}
.cat-layout .filters::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--radius)}}
main[data-look="p"] .prodgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1240px){main[data-look="p"] .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){main[data-look="p"] .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ==== SHOP SKIN 2026: the catalogue (21 Oct 2026). The range sidebar is a plain list (no box), the open range a tint pill;
   the help card a tint wash with white tiles; the count chip, the same-day banner, the guide chips, the Show more button and
   the range strips lose their outlines for a shadow or a panel fill. ==== */
#plpMain .filters .fbox,.filters .fbox{border:0;box-shadow:none;background:transparent;padding:4px 0 10px}
#plpMain .filters h3{margin-left:10px}
#plpMain .filters button[aria-pressed="true"]{background:var(--tint)}
#plpMain .filters .fhelp2,.filters .fhelp,.fhelp.fhelp2{border:0;background:linear-gradient(160deg,var(--tint),var(--panel) 85%);box-shadow:none}
.fhelp2 .fh-ic{border:0;background:#fff;box-shadow:var(--card-sh)}
.fhelp2 .fh-tel{border:0;background:#fff;box-shadow:var(--card-sh)}
.fhelp2 .fh-tel:hover{background:#fff;box-shadow:var(--card-sh2)}
.results-h .rcount{border:0;background:var(--panel)}
.sdbanner{border:0;box-shadow:var(--card-sh)}
.sdbanner .sdb-ic{background:var(--tint)}
.sdbanner .sdb-link{border:0;background:var(--panel)}
.sdbanner .sdb-link:hover{background:var(--tint)}
.dsp-also{border:0;box-shadow:var(--card-sh)}
.dsp-also:hover{box-shadow:var(--card-sh2)}
.plp-guides a{border:0;background:var(--panel)}
.plp-guides a:hover{background:var(--tint)}
.more-btn{border:0;box-shadow:var(--card-sh)}
.more-btn:hover{background:var(--panel);box-shadow:var(--card-sh2)}
.more-bar{background:var(--tint)}
/* range strips: the track floats (E and G), chips are panel pills (B and I), the open one keeps its ink; rails lose the line */
main[data-look="e"] .filters-mobile,main[data-look="g"] .filters-mobile{border:0;box-shadow:var(--card-sh)}
main[data-look="b"] .filters-mobile button,main[data-look="i"] .filters-mobile button{border-color:transparent;background:var(--panel)}
main[data-look="b"] .filters-mobile button:hover,main[data-look="i"] .filters-mobile button:hover{border-color:transparent;background:var(--tint)}
main[data-look] .filters-mobile button[aria-pressed="true"]{border-color:transparent}
main[data-look="b"] .filters-mobile button[aria-pressed="true"],main[data-look="i"] .filters-mobile button[aria-pressed="true"]{background:var(--primary)}

/* ---- NO LAYOUT SHIFT (31 Oct 2026): the category list keeps its height while products.html fills it, so the help card under it stays put */
@media (min-width:901px){#catList:empty{min-height:604px}}

/* ---- DEPARTMENT HEADER (7 Nov 2026, Junaid: "combining both"): products.html?g=<department> opens on a warm band with the name large,
   the menu's intro, two ways on and the department's best seller on its photo grey; the sidebar and grouped grid stay as they were. */
.dept-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px;align-items:center;margin:4px 0 28px;padding:40px 44px;border-radius:var(--radius-card,var(--radius));background:var(--panel)}
.dh-k{display:block;font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.dept-hero h1{margin:10px 0 0;font-size:clamp(36px,4.17vw,60px);font-weight:500;line-height:1.08;letter-spacing:-.5px;color:var(--ink)}
.dept-hero h1 i{font-style:normal;color:var(--logo)}
.dept-hero p{margin:14px 0 0;max-width:58ch;font-size:15px;line-height:1.65;color:var(--body,var(--muted))}
.dh-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.dh-act .btn-ghost{height:46px;padding:0 20px;background:transparent}
.dh-pic{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#EBEDEF;text-decoration:none}
.dh-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.dh-pic:hover img{transform:scale(1.03)}
.dh-cap{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.94);color:var(--ink)}
.dh-cap small{font-size:10px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.dh-cap b{font-size:13.5px;font-weight:500}
body.has-dept-hero .plp-intro{margin-top:0}
@media (max-width:1100px){.dept-hero{grid-template-columns:minmax(0,1fr) minmax(0,340px);padding:32px}}
@media (max-width:900px){.dept-hero{grid-template-columns:1fr;gap:20px;padding:24px 20px;margin-bottom:20px}.dept-hero h1{font-size:36px}.dept-hero p{font-size:14px}.dh-pic{aspect-ratio:16/10;order:-1}.dh-pic img{object-fit:contain}}
/* phones: the department page's two buttons the same full width (8 Nov 2026) */
@media (max-width:520px){html .dh-act{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}html .dh-act .btn,html .dh-act .btn-ghost{width:100%;justify-content:center;text-align:center}}