/* Golem Commerce — shared site shell (every page: business, Market watch, legal)
   Tokens, type, buttons, header with the Business / Market watch switch, footer. */
:root{
  --ink:#2C4557; --ink-2:#1F3342; --body:#3d5566; --muted:#5b6f7d; --faint:#617385;
  --green:#8CC63F; --green-text:#4F7A1C; --green-tint:#EEF5E4;
  --paper:#FAFBF9; --mist:#F0F3EF; --line:#E1E6E4; --rule:#C9D2D0;
  --kraft:#D8B27C;
  --gut:clamp(20px,5vw,64px); --max:1280px;
  --r-s:4px; --r-l:12px;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Instrument Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums}
/* faint paper grain so large flat areas don't feel sterile */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-s);box-shadow:0 0 0 6px rgba(140,198,63,.4)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-s)}
.skip:focus{left:8px}

/* type */
h1,h2,h3{font-family:Outfit,sans-serif;font-weight:500;color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.025em}
.display{font-size:clamp(44px,6.4vw,92px);line-height:.96;letter-spacing:-.04em}
.h2{font-size:clamp(30px,3.6vw,48px);line-height:1.04}
.h3{font-size:clamp(20px,1.8vw,24px);line-height:1.2;letter-spacing:-.015em}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--body);max-width:56ch;margin:0;text-wrap:pretty}
.body{color:var(--body);margin:0;max-width:62ch;text-wrap:pretty}
.small{font-size:14px;color:var(--muted)}
.kicker{font-family:Outfit,sans-serif;font-size:14px;font-weight:500;color:var(--green-text);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:18px;height:2px;background:var(--green);border-radius:2px}
.mark{background:linear-gradient(transparent 62%,var(--green-tint) 62%)}
.tnum{font-variant-numeric:tabular-nums}

/* buttons & links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r-s);background:var(--ink);color:#fff;border:1.5px solid var(--ink);font:600 15px Outfit,sans-serif;letter-spacing:.01em;cursor:pointer;transition:background .2s,border-color .2s,transform .12s}
.btn:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.line:hover{border-color:var(--ink);background:#fff}
.btn.sm{min-height:40px;padding:0 16px;font-size:14px}
.link{font-family:Outfit,sans-serif;font-weight:500;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--ink)}

/* header: one bar for the whole site, with the Business / Market watch switch */
.site-head{position:sticky;top:0;z-index:50;background:rgba(250,251,249,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:28px;height:68px}
.site-head .brand img{height:36px;width:auto}
.switch{display:inline-flex;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-s);padding:3px;gap:2px}
.switch a{padding:7px 12px;border-radius:3px;font:500 14px Outfit,sans-serif;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s}
.switch a:hover{color:var(--ink)}
.switch a[aria-current="page"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(44,69,87,.12)}
.site-nav{display:flex;gap:2px;margin-left:auto;font:500 14px Outfit,sans-serif}
.site-nav a{padding:10px 12px;border-radius:var(--r-s);color:var(--body);white-space:nowrap;transition:color .2s,background .2s}
.site-nav a:hover{color:var(--ink);background:var(--mist)}
.site-nav a[aria-current="page"],.site-nav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--green);border-radius:0}

/* sections: title column + content column, separated by rules */
.sec{padding:clamp(36px,4vw,60px) 0 clamp(40px,4.5vw,64px);border-top:1px solid var(--line);scroll-margin-top:72px}
.sec-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px clamp(24px,4vw,64px)}
.sec-label{font:500 15px Outfit,sans-serif;color:var(--ink);position:sticky;top:96px;align-self:start;display:flex;gap:10px;align-items:baseline}
.sec-label::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--green);transform:translateY(-1px)}

/* footer: identical on every page */
.site-foot{border-top:1px solid var(--line);padding:48px 0 28px;font-size:14px;color:var(--muted)}
.site-foot .wrap{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:32px}
.site-foot .k{font:600 13px Outfit,sans-serif;color:var(--ink);margin-bottom:10px}
.site-foot .col{display:grid;gap:0;align-content:start}
.site-foot .col a{padding:6px 0;min-height:32px;display:flex;align-items:center;transition:color .2s}
.site-foot .col a:hover{color:var(--ink)}
.site-foot .base{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}

/* reveal: content is visible without JS */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:1020px){
  .site-head .wrap{flex-wrap:wrap;height:auto;padding-top:10px;gap:8px 16px}
  .site-head .head-cta{margin-left:auto}
  .site-nav{order:3;width:calc(100% + 2*var(--gut));margin:0 calc(-1*var(--gut));padding:0 calc(var(--gut) - 12px) 4px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{padding:10px 12px;min-height:44px;display:inline-flex;align-items:center}
  .sec-grid{grid-template-columns:1fr}
  .sec-label{position:static}
  .site-foot .wrap{grid-template-columns:1fr 1fr}
  .site-foot .brandcol{grid-column:1/-1}
}
@media (max-width:560px){
  .site-head .brand img{height:30px}
  .switch a{padding:7px 9px;font-size:13px}
  .switch .for{display:none}
  .switch a::first-letter{text-transform:uppercase}
  .site-head .head-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}

/* shared hero: identical on the business and shopper pages */
.hero-title{font:500 clamp(42px,4.6vw,76px)/.98 Outfit,sans-serif;letter-spacing:-.04em;color:var(--ink);max-width:13ch;margin:0 0 22px;text-wrap:balance;position:relative;z-index:0}
.hl{position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:-.04em;right:-.02em;bottom:.06em;height:.2em;background:var(--green);border-radius:2px;z-index:-1;transform-origin:left;animation:hlswipe .9s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes hlswipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-lead{font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--body);max-width:46ch;margin:0}
.hero-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:10px}
.hero-card-top{display:flex;justify-content:space-between;align-items:center;min-height:42px;padding:0 8px 8px;font:500 14px Outfit,sans-serif;color:var(--ink)}

/* brands/shoppers switch: one thumb that slides between the two sections.
   The thumb sits in the grid cell of the current section, so it's right on first paint;
   cross-page view transitions then morph it from one cell to the other. */
@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }
.switch { display: inline-grid; grid-template-columns: auto auto; position: relative; isolation: isolate; }
.switch > a { grid-row: 1; position: relative; transition: color .3s; }
.switch > a:nth-of-type(1) { grid-column: 1; view-transition-name: switch-a; }
.switch > a:nth-of-type(2) { grid-column: 2; view-transition-name: switch-b; }
::view-transition-group(switch-a), ::view-transition-group(switch-b) { animation-duration: .42s; }
.switch .thumb { grid-row: 1; grid-column: 1; justify-self: start; width: 100%; border-radius: 3px; background: #fff; box-shadow: 0 1px 2px rgba(44,69,87,.14), 0 0 0 1px rgba(44,69,87,.04); z-index: -1; view-transition-name: switch-thumb; transition: transform .42s cubic-bezier(.3,1.3,.5,1), width .42s cubic-bezier(.3,1.3,.5,1); }
.switch.is-market .thumb { grid-column: 2; }
.switch a[aria-current="page"] { background: transparent; box-shadow: none; }
.switch.moving a[aria-current="page"] { color: var(--muted); }
.switch a.on { color: var(--ink); }
::view-transition-group(switch-thumb) { animation-duration: .42s; animation-timing-function: cubic-bezier(.3,1.3,.5,1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .switch .thumb { transition: none; }
}

/* price range line: each retailer is a dot between cheapest and dearest */
.rl{position:relative;display:block;height:14px;margin:4px 7px 2px}
.rl .t{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--green) 0,var(--rule) 22%)}
.rl .d{position:absolute;top:2px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-sizing:border-box;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.rl .d.best{background:var(--green-text);border-color:var(--green-text);width:12px;height:12px;margin-left:-6px;top:1px}
.row:hover .rl .d,.rp-row:hover .rl .d{transform:scale(1.15)}
.rl-lab{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}
.rl-lab strong{font-weight:600;color:var(--ink)}
.rl-lab strong:first-child{color:var(--green-text)}
.js .rl .d{animation:rl-in .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes rl-in{from{left:0}}
@media (prefers-reduced-motion:reduce){.js .rl .d{animation:none}}

/* sections that don't use the left rail: the label sits above the content instead */
.sec-grid.flat,.g-sec .sec-grid.flat{grid-template-columns:minmax(0,1fr);gap:14px}
.sec-grid.flat>.sec-label{position:static;font:500 14px Outfit,sans-serif;color:var(--green-text);gap:10px;align-items:center}
.sec-grid.flat>.sec-label::before{width:18px;height:2px;border-radius:2px;transform:none}

/* footer: give the company details room; keep postcodes together */
.site-foot .wrap{grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,2fr) minmax(0,3fr)}
.site-foot .nw{white-space:nowrap}
@media (max-width:1020px){
  .site-foot .wrap{grid-template-columns:1fr 1fr}
  .site-foot .col.co{grid-column:1/-1}
  /* on small screens the two-row header scrolls away instead of covering the page */
  .site-head{position:relative}
}

.rl.big{height:26px;margin:14px 10px 6px}
.rl.big .t{top:11px;height:4px}
.rl.big .d{top:5px;width:16px;height:16px;margin-left:-8px;border-width:3px}
.rl.big .d.best{top:3px;width:20px;height:20px;margin-left:-10px;box-shadow:0 0 0 5px rgba(140,198,63,.28)}

/* Golem Compare: product cards, category tiles, product-type pictures */
.pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pcard{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:12px 12px 14px;color:var(--ink);transition:border-color .2s,box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.pcard:hover{border-color:var(--rule);box-shadow:0 10px 24px -14px rgba(31,51,66,.3);transform:translateY(-2px);color:var(--ink)}
.pc-img{position:relative;display:grid;place-items:center;aspect-ratio:16/10;border-radius:8px;background:var(--mist);color:var(--ink);margin-bottom:8px}
.pc-badge{position:absolute;top:8px;left:8px;font:600 12px Outfit,sans-serif;color:#fff;background:var(--green-text);border-radius:3px;padding:2px 7px}
.pc-brand{font:500 12px Outfit,sans-serif;color:var(--muted)}
.pc-name{font:500 15px/1.3 Outfit,sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pc-price{margin-top:6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pc-price b{font:500 22px Outfit,sans-serif;letter-spacing:-.02em}
.pc-price s{font-size:13px;color:var(--muted)}
.pc-at{font-size:12.5px;color:var(--muted)}
.pc-shops{margin-top:8px;font:500 13px Outfit,sans-serif;color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:4px}
.ctiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.ctile{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);color:var(--ink);transition:border-color .2s,background .2s}
.ctile:hover{border-color:var(--green);color:var(--ink)}
.ctile svg{flex:none;width:40px;height:40px;padding:8px;border-radius:8px;background:var(--mist)}
.ctile b{display:block;font:500 15px Outfit,sans-serif}
.ctile small{font-size:12.5px;color:var(--muted)}
.pi{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:var(--mist);color:var(--ink)}
.c-name{display:flex;gap:12px;align-items:center}
@media (max-width:1020px){.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}.ctiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pcards{gap:10px}.pc-price b{font-size:19px}.pi{width:38px;height:38px}}
@media (max-width:560px){
  .pcards:not(.pp .pcards){display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 calc(-1*var(--gut));padding:0 var(--gut) 8px;scrollbar-width:none}
  .pcards::-webkit-scrollbar{display:none}
  .pcards>.pcard{flex:0 0 62%;scroll-snap-align:start}
  .hsearch .btn{padding:0 12px}
}

/* compare tray + add-to-compare buttons */
.cmp-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--rule);border-radius:var(--r-s);background:#fff;font:500 13px Outfit,sans-serif;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.cmp-btn:hover{border-color:var(--ink)}
.cmp-btn[aria-pressed="true"]{background:var(--green-tint);border-color:var(--green-text);color:var(--green-text)}
.ctray{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(31,51,66,.35);animation:ct-up .35s cubic-bezier(.2,.8,.2,1)}
.ctray[hidden]{display:none}
@keyframes ct-up{from{transform:translateY(100%)}}
.ct-in{max-width:var(--max);margin:0 auto;padding:10px var(--gut);display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.ct-k{font:500 14px Outfit,sans-serif}
.ct-items{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.ct-item{display:inline-flex;align-items:center;gap:6px;max-width:280px;padding:4px 4px 4px 10px;border-radius:var(--r-s);background:var(--mist);font-size:13px;white-space:nowrap}
.ct-n{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ct-item button{flex:none;width:28px;height:28px;border:0;border-radius:3px;background:transparent;font-size:18px;line-height:1;color:var(--muted);cursor:pointer}
.ct-item button:hover{background:#fff;color:var(--ink)}
.ct-hint{font-size:13px;color:var(--muted)}
@media (max-width:560px){.ct-item{max-width:44vw}}
@media (prefers-reduced-motion:reduce){.ctray{animation:none}}
/* Categories dropdown */
.site-nav .dd{position:relative}
.site-nav .dd summary{list-style:none;cursor:pointer;padding:10px 12px;border-radius:var(--r-s);color:var(--body);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:color .2s,background .2s}
.site-nav .dd summary::-webkit-details-marker{display:none}
.site-nav .dd summary::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.site-nav .dd[open] summary::after{transform:translateY(1px) rotate(225deg)}
.site-nav .dd summary:hover,.site-nav .dd[open] summary{color:var(--ink);background:var(--mist)}
.site-nav .dd summary.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--green);border-radius:0}
.site-nav .dd-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;min-width:210px;display:flex;flex-direction:column;padding:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);box-shadow:0 12px 32px rgba(44,69,87,.14)}
.site-nav .dd-menu a{padding:10px 12px;border-radius:var(--r-s)}
.site-nav .dd-menu a[aria-current="page"]{box-shadow:none;border-radius:var(--r-s);background:var(--mist);color:var(--ink)}
@media (max-width:1020px){
  .site-nav.has-dd{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .site-nav .dd summary{min-height:44px}
}