 :root {
  --ink: #151515; --paper: #f5f4f0; --white: #fff; --muted: #77766f;
  --lime: #d7ff3f; --line: #deddd7; --display: "Oswald", Impact, sans-serif;
  --body: "DM Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.announcement { background: var(--lime); padding: 10px 5vw; font-size: 10px; letter-spacing: 1.3px; font-weight: 700; display:flex; justify-content:center; gap:12px; }
.announcement span { opacity:.62; }
.site-header { height: 82px; padding: 0 5vw; display:flex; align-items:center; justify-content:space-between; background:var(--paper); border-bottom:1px solid var(--line); gap:24px; }
.logo { font: 700 29px var(--display); letter-spacing:-.8px; white-space:nowrap; }
.logo span { font-weight:500; }
.logo i { color:#8ba800; font-style:normal; }
.desktop-nav { display:flex; gap:34px; margin-left: auto; margin-right: auto; }
.desktop-nav a, .footer-links a { font-size:12px; font-weight:600; }
.desktop-nav a:hover, .footer-links a:hover { opacity:.55; }
.header-actions { display:flex; align-items:center; gap:17px; }
.search-box { border:1px solid var(--line); display:flex; align-items:center; padding:9px 12px; gap:8px; border-radius:3px; width:220px; }
.search-box span { font-size:23px; line-height:15px; }
.search-box input { background:transparent; border:0; outline:0; min-width:0; width:100%; font-size:11px; }
.cart-button { border:0; background:transparent; font-size:11px; font-weight:700; letter-spacing:1px; display:flex; gap:8px; align-items:center; }
.cart-button span { background:var(--ink); color:white; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10px; }
.menu-button { display:none; background:transparent; border:0; font-size:23px; }
.hero { min-height:520px; display:grid; grid-template-columns:.9fr 1.1fr; background:var(--ink); color:white; overflow:hidden; }
.hero-copy { padding:75px 6vw 55px 9vw; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:2px; display:flex; align-items:center; gap:10px; margin:0 0 22px; }
.eyebrow-line { height:2px; width:24px; background:var(--lime); }
.hero h1, .section-heading h2, .auth-copy h2 { font:600 clamp(45px, 5.2vw, 76px)/.99 var(--display); letter-spacing:-1px; margin:0; }
.hero h1 span, .auth-copy h2 span { color:var(--lime); }
.hero-text { max-width:360px; color:#c5c5c0; font-size:13px; line-height:1.8; margin:23px 0 27px; }
.button { min-height:47px; padding:0 19px; display:inline-flex; justify-content:center; align-items:center; gap:27px; border:0; font-size:11px; font-weight:700; letter-spacing:.2px; transition:transform .2s, background .2s; }
.button:hover { transform:translateY(-2px); }
.button-light { background:var(--lime); color:var(--ink); }
.button-light:hover { background:#e4ff80; }
.button span { font-size:16px; }
.hero-note { font-size:10px; color:#b9b9b4; margin-top:35px; display:flex; align-items:center; gap:9px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--lime); }
.hero-visual { position:relative; min-height:520px; background:#272725; overflow:hidden; }
.hero-visual:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(21,21,21,.25),transparent 40%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 35%); pointer-events:none; }
.hero-visual img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center; opacity:.86; }
.hero-stamp { position:absolute; z-index:1; top:40px; right:40px; border:1px solid rgba(255,255,255,.7); padding:12px 14px; font:600 15px/1.05 var(--display); letter-spacing:1px; transform:rotate(7deg); }
.hero-stamp b { color:var(--lime); }
.hero-caption { position:absolute; z-index:1; bottom:23px; left:27px; right:27px; display:flex; justify-content:space-between; font-size:9px; font-weight:600; letter-spacing:1.2px; color:white; }
.ticker { background:var(--lime); padding:16px 5vw; display:flex; justify-content:space-between; gap:18px; font-size:9px; font-weight:700; letter-spacing:1.2px; }
.section-wrap { padding:86px 7vw; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.dark-eyebrow { color:#77766f; margin-bottom:14px; }
.section-heading h2 { font-size:clamp(38px,4.2vw,58px); }
.section-heading h2 span { color:#96968e; }
.section-intro { max-width:290px; color:var(--muted); font-size:12px; line-height:1.8; margin:0 0 5px; }
.shop-controls { margin:36px 0 22px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.filter-tabs { display:flex; flex-wrap:wrap; gap:7px; }
.filter { background:transparent; border:1px solid transparent; padding:9px 13px; font-size:10px; font-weight:700; color:#66665f; }
.filter.active, .filter:hover { background:var(--ink); color:white; }
.sort-label { display:flex; align-items:center; gap:10px; font-size:9px; letter-spacing:1px; font-weight:700; color:#77766f; }
.sort-label select { border:0; background:transparent; color:var(--ink); font-size:11px; font-weight:600; outline:none; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.product-card { min-width:0; }
.product-image { position:relative; aspect-ratio: .91 / 1; overflow:hidden; background:#e9e8e3; }
.product-image img { width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:transform .4s; }
.product-card:hover .product-image img { transform:scale(1.05); }
.product-tag { position:absolute; top:12px; left:12px; background:var(--lime); padding:6px 8px; font-size:8px; font-weight:700; letter-spacing:.8px; }
.heart-button { position:absolute; right:10px; top:10px; border:0; background:rgba(255,255,255,.85); border-radius:50%; width:29px; height:29px; font-size:16px; }
.heart-button.saved { background:var(--lime); }
.product-info { padding:14px 1px 0; }
.product-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.7px; }
.product-info h3 { font-size:13px; margin:9px 0 7px; font-weight:700; }
.product-condition { font-size:10px; color:var(--muted); margin:0 0 12px; }
.product-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.price { font-size:14px; font-weight:700; }
.add-button { border:1px solid var(--ink); background:transparent; padding:9px 11px; font-size:9px; font-weight:700; white-space:nowrap; }
.add-button:hover { background:var(--ink); color:white; }
.add-button:disabled { cursor:not-allowed; opacity:.55; }
.demo-note { margin-top:28px; font-size:10px; color:#77766f; line-height:1.7; }
.auth-strip { display:grid; grid-template-columns:1fr 1fr; background:var(--ink); color:white; min-height:400px; }
.auth-image { min-height:400px; overflow:hidden; }
.auth-image img { width:100%; height:100%; object-fit:cover; opacity:.8; }
.auth-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:60px 9vw 60px 7vw; }
.auth-copy h2 { font-size:clamp(35px,4vw,55px); }
.auth-copy p:not(.eyebrow) { color:#b9b9b4; font-size:12px; line-height:1.9; max-width:420px; margin:23px 0 26px; }
.text-link { font-size:10px; font-weight:700; letter-spacing:1px; border-bottom:1px solid var(--lime); padding-bottom:9px; }
.text-link span { color:var(--lime); margin-left:14px; }
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.value-card { border-top:1px solid #c8c7c0; padding-top:20px; }
.value-icon { color:#8ba800; font:600 20px var(--display); }
.value-card h3 { font:600 20px var(--display); margin:17px 0 8px; }
.value-card p { color:var(--muted); font-size:11px; line-height:1.8; max-width:240px; }
.footer { background:#e8e7e1; padding:42px 7vw 25px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:center; }
.footer-logo { font-size:25px; }
.footer > p { font-size:11px; color:var(--muted); }
.footer-links { display:flex; justify-content:flex-end; gap:22px; }
.footer small { grid-column:1/-1; border-top:1px solid #d1d0c9; padding-top:18px; font-size:9px; color:var(--muted); }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:.25s; z-index:10; }
.overlay.open { opacity:1; visibility:visible; }
.cart-drawer { position:fixed; z-index:11; top:0; right:0; width:min(440px,100%); height:100dvh; background:var(--paper); padding:27px; transform:translateX(100%); transition:transform .3s; display:flex; flex-direction:column; }
.cart-drawer.open { transform:translateX(0); }
.cart-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:20px; }
.cart-header h2 { font:600 30px var(--display); margin:0; }
.cart-header h2 span { color:var(--muted); font:500 13px var(--body); }
.close-button { border:0; background:transparent; font-size:20px; }
.cart-items { flex:1; overflow:auto; padding:12px 0; }
.empty-cart { color:var(--muted); font-size:12px; padding:20px 0; }
.cart-item { display:grid; grid-template-columns:76px 1fr auto; gap:13px; padding:15px 0; border-bottom:1px solid var(--line); align-items:center; }
.cart-item img { width:76px; height:76px; object-fit:cover; background:#e9e8e3; }
.cart-item h3 { margin:0 0 7px; font-size:12px; }
.cart-item p { margin:0; font-size:11px; color:var(--muted); }
.quantity { display:flex; align-items:center; gap:8px; margin-top:9px; }
.quantity button { width:22px; height:22px; border:1px solid var(--line); background:transparent; }
.remove-item { border:0; background:transparent; color:#777; font-size:10px; margin-top:8px; padding:0; text-decoration:underline; }
.cart-footer { border-top:1px solid var(--line); padding-top:20px; }
.subtotal { display:flex; justify-content:space-between; font-size:13px; }
.subtotal strong { font-size:18px; }
.cart-footer p, .cart-footer small { color:var(--muted); font-size:10px; line-height:1.6; }
.checkout-modal { position:fixed; inset:0; z-index:15; overflow:auto; background:rgba(21,21,21,.62); opacity:0; visibility:hidden; transition:opacity .2s,visibility .2s; }
.checkout-modal.open { opacity:1; visibility:visible; }
.checkout-panel { min-height:100%; width:min(100%,1100px); margin:0 auto; background:var(--paper); }
.checkout-header { min-height:76px; padding:0 7vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.checkout-back { border:0; background:transparent; font-size:11px; font-weight:700; }
.checkout-content { display:grid; grid-template-columns:1.1fr .9fr; gap:8vw; padding:55px 7vw 70px; }
.checkout-main h1 { font:600 clamp(42px,5vw,62px)/1 var(--display); margin:0; }
.checkout-description { color:var(--muted); font-size:12px; margin:13px 0 30px; }
.checkout-fields { border:0; padding:0; margin:0 0 30px; display:grid; gap:15px; }
.checkout-fields legend { width:100%; border-bottom:1px solid var(--line); padding:0 0 11px; margin-bottom:15px; font-size:10px; font-weight:700; letter-spacing:1.2px; }
.checkout-field { display:grid; gap:7px; font-size:10px; font-weight:600; }
.checkout-field > span { display:inline; color:var(--muted); font-weight:400; }
.checkout-field input, .checkout-field select { width:100%; min-height:43px; padding:0 11px; border:1px solid #cfcec7; border-radius:0; background:var(--white); font-size:12px; color:var(--ink); }
.checkout-field input:focus, .checkout-field select:focus { outline:2px solid #8ba800; outline-offset:1px; }
.checkout-field-row { display:grid; grid-template-columns:1fr 1fr .7fr; gap:12px; }
.checkout-security-note { padding:13px; background:#ebeae4; color:#66665f; font-size:10px; line-height:1.7; }
.checkout-submit { margin-top:8px; }
.checkout-error { padding:12px; background:#f8e2df; color:#7b1d12; font-size:11px; line-height:1.6; }
.checkout-submit:disabled { cursor:wait; opacity:.65; }
.checkout-summary { align-self:start; background:#eeede7; padding:24px; }
.checkout-summary h2 { margin:0 0 20px; font:600 20px var(--display); }
.checkout-summary h2 span { color:var(--muted); font:500 11px var(--body); }
.checkout-items { display:grid; gap:15px; }
.checkout-item { display:grid; grid-template-columns:58px 1fr auto; gap:11px; align-items:center; }
.checkout-item img { width:58px; height:58px; object-fit:cover; background:#e9e8e3; }
.checkout-item h3 { margin:0 0 5px; font-size:11px; }
.checkout-item p, .checkout-item strong { margin:0; color:var(--muted); font-size:10px; }
.checkout-total { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #d1d0c9; padding-top:17px; margin-top:22px; font-size:12px; }
.checkout-total strong { font-size:14px; }
.checkout-shipping { display:flex; justify-content:space-between; margin:14px 0 0; font-size:11px; }
.checkout-shipping strong { font-size:10px; }
.checkout-tax-note { color:var(--muted); font-size:10px; line-height:1.6; }
.checkout-confirmation { max-width:560px; margin:0 auto; padding:110px 28px; text-align:center; }
.confirmation-mark { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 25px; border-radius:50%; background:var(--lime); font-size:25px; }
.checkout-confirmation .eyebrow { justify-content:center; margin-bottom:12px; }
.checkout-confirmation h2 { font:600 clamp(36px,5vw,54px)/1 var(--display); margin:0; }
.checkout-confirmation > p:not(.eyebrow) { color:var(--muted); font-size:12px; line-height:1.8; margin:17px auto 25px; }
.payment-notice { position:fixed; z-index:9; top:16px; left:50%; transform:translateX(-50%); width:min(600px,calc(100% - 32px)); padding:15px 20px; background:var(--lime); color:var(--ink); box-shadow:0 5px 25px #0002; font-size:12px; font-weight:600; line-height:1.6; }
[hidden] { display:none !important; }
.button-dark { background:var(--ink); color:white; }
.button-dark:hover { background:#333; }
.full-button { width:100%; margin:10px 0; }
.toast { position:fixed; bottom:22px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:var(--lime); color:var(--ink); padding:13px 18px; font-size:11px; font-weight:700; z-index:20; transition:.2s; box-shadow:0 5px 25px #0002; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.no-results { grid-column:1/-1; padding:40px 0; color:var(--muted); font-size:13px; }

@media (max-width: 900px) {
  .site-header { padding:0 4vw; }
  .desktop-nav { gap:16px; }
  .search-box { width:175px; }
  .hero { grid-template-columns:1fr 1fr; }
  .hero-copy { padding:55px 5vw; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 15px; }
  .section-wrap { padding:65px 5vw; }
  .ticker { flex-wrap:wrap; justify-content:center; }
  .auth-copy { padding:45px 5vw; }
}
@media (max-width: 620px) {
  .announcement { font-size:8px; letter-spacing:.7px; }
  .site-header { height:68px; }
  .logo { font-size:25px; }
  .desktop-nav { display:none; position:absolute; z-index:5; top:68px; left:0; right:0; background:var(--paper); padding:20px 5vw; border-bottom:1px solid var(--line); flex-direction:column; gap:18px; }
  .desktop-nav.open { display:flex; }
  .header-actions { gap:12px; }
  .search-box { width:auto; border:0; padding:5px; }
  .search-box input { width:0; transition:width .2s; }
  .search-box:focus-within input { width:120px; }
  .cart-button { font-size:0; gap:5px; }
  .cart-button span { font-size:10px; }
  .menu-button { display:block; }
  .hero { display:flex; flex-direction:column; }
  .hero-copy { padding:53px 7vw 38px; }
  .hero h1 { font-size:54px; }
  .hero-visual { min-height:290px; }
  .hero-stamp { top:20px; right:20px; }
  .hero-caption { left:17px; right:17px; font-size:7px; }
  .ticker { gap:10px 20px; padding:13px 4vw; font-size:8px; }
  .section-wrap { padding:55px 5vw; }
  .section-heading { display:block; }
  .section-heading h2 { font-size:43px; }
  .section-intro { margin-top:16px; }
  .shop-controls { align-items:flex-start; flex-direction:column; }
  .filter-tabs { gap:3px; }
  .filter { padding:8px 10px; }
  .sort-label { align-self:flex-end; }
  .product-grid { gap:23px 11px; }
  .product-info h3 { font-size:12px; }
  .product-bottom { align-items:flex-start; flex-direction:column; }
  .add-button { width:100%; }
  .product-tag { top:7px; left:7px; font-size:7px; }
  .heart-button { top:6px; right:6px; width:26px; height:26px; }
  .auth-strip { grid-template-columns:1fr; }
  .auth-image { min-height:240px; max-height:270px; }
  .auth-copy { padding:45px 7vw 50px; }
  .auth-copy h2 { font-size:43px; }
  .values { grid-template-columns:1fr; gap:25px; }
  .value-card { display:grid; grid-template-columns:45px 1fr; column-gap:12px; }
  .value-icon { grid-row:span 2; }
  .value-card h3 { margin:0 0 5px; }
  .value-card p { margin:0; max-width:none; }
  .footer { grid-template-columns:1fr 1fr; padding:35px 6vw 22px; }
  .footer > p { display:none; }
  .footer-links { gap:12px; flex-wrap:wrap; font-size:10px; }
  .footer small { margin-top:10px; }
  .checkout-header { min-height:66px; padding:0 5vw; }
  .checkout-content { grid-template-columns:1fr; gap:32px; padding:35px 5vw 50px; }
  .checkout-field-row { grid-template-columns:1fr 1fr; }
  .postcode-field { grid-column:1/-1; }
  .checkout-summary { grid-row:1; padding:20px; }
  .checkout-confirmation { padding:85px 7vw; }
}
