/* ============================================================
   Better Appliance — the public site.

   Written against the actual markup: .nav is the header wrapper
   holding the logo, a <ul> and the "Shop now" button; icons are
   inline SVG line drawings; a card is
   .card > .ph, .chip, .bd(.name .meta), .at, .pr(b s span).
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;700;800&display=swap");

:root{
  --navy:#0a1f3d; --navy-2:#123259; --ink:#16202e; --body:#3d4c60;
  --mute:#6b7b91; --line:#e3e9f0; --bg:#f6f8fb; --gold:#ffc414;
  --gold-dk:#d9a300; --blue:#0a55d6; --green:#0d7a3e; --red:#c0271f;
  --shadow:0 1px 2px rgba(16,32,56,.06),0 8px 24px rgba(16,32,56,.07);
  --lift:0 2px 6px rgba(16,32,56,.10),0 18px 44px rgba(16,32,56,.13);
  --r:14px;
  --disp:"Barlow Condensed",-apple-system,"Segoe UI",sans-serif;
  --sans:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);margin:0;line-height:1.1;
  text-transform:uppercase;font-weight:800;letter-spacing:-.005em}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem)}
h3{font-size:1.12rem}
h4{font-size:.95rem}
p{margin:0 0 1em}
/* How wide the content runs.
   The coloured bands — the hero, the blue strip, the footer — already
   span the whole window. It was only the content inside them that was
   held at 1240px, which is what left the wide margins on a big monitor.
   1680 fills a large screen while keeping a line of text short enough to
   read comfortably. Change this one number and everything follows it. */
.wrap{width:min(1680px,100% - 48px);margin-inline:auto}

/* every inline icon on the site is a line drawing */
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- top strip ---------------- */
.topbar{background:var(--navy);color:#cfe0f5;font-size:.84rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:42px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:700}

/* ---------------- header: .nav is the wrapper ---------------- */
.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.site .nav{display:flex;align-items:center;gap:20px;min-height:80px}
.logo{flex:none}
.logo img{height:48px;width:auto}
.site .nav ul{list-style:none;display:flex;align-items:center;gap:4px;
  margin:0;padding:0;margin-left:auto;flex-wrap:wrap}
.site .nav ul a{display:block;color:var(--ink);font-weight:600;font-size:.95rem;
  padding:10px 13px;border-radius:9px}
.site .nav ul a:hover{background:#f1f5fa;text-decoration:none}
.site .nav .cta{flex:none;background:var(--gold);color:#20180a;font-weight:800;
  padding:13px 22px;border-radius:11px;border:1.5px solid var(--gold-dk);
  box-shadow:0 2px 0 var(--gold-dk);white-space:nowrap}
.site .nav .cta:hover{background:#ffcf3d;text-decoration:none}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;cursor:pointer;color:var(--ink)}
.burger svg{width:22px;height:22px}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:.95rem;line-height:1;padding:14px 24px;border-radius:11px;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn.gold{background:var(--gold);border-color:var(--gold-dk);color:#20180a;box-shadow:0 2px 0 var(--gold-dk)}
.btn.gold:hover{background:#ffcf3d}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.navy:hover{background:var(--navy-2)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.btn.ghost:hover{border-color:#b9c8dc}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------------- hero ---------------- */
.hero{background:linear-gradient(120deg,#0a1f3d 0%,#0e2a52 62%,#14355f 100%);color:#fff;
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-140px;top:-160px;width:600px;height:600px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,196,20,.18),transparent 62%)}
.hero .wrap{position:relative;z-index:2;padding:70px 0 78px;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr);gap:64px;align-items:center}
.hero h1{color:#fff;max-width:17ch}
.hero h1 span{display:block}
.hero p{color:#c3d5ec;font-size:1.1rem;max-width:54ch;margin-top:16px}
.hero-facts{display:flex;gap:34px;flex-wrap:wrap;margin-top:32px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16)}
.hero-facts div{display:flex;flex-direction:column;gap:2px}
.hero-facts b{font-family:var(--disp);font-size:1.85rem;color:var(--gold);line-height:1}
.hero-facts span{font-size:.83rem;color:#9db6d6}
.hero-card{background:#fff;border-radius:var(--r);padding:26px;box-shadow:var(--lift);color:var(--body)}
.hero-card h3{margin-bottom:16px}
.hero-card label{display:grid;gap:6px;margin-bottom:14px;font-size:.7rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.hero-card select{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:.95rem;color:var(--ink);background:#fff}
.hero-card select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,85,214,.12)}
.hero-card .btn{width:100%;margin-top:4px}

/* ---------------- sections ---------------- */
section{padding:62px 0}
.sec-head{margin-bottom:30px}
.sec-head div{min-width:0}
.kicker{display:block;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-bottom:8px}
h2.sec{margin:0}
.sec-head p{margin:10px 0 0;color:var(--mute);max-width:70ch}
.sec-head:has(.btn){display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}

/* ---------------- category tiles ---------------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:16px}
.cat{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:28px 16px;text-align:center;
  color:var(--ink);box-shadow:var(--shadow);
  transition:transform .14s,box-shadow .14s,border-color .14s}
.cat:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--lift);border-color:#c8d6e8}
.cat svg{width:40px;height:40px;stroke:var(--navy);stroke-width:1.5}
.cat b{font-size:1rem;font-weight:700}
.cat span{font-size:.82rem;color:var(--mute)}

/* ---------------- product grid ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:20px}
@media (min-width:1500px){.grid{grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:22px}}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  color:inherit;min-width:0;transition:transform .14s,box-shadow .14s,border-color .14s}
.card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--lift);border-color:#c8d6e8}
.ph{aspect-ratio:4/3;background:#eef2f7;overflow:hidden;flex:none}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .ph img{transform:scale(1.04)}
.card .chip{position:absolute;left:12px;top:12px;background:#eef4ff;color:var(--blue);
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px}
.bd{padding:15px 15px 6px;display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.name{font-weight:700;color:var(--ink);font-size:.98rem;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{font-size:.79rem;color:var(--mute)}
.at{display:flex;align-items:center;gap:5px;padding:0 15px;font-size:.78rem;color:var(--mute)}
.at svg{width:13px;height:13px;flex:none;stroke-width:1.6}
.pr{display:flex;align-items:baseline;gap:9px;padding:9px 15px 16px;flex-wrap:wrap}
.pr b{font-family:var(--disp);font-size:1.65rem;font-weight:800;color:var(--ink);line-height:1}
.pr s{color:var(--mute);font-size:.92rem}
.empty{grid-column:1/-1;background:#fff;border:1px dashed #ccd8e8;border-radius:var(--r);
  padding:54px 24px;text-align:center;color:var(--mute)}

/* ---------------- blocks, footer ---------------- */
.block{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--shadow)}
.block h3{margin-bottom:8px}
footer.site{background:var(--navy);border:0;position:static;padding:52px 0 26px;margin-top:16px;
  color:#a9c0dd}
footer.site .cols{gap:30px}
footer.site h4{color:#fff;margin-bottom:12px}
footer.site a{color:#a9c0dd;display:block;padding:4px 0}
footer.site a:hover{color:#fff}
footer.site img{height:42px;width:auto;margin-bottom:14px}
footer.site .wrap>p,footer.site .cols p{color:#8fa8c8;font-size:.9rem}

/* ---------------- smaller screens ---------------- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:32px;padding:48px 0 54px}
  .site .nav{flex-wrap:wrap;min-height:68px}
  .site .nav ul{display:none;order:3;width:100%;flex-direction:column;
    align-items:stretch;gap:2px;padding-bottom:12px}
  .site .nav ul.open{display:flex}
  .burger{display:inline-flex}
  .site .nav .cta{margin-left:auto}
}
@media (max-width:620px){
  .wrap{width:min(1680px,100% - 26px)}
  section{padding:42px 0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:12px}
  .bd{padding:12px 12px 4px}
  .at,.pr{padding-inline:12px}
  .pr b{font-size:1.35rem}
  .cats{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:11px}
  .cat{padding:20px 12px}
  .hero-facts{gap:22px}
}

/* ============================================================
   The other pages: shop, item, shops, contact, about, FAQs
   ============================================================ */
.container{width:min(1680px,100% - 48px);margin-inline:auto}
.pagehead{padding:34px 0 8px}
.crumbs{font-size:.84rem;color:var(--mute);padding:16px 0 0}
.crumbs a{color:var(--mute)}
.back{display:inline-flex;align-items:center;gap:7px;color:var(--mute);font-weight:600;font-size:.88rem}
.back:hover{color:var(--blue);text-decoration:none}
.hint{color:var(--mute);font-size:.88rem}
.note{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:10px;padding:16px 18px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.count{color:var(--mute);font-size:.88rem}
.dark{background:#0d1826;color:#c7d7ec}
.dark h2,.dark h3{color:#fff}
.yellow{background:var(--gold);color:#20180a}

/* filters and toolbar on the shop page */
.filters,.toolbar{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--shadow);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(166px,1fr));gap:12px;align-items:end;margin-bottom:24px}
.filters label,.toolbar label{display:grid;gap:6px;font-size:.7rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);min-width:0}
.filters select,.filters input,.toolbar select,.toolbar input{width:100%;padding:12px 13px;
  border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.94rem;
  color:var(--ink);background:#fff}
.filters select:focus,.filters input:focus,.toolbar select:focus,.toolbar input:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,85,214,.12)}

/* the item page */
.item-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:42px;
  align-items:start;padding:28px 0 10px}
.gallery{display:grid;gap:12px;min-width:0}
/* The lightbox that opens when a photograph is clicked. It carries
   role="dialog" and is shown by adding .show — it is NOT the picture frame
   on the page. Styling it as a frame left an empty box with a broken image
   sitting above the footer on every item. */
.lb{position:fixed;inset:0;z-index:4000;display:none;place-items:center;padding:28px;
  background:rgba(6,16,32,.90);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lb.show{display:grid}
.lb img{max-width:min(1200px,94vw);max-height:88vh;width:auto;height:auto;object-fit:contain;
  border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:10px}
.thumbs img{width:100%;height:84px;object-fit:cover;border:1.5px solid var(--line);
  border-radius:9px;cursor:pointer;background:#fff}
.thumbs img.on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(10,85,214,.18)}
.info{display:grid;gap:14px;min-width:0}
.pricebox{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.now{font-family:var(--disp);font-size:2.3rem;font-weight:800;color:var(--ink);line-height:1}
.was{color:var(--mute);text-decoration:line-through;font-size:1rem}
.off{background:#fdecea;color:var(--red);font-weight:800;font-size:.76rem;padding:4px 10px;border-radius:999px}
.specs{width:100%;border-collapse:collapse;font-size:.92rem}
.specs td,.specs th{padding:10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.specs th{color:var(--mute);font-weight:600;width:42%}
.comments{background:#fff8e8;border:1px solid #f0dfa8;border-left:4px solid var(--gold);
  border-radius:10px;padding:14px 16px;color:#5b4a12;font-size:.92rem}
.idtag,.id{font-size:.78rem;color:#9aa9bd;letter-spacing:.03em}
.qty{font-size:.9rem;color:var(--mute)}
.cond,.state{font-size:.85rem;color:var(--mute)}
.itemcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.noimg{display:grid;place-items:center;height:100%;color:#a9b6c8;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase}

/* labels */
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;font-size:.7rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;background:#eef4ff;color:var(--blue)}
.badge.avail,.avail{background:#eafaf1;color:var(--green)}
.badge.sold,.sold{background:#fdecea;color:var(--red)}

/* shops */
.outlets{display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));gap:20px}
.outlet{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px}
.visit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center}
.visit-photo img{border-radius:var(--r);box-shadow:var(--lift)}
.visit-copy p{color:var(--mute)}

/* forms, faqs, about */
.form-card,.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow)}
.faq{margin-bottom:12px;padding:20px 22px}
.faq h3{margin-bottom:7px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px;align-items:start}
.form-card label,.contact-grid label{display:grid;gap:6px;margin-bottom:15px;font-size:.7rem;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.form-card input,.form-card textarea,.form-card select,
.contact-grid input,.contact-grid textarea,.contact-grid select{width:100%;padding:13px 14px;
  border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;color:var(--ink);background:#fff}
.form-card input:focus,.form-card textarea:focus,
.contact-grid input:focus,.contact-grid textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(10,85,214,.12)}
.form-card textarea,.contact-grid textarea{min-height:130px;resize:vertical}
.about-hero{padding:52px 0 18px}
.notfound{background:#fff;border:1px dashed #ccd8e8;border-radius:var(--r);padding:56px 24px;
  text-align:center;color:var(--mute)}

/* footer odds and ends */
.hd{background:var(--navy);color:#a9c0dd;padding:52px 0 26px;margin-top:16px}
.hd h4{color:#fff;margin-bottom:12px}
.hd a{color:#a9c0dd;display:block;padding:4px 0}
.hd a:hover{color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;
  font-size:.82rem;color:#7f96b5;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mainph{font-weight:700;color:#fff}

/* The item photograph. A fixed 4:3 frame so every appliance occupies the
   same space on the page — tall fridges and wide ranges alike — with the
   picture fitted inside rather than cropped or stretched. */
.gallery .mainph{position:relative;width:100%;background:#f4f7fb;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;cursor:zoom-in;font-weight:400;color:inherit}
/* The frame's height comes from its width — 75% of it, so 4:3 — which works
   in every browser, including old ones that do not understand aspect-ratio.
   Every appliance then occupies exactly the same space whatever shape the
   photograph is: tall fridges, wide ranges, square washers. */
.gallery .mainph::before{content:"";display:block;padding-top:75%}
.gallery .mainph img{position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:contain;padding:16px}
.gallery .mainph:hover img{transform:none}
.header-logo{height:48px;width:auto}

@media (max-width:900px){
  .item-wrap,.visit-grid,.contact-grid{grid-template-columns:1fr;gap:26px}
}

/* ============================================================
   Sections drawn from the newer marketing site: the savings
   band, the brand strip and the reasons-to-buy trio.
   Our own colours and wording — the shape is what carries over.
   ============================================================ */
:root{--brand:#004bf4}

/* the number-first band under the hero */
.band{background:var(--brand);color:#fff;padding:0}
.band-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:26px 0}
.band-in div{display:flex;flex-direction:column;gap:2px;min-width:0}
.band-in b{font-family:var(--disp);font-size:1.7rem;line-height:1.05}
.band-in span{font-size:.88rem;color:#cfdcff}

/* the brands strip */
.sec-brands{padding:58px 0;background:#fff;border-block:1px solid var(--line)}
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:14px;margin-top:26px}
.brands span{display:grid;place-items:center;min-height:76px;padding:14px;background:#fff;
  border:1px solid var(--line);border-radius:11px;font-family:var(--disp);font-size:1.25rem;
  font-weight:800;color:#516078;letter-spacing:.03em;transition:color .14s,border-color .14s}
.brands span:hover{color:var(--ink);border-color:#c3d2e6}

/* reasons to buy */
.sec-why{padding:62px 0}
.whys{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:20px;margin-top:6px}
.why{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--shadow);border-top:4px solid var(--brand)}
.why h3{margin-bottom:9px}
.why p{margin:0;color:var(--mute);font-size:.95rem}

@media (max-width:760px){
  .band-in{grid-template-columns:1fr;gap:16px;padding:22px 0}
  .band-in b{font-size:1.45rem}
  .brands{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .brands span{min-height:62px;font-size:1.05rem}
}

/* Running strip of short claims, under the top bar */
.ticker{background:var(--brand);color:#fff;overflow:hidden;
  font-size:.82rem;font-weight:600;letter-spacing:.02em}
.ticker-track{display:flex;align-items:center;gap:0;width:max-content;
  animation:ticker-run 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{padding:9px 26px;white-space:nowrap;display:flex;align-items:center}
.ticker-track span::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--gold);margin-right:14px;flex:none}
@keyframes ticker-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Sections fade up as they come into view — the small movement that makes
   a page feel alive rather than a printed sheet. */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   PREMIUM PASS
   Fixed header, frosted glass, a hero that moves behind the
   words, and a brand rail that runs the full width.
   ============================================================ */

/* ---- the header stays put, and frosts as you scroll past it ---- */
.site{position:sticky;top:0;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(16,32,56,.08);transition:box-shadow .25s,background .25s}
.site.stuck{box-shadow:0 6px 26px rgba(16,32,56,.10);background:rgba(255,255,255,.94)}
.site .nav{min-height:76px}
.site .nav ul a.on{color:var(--brand);background:rgba(0,75,244,.07)}

/* ---- the hero: photographs drifting behind frosted glass ---- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  animation:hero-cycle 24s ease-in-out infinite}
.hero-bg .slide:nth-child(2){animation-delay:8s}
.hero-bg .slide:nth-child(3){animation-delay:16s}
@keyframes hero-cycle{
  0%{opacity:0;transform:scale(1.10)}
  6%{opacity:.55}
  30%{opacity:.55}
  36%{opacity:0;transform:scale(1.02)}
  100%{opacity:0}
}
/* the wash that keeps the words readable whatever is behind them */
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(6,20,42,.94) 0%,rgba(6,20,42,.80) 46%,rgba(6,20,42,.55) 100%)}
.hero .wrap{position:relative;z-index:3}
.hero h1{text-shadow:0 2px 20px rgba(0,0,0,.35)}

/* ---- glass panels ---- */
.hero-card{background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 24px 60px rgba(4,16,36,.34),0 2px 0 rgba(255,255,255,.5) inset}
.glass{background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:22px;color:#e8f0fb}
.hero-facts{padding:20px 0 0}
.hero-facts div{padding-right:26px}

/* ---- the brand rail: full width, larger, edge to edge ---- */
.sec-brands{padding:64px 0 68px}
.brand-rail{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;margin-top:34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.brand-track{display:flex;align-items:center;gap:84px;width:max-content;
  animation:brand-drift 44s linear infinite}
.brand-track img{height:52px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;
  transition:filter .25s,opacity .25s,transform .25s}
.brand-track img:hover{filter:none;opacity:1;transform:scale(1.06)}

/* ---- cards lift a little more convincingly ---- */
.card{border-radius:16px}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 50px rgba(16,32,56,.16)}
.card .chip{background:rgba(255,255,255,.92);color:var(--ink);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(16,32,56,.14)}
.cat{border-radius:16px}
.cat:hover{transform:translateY(-4px)}

/* ---- back to top ---- */
.totop{position:fixed;right:22px;bottom:22px;z-index:70;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;
  box-shadow:0 10px 26px rgba(10,31,61,.34);opacity:0;pointer-events:none;
  transform:translateY(10px);transition:opacity .25s,transform .25s}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--brand);text-decoration:none}

/* ---- footer a touch richer ---- */
.hd{background:linear-gradient(180deg,#0a1f3d,#071731)}
.foot-logo{height:44px;width:auto;margin-bottom:14px}

@media (max-width:980px){
  .brand-track{gap:52px}
  .brand-track img{height:40px}
  .totop{right:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  .hero-bg .slide{animation:none;opacity:.4}
  .hero-bg .slide:not(:first-child){display:none}
}

/* Staff photo button on the item page. Only ever rendered for a signed-in
   member of staff, so a customer's page does not contain it at all. */
.staff-photo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  padding:12px 14px;background:#fff8e1;border:1px solid #f0dfa8;border-radius:10px}
.staff-photo .tiny{font-size:.82rem;color:#6b5300}

/* Stocktake controls on the item page — staff only, never rendered for a
   customer. */
.staff-checkin{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;
  padding:12px 14px;background:#eef4ff;border:1px solid #cbdcf7;border-radius:10px}
.staff-checkin.done{background:#e9f7ef;border-color:#b4e2c6}
.staff-checkin .sweep{display:flex;align-items:center;gap:7px;font-size:.86rem;
  font-weight:700;color:#0a1a2f;cursor:pointer}
.staff-checkin .tiny{font-size:.82rem;color:#41556f}

/* "Show more" under the shop grid. The list is drawn a batch at a time so a
   phone is never asked to hold a thousand cards at once. */
.more-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 0 6px}
.more-wrap[hidden]{display:none}
.more-wrap .hint{margin:0}