/* Step 36: simple and clean layout. Loaded last on every page.
   Rules: one main button per screen, one notice at a time, one bottom dock, tap targets of 44px or more. */

/* ---------- One bottom dock ----------
   Every bottom space on phones and tablets comes from these variables, never a hand typed number.
   --dtabs-h: seller and admin tab bar. --mbar-h / --dbar-h: one action bar on top.
   --dock: the total height of what is fixed at the bottom of the screen on this page.
   Step 50: the buyer website has no bottom tab bar. A buyer page only keeps space for a real sticky bar:
   the buy bar (product), the basket bar and the pay bar (checkout), all at the screen bottom on phones. */
:root{--dtabs-h:0px;--mbar-h:72px;--dbar-h:70px;--dock:0px}

@media (max-width:767px){
  body:has(.mbar){--dock:calc(var(--mbar-h) + env(safe-area-inset-bottom))}
  body:has(.mbar[style*="display: none"]){--dock:0px}
  .mbar,.mbar--bottom{bottom:0}
  /* The page keeps clear of the dock, so nothing hides under it. The footer keeps its own small padding. */
  .page{padding-bottom:var(--dock)}
  .ftr{padding-bottom:var(--s4)}
  .mbar-space{display:none}
  .toasts{bottom:calc(var(--dock) + 12px)}
}
@media (max-width:1023px){
  :root{--dtabs-h:calc(71px + env(safe-area-inset-bottom))}
  body:has(.dtabs){--dock:var(--dtabs-h)}
  body:has(.dtabs):has(.dbar){--dock:calc(var(--dtabs-h) + var(--dbar-h))}
  .dbar{bottom:calc(var(--dtabs-h) - 1px)}
  .dmain{padding-bottom:calc(var(--dock) + 24px)}
  .dbar-space{display:none}
  .offline-bar{bottom:calc(var(--dock) + 16px)}
  body:has(.dtabs) .toasts{bottom:calc(var(--dock) + 12px)}
}
@media (min-width:768px) and (max-width:1023px){
  .dmain{padding-bottom:calc(var(--dock) + 32px)}
}

/* ---------- One notice at a time (App\Support\TopNotice) ----------
   The announcement carries the delivery area on its own line, so the strip under it hides.
   When the buyer closes the announcement, the strip shows again. */
.pn-ann:not([hidden]) ~ .strip{display:none}
.pn-ann__loc{flex:none;display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;padding:0 var(--s1);border:0;background:none;color:inherit;font:inherit;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap}
.pn-ann__loc b{font-weight:var(--fw-bold)}
.pn-ann__loc u{text-underline-offset:3px}
.pn-ann__x{width:44px;height:44px;border-radius:22px}
.pn-ann__t a{padding:var(--s4) 0}
.strip__loc{min-height:44px}
@media (max-width:767px){
  .pn-ann{font-size:var(--fs-sm);line-height:1.35}
  .pn-ann__in{gap:var(--s2);min-height:44px;padding-top:2px;padding-bottom:2px;padding-right:var(--s1)}
  .pn-ann__in .pn-ann__x{display:none}
  .strip .wrap{min-height:44px}
}

/* ---------- Phone and tablet header (step 50) ----------
   Under 1024px: menu, logo, then the icons (Search on phones, Account, Basket) in one 56px row.
   Phones: the search box opens over the row; the header sticks and hides while scrolling down.
   Tablets: the search box sits in the row. 1024 and up: the desktop header, unchanged (no menu button). */
.hdr__menu,.hdr__sbtn,.hdr__acct,.hdr__sclose{display:none}
@media (max-width:1023px){
  .hdr__row{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"menu logo search actions";gap:var(--s2);min-height:56px;padding-top:var(--s1);padding-bottom:var(--s1);align-items:center}
  .hdr__menu{display:inline-flex;grid-area:menu;margin-left:calc(var(--s2) * -1)}
  .hdr .logo{font-size:var(--fs-xl);margin-right:0}
  .hdr .search{height:44px;padding-left:var(--s3)}
  .hdr .search > svg{width:18px;height:18px}
  .hdr .actions{display:flex;gap:0;margin-right:calc(var(--s2) * -1)}
  .hdr .actions .hdr__acct{display:inline-flex}
  .hdr .actions .iconbtn--desk{display:none}
  .hdr .count{top:2px;right:0}
}
@media (max-width:767px){
  .hdr{position:sticky;top:0;z-index:70;transition:transform .2s ease-out}
  .hdr.is-up{transform:translateY(-100%)}
  .hdr__row{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"menu logo actions";position:relative}
  .hdr .actions{justify-self:end}
  .hdr .actions .hdr__sbtn{display:inline-flex}
  .hdr .search{display:none}
  /* Search open: the box covers the header row (logo and icons stay underneath, out of reach). */
  .hdr.is-search .search{display:flex;position:absolute;left:var(--s4);right:var(--s4);top:6px;z-index:2;padding-right:0}
  .hdr.is-search .hdr__sclose{display:inline-flex;flex:none}
  .hdr.is-search .actions,.hdr.is-search .logo,.hdr.is-search .hdr__menu{visibility:hidden}
  .hdr.is-search .sugg{max-height:calc(100dvh - 80px)}
  /* Category links move into the page (homepage tiles, search Filter) and the menu drawer. */
  .cats{display:none}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.hdr{transition:none}}

/* A slim way back on account sub pages (phones only; desktop has the side menu). */
.mback{display:none}
@media (max-width:767px){
  .mback{display:block;width:100%;box-sizing:border-box;padding-top:var(--s1)}
  .mback__a{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;margin-left:calc(var(--s1) * -1);font-size:var(--fs-md);color:var(--ink);text-decoration:none}
  .mback__a:hover{text-decoration:underline;text-underline-offset:3px}
}

/* Desktop account menu: Sign out is a form button that looks like the links. */
.pn-acct__menu form{margin:0}
.pn-acct__out{display:flex;align-items:center;width:100%;min-height:40px;padding:0 var(--s3);border:0;border-radius:calc(var(--r) - 2px);background:none;font:inherit;font-size:var(--fs-md);color:var(--ink);text-align:left;cursor:pointer}
.pn-acct__out:hover,.pn-acct__out:focus-visible{background:var(--bg-2)}

/* ---------- Menu drawer (step 50): phones and tablets ---------- */
.pn-drawer{position:fixed;inset:0;z-index:85;font-family:var(--font);color:var(--ink);font-size:var(--fs-md);line-height:1.5}
.pn-drawer__bg{position:absolute;inset:0;background:rgba(23,20,43,.45)}
.pn-drawer__panel{position:absolute;top:0;bottom:0;left:0;width:min(86vw,360px);display:flex;flex-direction:column;background:var(--bg);box-shadow:0 0 24px rgba(9,9,11,.12);overscroll-behavior:contain}
.pn-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:56px;padding:var(--s1) var(--s2) var(--s1) var(--s4);border-bottom:1px solid var(--line)}
.pn-drawer__head .logo{font-size:var(--fs-xl)}
.pn-drawer__area{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:48px;padding:0 var(--s4);border:0;border-bottom:1px solid var(--line);background:var(--bg-2);font:inherit;font-size:var(--fs-sm);color:var(--ink);text-align:left;cursor:pointer}
.pn-drawer__area span{flex:1;min-width:0}
.pn-drawer__area b{font-weight:var(--fw-bold)}
.pn-drawer__area u{text-underline-offset:3px}
.pn-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:var(--s2) 0 calc(var(--s6) + env(safe-area-inset-bottom))}
.pn-drawer__h{margin:0;padding:var(--s3) var(--s4) var(--s1);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:#4A4560}
.pn-drawer__list{margin:0;padding:0;list-style:none}
.pn-drawer__list--sep{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
.pn-drawer__row{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:48px;padding:0 var(--s4);border:0;background:none;font:inherit;font-size:var(--fs-md);font-weight:var(--fw-reg);color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
.pn-drawer__row span{flex:1;min-width:0}
.pn-drawer__row svg{flex:none;color:#4A4560}
.pn-drawer__row[aria-current="page"]{color:var(--brand-deep,#5B21E6);font-weight:var(--fw-bold)}
.pn-drawer__row[aria-current="page"] svg{color:var(--brand,#5B21E6)}
.pn-drawer__back{display:flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s4);border:0;background:none;font:inherit;font-size:var(--fs-md);color:var(--ink);cursor:pointer}
@media (hover:hover){.pn-drawer__row:hover,.pn-drawer__back:hover{background:var(--bg-2)}}
.pn-drawer__row:focus-visible,.pn-drawer__back:focus-visible,.pn-drawer__area:focus-visible{outline:2px solid var(--brand,#5B21E6);outline-offset:-2px}
.pn-drawer.dr-on{transition:visibility .22s}
.pn-drawer.dr-on .pn-drawer__bg{transition:opacity .22s ease-out}
.pn-drawer.dr-on .pn-drawer__panel{transition:transform .22s ease-out}
.pn-drawer.dr-off .pn-drawer__bg{opacity:0}
.pn-drawer.dr-off .pn-drawer__panel{transform:translateX(-100%)}
@media (prefers-reduced-motion:reduce){.pn-drawer.dr-on,.pn-drawer.dr-on .pn-drawer__bg,.pn-drawer.dr-on .pn-drawer__panel{transition:none}}
/* Step 68: the menu button shows on desktop too, so the drawer opens there as well (was phones and tablets only). */

/* Tablet homepage: the category tiles shrink to fit instead of pushing the page sideways. */
@media (min-width:768px) and (max-width:1023px){.p .pn-cats{grid-template-columns:repeat(var(--n,6),minmax(0,120px))}}

/* ---------- Phone footer: logo, 4 links, one legal line ---------- */
.ftr__mlinks{display:none}
@media (max-width:767px){
  .ftr{padding-top:var(--s3)}
  .ftr__row{gap:0}
  .ftr__row .logo{min-height:44px;display:inline-flex;align-items:center;align-self:flex-start}
  .ftr__links,.ftr__pay{display:none}
  .ftr__mlinks{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin:0;padding:0;list-style:none}
  .ftr__mlinks a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-md);color:var(--ink-2);text-decoration:none}
  .ftr__base{margin:0;padding-bottom:var(--s1)}
}

/* ---------- Tap targets: 44px or more, 48px for main buttons. Padding, not bigger text. ---------- */
.btn{min-height:44px}
.btn--p{min-height:48px}
.chip,.select,.badge,.tab,.back{min-height:44px;height:auto}
.qty{height:46px}
.qty button{width:44px;height:44px}
.textbtn{min-height:44px;display:inline-flex;align-items:center}
.link{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.crumbs{margin-bottom:0}
.logo{display:inline-flex;align-items:center;min-height:44px}
/* The switch looks the same (44 by 26) but its tap area is 62 by 44: a clear border around the track. */
.switch{box-sizing:content-box;border:9px solid transparent !important;background-clip:padding-box;margin:-8px}
.hbn__dot{position:relative}
.hbn__dot::before{content:"";position:absolute;left:-6px;right:-6px;top:-18px;bottom:-18px}

/* ---------- Seller catalogue: compact list rows (photo, name, usual price, tick) ---------- */
.cat.cat--list{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);overflow:hidden}
.cat--list .cp{border:0;border-radius:0;border-bottom:1px solid var(--line);padding:0;box-shadow:none;background:var(--bg)}
.cat--list .cp:last-child{border-bottom:0}
.cat--list .cp.on{background:var(--brand-mist,#EFE9FD)}
.cat--list .cp__pick{display:grid;grid-template-columns:56px minmax(0,1fr) 28px;grid-template-areas:"img name tick" "img meta tick";column-gap:var(--s3);row-gap:2px;align-items:center;width:100%;min-height:72px;padding:var(--s2) var(--s3);text-align:left}
.cat--list .cp__img,.cat--list .cp__ph{grid-area:img;width:56px;height:56px;aspect-ratio:auto;border-radius:8px;object-fit:cover;font-size:var(--fs-sm);overflow:hidden}
.cat--list .cp__row{display:contents}
.cat--list .cp__name{grid-area:name;-webkit-line-clamp:2;line-clamp:2}
.cat--list .cp__tick{grid-area:tick;justify-self:end}
.cat--list .meta{grid-area:meta}
.cat--list .cp__set{padding:0 var(--s3) var(--s3) 80px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.cat--list .skel-img{width:56px;height:56px}
@media (min-width:1024px){
  .cat.cat--list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:0;background:none;gap:var(--s2);overflow:visible}
  .cat--list .cp{border:1px solid var(--line);border-radius:var(--r)}
  .cat--list .cp:last-child{border-bottom:1px solid var(--line)}
}

/* ---------- Phone homepage: less scroll ---------- */
@media (max-width:767px){
  .p .sec--tight{padding:var(--s5) 0}
  .p .sec__head{margin-bottom:var(--s3);align-items:center}
  .pn-cattiles{margin-bottom:0;gap:var(--s2)}
  .pn-cattiles a{min-height:52px;padding:var(--s2) var(--s3)}
}
@media (max-width:767px){
  /* Homepage shop cards: name, area, distance, stars, hours and when it delivers (owner, 8 Nov: show them on phones too). */
  [data-shops-near] .pn-shopcard__img{aspect-ratio:auto;height:72px}
}

/* ---------- Search: one row (Filter, Sort) before the results ---------- */
.pn-filterrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.pn-filterbtn{gap:var(--s2);padding:0 var(--s4)}
.pn-filterbtn.is-on{background:var(--brand-mist,#EFE9FD);border-color:var(--brand,#5B21E6);color:var(--brand-deep,#5B21E6)}
@media (max-width:767px){
  /* Breadcrumbs are for desktop; on phones the tab bar and the back arrow do that job. */
  .p .crumbs{display:none}
  .p .pmain{padding-top:var(--s4)}
  .pn-results-head{margin-bottom:var(--s3) !important;gap:2px !important}
}
@media (min-width:1024px){.pn-filterrow{margin-bottom:var(--s6)}}

/* ---------- Product page on phones: photo, name, price and condition on the first screen ---------- */
@media (max-width:767px){
  .pdp{gap:var(--s4)}
  .pdp .gallery__main{aspect-ratio:4/3;width:100%;max-height:300px}
  .pdp .gallery{gap:var(--s2)}
  .pdp .thumbs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pdp > .stack{gap:var(--s4) !important}
}

/* ---------- Seller "More ways to add" ---------- */
.pn-more{max-width:980px}
.pn-more__sum{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;font-size:var(--fs-md);font-weight:var(--fw-bold);cursor:pointer;list-style:none;color:var(--ink)}
.pn-more__sum::-webkit-details-marker{display:none}
.pn-more[open] .pn-more__sum svg{transform:rotate(180deg)}
.pn-more__list{margin-top:var(--s2)}
.pn-more__list .item{min-height:56px}
.pn-searchscan{display:flex;gap:var(--s2);align-items:stretch}
.pn-searchscan .searchbox{flex:1;min-width:0}
.pn-searchscan .btn{flex:none;gap:var(--s2)}
.cat--list .cp__ph{font-size:0}

/* ---------- Admin Money: one warning box ---------- */
.pn-held summary{cursor:pointer;list-style:none;display:inline-flex}
.pn-held summary::-webkit-details-marker{display:none}
.pn-held__list{margin:var(--s2) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s1);font-size:var(--fs-md)}
.pn-held__list li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3)}

/* ---------- More tap targets (step 36 audit: search, stock, admin Website and app, Money) ---------- */
.dtop__logo{display:inline-flex;align-items:center;min-height:44px}
.pend .switch{transform:none}
button.grip{min-width:44px;min-height:44px;justify-content:center;align-items:center;margin:-12px -8px}
.seg2 button{height:auto;min-height:44px}
.row > .textbtn,.between > .textbtn,.stk-end .textbtn{min-height:44px !important}
a.mini2{display:inline-flex;align-items:center;min-height:44px}
.note a,.mini2 a,.tbl td a,td > a,.pn-ann__t a,p > a.textbtn{padding-top:var(--s4);padding-bottom:var(--s4)}
.card__link,.linkbtn{display:inline-flex;align-items:center;min-height:44px}
.bigswitch{box-sizing:content-box;border:4px solid transparent !important;background-clip:padding-box;margin:-4px}
/* Basket: the shop name above its items is a link too. */
.stack > a[x-text="s.name"]{display:inline-flex;align-items:center;min-height:44px;align-self:flex-start}
/* Step 50: phones, the native clear button would sit beside our own Close search button. */
@media (max-width:767px){.hdr .search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}}

/* ---------- Step 67: Delivery | Collect beside the search box ----------
   One rounded group: the two-option toggle on the left, the search box on the right (line border, 12px corners).
   Selected: ink text on violet tint (violet fill stays for the one main action). The area picker holds
   "Anywhere in the UK". Phones: on browse pages (hdr--full) the toggle and search box share a second header row;
   other pages keep the search icon and pop-over, without the toggle. */
.hway{grid-area:search;display:flex;align-items:stretch;min-width:0}
.hway .search{flex:1;min-width:0;border-color:var(--line);border-radius:0 var(--r-md) var(--r-md) 0}
.hway .search:focus-within{border-color:var(--ink)}
.wayt{display:flex;flex:none;border:1.5px solid var(--line);border-right:0;border-radius:var(--r-md) 0 0 var(--r-md);background:var(--bg);overflow:hidden}
.wayt__b{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:0 var(--s4);border:0;background:none;font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.wayt__b + .wayt__b{border-left:1px solid var(--line)}
.wayt__b:hover{background:var(--bg-2);color:var(--ink)}
.wayt__b.on,.wayt__b.on:hover{background:var(--violet-tint);color:var(--ink);cursor:default}
.wayt__b:focus-visible{outline:2px solid var(--focus);outline-offset:-4px;border-radius:var(--r-md)}
@media (max-width:767px){
  .hway:not(.hway--row){display:contents}
  .hway:not(.hway--row) .wayt{display:none}
  .hway:not(.hway--row) .search{border-color:var(--ink);border-radius:var(--r-md)}
  .hdr--full .hdr__row{grid-template-areas:"menu logo actions" "hway hway hway";padding-bottom:var(--s2)}
  .hway--row{grid-area:hway}
  .hdr.hdr--full .actions .hdr__sbtn,.hdr.hdr--full .hdr__sclose{display:none}
  .hdr .hway--row .search{display:flex;position:static;height:44px;padding-right:var(--s1)}
  .hdr.is-search .hway--row .search{position:static}
  .hdr--full.is-search .actions,.hdr--full.is-search .logo,.hdr--full.is-search .hdr__menu{visibility:visible}
  .wayt__b{padding:0 var(--s3);min-height:44px}
  /* Typing: the search box takes the whole row and gets its Ask and photo buttons back. */
  .hway--row .search:not(:focus-within) .iconbtn{display:none}
  .hway--row:has(.search:focus-within) .wayt{display:none}
  .hway--row .search:focus-within{border-radius:var(--r-md)}
}
@media (prefers-reduced-motion:no-preference){.wayt__b{transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease)}}

/* The third area choice in the picker: Anywhere in the UK. */
.pn-anyuk{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s4);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);text-decoration:none}
.pn-anyuk:hover{background:var(--bg-2)}
.pn-anyuk > svg{flex:none;color:var(--ink-2)}
.pn-anyuk__t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pn-anyuk__t b{font-weight:var(--fw-bold)}
.pn-anyuk__t small{font-size:var(--fs-sm);color:var(--ink-2)}
.pn-anyuk__r{flex:none;width:20px;height:20px;border:1.5px solid var(--ink-2);border-radius:50%}
.pn-anyuk.on{border-color:var(--violet);background:var(--violet-tint)}
.pn-anyuk.on .pn-anyuk__r{border:6px solid var(--violet)}

/* The announcement carries the whole strip line on wide screens, the short one on smaller ones. */
.pn-ann__full{display:none}
@media (min-width:1024px){.pn-ann__full{display:inline}.pn-ann__short{display:none}}