/* ShopexHub — brand tokens (drop alongside tailwindoutput.css) */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root{
  --bg:#F7F3ED;
  --surface:#FFFFFF;
  --surface-2:#FBF7F0;
  --ink:#141414;
  --ink-2:#2A2A2A;
  --muted:#6B675F;
  --line:#E7E1D6;
  --accent:#F4C430;        /* Belgian mustard yellow */
  --accent-ink:#141414;
  --red:#EF3340;           /* Belgian red */
  --green:#2F7D54;
}

*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{background:var(--bg);color:var(--ink);font-family:'Geist',ui-sans-serif,system-ui,sans-serif;font-feature-settings:"ss01","cv11"}
body{min-height:100vh;display:flex;flex-direction:column}

.serif{font-family:'Instrument Serif',ui-serif,Georgia,serif;font-weight:400;letter-spacing:-0.02em}
.mono{font-family:'Geist Mono',ui-monospace,monospace}

.accent-bg{background:var(--accent);color:var(--accent-ink)}
.accent-text{color:var(--accent)}

/* Belgian tricolor */
.be-stripe{background:linear-gradient(to right,#141414 0 33.33%,#F4C430 33.33% 66.66%,#EF3340 66.66% 100%)}
.be-stripe-v{background:linear-gradient(to bottom,#141414 0 33.33%,#F4C430 33.33% 66.66%,#EF3340 66.66% 100%)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.25rem;border-radius:999px;font-weight:500;transition:all .2s;text-decoration:none}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--accent);color:var(--accent-ink)}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-accent:hover{filter:brightness(.94)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}

/* Label (small caps) */
.label{font-family:'Geist Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Underline link */
.u-link{position:relative;display:inline-block;text-decoration:none;color:inherit}
.u-link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .4s cubic-bezier(.7,0,.3,1)}
.u-link:hover::after{transform:scaleX(0);transform-origin:right}

/* Tile hover */
.tile{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.tile:hover{transform:translateY(-2px)}

/* Live dot */
.live-dot{display:inline-block;width:6px;height:6px;border-radius:999px;background:#10B981;box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* Grain overlay */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Section heading */
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.sec-h h1,.sec-h h2{font-family:'Instrument Serif',serif;font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:-.02em;color:var(--ink);margin:0}

/* Ticker marquee */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{animation:marquee 50s linear infinite;display:flex;white-space:nowrap;gap:3rem;width:max-content}

/* Hide horizontal scrollbar */
.hide-scroll::-webkit-scrollbar{display:none}
.hide-scroll{scrollbar-width:none}

/* City chip variants */
.chip-pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;transition:all .2s;text-decoration:none;color:var(--ink)}
.chip-pill:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.chip-pill:hover .chip-meta{color:rgba(255,255,255,.55)}

/* Featured card placeholders */
.img-ph{position:relative;overflow:hidden}
.img-ph::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center}
.ph-1::before{background-image:linear-gradient(135deg,#F4C430 0%,#E89B2B 100%)}
.ph-2::before{background-image:radial-gradient(circle at 30% 30%,#EF3340 0%,#8B1A22 100%)}
.ph-3::before{background-image:linear-gradient(135deg,#2F7D54 0%,#0E3D28 100%)}
.ph-4::before{background-image:linear-gradient(45deg,#141414 0%,#3A3A3A 100%)}
.ph-5::before{background-image:linear-gradient(135deg,#DDB380 0%,#A06B3B 100%)}
.ph-6::before{background-image:linear-gradient(180deg,#C89B6D 0%,#6B3D23 100%)}

/* Inputs */
input[type="text"],input[type="email"],input[type="search"]{font-family:inherit;color:var(--ink)}
input:focus{outline:none}
input:focus-visible{box-shadow:0 0 0 2px var(--accent)}

/* Arrow link */
.arrow-link{display:inline-flex;align-items:center;gap:.35rem;transition:gap .2s;color:var(--ink);text-decoration:none}
.arrow-link:hover{gap:.6rem}

/* Star */
.star{color:var(--accent)}

/* Toggle switches (for city page filters) */
.toggle-track{display:inline-block;width:38px;height:22px;background:var(--line);border-radius:999px;position:relative;cursor:pointer;transition:background .2s}
.toggle-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:transform .2s}
input:checked + .toggle-track{background:var(--ink)}
input:checked + .toggle-track::after{transform:translateX(16px)}