/* Larissa Spices — stijl
   Minimalistisch zwart-wit: hairline rasters, geen decoratie, ruimte als vormgeving. */

:root {
  --ink:      #111111;
  --paper:    #FFFFFF;
  --grey:     #6E6E6E;
  --grey-bg:  #FAFAFA;
  --line:     #E4E4E4;
  --ok:       #2F6B3C;
  --warn:     #B4890A;
  --fail:     #B23B2E;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

* {
  box-sizing: border-box;
  /* (2026-09-15) Dit is de échte boosdoener van het "blijft wit/grijs
     hangen na aantikken"-probleem — niet onze eigen :hover-regels (die
     stonden inmiddels al goed achter "(hover: hover)"), maar de eigen,
     ingebouwde tik-markering van de telefoon/browser zelf: elke link of
     knop krijgt standaard een kort (soms blijvend) lichtgrijs waas overheen
     zodra je 'm aantikt, los van onze eigen kleuren. Die zetten we hiermee
     helemaal uit, zodat alleen onze eigen (nu wel donker-thema-bewuste)
     stijlen nog te zien zijn. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Header --- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  z-index: 20;
}

.site-header .logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}

.site-header nav a {
  text-decoration: none;
  color: var(--ink);
  margin-left: 1.6rem;
  font-size: 0.85rem;
}

/* Hover-only (2026-09-15): "@media (hover: hover)" zorgt dat dit alleen
   geldt op apparaten die écht een muisaanwijzer hebben. Zonder deze guard
   past een telefoonscherm de :hover-status toe zodra je ergens op tikt, en
   laat 'm daarna gewoon staan tot je ergens anders tikt — dus een regel/
   knop/kaart bleef "vastzitten" in de hover-kleur in plaats van terug te
   springen naar normaal. Geldt voor alle :hover-regels in dit bestand. */
@media (hover: hover) {
  .site-header nav a:hover { color: var(--grey); }
}

.cart-pill {
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  text-decoration: none;
}

/* --- Hero --- */
.hero {
  padding: 4.5rem 1.5rem 3.5rem;
  border-bottom: 1px solid var(--line);
}

.hero .eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--grey);
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-top: 0.7rem;
  max-width: 16ch;
}

.hero p {
  color: var(--grey);
  max-width: 42ch;
  margin: 1rem 0 0;
}

.free-shipping-bar {
  max-width: 480px;
  margin-top: 2.2rem;
  font-size: 0.85rem;
  color: var(--grey);
}

.free-shipping-bar .track {
  margin-top: 0.6rem;
  height: 1px;
  background: var(--line);
  position: relative;
}

.free-shipping-bar .fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--ink);
}

/* --- Product grid --- */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 3.5rem 0 1.5rem;
}

.section-title p { color: var(--grey); font-size: 0.85rem; margin: 0; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  padding-bottom: 3rem;
}

.product-card {
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.12s ease;
}

/* Hover-only, zie uitleg bovenaan bij .site-header nav a:hover. */
@media (hover: hover) {
  .product-card:hover { background: var(--grey-bg); }
}

.product-card .img { display: none; } /* geen decoratieve vlakken meer in de minimale stijl */

.product-card .badge {
  align-self: flex-start;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey);
  border: 1px solid var(--line);
  padding: 0.15rem 0.45rem;
  margin-bottom: 0.6rem;
}

.product-card h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.product-card .meta { color: var(--grey); font-size: 0.8rem; margin-bottom: 1.2rem; }

.product-card .row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price { font-weight: 600; }

.btn {
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.5rem 0.9rem;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.82rem;
  text-decoration: none;
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

.btn-primary, .btn-solid { background: var(--ink); color: var(--paper); }
/* Hover-only, zie uitleg bovenaan bij .site-header nav a:hover. */
@media (hover: hover) {
  .btn-primary:hover, .btn-solid:hover { background: #333; }
}

.btn-ghost { background: var(--paper); color: var(--ink); }
/* Hover-only, zie uitleg bovenaan bij .site-header nav a:hover. */
@media (hover: hover) {
  .btn-ghost:hover { background: var(--grey-bg); }
}

/* --- Modal (productinfo) --- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(17,17,17,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 50;
}
.overlay.show { display: flex; }

.modal {
  background: var(--paper);
  max-width: 480px;
  width: 100%;
  padding: 2.2rem;
  position: relative;
}

.modal .close {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  background: none; border: none;
  font-size: 1.2rem; cursor: pointer;
  color: var(--grey);
}

.modal .eyebrow { font-size: 0.72rem; color: var(--grey); }
.modal .desc { color: var(--grey); font-size: 0.92rem; margin: 0.9rem 0 1.4rem; line-height: 1.65; }
.modal .row { display: flex; align-items: center; justify-content: space-between; margin-top: 1.6rem; }

/* --- Forms --- */
.form-card {
  max-width: 420px;
  margin: 3rem auto;
  border: 1px solid var(--line);
  padding: 2rem;
}

.form-card h1 { font-size: 1.5rem; }

label {
  display: block;
  font-size: 0.78rem;
  color: var(--grey);
  margin: 1rem 0 0.3rem;
}

input, select, textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.form-error {
  background: #FBEDEA;
  border: 1px solid var(--fail);
  color: var(--fail);
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  margin-top: 1rem;
}

.form-links {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: 0.82rem;
}

.form-links a { color: var(--ink); text-decoration: underline; }

/* --- Cart / checkout table --- */
.cart-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.cart-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey); padding-bottom: 0.6rem; border-bottom: 1px solid var(--ink); }
.cart-table td { padding: 0.8rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.cart-table input[type=number] { width: 60px; padding: 0.3rem 0.5rem; }

.totals { max-width: 320px; margin-left: auto; margin-top: 1.5rem; font-size: 0.9rem; }
.totals .row { display: flex; justify-content: space-between; padding: 0.35rem 0; }
.totals .grand { font-size: 1.1rem; font-weight: 700; border-top: 1px solid var(--ink); margin-top: 0.5rem; padding-top: 0.7rem; }

/* --- Admin --- */
.admin-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100vh; }
.admin-nav { border-right: 1px solid var(--line); padding: 1.6rem 1.2rem; }
.admin-nav a { display: block; padding: 0.5rem 0.6rem; color: var(--grey); text-decoration: none; font-size: 0.85rem; border-left: 2px solid transparent; }
/* "active" (huidige pagina) blijft altijd aan, ook op een telefoon zonder
   hover — alleen de :hover-variant hieronder is nu apart en hover-only,
   zie uitleg bovenaan bij .site-header nav a:hover. */
.admin-nav a.active { color: var(--ink); border-left: 2px solid var(--ink); font-weight: 500; }
@media (hover: hover) {
  .admin-nav a:hover { color: var(--ink); border-left: 2px solid var(--ink); font-weight: 500; }
}
/* Brede tabellen scrollen zelf opzij (in .table-scroll, aangemaakt door
   _nav.php), zodat menu, kop en uitleg gewoon op hun plek blijven. */
.admin-main { padding: 2rem 2.4rem; min-width: 0; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-bottom: 2.4rem; }
.stat-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2rem 1.3rem; }
.stat-card .label { font-size: 0.72rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-card .value { font-family: var(--font-display); font-size: 1.9rem; margin-top: 0.4rem; }
.stat-card .delta { font-size: 0.78rem; margin-top: 0.4rem; }
.stat-card .delta.up { color: var(--ok); }
.stat-card .delta.down { color: var(--fail); }

.status-pill { font-size: 0.7rem; padding: 0.15rem 0.55rem; border: 1px solid var(--line); font-weight: 500; text-transform: capitalize; }
.status-pending { color: var(--warn); border-color: var(--warn); }
.status-paid, .status-processing { color: var(--ok); border-color: var(--ok); }
.status-shipped { color: var(--ink); border-color: var(--ink); }
.status-cancelled, .status-failed { color: var(--fail); border-color: var(--fail); }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; font-size: 0.7rem; text-transform: uppercase; color: var(--grey); padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--ink); }
.data-table td { padding: 0.7rem; border-bottom: 1px solid var(--line); font-size: 0.87rem; }
.data-table td { transition: background 0.12s ease; }
/* (2026-09-15) Het "blijft wit hangen"-probleem bleek tekstselectie te zijn
   (opgelost in includes/header.php), niet deze hover. Dus:
   - computer (echte muis): lichte achtergrond bij eroverheen gaan;
   - telefoon: korte kleurverandering alleen zolang je vinger erop drukt
     (:active) — laat je los, dan springt 'ie meteen terug. */
@media (hover: hover) {
  .data-table tbody tr:hover td { background: var(--grey-bg); }
}
.data-table tbody tr:active td { background: var(--grey-bg); }
.btn-ghost:active,
.product-card:active { background: var(--grey-bg); }

.health-list .item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; font-size: 0.88rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot.ok { background: var(--ok); }
.dot.fail { background: var(--fail); }

footer.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.2rem 1.5rem;
  color: var(--grey);
  font-size: 0.8rem;
  text-align: center;
  margin-top: 3rem;
}

@media (max-width: 720px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-nav { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .admin-nav a { white-space: nowrap; margin-right: 0.3rem; }
}