/* Ewood Foods — Product Guide */
:root{
  /* Ewood Foods logo blue (#0154A0) and its lilac-blue partner (#ACB5DB) */
  --brand:#0154a0;
  --brand-dk:#013f7a;
  --brand-lt:#e9f0f8;
  --brand-2:#acb5db;
  --amber:#b8710f;
  --amber-lt:#fdf3e3;
  --red:#b3261e;
  --red-lt:#fceceb;
  --ink:#1a2030;
  /* secondary text: dark navy to match the Ewood theme (was grey) */
  --ink-2:#14305c;
  --ink-3:#2f4670;
  --line:#e1e5ee;
  --bg:#ffffff;
  --surface:#f5f7fb;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,28,56,.06),0 4px 16px rgba(16,28,56,.06);
  --max:1360px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.55;
}
/* Body copy is Lato; headings, buttons and labels keep Montserrat */
h1,h2,h3,h4,.btn,button,.brand,.chip,.pill,.badge,.flash,.featname,.otbar b,.otph b,.fitem.group,
.panel h3,.resbar h1,.card .nm,.card h3,.pdp h1{font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
input,select,textarea{font-family:inherit}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
.topbar{background:var(--brand-dk);color:#d5def0;font-size:13px}
.topbar .wrap{display:flex;gap:20px;align-items:center;min-height:38px;flex-wrap:wrap}
.topbar a{color:#d5def0;text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .sp{margin-left:auto}

header.site{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:40}
header.site .wrap{display:flex;align-items:center;gap:24px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand img{height:42px;width:auto}
.brand .txt{font-weight:800;letter-spacing:-.02em;font-size:18px;color:var(--brand);line-height:1.1}
.brand .txt small{display:block;font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

.searchbox{flex:1;position:relative;max-width:560px}
.searchbox input{
  width:100%;padding:11px 42px 11px 15px;border:1.5px solid var(--line);
  border-radius:var(--radius);font:inherit;font-size:14px;background:var(--surface);
}
.searchbox input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-lt)}
.searchbox .ico{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}

.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn{
  display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);padding:9px 15px;border-radius:var(--radius);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;
}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dk);border-color:var(--brand-dk);color:#fff}
.btn .count{background:rgba(255,255,255,.22);padding:1px 7px;border-radius:99px;font-size:12px}
.btn.ghost{border-color:transparent;background:transparent}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:288px 1fr;gap:34px;padding:26px 0 70px}
@media(max-width:980px){.layout{grid-template-columns:1fr;gap:0}}

aside.filters{align-self:start;position:sticky;top:94px;max-height:calc(100vh - 116px);overflow-y:auto;padding-right:4px}
@media(max-width:980px){
  /* full-screen filter drawer: it scrolls on its own, and the page behind it doesn't */
  aside.filters{position:fixed;inset:0;top:0;z-index:70;background:#fff;align-self:stretch;
    height:100vh;height:100dvh;max-height:none;padding:18px 20px 0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:none}
  aside.filters.open{display:block}
  body.filters-open{overflow:hidden}
  /* always-there way out of the drawer */
  .filters-apply{display:flex;gap:8px;position:sticky;bottom:0;z-index:2;background:#fff;
    margin:10px -20px 0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .filters-apply .btn{flex:1;justify-content:center;padding:12px}
  .filters-close{position:sticky;top:-18px;z-index:2;background:#fff;display:flex;
    justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);
    margin:-18px -20px 14px;padding:16px 20px 12px}
}
.filters-close,.filters-apply{display:none}
@media(max-width:980px){.filters-close,.filters-apply{display:flex}}

.panel{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;background:#fff}
.panel > h3{
  margin:0;padding:12px 15px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);background:var(--surface);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;cursor:pointer;
}
.panel > h3 .chev{transition:transform .18s;color:var(--ink-3)}
.panel.collapsed > h3 .chev{transform:rotate(-90deg)}
.panel.collapsed .panel-body{display:none}
.panel-body{padding:7px}

.fitem{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none;
  font:inherit;font-size:13.5px;color:var(--ink-2);padding:7px 9px;border-radius:7px;cursor:pointer;line-height:1.35;
}
.fitem:hover{background:var(--surface);color:var(--ink)}
.fitem.on{background:var(--brand-lt);color:var(--brand-dk);font-weight:700}
.fitem .n{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex-shrink:0}
.fitem.on .n{color:var(--brand)}
.fitem.group{font-weight:800;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-top:6px}
.fitem.sub{padding-left:20px}
/* categories that open into sub-categories say so */
.fitem.sub.opens{padding-left:6px;gap:5px}
.fitem .chev{display:inline-flex;align-items:center;justify-content:center;width:15px;flex-shrink:0;
  color:var(--ink-3);transition:transform .14s}
.fitem.sub.opens.on .chev{transform:rotate(90deg);color:var(--brand)}
.fitem.sub.opens:hover .chev{color:var(--brand)}
@media (prefers-reduced-motion:reduce){.fitem .chev{transition:none}}
.fitem input[type=checkbox]{accent-color:var(--brand);width:15px;height:15px;margin:0;flex-shrink:0}

.legend{display:flex;gap:12px;padding:9px 13px;font-size:11.5px;color:var(--ink-3);border-top:1px solid var(--line);flex-wrap:wrap}
.legend b{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.dot{width:9px;height:9px;border-radius:99px;display:inline-block}
.dot.r{background:var(--red)} .dot.a{background:var(--amber)} .dot.g{background:#c3c9d6}

/* ---------- results ---------- */
.resbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.resbar h1{font-size:21px;margin:0;letter-spacing:-.02em;font-weight:800}
.resbar .sub{color:var(--ink-3);font-size:13.5px}
.resbar .sp{margin-left:auto;display:flex;gap:9px;align-items:center}
select.sort{border:1.5px solid var(--line);border-radius:var(--radius);padding:8px 12px;font:inherit;font-size:13.5px;background:#fff}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--brand-lt);color:var(--brand-dk);
  border:1px solid #cfe5da;border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:600}
.chip button{border:0;background:none;cursor:pointer;color:inherit;font-size:15px;line-height:1;padding:0;opacity:.6}
.chip button:hover{opacity:1}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px}
.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}
.card:hover{box-shadow:var(--shadow);border-color:#c9d3e6}
.card .ph{aspect-ratio:4/3;background:var(--surface) center/cover no-repeat;display:block;position:relative}
.card .ph .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:12px}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;box-sizing:border-box;z-index:1;background:#fff}
.card .body{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1;gap:7px}
.card .code{font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1.2}
.card h3{margin:0;font-size:14px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--brand)}
.card .pack{font-size:12.5px;color:var(--ink-2)}
.card .usp{font-size:12.5px;line-height:1.45;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .alg{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:9px}
.tag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.02em}
.tag.r{background:var(--red-lt);color:var(--red)}
.tag.a{background:var(--amber-lt);color:var(--amber)}
.card .add{margin-top:10px}
.card .add button{width:100%;justify-content:center}

.empty{text-align:center;padding:70px 20px;color:var(--ink-3)}
.empty h2{color:var(--ink);font-size:18px;margin:0 0 8px}

.pager{display:flex;gap:7px;justify-content:center;align-items:center;margin-top:34px;flex-wrap:wrap}
.pager button{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:8px 13px;
  font:inherit;font-size:13.5px;cursor:pointer;font-weight:600;color:var(--ink-2)}
.pager button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.pager button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pager button:disabled{opacity:.4;cursor:default}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:46px;padding:30px 0 50px}
@media(max-width:860px){.pdp{grid-template-columns:1fr;gap:26px}}
.pdp .hero{border:1px solid var(--line);border-radius:var(--radius);aspect-ratio:1;background:var(--surface) center/cover no-repeat}
.crumb{font-size:13px;color:var(--ink-3);padding:18px 0 0}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--brand)}
.pdp h1{font-size:27px;margin:4px 0 6px;letter-spacing:-.025em;line-height:1.2}
.pdp .code{font-size:18px;font-weight:800;letter-spacing:.04em;color:var(--brand);font-variant-numeric:tabular-nums}
.pdp .lede{font-size:16px;color:var(--ink-2);margin:14px 0 0;line-height:1.6}
.spec{display:grid;grid-template-columns:150px 1fr;gap:10px 18px;margin:24px 0;padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px}
.spec dt{font-weight:700;color:var(--ink-2)}
.spec dd{margin:0}
h2.sec{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);margin:26px 0 12px}
.alg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.alg-cell{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff}
.alg-cell.contains{background:var(--red-lt);border-color:#f0cfcd;color:var(--red);font-weight:700}
.alg-cell.may{background:var(--amber-lt);border-color:#f0dcbb;color:var(--amber);font-weight:700}
.alg-cell.free{color:var(--ink-3)}
/* the manufacturer's full Erudus declaration, under the tiles */
.eabox{margin:18px 0 0;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:#fff}
.eabox h3.subh{margin:0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-weight:800}
.eabox .fine{margin:4px 0 12px}
.eagrid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.earow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.earow.sub{padding-left:14px;color:var(--ink-2);font-size:13px}
.earow.sub span:first-child::before{content:"↳";margin-right:6px;color:var(--ink-3);font-size:11px}
.eaval{flex:none;font-weight:700;color:var(--ink-3)}
.eaval.yes{color:var(--red)}
.eaval.may{color:var(--amber)}
.eaval small{font-weight:600;opacity:.85}
.eastate{margin:12px 0 0;font-size:13px;color:var(--ink-2);line-height:1.6}
@media (max-width:640px){.eagrid{grid-template-columns:1fr;gap:0}}

/* diet marks — always green, label on hover or tap */
.diets{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.diet{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:#e8f5ee;border:1px solid #c5e5d3;color:#22694a;cursor:default}
.diet svg{width:15px;height:15px}
.diet:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dtip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;line-height:1.3;white-space:nowrap;
  padding:5px 9px;border-radius:6px;opacity:0;visibility:hidden;transition:opacity .13s;pointer-events:none;z-index:8}
.dtip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-4px;border:4px solid transparent;border-top-color:var(--ink)}
.diet:hover .dtip,.diet:focus .dtip,.diet:focus-within .dtip{opacity:1;visibility:visible}
.diets.big .diet{width:27px;height:27px}
.diets.big .diet svg{width:17px;height:17px}
/* on a card: pinned to the image's top-right corner, opposite the offer flash,
   so they sit in the same place on every card whatever the allergen row does.
   The card clips its overflow for the rounded corners, so the label opens
   downwards and to the left — into the card, never past its edge. */
.card > .diets{position:absolute;top:10px;right:10px;z-index:3;gap:4px}
.card > .diets .diet{background:#fff;box-shadow:0 1px 4px rgba(20,30,50,.18)}
.card > .diets .dtip{top:calc(100% + 7px);bottom:auto;left:auto;right:0;transform:none;white-space:nowrap}
.card > .diets .dtip::after{top:auto;bottom:100%;left:auto;right:8px;margin-left:0;
  border-top-color:transparent;border-bottom-color:var(--ink)}
@media (max-width:420px){.dtip{white-space:normal;width:132px;text-align:center}
  .card > .diets .dtip{white-space:normal;width:max-content;max-width:132px;text-align:right}}
.prose{white-space:pre-line;font-size:14.5px;color:var(--ink-2);line-height:1.65}
.pdp .hero{position:relative;background-color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pdp .hero .noimg{color:var(--ink-3);font-size:13px}
.pdp .hero.vid{background:#000}
.pdp .hero.vid iframe,.pdp .hero.vid video{position:absolute;inset:0;width:100%;height:100%;border:0}
.stage .cap{font-size:12px;color:var(--ink-3);margin-top:6px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumbs .th{width:64px;height:64px;border:1.5px solid var(--line);border-radius:8px;background:#fff center/cover no-repeat;
  cursor:pointer;padding:0;position:relative}
.thumbs .th.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-lt)}
.thumbs .th.is-vid{background-color:var(--ink)}
.thumbs .th.is-vid::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.xtra{margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);padding:4px 18px 18px;background:var(--surface)}
.xtra h2.sec{margin-top:16px}
.xtra h3{font-size:16px;margin:4px 0 8px}
.xtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 -18px 14px;padding:0 12px}
.xtabs button{border:0;background:none;padding:14px 8px 11px;font:inherit;font-size:13px;font-weight:700;color:var(--ink-3);
  cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px}
.xtabs button[aria-selected=true]{color:var(--brand);border-bottom-color:var(--brand)}
.xtra .fine{font-size:12px;color:var(--ink-3);margin:12px 0 0}
.recipe-img{display:block;margin-top:12px}
.recipe-img img{width:100%;border-radius:8px;border:1px solid var(--line);display:block}
.related{padding:0 0 70px}
.related h2.sec{margin-top:0}
.rel-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.rel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ---------- enquiry ---------- */
.form{max-width:640px;margin:0 auto;padding:30px 0 80px}
.form label{display:block;margin-bottom:15px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.form input,.form textarea{width:100%;margin-top:6px;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:var(--radius);font:inherit;font-size:14.5px;font-weight:400;color:var(--ink);background:#fff}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
.linerow{display:flex;gap:13px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.linerow .ph{width:52px;height:52px;border-radius:7px;background:var(--surface) center/cover no-repeat;flex-shrink:0}
.linerow .rm{margin-left:auto;border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:19px;line-height:1}
.linerow .rm:hover{color:var(--red)}

footer.site{border-top:1px solid var(--line);background:var(--surface);padding:34px 0;font-size:13px;color:var(--ink-3)}
footer.site .wrap{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
footer.site a{color:var(--ink-2)}
.note{background:#fffbe9;border:1px solid #f0e2b6;color:#6b5618;padding:11px 15px;
  border-radius:8px;font-size:12.5px;margin:14px 0}

.mobonly{display:none}
@media(max-width:980px){.mobonly{display:inline-flex}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.fitem.sub2{padding-left:34px;font-size:12.5px;color:var(--ink-3);border-left:2px solid var(--line);margin-left:16px;border-radius:0 7px 7px 0}
.fitem.sub2:hover{border-left-color:var(--brand);color:var(--ink)}
.fitem.sub2.on{border-left-color:var(--brand);background:var(--brand-lt);color:var(--brand-dk);font-weight:700}

/* ---------- rep view ---------- */
.card .supp{font-size:12px;color:var(--brand);font-weight:700}
.topbar a[data-replink].on{background:rgba(255,255,255,.14);padding:3px 10px;border-radius:99px}
.trade{margin-top:22px;border:1.5px solid #c7d6ec;background:var(--brand-lt);border-radius:var(--radius);padding:2px 18px 16px}
.trade-hd{display:flex;align-items:center;gap:10px}
.trade-hd h2.sec{margin:16px 0 8px}
.trade .badge{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--brand);color:#fff;
  padding:3px 8px;border-radius:99px;margin-top:6px}
.trade .trade-spec{margin:6px 0 14px;padding:12px 0;border-color:#c7d6ec}
.trade-notes{font-size:13.5px;margin:0 0 14px}
.trade .fine,.rep .fine{font-size:12.5px;color:var(--ink-3);margin:10px 0 0}
.rep{max-width:460px;margin:0 auto;padding:50px 0 90px}
.rep h1{font-size:26px;letter-spacing:-.02em;margin-bottom:6px}
.rep p{color:var(--ink-2)}
.rep label{display:block;margin-bottom:14px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.rep input{width:100%;margin-top:6px;padding:11px 13px;border:1.5px solid var(--line);border-radius:8px;font:inherit;font-size:15px}
.rep input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
.rep .msg{margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.rep .pw{margin-top:26px;border-top:1px solid var(--line);padding-top:6px}

/* ---------- allergen symbols ---------- */
.aico{flex:none;display:inline-block;vertical-align:middle}
.alg-cell .aico{width:22px;height:22px}
.alg-cell.free .aico{opacity:.7}
.fitem .aico{width:16px;height:16px;margin-right:6px;color:var(--ink-3)}
.fitem.on .aico{color:var(--brand)}
.tag{display:inline-flex;align-items:center;gap:3px}
.tag .aico{width:12px;height:12px;stroke-width:2}
.panel.collapsed .legend{display:none}
.pdp .desc{margin:12px 0 0;font-size:14.5px}
.xtra h4.subh{margin:14px 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* supplier banners (4:1, top of category listings) and square side adverts */
.adslot{position:relative}
.adslot .slides{position:relative}
.adslot .slide{display:none}
.adslot .slide.on{display:block;animation:adfade .5s ease}
@keyframes adfade{from{opacity:.25}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.adslot .slide.on{animation:none}}
.adslot .art,.adslot .art img{display:block;width:100%;height:100%}
.adslot .art img{object-fit:cover}
.adslot .banner,.adslot .sidead{display:block;position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface)}
.adslot a.banner:focus-visible,.adslot a.sidead:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.adslot.top{margin:0 0 16px}
.adslot .banner{aspect-ratio:4/1}
.adslot .sidead{aspect-ratio:1}
.adslot.side{margin:0 0 16px}
.adslot .adtag{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);color:var(--ink-2);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:5px}
.adslot .dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.adslot .dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:#c9d3e6;cursor:pointer}
.adslot .dots button.on{background:var(--brand)}
.adslot.mob{display:none!important}
@media(max-width:640px){.adslot .banner.hasm{aspect-ratio:2/1}}
@media(max-width:980px){
  aside.filters .adslot.side{display:none!important}
  .adslot.mob[data-has]{display:block!important;max-width:360px;margin:22px auto 0}
}
/* phones: logo + actions on one row, search full width below */
@media(max-width:640px){
  header.site .wrap{flex-wrap:wrap;gap:10px 12px;padding-top:10px;padding-bottom:10px;min-height:0}
  .brand img{height:34px}
  .brand .txt{font-size:15px}
  .searchbox{order:3;flex:1 0 100%;max-width:none}
  .hdr-actions{gap:8px}
  .hdr-actions .btn{padding:8px 12px}
}

/* Become a customer (hidden for signed-in reps) */
.becust{display:flex;flex-direction:column;gap:2px;text-decoration:none;background:var(--brand);color:#fff;border-radius:var(--radius);
  padding:13px 16px;margin:0 0 16px;box-shadow:0 2px 8px rgba(1,84,160,.18);transition:background .15s}
.becust:hover{background:var(--brand-dk)}
.becust b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.becust span{font-size:12.5px;opacity:.9}
.becust.mob{display:none}
@media(max-width:980px){
  .becust.mob{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin:14px 0 14px;padding:11px 14px}
  aside.filters .becust{display:none}
}

/* featured categories carousel (home page) */
.featslot{margin:0 0 22px}
.feathd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.feathd h2{font-size:14px;margin:0;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.feathd .sp{flex:1}
.featnav{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:22px;line-height:1;
  color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.featnav:hover{border-color:var(--brand);color:var(--brand)}
.featnav:disabled{opacity:.35;cursor:default;border-color:var(--line);color:var(--ink-2)}
.feattrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * 14px) / 5);gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 6px;scroll-behavior:smooth}
.feattrack::-webkit-scrollbar{display:none}
.feattile{scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:#fff;transition:box-shadow .18s,border-color .18s}
.feattile:hover,.feattile:focus-visible{box-shadow:var(--shadow);border-color:#c9d3e6}
.featimg{position:relative;display:block;aspect-ratio:1;background:var(--brand-lt)}
.featimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.featimg:not(.art) img{object-fit:contain;padding:12%;background:#fff}
.featname{font-weight:800;font-size:13.5px;line-height:1.3;padding:10px 12px 0;color:var(--ink)}
.featn{font-size:12px;color:var(--ink-3);padding:2px 12px 12px}
@media(max-width:1200px){.feattrack{grid-auto-columns:calc((100% - 3 * 14px) / 4)}}
@media(max-width:760px){.feattrack{grid-auto-columns:calc((100% - 2 * 12px) / 2.4);gap:12px}.featnav{display:none}}

/* rep tools: price toggle + price list */
.repbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--brand-lt);border:1px solid #cddcec;
  border-radius:var(--radius);padding:9px 14px;margin:0 0 16px;font-size:13px}
.repbar .sp{flex:1}
.repbar .fine{color:var(--ink-2)}
.repbar .tlab{font-weight:700;color:var(--brand-dk)}
/* on/off switch (named so it can't clash with other .toggle classes) */
.ewsw{position:relative;width:44px;height:24px;flex:none;border:0;border-radius:99px;background:#c3ccda;cursor:pointer;padding:0;
  transition:background .16s}
.ewsw.on{background:var(--brand)}
.ewsw .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(20,30,50,.3);transition:transform .16s}
.ewsw.on .knob{transform:translateX(20px)}
.ewsw:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}
.card .cprice{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.card .cprice b{font-weight:800}
.card .cprice .pu{color:var(--ink-3);font-size:12px;font-weight:600}
/* which price list the rep is building — chosen once, in the rep bar */
.repbar .pllab{font-weight:700;color:var(--brand-dk)}
.plpick{max-width:220px;border:1.5px solid #cddcec;background:#fff;color:var(--brand-dk);border-radius:99px;
  font:inherit;font-size:13px;font-weight:700;padding:6px 10px;cursor:pointer}
.plpick:hover{border-color:var(--brand)}

/* one tap to put a product on that list — on cards and on the product page */
.plbtn{border:1.5px solid #cddcec;background:#fff;color:var(--brand-dk);border-radius:99px;font:inherit;
  font-size:12.5px;font-weight:700;padding:7px 12px;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.plbtn:hover{border-color:var(--brand);background:var(--brand-lt)}
.plbtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.plbtn.on:hover{background:var(--brand-dk);border-color:var(--brand-dk)}
.plbtn[disabled]{opacity:.55;cursor:default}
.plbtn:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}
.plbtn.big{font-size:14px;padding:10px 16px}
.card .add{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card .add .plbtn{margin-left:auto}
.tpadd{margin:12px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* naming the first list, without leaving the product */
.plnewbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(20,30,50,.14);padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
.plnewbar form{max-width:var(--wrap,1200px);margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plnewbar label{font-weight:700;color:var(--ink);font-size:14px}
.plnewbar input{flex:1;min-width:200px;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;font:inherit}
.plnewbar input:focus{outline:none;border-color:var(--brand)}
.plnewbar .fine{width:100%;margin:0;color:var(--ink-3)}
.plall{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);margin:0 0 12px}
.trade-price{border-top:1px solid #cddcec;margin-top:12px;padding-top:12px}
.tprow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tplab{font-weight:700;color:var(--ink-2);font-size:13px}
.tpval{font-size:18px;font-weight:800;color:var(--brand-dk)}
.plqty{width:70px;padding:7px 8px;border:1.5px solid var(--line);border-radius:7px;font:inherit;font-size:13.5px;text-align:right}
/* margin worked out from the trade price — internal, never on the printed sheet */
.plmargin{width:62px;padding:7px 6px;border:1.5px solid var(--line);border-radius:7px;font:inherit;font-size:13.5px;text-align:right}
.plmargin:disabled{background:var(--surface);color:var(--ink-3)}
.pltab .pcs{color:var(--ink-3);font-size:12px;margin-left:3px}
.pltab tfoot td{border-top:2px solid var(--brand);border-bottom:0;padding-top:12px;font-size:14px}
.pltab .tot{white-space:nowrap}
.repchk{font-size:14px}
.repchk label{display:inline-flex;gap:8px;align-items:center;font-weight:600}

/* price lists */
.pl{padding:22px 0 60px}
.plhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.plhd h1{font-size:24px;margin:0;letter-spacing:-.02em}
.plhd .sp{flex:1}
.plnew{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.plnew input{padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;font:inherit;font-size:14px;min-width:220px}
.pllist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.plrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff}
.plrow .sp{flex:1}
.plrow .pill{background:var(--brand-lt);color:var(--brand-dk);font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px}
.plhead{display:flex;gap:20px;align-items:flex-start;border-bottom:2px solid var(--brand);padding-bottom:12px;margin:18px 0 14px}
.plhead h1{font-size:23px;margin:0;letter-spacing:-.02em}
.plhead .sp{flex:1}
.plco{margin-left:auto;text-align:right;font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column}
.plco b{color:var(--brand);font-size:14px}
.pltab{width:100%;border-collapse:collapse;font-size:13.5px}
.pltab th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--line)}
.pltab td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.pltab .r{text-align:right}
.pltab .code{font-weight:800;color:var(--brand)}
.pltab .sub{color:var(--ink-3)}
.plprice{width:92px;padding:7px 8px;border:1.5px solid var(--line);border-radius:7px;font:inherit;font-size:13.5px;text-align:right}
.plnote{width:100%;max-width:200px;padding:7px 8px;border:1.5px solid var(--line);border-radius:7px;font:inherit;font-size:13px}
.ponly{display:none}
.plfoot{font-size:11.5px;color:var(--ink-3);margin-top:16px}
@media print{
  .topbar,header.site,footer.site,.noprint{display:none!important}
  .ponly{display:inline}
  .pl{padding:0}
  .pltab{font-size:10pt}
  .pltab tr{break-inside:avoid}
  @page{size:A4 portrait;margin:14mm}
}

/* offers: Featured / New in / Reduced to clear */
.card{position:relative}
.card .deal{position:absolute;top:10px;left:10px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.03em;
  padding:4px 9px;border-radius:99px;background:var(--brand);color:#fff;box-shadow:0 1px 4px rgba(20,30,50,.25)}
/* offers carry their own colour from the database, set inline */
#dealList .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none}
.pdp .deal{display:inline-block;text-decoration:none;font-size:12px;font-weight:800;padding:4px 10px;border-radius:99px;
  background:var(--brand);color:#fff;margin-bottom:8px}


/* empty and loading states — used on the price-list page as well as admin */
.empty-sm{padding:40px;text-align:center;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:10px}

/* offer tiles ("Featured", "New Lines") above the featured categories */
.offertiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 22px;align-items:stretch}
.offertiles.n1{grid-template-columns:minmax(0,1fr)}
.offertiles.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.otile{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;transition:box-shadow .15s,border-color .15s}
.otile:hover,.otile:focus-visible{box-shadow:var(--shadow);border-color:var(--oc)}
.otile:focus-visible{outline:2px solid var(--oc);outline-offset:2px}
.otimg{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;background:#f2f4f8}
.otph{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:0;aspect-ratio:3/1;background:var(--oc);color:#fff;padding:12px}
.otile.hasimg{justify-content:space-between}
.otph b{font-size:clamp(20px,3vw,30px);font-weight:800;letter-spacing:.01em;text-align:center}
.otbar{display:flex;align-items:baseline;gap:10px;padding:10px 14px;border-top:3px solid var(--oc)}
.otbar b{font-size:15px}
.otn{font-size:13px;color:var(--ink-3)}
.otgo{margin-left:auto;font-size:13px;font-weight:700;color:var(--oc);white-space:nowrap}
@media (max-width:640px){.offertiles,.offertiles.n3{grid-template-columns:minmax(0,1fr);gap:10px}.otbar{padding:9px 12px}}

/* rep bar: one switch per price list */
.swgrp{display:inline-flex;align-items:center;gap:8px;margin-right:14px}
/* several prices on a card: one tidy row, label over figure */
.card .cprices{display:grid;gap:6px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--surface)}
.card .cprices.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card .cprices.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card .cprices .cprice{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.card .cprices .cprice b{font-size:13.5px;white-space:nowrap}
.cplab{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);line-height:1.2}

/* landing area: featured categories five to a row, then a way into everything */
.featgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.featgrid .feattile{width:auto;min-width:0}
@media (max-width:1100px){.featgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){.featgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.featgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.browseall{display:flex;justify-content:center;margin:6px 0 28px}

/* price list colours: Cost red, Direct Ewood blue, School green */
.ewsw.t-cost.on{background:#c62828}
.ewsw.t-school.on{background:#2e7d4f}
.repbar .tlab.t-cost,.cprice.t-cost .cplab,.cprice.t-cost b,.tpval.t-cost{color:#c62828}
.repbar .tlab.t-school,.cprice.t-school .cplab,.cprice.t-school b,.tpval.t-school{color:#2e7d4f}
.ewsw.t-cost:focus-visible{outline-color:#f0b4b4}.ewsw.t-school:focus-visible{outline-color:#b9dcc6}

/* mini brochures: tile cards on the home page, under the featured categories */
.mbslot{margin:0 0 24px}
.mbhint{font-size:12.5px;color:var(--ink-3)}
.mbgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mbgrid.n1{grid-template-columns:minmax(0,1fr)}
.mbgrid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mbtile{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .2s}
.mbtile:hover,.mbtile:focus-visible{box-shadow:0 2px 4px rgba(16,28,56,.06),0 14px 32px rgba(16,28,56,.12);border-color:#c9d3e6;transform:translateY(-2px)}
.mbtile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mbart{position:relative;display:flex;align-items:center;justify-content:center;height:250px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 100%,#d9e5f4 0,#eef3fa 55%,#f6f8fc 100%)}
.mbart::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--brand)}
.mbbook{position:relative;display:block;height:196px;aspect-ratio:210/297;perspective:900px}
/* the page block behind the cover: a few sheets showing at the edge */
.mbbook::before{content:"";position:absolute;inset:3px -5px -3px 3px;background:#fff;border-radius:1px 3px 3px 1px;
  box-shadow:2px 0 0 #e6ebf3,4px 1px 0 #fff,5px 1px 0 #dbe2ee,0 12px 24px rgba(16,28,56,.22)}
.mbbook img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:1px 3px 3px 1px;background:#fff}
.mbcover{transform-origin:left center;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;
  box-shadow:inset 3px 0 6px rgba(0,0,0,.18),0 2px 6px rgba(16,28,56,.18)}
.mbtile:hover .mbcover,.mbtile:focus-visible .mbcover{transform:rotateY(-34deg);box-shadow:inset 3px 0 6px rgba(0,0,0,.18),8px 4px 18px rgba(16,28,56,.28)}
.mbpages{position:absolute;top:12px;right:12px;background:#fff;color:var(--brand);border:1px solid #cddcec;border-radius:99px;
  font-size:11.5px;font-weight:700;padding:3px 10px}
.mbbody{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.mbtags{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.mbtitle{font-family:Montserrat,sans-serif;font-weight:800;font-size:17px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.mbblurb{font-size:13.5px;line-height:1.45;color:var(--ink-3)}
.mbfoot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:10px}
.mbmeta{font-size:12px;color:var(--ink-3)}
.mbgo{margin-left:auto;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;color:var(--brand);white-space:nowrap}
.mbtile:hover .mbgo{text-decoration:underline}
@media (max-width:1100px){.mbart{height:220px}.mbbook{height:170px}}
@media (max-width:860px){.mbgrid,.mbgrid.n2,.mbgrid.n3{grid-template-columns:minmax(0,1fr)}
  .mbtile{flex-direction:row}.mbart{height:auto;width:132px;flex:none;padding:16px 0}.mbbook{height:132px}
  .mbart::after{left:auto;top:0;width:4px;height:auto}.mbpages{display:none}.mbhint{display:none}}
@media (prefers-reduced-motion:reduce){.mbtile,.mbcover{transition:none}.mbtile:hover{transform:none}}
.pltab .costc{color:var(--ink-2);font-weight:700}
#broLink.off{opacity:.45;cursor:not-allowed}