/* ==========================================================================
   Intercity Commodities Limited theme
   Aesthetic: FMCG importation & trade. Graphite + trading-floor amber +
   steel blue. Dark by default: confident, industrial, on the move.
   ========================================================================== */
:root{
  --bg:#0d1216; --surface:#151b20; --surface-2:#1c242b; --text:#eef2f0;
  --muted:#93a3ac; --border:rgba(238,242,240,.10);
  --accent:#e0a23d; --accent-2:#3f86ac; --accent-ink:#14100a;
  --header-bg:rgba(11,15,18,.85); --nav-link:#eef2f0;
  --hero-overlay:linear-gradient(105deg,rgba(6,9,11,0.73) 8%,rgba(6,9,11,0.47) 54%,rgba(6,9,11,0.2) 100%);
  --hero-lead:rgba(238,242,240,.88);
  --input-bg:rgba(255,255,255,.04); --input-bg-focus:rgba(255,255,255,.07);
  --cta-bg:linear-gradient(120deg,#151b20,#232d35);
  --footer-bg:#07090b;
  --shadow-sm:0 2px 12px rgba(2,4,5,.3);
  --shadow:0 24px 60px -24px rgba(2,4,5,.55);
  --shadow-lg:0 50px 100px -34px rgba(2,4,5,.6);
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Archivo","Inter",system-ui,sans-serif;
  --header-h:84px;
}
h1,.h1,h2,.h2,.display{font-weight:800;letter-spacing:-.02em}
h3,.h3{font-weight:700}
.eyebrow{color:var(--accent)}

.site-header .brand{color:#fff}
.site-header .nav-links a{color:rgba(255,255,255,.92)}
.site-header .nav-links a.is-active{color:var(--accent)}
.site-header .nav-toggle{border-color:rgba(255,255,255,.35)}
.site-header .nav-toggle span{background:#fff}
.site-header .theme-toggle{color:#fff;border-color:rgba(255,255,255,.35)}
.site-header.is-scrolled .brand{color:var(--text)}
.site-header.is-scrolled .nav-links a{color:var(--text)}
.site-header.is-scrolled .nav-links a.is-active{color:var(--accent)}
.site-header.is-scrolled .nav-toggle{border-color:var(--border)}
.site-header.is-scrolled .nav-toggle span{background:var(--text)}
.site-header.is-scrolled .theme-toggle{color:var(--text);border-color:var(--border)}
.site-header .theme-toggle:hover{color:var(--accent);border-color:var(--accent)}

/* ambient background: amber + steel glow, like sodium light over a freight yard */
body{background:
  radial-gradient(1200px 620px at 86% -10%,rgba(224,162,61,.09),transparent 60%),
  radial-gradient(950px 520px at -8% 20%,rgba(63,134,172,.09),transparent 60%),
  var(--bg)}

.section--alt{background:var(--surface-2)}
.section--dark{background:var(--footer-bg);color:#eef2f0;--text:#eef2f0;--muted:#8fa0a8;--border:rgba(238,242,240,.10);--surface:#12171b;--surface-2:#181f24}
.section--dark .eyebrow{color:var(--accent)}
.section--dark .card{background:#12171b}

.site-footer{--text:#eef2f0;--muted:#8fa0a8;--border:rgba(238,242,240,.10)}

.quote{font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.4;letter-spacing:-.01em}
.pill{background:rgba(255,255,255,.04)}

::selection{background:var(--accent);color:var(--accent-ink)}

/* ==========================================================================
   Light theme ("Trading Floor Day"): warm graphite paper, deep amber ink.
   Activated via <html data-theme="light">. Dark remains the brand default.
   ========================================================================== */
html[data-theme="light"]{
  --bg:#f6f4ef; --surface:#ffffff; --surface-2:#ece7db; --text:#1c1a14;
  --muted:#5c584c; --border:rgba(28,26,20,.12);
  --accent:#a5701f; --accent-2:#2c6d8f; --accent-ink:#ffffff;
  --header-bg:rgba(246,244,239,.9); --nav-link:#1c1a14;
  --input-bg:#efeadf; --input-bg-focus:#ffffff;
  --cta-bg:linear-gradient(120deg,#151b20,#233042);
  --shadow-sm:0 2px 12px rgba(28,26,20,.08);
  --shadow:0 22px 55px -22px rgba(28,26,20,.22);
  --shadow-lg:0 45px 90px -32px rgba(28,26,20,.28);
}
html[data-theme="light"] body{background:
  radial-gradient(1200px 620px at 86% -10%,rgba(165,112,31,.07),transparent 60%),
  radial-gradient(950px 520px at -8% 20%,rgba(44,109,143,.07),transparent 60%),
  var(--bg)}
/* footer stays dark in both modes: re-scope its palette locally */
html[data-theme="light"] .site-footer{--text:#eef2f0;--muted:#8fa0a8;--border:rgba(238,242,240,.10);
  background:#151b20;border-top-color:rgba(238,242,240,.10)}
html[data-theme="light"] .pill{background:#fffdf8;box-shadow:var(--shadow-sm)}
html[data-theme="light"] .hero__overlay{background:linear-gradient(105deg,rgba(6,9,11,0.7) 10%,rgba(6,9,11,0.45) 54%,rgba(6,9,11,0.19) 100%)}
html[data-theme="light"] .section--dark{--text:#eef2f0;--muted:#8fa0a8;--border:rgba(238,242,240,.10);--surface:#12171b;--surface-2:#181f24;background:#0a0e11;color:#eef2f0}

/* theme toggle icons: dark default shows the sun (switch to light) */
.theme-toggle .i-moon{display:none}
html[data-theme="light"] .theme-toggle .i-sun{display:none}
html[data-theme="light"] .theme-toggle .i-moon{display:block}

/* ======================================================================
   Product range: champagne bottles
   The bottle shots are tall cut-outs on white, so each sits on its own
   white panel at a fixed aspect with contain (never cover) so no bottle
   is ever cropped, whatever its proportions.
   ====================================================================== */
.product-grid{display:grid;gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.product{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t)}
.product:hover{transform:translateY(-5px);box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--accent) 42%,var(--border))}
.product__media{background:#fff;padding:22px 18px}
.product__media img{width:100%;aspect-ratio:3/4;object-fit:contain;display:block}
.product__body{display:flex;flex-direction:column;gap:9px;padding:22px 24px 24px;flex:1}
.product__kind{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent)}
.product__body h3{margin:0;font-size:1.08rem;line-height:1.3}
.product__body p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
/* specs pinned to the bottom so cards align despite different copy lengths */
.product__spec{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--border);
  display:grid;gap:7px}
.product__spec div{display:flex;gap:10px;align-items:baseline}
.product__spec dt{flex:none;min-width:64px;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.product__spec dd{margin:0;font-size:.86rem;color:var(--text)}