/* Ethical Food Club theme. Ported from the approved prototype (claude.ai/artifact/UQKMqAcWHB3h8ZznknuUzd).
   Layout: Co-op poster shop. Sticky header + department strip, coloured department band per page, list rows on phones, grid from 768px. Single deliberate light look. */
:root{
  --ink:#1a1d33; --paper:#ffffff; --mut:#5d6070; --ln:#e3e1da; --red:#c8321e; --grn:#2f8a52;
  --dept:#e8a92b; --dept-ink:#1a1d33; --on-ink:#e8a92b; --dept-t:#fbe7bb;
  --f:"Archivo", "Arial Narrow", system-ui, sans-serif;
  color-scheme:light;
}
html,body{background:var(--paper);color:var(--ink)}
body{margin:0}
body{font-family:var(--f);font-size:14px;line-height:1.45;font-variation-settings:"wdth" 100}
*{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid #2b6cd1;outline-offset:2px}
.cond{font-variation-settings:"wdth" 62;font-weight:900;text-transform:uppercase;line-height:.86}
.semi{font-variation-settings:"wdth" 75;font-weight:800;text-transform:uppercase}
.wrapx{max-width:1200px;margin:0 auto;padding-inline:16px}
.tabnum{font-variant-numeric:tabular-nums}

/* header */
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper)}
.hd .in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px 16px;padding-block:10px 12px}
.wm{display:flex;align-items:center;gap:14px;text-decoration:none;text-align:left;justify-self:start}
.wm .plus{display:inline;border:0;padding:0 1px;font-size:.8em;font-weight:700;position:relative;top:-.14em}
.wm b{font-size:22px;letter-spacing:.01em}
.wm > span{display:none;border-left:2px solid var(--ink);padding-left:12px;font-size:11.5px;letter-spacing:.08em;line-height:1.35}
.srch{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:8px;border:2px solid var(--ink);padding:0 10px;background:var(--paper)}
.srch svg{width:17px;height:17px;flex:none}
.srch input{flex:1;min-width:0;border:0;outline:0;font:500 15px var(--f);padding:9px 0;background:transparent;color:var(--ink)}
.srch input::placeholder{color:var(--mut)}
.hlinks{display:none;gap:16px;font-weight:700}
.tot{justify-self:end;border:2px solid var(--ink);font-weight:800;padding:4px 9px;display:flex;align-items:center;gap:6px}
.tot svg{width:16px;height:16px}
@media (min-width:768px){
  .hd .in{grid-template-columns:auto 1fr auto auto;padding-block:14px}
  .wm b{font-size:30px}
  .wm > span{display:block}
  .srch{grid-column:auto;grid-row:auto}
  .hlinks{display:flex}
}
.depts{display:flex;overflow-x:auto;scrollbar-width:none;border-top:3px solid var(--ink)}
.depts::-webkit-scrollbar{display:none}
.depts a{flex:1 0 auto;padding:8px 11px;font-size:12px;border-right:2px solid var(--ink);border-bottom:3px solid var(--ink);white-space:nowrap;text-align:center}
.depts a:last-child{border-right:0}
/* the current department is an open tab: no line underneath, so it runs straight into the band below */
.depts a[aria-current="true"]{border-bottom-color:transparent}

/* band */
.band{background:var(--dept);color:var(--dept-ink);border-bottom:3px solid var(--ink)}
.band .in{padding-block:14px 14px}
.crumbs{display:flex;flex-wrap:wrap;gap:2px 6px;font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.06em}
.crumbs a{text-decoration:underline;text-underline-offset:2px}
.fit{margin:4px 0 0;font-size:58px;text-wrap:balance;max-width:16ch}
@media (min-width:768px){.fit{max-width:none}}
.cnt{font-weight:700;font-size:12px;margin-top:6px}

/* chips */
.row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.row::-webkit-scrollbar{display:none}
.row>*{flex:none;white-space:nowrap}
.chips{padding-top:12px}
.ch{border:2px solid var(--ink);padding:5px 10px;font-weight:700;font-size:13px}
.ch[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.fl .ch{border-style:dashed;font-weight:600;font-size:12.5px}
.fl .ch[aria-pressed="true"]{border-style:solid;background:var(--dept-t);color:var(--ink)}
.fl{padding-block:8px 14px}
.sample{font-size:12px;color:var(--mut);padding-bottom:10px}

/* product list: rows on phones, grid from 768 */
.plist{border-top:3px solid var(--ink);margin-inline:-16px}
.card{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:12px 16px;border-bottom:2px solid var(--ink);position:relative;cursor:pointer}
.im{position:relative;aspect-ratio:1/1;border:2px solid var(--ink);background:#fff;display:grid;place-items:center;overflow:hidden;align-self:start}
.im img{width:93%;height:93%;object-fit:contain}
/* product tag sits at the end of the brand line, beside the heart; picture stamps are kept for Out of stock only */
.brrow{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.brrow .br{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stamp{flex:none;font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;line-height:1.4;color:var(--ink)}
/* tag: a coloured bar the width of the picture, hanging under its bottom edge */
.imw{align-self:start;min-width:0}
.tagbar{display:block;background:var(--ink);color:#fff;font-weight:800;font-size:10px;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:2px 7px 3px;line-height:1.3;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.tagbar.offer{background:var(--red)}
.bigw{max-width:210px;width:100%;margin-inline:auto}
.bigw .big{max-width:none}
.bigw .tagbar{font-size:12px;padding:3px 10px 4px}
@media (min-width:768px){.bigw{max-width:340px;margin-inline:0}}
.oos{position:absolute;inset:auto 0 0 0;background:var(--ink);color:#fff;text-align:center;font-weight:800;font-size:11px;text-transform:uppercase;padding:3px 0;letter-spacing:.05em}
.stamp.offer{color:var(--red)}
.stamp.new{color:var(--ink)}
.fav{position:absolute;top:8px;right:8px;width:34px;height:34px;display:grid;place-items:center;z-index:1}
.fav svg{width:20px;height:20px}
.body{min-width:0;display:flex;flex-direction:column;padding-right:24px}
.br{font-size:12.5px}
.nm{line-height:1.27;margin:1px 0;overflow-wrap:anywhere}
.sz{font-size:12px;color:var(--mut)}
.minq{font-size:11.5px;font-weight:700;margin-top:2px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 10px;margin-top:auto;padding-top:8px}
.prices{display:flex;align-items:flex-end;gap:7px;min-width:0}
.pr{background:var(--ink);color:#fff;font-weight:900;font-variation-settings:"wdth" 70;font-size:22px;padding:4px 6px 2px;line-height:1.1}
.pr small{display:block;font-size:8.5px;font-variation-settings:"wdth" 100;letter-spacing:.08em;font-weight:700;color:var(--on-ink)}
.side{font-size:10.5px;line-height:1.12}
.side s{color:var(--mut);text-decoration-thickness:1.5px}
.add{border:2px solid var(--ink);padding:7px 14px;font-size:14px;background:var(--dept);color:var(--dept-ink);white-space:nowrap}
.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--on-ink);border:2px solid var(--ink);width:106px}
.stepper button{width:34px;height:33px;font-size:20px;font-weight:900}
.stepper output{font-weight:900;font-size:15px}
@media (min-width:768px){
  .plist{margin-inline:0;border-top:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;padding-top:6px}
  .card{grid-template-columns:1fr;border:0;padding:0}
  .body{padding-right:0}
  .fav{top:6px;right:6px}
}
@media (min-width:1100px){.plist{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* scrollers on home */
.shelf{margin-top:26px}
.shelf h2{display:flex;justify-content:space-between;align-items:flex-end;margin:0 0 10px;font-size:34px}
.shelf h2 a{font-size:13px;font-variation-settings:"wdth" 100;font-weight:700;text-transform:none;text-decoration:underline;text-underline-offset:3px}
.mini{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:20px;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
.mini .card{grid-template-columns:1fr;border:0;padding:0;gap:8px}
.mini .body{padding-right:0}
.mini .fav{top:6px;right:6px}
.mini .foot{flex-direction:column;align-items:stretch;gap:8px}
.mini .add,.mini .stepper{width:100%}
@media (min-width:768px){.mini{grid-auto-columns:190px}}
/* phones: home and related rows become the same list as the aisles, first four only */
@media (max-width:767px){
  .mini{display:block;overflow:visible;margin-inline:-16px;border-top:3px solid var(--ink);padding-bottom:0}
  .mini .card{grid-template-columns:104px 1fr;border:0;border-bottom:2px solid var(--ink);padding:12px 16px;gap:12px}
  .mini .card:nth-child(n+5){display:none}
  .mini .body{padding-right:24px}
  .mini .fav{top:8px;right:8px}
  .mini .foot{flex-direction:row;align-items:flex-end;gap:8px 10px}
  .mini .add{width:auto}
  .mini .stepper{width:106px}
  .mini .side{display:block}
}

/* home */
.order{background:var(--ink);color:#fff;border-bottom:3px solid var(--ink)}
.order .in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding-block:16px}
.order .k{font-size:11px;letter-spacing:.1em;font-weight:700;color:#e8a92b}
.order .day{font-size:52px;color:#e8a92b;text-wrap:balance}
.order .sub{font-size:13px;margin-top:6px}
.order .left{text-align:right}
.order .left b{display:block;font-size:40px;color:#fff}
.order .left span{font-size:12px;color:#c9cad6}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.tile{border:3px solid var(--ink);padding:12px 12px 10px;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;text-align:left}
.tile b{font-size:30px;overflow-wrap:anywhere}
.tile span{font-weight:700;font-size:12px}
@media (min-width:768px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.tile{min-height:150px}.tile b{font-size:40px}}
.club{margin-top:30px;border:3px solid var(--ink);display:grid;grid-template-columns:1fr;}
.club div{padding:14px}
.club div+div{border-top:3px solid var(--ink)}
.club h3{margin:0 0 4px;font-size:28px}
.club p{margin:0;max-width:60ch}
@media (min-width:768px){.club{grid-template-columns:repeat(3,1fr)}.club div+div{border-top:0;border-left:3px solid var(--ink)}}

/* department page */
.aisles{margin:0 -16px;display:grid;grid-template-columns:1fr}
.aisles a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:2px solid var(--ink);text-align:left}
.aisles b{font-size:24px}
.aisles span{font-weight:700;font-size:12px;white-space:nowrap}
@media (min-width:768px){.aisles{margin:16px 0 0;grid-template-columns:repeat(2,1fr);column-gap:24px}.aisles a{border-bottom-width:2px}}

/* product page */
.pp{display:grid;grid-template-columns:1fr;gap:18px;padding-block:18px}
.pp .big{position:relative;border:3px solid var(--ink);aspect-ratio:1/1;display:grid;place-items:center;background:#fff;width:100%}
.pp .big img{width:80%;height:80%;object-fit:contain}
.pp .big .fav{top:10px;right:10px}
.pp .stamp{font-size:12px}
.pp .brrow{justify-content:flex-start}
.pp .ptitle{margin:2px 0 4px;font-size:26px;line-height:1.2;font-variation-settings:"wdth" 100;font-weight:700;text-transform:none}
.pp .pr{font-size:40px;padding:6px 10px 4px}
.pp .pr small{font-size:10px}
.pp .pbox{display:flex;align-items:flex-end;gap:12px;margin:14px 0 6px;flex-wrap:wrap}
.pp .pbox .side{font-size:13px}
.flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.flags span{border:2px solid var(--ink);padding:1px 7px;font-size:11.5px}
.buy{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.buy .add{padding:11px 26px;font-size:17px}
.buy .stepper{width:160px}
.buy .stepper button{width:52px;height:44px}
.casebox{margin-top:14px;border:2px dashed var(--ink);padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.casebox .add{padding:6px 12px;font-size:13px}
.sec{border-top:3px solid var(--ink);margin-top:18px;padding-top:10px}
.sec h3{margin:0 0 6px;font-size:26px}
.sec p{margin:0 0 8px;max-width:68ch;white-space:pre-line}
.free{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px}
.ext{font-size:12.5px;color:var(--mut)}
@media (min-width:768px){.pp{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:36px}}
.pp .pbox{justify-content:space-between;align-items:flex-end}
.pp .pbox .buy{margin-top:0}
.pp .pbox,.pp .casebox{max-width:480px}
.ppinfo{min-width:0}
.lede{margin:12px 0 0;max-width:62ch;font-size:15px;line-height:1.5}
.bt{position:relative;display:inline-block}
.bt summary{list-style:none;cursor:pointer;width:22px;height:22px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:900 12px/1 var(--f);background:var(--dept);color:var(--dept-ink)}
.bt summary::-webkit-details-marker{display:none}
.bt[open] summary{box-shadow:0 0 0 2px var(--dept)}
.btpop{position:absolute;left:-6px;top:30px;z-index:5;width:min(290px,72vw);background:#fff;border:2px solid var(--ink);padding:12px 14px;font-size:13.5px;line-height:1.4;display:flex;gap:10px;align-items:center}
.btpop .txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.btpop p{margin:0}
.vheart{flex:none;width:30px;height:28px}
.pp .brrow{gap:8px}
.mut{color:var(--mut)}
.small{font-size:12.5px}
.moreinfo summary{cursor:pointer;font-size:26px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.moreinfo summary::-webkit-details-marker{display:none}
.moreinfo summary::after{content:"+";font-size:30px}
.moreinfo[open] summary::after{content:"−"}
.moreinfo dl{display:grid;grid-template-columns:120px 1fr;gap:8px 14px;margin:10px 0 12px;max-width:760px}
.moreinfo dt{font-weight:700}
.moreinfo dd{margin:0;min-width:0}
.taglink{text-decoration:underline;text-underline-offset:2px;margin-right:8px}
.related{background:var(--ink);color:#fff;margin-top:26px;padding-block:18px 22px;-webkit-font-smoothing:antialiased}
.related h3{margin:0 0 12px;font-size:34px;color:#fff}
.related .mini{border-top:0}
.related .card{background:#fff;color:var(--ink);-webkit-font-smoothing:auto}
.related .mini .card{border-bottom-color:var(--ink)}
@media (min-width:768px){.related .mini .card{padding:10px}}

/* basket, favourites, account */
.panel{padding-block:16px}
.bline{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:2px solid var(--ink)}
.bline .im{border-width:2px}
.bline .stepper{width:104px}
.bline .stepper button{width:32px;height:30px}
.sum{margin-top:14px;display:grid;gap:6px;max-width:460px}
.sum div{display:flex;justify-content:space-between}
.sum .big{font-size:22px;font-weight:900}
.cta{display:inline-block;margin-top:14px;background:var(--dept);color:var(--dept-ink);border:3px solid var(--ink);padding:12px 22px;font-size:18px}
.note{border:2px solid var(--ink);background:var(--dept-t);padding:10px 12px;margin-top:12px;max-width:60ch}
.empty{padding:28px 0;max-width:50ch}
.seg{display:inline-flex;border:2px solid var(--ink);margin-top:8px}
.seg button{padding:8px 14px;font-weight:700}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* sheet */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(26,29,51,.45)}
.sheet .box{background:var(--paper);border-top:3px solid var(--ink);width:100%;max-width:560px;max-height:75%;overflow:auto;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px))}
@media (min-width:768px){.sheet{align-items:center}.sheet .box{border:3px solid var(--ink)}}
.sheet h3{margin:0 0 10px;font-size:28px;display:flex;justify-content:space-between;align-items:center}
.sheet h3 button{font-size:14px;font-variation-settings:"wdth" 100;text-transform:none;text-decoration:underline}
.opt{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--ln);width:100%;text-align:left}
.opt i{width:20px;height:20px;border:2px solid var(--ink);flex:none;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:13px}
.opt[aria-checked="true"] i{background:var(--ink);color:#fff}
.opt span{flex:1}
.opt em{font-style:normal;color:var(--mut);font-size:12px}

/* bottom */
main{padding-bottom:140px}
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:30;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--paper)}
.bbar{background:var(--dept);color:var(--dept-ink);border-top:3px solid var(--ink)}
.bbar .in{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-block:9px}
.bbar b{font-size:15px}
.bbar small{display:block;font-size:11.5px}
.bbar .go{background:var(--ink);color:var(--on-ink);padding:8px 14px;font-size:14px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid var(--ink);padding:6px 4px 7px}
.tabs a{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;position:relative}
.tabs svg{width:22px;height:22px}
.tabs [aria-current="true"]{font-weight:800}
.tabs [aria-current="true"] svg{color:var(--dept);stroke:var(--ink)}
.tabs .dot{position:absolute;top:-3px;left:calc(50% + 6px);background:var(--red);color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
@media (min-width:768px){.tabs{display:none}main{padding-bottom:90px}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:150px;z-index:50;background:var(--ink);color:#fff;padding:10px 14px;font-weight:700;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:no-preference){.add:active,.ch:active,.tile:active{transform:translateY(1px)}}

/* light text on dark grounds: greyscale smoothing so white type isn't heavier than dark type on macOS */
.order,.pr,.stepper,.ch[aria-pressed="true"],.bbar .go,.toast,.seg button[aria-pressed="true"],.cta,
[style*="color:#fff"],:root[data-dark-dept] .band,:root[data-dark-dept] .bbar,:root[data-dark-dept] .add{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* phones: the Add button's right edge lines up with the right edge of the heart icon (16px from the edge) */
@media (max-width:767px){
  .card .fav{right:9px}
  .card .foot{margin-right:-24px}
}

/* ---------- theme: markup that differs from the prototype ---------- */
a{color:inherit}
.hd a,.depts a,.tile,.aisles a,.nm,.card .imw,.tabs a,.bbar .go,.cta,.ch,.add,.wm{text-decoration:none}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.wm{color:var(--ink)}
.srch{margin:0}
.srch input::-webkit-search-cancel-button{cursor:pointer}
.hlinks a{font-weight:700}
.tot{color:var(--ink)}
.ch{display:inline-block;color:var(--ink)}
.crumbs a{color:inherit}
.nm{display:block;color:var(--ink)}
.card .imw{display:block;color:inherit}
.im{display:grid}
.im img{display:block;margin:auto}
.empty{padding:24px 0}
.more{display:flex;justify-content:center;padding:22px 0 8px}
.more .cta{margin:0}
.offer-h{color:var(--red)}
.add{display:inline-block;text-align:center;cursor:pointer}
.add-off{opacity:.55;cursor:default;background:#eee;color:var(--ink)}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;position:relative;color:var(--ink)}
.tabs [aria-current="true"]{font-weight:800}

/* Add button and stepper are both in the page; data-in says which shows. */
.buyctl .stepper{display:none}
.buyctl[data-in] .add{display:none}
.buyctl[data-in] .stepper{display:flex}
.buyctl[aria-busy="true"]{opacity:.6;pointer-events:none}

/* Department colours, set by the body class (header.php / functions.php). */
body.dept-food-cupboard{--dept:#e8a92b;--dept-ink:#1a1d33;--on-ink:#e8a92b;--dept-t:#f8e0b0}
body.dept-chilled-food{--dept:#1f8a8a;--dept-ink:#fff;--on-ink:#fff;--dept-t:#c3e1e1}
body.dept-frozen-food{--dept:#bfe3f2;--dept-ink:#1a1d33;--on-ink:#bfe3f2;--dept-t:#eaf6fb}
body.dept-health-food{--dept:#e5672b;--dept-ink:#1a1d33;--on-ink:#e5672b;--dept-t:#f8d0bd}
body.dept-natural-health{--dept:#2f8a52;--dept-ink:#fff;--on-ink:#fff;--dept-t:#c5e1cf}
body.dept-personal-care{--dept:#d9577f;--dept-ink:#1a1d33;--on-ink:#d9577f;--dept-t:#f4cdd9}
body.dept-household{--dept:#2d5bc4;--dept-ink:#fff;--on-ink:#fff;--dept-t:#cad6f0}
body.dept-special-offers{--dept:#c8321e;--dept-ink:#fff;--on-ink:#fff;--dept-t:#f1efe8}
body.dept-new-products,body.dept-bulk-sizes{--dept:#1a1d33;--dept-ink:#fff;--on-ink:#e8a92b;--dept-t:#f1efe8}
body.dept-dark .band,body.dept-dark .bbar,body.dept-dark .add{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Favourites: TI WooCommerce Wishlist's own button, shown as our heart. */
.fav .tinv-wishlist,.fav .tinv-wraper{margin:0!important;padding:0!important}
.fav a.tinvwl_add_to_wishlist_button{display:grid!important;place-items:center;width:34px;height:34px;margin:0!important;padding:0!important;font-size:0!important;color:var(--ink)!important;background:none!important;border:0!important}
.fav a.tinvwl_add_to_wishlist_button::before{content:""!important;display:block!important;width:20px;height:20px;margin:0!important;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E") center/contain no-repeat}
.fav a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E")}
.fav .tinvwl_add_to_wishlist-text,.fav .tinvwl_remove_from_wishlist-text,.fav .tinvwl-tooltip{display:none!important}
.pp .bigw{position:relative}
.pp .bigw .fav{position:absolute;top:8px;right:8px}

/* Product page text blocks from WordPress. */
.prose p{margin:0 0 10px;max-width:68ch}
.prose ul{margin:0 0 10px;padding-left:20px;max-width:68ch}
.prose table{border-collapse:collapse;margin:8px 0;font-size:13.5px}
.prose td,.prose th{border-bottom:1px solid var(--ln);padding:4px 12px 4px 0;text-align:left}
.lede p{margin:0}

/* Footer */
.ft{border-top:3px solid var(--ink);margin-top:40px;padding-block:22px 160px;background:var(--paper)}
.ft .in{display:grid;gap:14px}
.ftorder .k{font-size:11px;letter-spacing:.1em}
.ftorder p{margin:4px 0 0;font-weight:600}
.ftlinks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.ftlinks a{font-weight:700}
.ftsmall{margin:0;font-size:12.5px;color:var(--mut)}
@media (min-width:768px){.ft{padding-bottom:100px}}

/* Basket, checkout and account (WooCommerce's own pages) inside our frame. */
.panel{padding-block:18px}
.woo .button,.woo button.button,.woo input.button,.woo #place_order,.woo .checkout-button{background:var(--dept)!important;color:var(--dept-ink)!important;border:2px solid var(--ink)!important;border-radius:0!important;font:900 15px var(--f)!important;font-variation-settings:"wdth" 75!important;text-transform:uppercase;padding:10px 18px!important}
.woo input[type=text],.woo input[type=email],.woo input[type=tel],.woo input[type=password],.woo input[type=number],.woo select,.woo textarea{border:2px solid var(--ink);border-radius:0;padding:8px 10px;font:500 15px var(--f)}
.woo table.shop_table{border:2px solid var(--ink);border-radius:0}
.woo .woocommerce-message,.woo .woocommerce-info,.woo .woocommerce-error{border-top-color:var(--ink)}

/* Random banner (Banners post type) on aisles and Favourites */
.banner{margin:4px 0 14px}
.banner img{display:block;width:100%;height:auto;border:2px solid var(--ink)}
/* Brand logo beside the brand name on the product page */
.brlogo img{display:block;height:28px;width:auto;max-width:90px;object-fit:contain}
.pp .brrow .br{color:var(--ink)}

/* Add button and quantity stepper are the same size, so swapping one for the other doesn't shift anything */
.act .add,.act .stepper{box-sizing:border-box;width:108px;height:38px}
.act .add{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;white-space:nowrap}
.act .stepper button{width:34px;height:100%}
.buy .add,.buy .stepper{box-sizing:border-box;width:164px;height:48px}
.buy .add{display:inline-flex;align-items:center;justify-content:center;padding:0 12px}
.buy .stepper button{width:52px;height:100%}
.mini .act .add,.mini .act .stepper{width:100%}
@media (max-width:767px){.mini .act .add,.mini .act .stepper{width:108px}}

/* Desktop: once the band scrolls away, a slim copy of it stays under the header, so the open tab always runs into its colour.
   It's a separate fixed bar, so nothing on the page moves when it appears. */
.bandmini{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + var(--hdh,0px));z-index:15;background:var(--dept);color:var(--dept-ink);border-bottom:3px solid var(--ink);transform:translateY(-110%);visibility:hidden}
.bandmini .in{padding-block:8px;display:flex;align-items:baseline;gap:14px}
.bandmini b{font-size:30px}
.bandmini span{font-size:12px;font-weight:700}
.bandmini.on{transform:none;visibility:visible}
@media (prefers-reduced-motion:no-preference){.bandmini{transition:transform .15s,visibility .15s}}
@media (max-width:767px){.bandmini{display:none}}
/* Phones: once the band has scrolled away, the open tab gets its bottom line back */
@media (max-width:767px){
  .hd.past .depts a[aria-current="true"]{border-bottom-color:var(--ink)}
}
/* Logged-in WordPress admin bar sits above the sticky header */
body.admin-bar .hd{top:32px}
@media (max-width:782px){body.admin-bar .hd{top:46px}}
@media (max-width:600px){body.admin-bar .hd{top:0}}

/* Wide, Ocado-style: the page uses most of the screen and the grid fits as many cards as it can (each at least 236px) */
.wrapx{max-width:1600px}
@media (min-width:1100px){.wrapx{padding-inline:28px}}
@media (min-width:768px){
  .plist{grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}
}
@media (min-width:1100px){.plist{grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1400px){.tiles{grid-template-columns:repeat(8,minmax(0,1fr))}.tile{min-height:170px}.tile b{font-size:34px}}

/* Split the difference: up to 1400px wide (5 across on a typical laptop or desktop) */
.wrapx{max-width:1400px}

/* Sideways rows (Special offers, New in, More like this): arrow buttons and snapping on desktop */
.rowhead{display:flex;align-items:center;gap:8px;margin-left:auto}
.arrows{display:none;gap:6px}
.arrows button{width:38px;height:38px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:900 20px/1 var(--f);display:grid;place-items:center;cursor:pointer}
.arrows button:disabled{opacity:.3;cursor:default}
.related .arrows button{border-color:#fff;background:transparent;color:#fff}
.related h3{display:flex;align-items:center;justify-content:space-between;gap:12px}
@media (min-width:768px){
  .arrows{display:flex}
  .mini{scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
  .mini::-webkit-scrollbar{display:none}
  .mini > .card{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.mini{scroll-behavior:auto}}
/* Tiles: never break a word across lines; smaller type when all eight share a row */
.tile b{overflow-wrap:normal;word-break:normal;hyphens:none}
@media (min-width:1400px){.tile b{font-size:26px}}

/* My Account when logged out: log in beside Join the club */
.accgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:900px){.accgrid{grid-template-columns:1fr 1fr;gap:48px}}
.accgrid h2{font-size:34px;margin:0 0 10px}
.joinform p{margin:0 0 12px}
.jgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:6px 0 16px}
.jgrid label span,.jgrid legend{display:block;font-weight:700;font-size:13.5px;margin-bottom:4px}
.jgrid input[type=text],.jgrid input[type=email],.jgrid input[type=tel]{width:100%;box-sizing:border-box;border:2px solid var(--ink);padding:9px 10px;font:500 15px var(--f);border-radius:0}
.jfull{grid-column:1/-1}
.jhalf{grid-column:span 1}
@media (max-width:420px){.jhalf{grid-column:1/-1}}
fieldset.jfull{border:0;padding:0;margin:0}
.jradio{display:inline-flex;align-items:center;gap:6px;margin-right:18px;font-weight:600}
.jno{color:var(--red);font-weight:800;margin:8px 0 0}
.bad input,.bad legend{border-color:var(--red)!important;color:var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[data-join-submit]:disabled{opacity:.45;cursor:not-allowed}
.rowhead{gap:12px}

/* Home: the page's heading */
.intro{font-size:20px;line-height:1.3;font-weight:800;margin:22px 0 0;max-width:60ch;text-wrap:balance}
.intro span{font-weight:500;color:var(--mut)}
@media (min-width:768px){.intro{font-size:24px}}

/* Aisle: the category's own description, after the products */
.catdesc{margin-top:30px}
.catdesc h2{font-size:26px;margin:0 0 6px}

/* ---------- Account ---------- */
.woo .woocommerce{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:900px){.woo .woocommerce:has(.woocommerce-MyAccount-navigation){grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:start}}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
.woocommerce-MyAccount-navigation li a{display:block;white-space:nowrap;border:2px solid var(--ink);padding:7px 12px;font-weight:700;text-decoration:none;color:var(--ink)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--ink);color:var(--dept);-webkit-font-smoothing:antialiased}
.woocommerce-MyAccount-navigation-link--customer-logout a{border-style:dashed}
@media (min-width:900px){
  .woocommerce-MyAccount-navigation{position:sticky;top:calc(var(--hdh,120px) + 16px)}
  .woocommerce-MyAccount-navigation ul{flex-direction:column;gap:0;border:2px solid var(--ink)}
  .woocommerce-MyAccount-navigation li a{border:0;border-bottom:2px solid var(--ink);padding:11px 14px}
  .woocommerce-MyAccount-navigation li:last-child a{border-bottom:0}
}
.woocommerce-MyAccount-content{min-width:0}
.accdash .hello{font:900 44px/.9 var(--f);font-variation-settings:"wdth" 62;text-transform:uppercase;margin:0 0 16px}
.acctiles{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.acctiles{grid-template-columns:1fr 1fr}}
@media (min-width:1200px){.acctiles{grid-template-columns:repeat(4,1fr)}}
.acctile{display:flex;flex-direction:column;gap:4px;border:3px solid var(--ink);padding:14px;text-decoration:none;color:var(--ink);min-height:120px;background:var(--paper)}
.acctile .k{font-size:11px;letter-spacing:.1em}
.acctile b{font-size:34px;line-height:.95}
.acctile span:last-child{font-size:13px;color:var(--mut);margin-top:auto}
.acctile.ink{background:var(--ink);color:#fff;-webkit-font-smoothing:antialiased}
.acctile.ink .k,.acctile.ink b{color:#e8a92b}
.acctile.ink span:last-child{color:#c9cad6}
.acctile:hover{box-shadow:4px 4px 0 var(--ink)}
.accquick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* WooCommerce account tables and forms in poster style */
.woocommerce-MyAccount-content table{width:100%;border-collapse:collapse;border:2px solid var(--ink)}
.woocommerce-MyAccount-content th,.woocommerce-MyAccount-content td{padding:9px 10px;border-bottom:1px solid var(--ln);text-align:left}
.woocommerce-MyAccount-content thead th{background:var(--ink);color:#fff;font-weight:800;-webkit-font-smoothing:antialiased}
.woocommerce-MyAccount-content .woocommerce-Addresses{display:grid;gap:16px}
@media (min-width:768px){.woocommerce-MyAccount-content .woocommerce-Addresses{grid-template-columns:1fr 1fr}}
.woocommerce-MyAccount-content .woocommerce-Address{border:2px solid var(--ink);padding:14px}
.woo form .form-row{margin:0 0 12px}
.woo form .form-row label{display:block;font-weight:700;font-size:13.5px;margin-bottom:4px}
.woo form .form-row input.input-text,.woo form .form-row select,.woo form .form-row textarea{width:100%;box-sizing:border-box}
.accgrid .woocommerce{display:block}
.accgrid h2{margin-top:0}

/* Footer links */
.ftlinks ul{gap:6px 20px}
.ftlinks a{text-decoration:none}
.ftlinks a:hover{text-decoration:underline;text-underline-offset:3px}
/* WooCommerce's own CSS floats the account menu at 30% and the content at 68%; the grid above does the layout instead */
.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{float:none!important;width:auto!important}
.woocommerce-account .woo .woocommerce::before,.woocommerce-account .woo .woocommerce::after{content:none!important;display:none!important}

/* Desktop: shelf and filter chips wrap onto more lines (sideways scrolling is awkward with a mouse); phones still swipe */
@media (min-width:768px){
  .row.chips,.row.fl{flex-wrap:wrap;overflow:visible}
  .row.chips > *,.row.fl > *{flex:0 0 auto}
}

/* Phones: fade the edge of a sideways row while there's more to swipe to */
@media (max-width:767px){
  .row[data-fade="right"],.depts[data-fade="right"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
  .row[data-fade="left"],.depts[data-fade="left"]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent)}
  .row[data-fade="both"],.depts[data-fade="both"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
}

/* Account tiles: a quiet tint on hover instead of a shadow */
.acctile:hover{box-shadow:none;background:var(--dept-t)}
.acctile.ink:hover{background:#262a47}

/* Footer sits at the foot of the window even on short pages */
html,body{min-height:100%}
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1 0 auto}
.ft{margin-top:auto}

/* Phones: two header columns (wordmark, basket) so the basket button sits flush with the search box's right edge */
@media (max-width:767px){.hd .in{grid-template-columns:1fr auto}}

/* Bands outside the departments: account and favourites navy, search plain white, brand pages lilac */
body.band-account{--dept:#1a1d33;--dept-ink:#fff;--on-ink:#e8a92b;--dept-t:#e6e7ee}
body.band-search{--dept:#ffffff;--dept-ink:#1a1d33;--on-ink:#ffffff;--dept-t:#f1f1f4}
body.band-brand{--dept:#c9bfee;--dept-ink:#1a1d33;--on-ink:#c9bfee;--dept-t:#ece8fa}
body.band-account .band,body.band-account .bbar{-webkit-font-smoothing:antialiased}
body.band-account .band .fit{color:#e8a92b}
/* Navy pages (account, favourites): keep the selected chip and the Basket button readable */
.woocommerce-MyAccount-navigation li.is-active a{color:var(--on-ink)}
body.band-account .bbar .go{background:#e8a92b;color:#1a1d33}
body.band-account .ch[aria-pressed="true"]{color:#e8a92b}

/* ---------- Search suggestions ---------- */
.srch{position:relative}
.sg{position:absolute;left:-2px;right:-2px;top:calc(100% + 2px);z-index:30;background:var(--paper);border:2px solid var(--ink);box-shadow:0 10px 24px rgba(26,29,51,.18);max-height:min(70vh,640px);overflow:auto;padding:10px 12px 12px;color:var(--ink);font-family:var(--f)}
.sg-h{font-size:11px;letter-spacing:.1em;margin:6px 0 6px;color:var(--mut)}
.sg-aisles{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.sg-aisles .ch,.aislehits .ch{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.sg-aisles .ch i,.aislehits .ch i{width:10px;height:10px;display:inline-block;border:1px solid var(--ink);flex:none}
.sg-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--ln)}
.sg-main{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--ink)}
.sg-im{flex:none;width:44px;height:44px;border:1px solid var(--ln);display:grid;place-items:center;background:#fff}
.sg-im img{max-width:40px;max-height:40px;object-fit:contain}
.sg-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sg-txt b{font-size:11px}
.sg-txt span{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-txt small{font-size:11.5px;color:var(--mut)}
.sg-pr{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.sg .act .add,.sg .act .stepper{width:92px;height:34px}
.sg-wait{font-size:13px;color:var(--mut);padding:6px 0}
.sg-all{display:block;width:100%;margin-top:8px;border:2px solid var(--ink);padding:9px;font-weight:800;background:var(--paper);cursor:pointer;text-align:center}
.sg a:focus-visible,.sg button:focus-visible{outline:3px solid #2b6cd1;outline-offset:1px}
@media (max-width:767px){
  .sg{position:fixed;left:0;right:0;top:auto;margin-top:6px;border-left:0;border-right:0;max-height:60vh}
  .sg-row{grid-template-columns:minmax(0,1fr) auto}
  .sg-pr{display:none}
}
/* Results page: spelling suggestion and matching aisles */
.dym{margin:12px 0 0;font-size:16px;font-weight:600}
.dym a{font-weight:800}
.aislehits{padding-top:10px;align-items:center}
.aislehits .lbl{font-size:11px;letter-spacing:.1em;color:var(--mut);margin-right:2px}
.aislehits .ch span{color:var(--mut);font-weight:600}

/* Basket: a coupon box you can actually type in */
.woo .coupon{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.woo .coupon #coupon_code,.woo #coupon_code{width:auto!important;min-width:220px;height:44px;padding:8px 12px!important;font:500 15px var(--f)}
.woo .coupon .button{height:44px}
.woo table.cart td.actions{padding:12px}
/* Checkout: the "Have a coupon?" drop-down without the huge gaps */
.woo .woocommerce-form-coupon-toggle .woocommerce-info{margin:0 0 10px;padding:10px 14px}
.woo form.checkout_coupon{margin:0 0 16px!important;padding:12px 14px!important;border:2px solid var(--ink)!important;border-radius:0!important;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.woo form.checkout_coupon p{margin:0!important;float:none!important;width:auto!important}
.woo form.checkout_coupon p:first-child{flex-basis:100%}
.woo form.checkout_coupon .form-row-first{flex:1 1 220px}
.woo form.checkout_coupon .form-row-first input{width:100%;height:44px}
.woo form.checkout_coupon .clear{display:none}
/* Bigger Discounts tab: red with white text */
.depts a[href*="special-offers"]{-webkit-font-smoothing:antialiased}

/* "Showing 96 of 224" above Show more */
.more{flex-direction:column;align-items:center;gap:10px}
.shown{margin:0;font-size:13px;color:var(--mut)}
.shown b{color:var(--ink);font-variant-numeric:tabular-nums}

/* Cases ("X 12"): the per-item price stands out beside the case price */
.side .each{font-weight:800;color:var(--ink);font-size:12px}
.pp .side .each{font-size:15px}
/* related: buttons to the product's tag pages beside the heading */
.related h3 .reltags{flex:1;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.2;font-variation-settings:"wdth" 100}
.related h3 .reltags a{display:inline-flex;align-items:center;color:#fff;border:2px solid #fff;padding:7px 10px 6px;text-decoration:none;line-height:1}
.related h3 .reltags a:hover{background:#fff;color:var(--ink)}
@media (max-width:767px){.related h3{flex-wrap:wrap}.related h3 .reltags{order:3;flex-basis:100%}}

/* Tiles: the type shrinks with the tile so the longest word (HOUSEHOLD) always fits; caps stay as above */
.tile{container-type:inline-size}
.tile b{font-size:min(30px,21cqi)}
@media (min-width:768px){.tile b{font-size:min(40px,21cqi)}}
@media (min-width:1400px){.tile b{font-size:min(34px,21cqi)}}
/* department page: the department's Extra Offers link sits first, in red text */
.aisles a.offer{color:var(--red)}
/* brand "i": sized to the brand name beside it */
.bt summary{width:16px;height:16px;border-width:1.5px;font-size:10px}
/* Visitors: "Log in to order" wraps onto two lines so it fits the button space on the right, like + Add */
.act .add.login{white-space:normal;line-height:1.05;font-size:12px;text-align:center}
/* Department pages: red Extra Offers chip, "All Chilled" heading over the full list */
.ch.offer{color:var(--red);border-color:var(--red)}
.allh{font-size:34px;margin:26px 0 0}
/* Phones: the department's offers swipe sideways as a grid of cards instead of the four-item list */
@media (max-width:767px){
  .mini.swipe{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 14px) / 2.25);gap:14px;overflow-x:auto;margin-inline:0;border-top:0;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .mini.swipe::-webkit-scrollbar{display:none}
  .mini.swipe .card{grid-template-columns:1fr;border:0;padding:0;gap:8px;scroll-snap-align:start}
  .mini.swipe .card:nth-child(n+5){display:grid}
  .mini.swipe .body{padding-right:0}
  .mini.swipe .fav{top:6px;right:6px}
  .mini.swipe .foot{flex-direction:column;align-items:stretch;gap:8px;margin-right:0}
  .mini.swipe .act .add,.mini.swipe .act .stepper{width:100%}
}
/* card brand is a link to the brand's page: looks the same, underlines on hover */
.card a.br{text-decoration:none}
.card a.br:hover{text-decoration:underline;text-underline-offset:2px}
/* RRP: a touch bigger, with a finer strike line */
.side{font-size:11.5px}
.side s{text-decoration-thickness:1px}
/* "Also in Chilled (13)": the same shelf in another department, with that department's colour */
.ch.also{display:inline-flex;align-items:center;gap:6px;border-style:dashed}
.ch.also i{width:10px;height:10px;display:inline-block;border:1px solid var(--ink);flex:none}
/* Phones: 16px search text, so iPhone Safari doesn't zoom the page in when the box is tapped */
@media (max-width:767px){.srch input{font-size:16px}}
/* Suggestions: department name after a shelf name that's in two departments */
.sg-aisles .ch .sg-d{color:var(--mut);font-weight:600}
/* Suggestions: scrolling the list never scrolls the page behind it */
.sg{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Phones, while searching: the search box sits pinned at the top of the visible screen, suggestions below it */
@media (max-width:767px){
  body.srch-open .srch{position:fixed;left:0;right:0;top:0;z-index:60;margin:0;border-width:0 0 2px;padding:10px 16px;transform:translateY(var(--vvtop,0px))}
  body.srch-open .sg{position:absolute;top:100%;left:0;right:0;margin-top:0;border-width:2px 0 0;box-shadow:0 14px 30px rgba(26,29,51,.25)}
}
/* Seasonal: plum menu tab and home heading */
.season-h{color:#6d2f6b}
/* Phones: every typing box at 16px or more, so iPhone Safari never zooms in on tap
   (basket quantities, coupon codes, checkout, account and join forms) */
@media (max-width:767px){
  input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=search],input[type=url],input.qty,select,textarea{font-size:16px!important}
}
/* Bottom bar: five tabs now (Account added) */
.tabs{grid-template-columns:repeat(5,1fr)}
/* Basket on phones: picture with a bin under it on the left; name, price each, quantity and line total on the
   right (instead of WooCommerce's stacked "Product / Price / Quantity / Subtotal" label rows) */
@media (max-width:767px){
  .woocommerce-cart-form .shop_table{border:0!important;border-top:3px solid var(--ink)!important}
  .woocommerce-cart-form .shop_table thead{display:none}
  .woocommerce-cart-form tr.cart_item{display:grid!important;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"pic name name" "pic each each" "x qty total";gap:6px 12px;align-items:center;padding:12px 0;border-bottom:2px solid var(--ink)}
  .woocommerce-cart-form tr.cart_item td{display:block!important;border:0!important;padding:0!important;text-align:left!important;background:none!important}
  .woocommerce-cart-form tr.cart_item td::before{display:none!important}
  .woocommerce-cart-form td.product-thumbnail{grid-area:pic;align-self:start}
  .woocommerce-cart-form td.product-thumbnail img{width:64px!important;height:auto;border:2px solid var(--ink);display:block}
  .woocommerce-cart-form td.product-name{grid-area:name;font-weight:600;line-height:1.3;font-size:14px}
  .woocommerce-cart-form td.product-name a{color:var(--ink);text-decoration:none}
  .woocommerce-cart-form td.product-price{grid-area:each;font-size:12.5px;color:var(--mut)}
  .woocommerce-cart-form td.product-price::after{content:" each"}
  .woocommerce-cart-form td.product-quantity{grid-area:qty}
  .woocommerce-cart-form td.product-quantity input.qty{width:64px;height:38px;border:2px solid var(--ink);text-align:center}
  .woocommerce-cart-form td.product-subtotal{grid-area:total;font-weight:900;font-size:17px;text-align:right!important}
  .woocommerce-cart-form td.product-remove{grid-area:x;justify-self:center;align-self:center}
  .woocommerce-cart-form td.product-remove a.remove{font-size:0!important;width:26px!important;height:26px!important;padding:0!important;display:block!important;position:relative;border:0!important;border-radius:0!important;background:none!important}
  .woocommerce-cart-form td.product-remove a.remove::before{content:"";position:absolute;inset:0;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat}
  .woocommerce-cart-form td.product-remove a.remove:hover::before{background:var(--red)}
  .woocommerce-cart-form tr:not(.cart_item) td.actions{display:block;padding:14px 0 0!important;border:0!important}
}
/* Cards: the price box and the Add button stay on one line; "each" and RRP wrap under the price instead */
.card .foot{flex-wrap:nowrap}
.card .prices{flex:1 1 auto;flex-wrap:wrap;row-gap:4px}
.card .act{flex:none}

/* Basket on phones */
@media (max-width:767px){
  /* coupon box and button flush left, side by side */
  .woocommerce-cart-form td.actions .coupon{display:flex!important;gap:8px;float:none!important;width:100%;padding:0!important;margin:0 0 10px!important}
  .woocommerce-cart-form td.actions .coupon{flex-wrap:nowrap!important;align-items:stretch}
  .woocommerce-cart-form td.actions .coupon #coupon_code{flex:1 1 0;width:auto!important;min-width:0!important;height:44px;margin:0!important;float:none!important;border:2px solid var(--ink)!important}
  .woocommerce-cart-form td.actions .coupon .button{flex:none;width:auto!important;height:44px;margin:0!important;float:none!important}
  /* Update basket only shows once a quantity has changed, pinned above the bottom bar so it can't be missed */
  .woocommerce-cart-form button[name=update_cart]:disabled{display:none!important}
  .woocommerce-cart-form button[name=update_cart]:not(:disabled){position:fixed;left:16px;right:16px;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:40;width:auto!important;box-shadow:0 8px 24px rgba(26,29,51,.3)}
  /* totals: "Subtotal  £20.87", no colon */
  .cart_totals table.shop_table_responsive tr td::before{content:attr(data-title)!important}
}

/* Checkout: the coupon notice's icon sits in its own space, clear of the text */
.woo .woocommerce-info{position:relative;padding-left:42px!important}
.woo .woocommerce-info::before{left:14px!important;top:50%!important;transform:translateY(-50%)}

/* Checkout: store credit is a blue bar with a £ coin on the right */
.acfw-store-credits-checkout-ui > h3{display:flex!important;align-items:center;gap:10px;background:#2d5bc4!important;color:#fff!important;border:2px solid var(--ink)!important;border-radius:0!important;padding:10px 14px!important;margin:0!important;font:800 15px var(--f)!important;-webkit-font-smoothing:antialiased}
.acfw-store-credits-checkout-ui > h3 .acfw-accordion-title{flex:1;display:flex;align-items:center;gap:10px}
.acfw-store-credits-checkout-ui > h3 .acfw-accordion-title::after{content:"£";margin-left:auto;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#2d5bc4;font-weight:900;font-size:15px;flex:none}
.acfw-store-credits-checkout-ui > h3 .caret img{filter:brightness(0) invert(1)}

/* Checkout: checkbox labels line up with their box; the terms box is ticked and hidden (see functions.php) */
.woo .woocommerce-form__label-for-checkbox{display:flex!important;align-items:flex-start;gap:8px;line-height:1.35!important}
.woo .woocommerce-form__label-for-checkbox input[type=checkbox]{margin:2px 0 0!important;flex:none}
.woocommerce-terms-and-conditions-wrapper .form-row.validate-required{display:none!important}
.efc-terms-line{font-size:13px;margin:8px 0 0}

/* Basket page: the bottom "items · total / Basket" bar is redundant there */
.woocommerce-cart .bbar{display:none!important}
/* Basket coupon (phones): the hidden "Coupon:" label takes no space, so the box starts at the page edge; no grey tint */
@media (max-width:767px){
  .woocommerce-cart-form td.actions .coupon label,.woocommerce-cart-form td.actions .coupon::before,.woocommerce-cart-form td.actions .coupon::after{display:none!important;content:none!important}
  .woocommerce-cart-form tr:not(.cart_item) td.actions{background:none!important}
}
/* Checkout: "Save payment information…" sits on normal line spacing */
.woocommerce-SavedPaymentMethods-saveNew,.woocommerce-SavedPaymentMethods-saveNew label,#payment .payment_box .form-row label{line-height:1.35!important;display:inline-flex;align-items:flex-start;gap:8px}
.woocommerce-SavedPaymentMethods-saveNew input[type=checkbox]{margin:2px 0 0!important;flex:none}
/* Text that's there for search engines and screen readers but already shown elsewhere on screen */
.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
/* ---------- Footer: navy band, next order day strip, brand + three columns, small print ---------- */
.ft{background:var(--ink);color:#fff;border-top:0;padding:0 0 160px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ft a{color:#fff;text-decoration:none}
.ft a:hover{text-decoration:underline;text-underline-offset:3px}
.ftorder{background:#e8a92b;color:var(--ink);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding-block:10px;font-weight:600;-webkit-font-smoothing:auto}
.ftorder .wrapx{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.ftorder .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ftgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;padding-block:30px 26px}
.ftbrand{grid-column:1/-1}
.ft .wm{color:#fff}
.ft .wm > span{display:block;border-left-color:#fff}
.ft .wm b{font-size:30px}
.ftbrand p{margin:12px 0 0;max-width:34ch;color:#c9cbd8;font-size:14px}
.ftcol h2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#e8a92b;margin:0 0 10px}
.ftcol ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ftcol a{font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.ftcol i{width:10px;height:10px;display:inline-block;border:1px solid #fff;flex:none}
.ftcol address,.ftcol p{font-style:normal;font-size:14px;line-height:1.55;margin:0 0 10px;color:#e6e7ee}
.ftbase{display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid rgba(255,255,255,.18);padding-block:14px;font-size:12.5px;color:#c9cbd8}
.ftbase a{color:#c9cbd8}
@media (min-width:768px){
  .ft{padding-bottom:100px}
  .ftgrid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-block:40px 34px}
  .ftbrand{grid-column:auto}
}
/* About page: a bigger opening line and "How it works" as numbered steps across the page */
.prose .about-lede{font-size:19px;line-height:1.45;font-weight:500;max-width:60ch;margin-bottom:6px}
.prose .steps{list-style:none;padding:0;margin:14px 0 32px;max-width:none;display:grid;gap:12px;counter-reset:step}
.steps li{counter-increment:step;border:3px solid var(--ink);padding:14px 16px 16px;background:var(--paper)}
.steps li::before{content:counter(step);display:grid;place-items:center;width:42px;height:42px;background:var(--ink);color:#e8a92b;font:900 26px/1 var(--f);font-variation-settings:"wdth" 62;-webkit-font-smoothing:antialiased}
.steps h3{margin:12px 0 6px;font:900 22px/1 var(--f);font-variation-settings:"wdth" 62;text-transform:uppercase}
.steps p{margin:0;font-size:14px;max-width:none}
@media (min-width:600px){.prose .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.prose .steps{grid-template-columns:repeat(5,minmax(0,1fr))}}
.aboutcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px!important}
.aboutcta .cta{margin:0}
.aboutcta .cta.alt{background:var(--paper);color:var(--ink)}
@media (max-width:767px){.ftgrid > .ftcol:last-child{grid-column:1/-1}}
/* Out of stock: a grey, slightly see-through band across the middle of the picture */
.oos{inset:auto 0;top:50%;bottom:auto;transform:translateY(-50%);background:rgba(93,96,112,.6);color:#fff;padding:6px 0;font-size:12px;letter-spacing:.08em;-webkit-font-smoothing:antialiased}
/* FAQ: tap-to-open questions (WordPress Details blocks), bordered rows with + / − */
.prose .wp-block-details{border:2px solid var(--ink);border-top-width:0;max-width:760px;background:var(--paper)}
.prose .wp-block-details:first-of-type,.prose :not(.wp-block-details) + .wp-block-details{border-top-width:2px}
.prose .wp-block-details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;font-weight:800;font-size:16px;line-height:1.3}
.prose .wp-block-details summary::-webkit-details-marker{display:none}
.prose .wp-block-details summary::after{content:"+";flex:none;display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--ink);font-weight:900;font-size:18px;line-height:1}
.prose .wp-block-details[open] summary::after{content:"−";background:var(--ink);color:#fff}
.prose .wp-block-details[open] summary{border-bottom:1px solid var(--ln)}
.prose .wp-block-details > :not(summary){margin:0;padding:12px 16px 0}
.prose .wp-block-details > :last-child{padding-bottom:14px}
.prose .wp-block-details summary:focus-visible{outline:3px solid #2b6cd1;outline-offset:-3px}
/* Page "cards" (Contact): bordered boxes in a row, like the About steps without numbers */
.prose .cards{list-style:none;padding:0;margin:14px 0 28px;max-width:none;display:grid;gap:12px}
.cards li{border:3px solid var(--ink);padding:16px;background:var(--paper)}
.cards h3{margin:0 0 6px;font:900 22px/1 var(--f);font-variation-settings:"wdth" 62;text-transform:uppercase}
.cards p{margin:0;font-size:15px;max-width:none}
.cards a{font-weight:700}
@media (min-width:700px){.prose .cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* A highlighted "next date" box at the top of Collecting and Contact */
.prose .nextbox{background:var(--ink);color:#fff;padding:14px 18px;max-width:760px;margin:0 0 18px;-webkit-font-smoothing:antialiased}
.nextbox b{color:#e8a92b}
/* Out of stock: capitals sit centred in the band */
.oos{line-height:1;padding:8px 0 6px}
/* Product pages: the navy "More like this" band runs straight into the footer, no white strip between */
main:has(> .related:last-child){padding-bottom:0}
/* Phones: product pictures fill their frame (the photos have their own white space), and a smaller out-of-stock band */
@media (max-width:767px){
  .oos{font-size:9.5px;letter-spacing:.06em;padding:5px 0 4px}
}

/* Product page: tap the picture to see it larger */
.pp .big .zoom{display:grid;place-items:center;width:100%;height:100%;cursor:zoom-in}
.zbox{position:fixed;inset:0;z-index:9999;background:rgba(20,22,32,.92);display:grid;place-items:center;padding:16px;cursor:zoom-out}
.zbox img{max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.zbox .zx{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;background:#fff;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
body.zopen{overflow:hidden}

/* Brand "i" popup fades in, and fades out on its own */
.bt[open] .btpop{animation:btin .2s ease}
.bt.fade .btpop{opacity:0;transition:opacity .3s ease}
@keyframes btin{from{opacity:0}to{opacity:1}}

/* Room between the aisle or shelf list and the banner under it */
.banner{margin-top:16px}
/* More room between the last products and the About section */
.catdesc{margin-top:52px}

/* Brand and Sort stand out from the filter chips: solid, in the department colour */
.fl .ch[data-sheet]{border-style:solid;font-weight:800;font-size:13px;background:var(--dept);color:var(--dept-ink)}
.fl .ch[data-sheet][aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}

/* Phone Filter tab: Sort, Brand and the filters in one sheet */
.sheet h4{margin:16px 0 2px;font-size:18px}
.sheet h3 + h4{margin-top:4px}
.sheet h3 a{font-size:14px;font-variation-settings:"wdth" 100;text-transform:none;color:var(--ink)}
.tabs .dot.navy{background:var(--ink);color:var(--on-ink)}
.sheet a.opt{text-decoration:none;color:var(--ink)}
.pp .brrow .grapes{font-size:13px;color:var(--mut);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp .brrow .grapes::before{content:"·";margin-right:8px}
.pp .brrow .grapes a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Search box at the top of long brand and grape lists */
.sheet .sfind{width:100%;border:2px solid var(--ink);padding:8px 10px;font:inherit;font-size:16px;margin:0 0 6px;background:#fff}
.sheet .opt[hidden]{display:none}