/*
Theme Name:  Auberge Snackbar
Theme URI:   https://www.degoudenregen.nl
Description: Child theme of Auberge for Snackbar De Gouden Regen. Keeps Auberge's design while adding the pickup-only WooCommerce ordering logic from the Snackbar theme.
Author:      Gouden Regen
Template:    auberge
Version:     4.5
License:     GPL v2 or later
Text Domain: auberge-snackbar
*/

/* ==================================================================
   DESIGN TOKENS
   Shared palette + spacing for all custom snackbar pages.
================================================================== */
:root {
  --navy:       #11215b;
  --navy-dark:  #0d1a47;
  --navy-soft:  #1c2f74;
  --gold:       #c9a86a;
  --gold-dark:  #b3915a;
  --white:      #ffffff;
  --off-white:  #f7f8fb;
  --cream:      #fbfaf7;
  --text:       #24272e;
  --text-soft:  #5a6070;
  --text-mute:  #8b909e;
  --border:     #e7e9ef;
  --border-soft:#eef0f5;
  --success:    #2e9e5b;
  --danger:     #d1495b;

  --radius:     16px;
  --radius-sm:  10px;
  --radius-lg:  22px;

  --shadow-sm:  0 2px 6px rgba(17,33,91,.05);
  --shadow:     0 8px 24px rgba(17,33,91,.08);
  --shadow-lg:  0 18px 44px rgba(17,33,91,.14);

  --page-maxw:  1160px;

  --font-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Generic helpers used across the custom pages */
.mn-wrap, .cart-wrap, .co-header, .woocommerce-checkout-wrap,
.ma-wrap, .os, .sp-wrap {
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.mn-wrap *, .cart-wrap *, .ma-wrap *, .os *, .sp-wrap *,
.woocommerce-checkout-wrap * { box-sizing: border-box; }

/* ==================================================================
   SHARED PAGE HEADER  (menu / cart / checkout / account / status)
================================================================== */
.mn-header, .cart-header, .co-header, .ma-header, .os-header {
  text-align: center;
  padding: 56px 20px 40px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--white);
}

.mn-header-tag, .cart-header-tag, .co-header-tag, .ma-eyebrow, .os-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.mn-header h1, .cart-header h1, .co-header h1, .ma-title, .os-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  color: var(--white);
}

.mn-header h1 span, .cart-header h1 span, .co-header h1 span,
.ma-title span, .os-title span { color: var(--gold); }

.mn-header-sub {
  margin: 14px auto 0;
  max-width: 520px;
  font-size: 15px;
  color: rgba(255,255,255,.72);
}

/* ── Checkout / cart step indicator ─────────────────────────────── */
.co-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.co-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  color: rgba(255,255,255,.5);
}
.co-step-num {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  font-size: 11px;
  font-weight: 700;
}
.co-step.active { color: var(--white); }
.co-step.active .co-step-num { background: var(--gold); color: var(--navy); }
.co-step.done { color: var(--gold); }
.co-step.done .co-step-num { background: rgba(201,168,106,.25); color: var(--gold); }
.co-step-sep { width: 26px; height: 2px; background: rgba(255,255,255,.15); border-radius: 2px; }

/* ==================================================================
   MENU PAGE
================================================================== */
.mn-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.mn-tabs-inner {
  max-width: var(--page-maxw);
  margin: 0 auto;
  position: relative;
}
.mn-tabs {
  display: flex;
  gap: 10px;
  /* Constant side padding leaves room for the floating arrows so the first/
     last tab never hides underneath them — and never shifts while scrolling. */
  padding: 14px 52px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 44px;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.mn-tabs.mn-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.mn-tabs.mn-dragging .mn-tab { pointer-events: none; }
.mn-tabs::-webkit-scrollbar { display: none; }

/* ── Scroll arrows: floating circular controls overlaid on the strip edges,
   so they never change the bar height or stack vertically. ── */
/* Scoped under .mn-tabs-wrap and marked !important so the parent Auberge
   theme's global `button { background-color: rgba(0,0,0,.05) }` and its
   `button:active { box-shadow: inset 0 100px 0 }` (the grey/teal fill seen
   earlier) can't override these regardless of stylesheet load order. */
.mn-tabs-wrap .mn-tabs-arrow {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white) !important;
  background-image: none !important;
  color: var(--navy);
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 2px 10px rgba(17,33,91,.14) !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .15s ease;
}
.mn-tabs-wrap .mn-tabs-arrow-left  { left: 8px; }
.mn-tabs-wrap .mn-tabs-arrow-right { right: 8px; }
.mn-tabs-wrap .mn-tabs-arrow svg { width: 17px; height: 17px; display: block; }
.mn-tabs-wrap .mn-tabs-arrow:hover,
.mn-tabs-wrap .mn-tabs-arrow:active {
  background: var(--navy) !important;
  border-color: var(--navy);
  color: var(--white);
  box-shadow: 0 2px 10px rgba(17,33,91,.22) !important;
}
.mn-tabs-wrap .mn-tabs-arrow[hidden] { display: none; }

/* Fade hints under the arrows so cut-off tabs read as "more this way" */
.mn-tabs-inner::before,
.mn-tabs-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s ease;
}
.mn-tabs-inner::before { left: 0;  background: linear-gradient(to right, var(--white) 20%, rgba(255,255,255,0)); }
.mn-tabs-inner::after  { right: 0; background: linear-gradient(to left,  var(--white) 20%, rgba(255,255,255,0)); }
.mn-tabs-inner.mn-can-prev::before { opacity: 1; }
.mn-tabs-inner.mn-can-next::after  { opacity: 1; }
/* Scoped + !important on the fill so the parent theme's global button
   background/box-shadow (grey/teal on hover/active) can't bleed through. */
.mn-tabs-wrap .mn-tab {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--white) !important;
  background-image: none !important;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none !important;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.mn-tabs-wrap .mn-tab:hover { border-color: var(--gold); color: var(--navy); }
.mn-tabs-wrap .mn-tab.mn-active {
  background: var(--navy) !important;
  border-color: var(--navy);
  color: var(--white);
}

.mn-content {
  max-width: var(--page-maxw);
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.mn-category { margin-bottom: 56px; scroll-margin-top: 80px; }

.mn-cat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-soft);
}
.mn-cat-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow: hidden;
  display: grid; place-items: center;
  font-size: 24px;
  background: var(--off-white);
  flex: 0 0 auto;
}
.mn-cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.mn-cat-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.mn-cat-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  background: var(--off-white);
  padding: 5px 12px;
  border-radius: 999px;
}

/* ── Responsive product grid — always ≥2 columns ───────────────── */
.mn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobile: 2 columns minimum */
  gap: 18px;
}
@media (min-width: 620px)  { .mn-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .mn-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .mn-grid { grid-template-columns: repeat(5, 1fr); gap: 22px; } }

.mn-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mn-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.mn-card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--off-white);
  overflow: hidden;
}
.mn-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.mn-card:hover .mn-card-img-wrap img { transform: scale(1.06); }
.mn-card-no-img {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 40px; opacity: .5;
}
.mn-card-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--gold);
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}
.mn-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  flex: 1;
}
.mn-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.mn-card-desc {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mn-card-footer {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mn-card-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.mn-card-price .mn-vanaf, .mn-vanaf {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mn-no-price { color: var(--text-mute); }
.mn-card-btn {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.mn-card-btn svg { width: 15px; height: 15px; }
.mn-card:hover .mn-card-btn { background: var(--gold); color: var(--navy); transform: translateX(2px); }

/* AJAX add-to-cart button on the cards */
.mn-add-btn::before { content: '+'; font-size: 19px; font-weight: 700; line-height: 1; }
.mn-add-btn.loading { opacity: .5; pointer-events: none; }
.mn-add-btn.added,
.mn-card:hover .mn-add-btn.added { background: var(--success); color: var(--white); }
.mn-add-btn.added::before { content: '✓'; font-size: 15px; }
/* Hide WC's auto "view cart" link */
.mn-card .added_to_cart { display: none; }

.mn-empty {
  max-width: 520px;
  margin: 60px auto;
  text-align: center;
  color: var(--text-soft);
  padding: 40px 20px;
}

/* ==================================================================
   CART PAGE
================================================================== */
.cart-wrap { background: var(--off-white); min-height: 60vh; }

.cart-layout {
  max-width: var(--page-maxw);
  margin: 0 auto;
  padding: 40px 20px 80px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 880px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-items-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 22px;
  box-shadow: var(--shadow-sm);
}

.shop_table { width: 100%; border-collapse: collapse; }
.shop_table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 16px 10px;
  border-bottom: 2px solid var(--border-soft);
}
.shop_table td {
  padding: 16px 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  font-size: 14px;
}
.shop_table .product-thumbnail img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.shop_table .product-name a { color: var(--navy); font-weight: 600; text-decoration: none; }
.shop_table .product-name a:hover { color: var(--gold); }
.shop_table .product-price, .shop_table .product-subtotal { font-weight: 600; color: var(--navy); }
.shop_table .product-remove .remove {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--off-white);
  color: var(--danger) !important;
  font-size: 18px;
  text-decoration: none;
  line-height: 1;
  transition: background .2s ease, transform .2s ease;
}
.shop_table .product-remove .remove:hover { background: var(--danger); color: var(--white) !important; transform: rotate(90deg); }

.shop_table .quantity input.qty {
  width: 60px;
  padding: 8px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
}

.cart-actions-row .coupon input.input-text {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.cart-actions-row .coupon input.input-text:focus { border-color: var(--gold); }

/* Shared button style (cart + WooCommerce buttons) */
.cart-wrap .button,
.cart-actions-row .button {
  background: var(--navy);
  color: var(--white);
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s ease;
}
.cart-actions-row .coupon .button { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cart-wrap .button:hover,
.cart-actions-row .button:hover { background: var(--gold); color: var(--navy); }

/* Order summary panel */
.cart-summary-panel { position: sticky; top: 90px; }
.cart-summary-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow);
}
.cart-summary-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-soft);
}
.cart-summary-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  letter-spacing: .01em;
}

/* Hide WooCommerce's redundant "Cart totals" (TOTALEN WINKELWAGEN) heading —
   the panel already has its own "Besteloverzicht" title. */
.cart_totals > h2 {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.cart_totals table { width: 100%; border-collapse: collapse; margin: 0; }
.cart_totals th, .cart_totals td {
  padding: 15px 16px;
  font-size: 14px;
  border: none;
  text-align: left;
}
.cart_totals tr:not(.order-total) th { color: var(--text-soft); font-weight: 600; }
.cart_totals tr:not(.order-total) td { text-align: right; color: var(--navy); font-weight: 600; }

/* Rows above the total get a light separator */
.cart_totals .cart-subtotal,
.cart_totals .cart-discount,
.cart_totals .fee,
.cart_totals .tax-rate,
.cart_totals .tax-total { border-bottom: 1px solid var(--border-soft); }

/* Discount rows in a friendly green */
.cart_totals .cart-discount td { color: var(--success); }

/* Final total — emphasized band */
.cart_totals .order-total th,
.cart_totals .order-total td {
  padding-top: 20px;
  padding-bottom: 12px;
  font-size: 15px;
  border: none;
  vertical-align: middle;
}
.cart_totals .order-total th {
  color: var(--navy);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cart_totals .order-total td {
  text-align: right;
  color: var(--navy);
  font-weight: 800;
}
.cart_totals .order-total td .amount,
.cart_totals .order-total bdi { font-size: 24px; }
.cart_totals .order-total small { display: block; font-weight: 500; color: var(--text-mute); }

.wc-proceed-to-checkout { margin-top: 22px; }
.wc-proceed-to-checkout .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
  background: var(--gold);
  color: var(--navy) !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;              /* normal case fits far better than uppercase */
  line-height: 1.25;
  padding: 15px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(201,168,106,.35);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.wc-proceed-to-checkout .checkout-button::after {
  content: "→";
  font-size: 17px;
  flex: 0 0 auto;                    /* arrow never shrinks off the edge */
  transition: transform .2s ease;
}
.wc-proceed-to-checkout .checkout-button:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(201,168,106,.45);
}
.wc-proceed-to-checkout .checkout-button:hover::after { transform: translateX(4px); }
.wc-proceed-to-checkout .checkout-button:active { transform: translateY(0); }

.cart-continue {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  transition: color .15s ease;
}
.cart-continue:hover { color: var(--navy); }

.cart-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.cart-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-mute);
  font-weight: 600;
  letter-spacing: .01em;
}

.cart-empty-wrap {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  padding: 70px 20px 90px;
}
.return-to-shop {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .2s ease;
}
.return-to-shop:hover { background: var(--gold); color: var(--navy); }

/* ==================================================================
   CHECKOUT PAGE
================================================================== */
.woocommerce-checkout-wrap {
  max-width: var(--page-maxw);
  margin: 0 auto;
  padding: 44px 20px 80px;
  background: var(--off-white);
}
/* Scope to the <form> — <body> has the same class and would become the grid */
form.woocommerce-checkout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) { form.woocommerce-checkout { grid-template-columns: 1fr; } }

/* Divs injected into the form become grid items — unknown ones span full width */
form.woocommerce-checkout > *:not(#customer_details):not(#order_review):not(#order_review_heading) {
  grid-column: 1 / -1;
}
/* Span both right-column rows so the summary sits beside the form */
#customer_details { grid-column: 1; grid-row: span 2; }
@media (max-width: 900px) { #customer_details { grid-row: auto; } }

/* Country is always Nederland — still submitted, just not shown */
#billing_country_field { display: none !important; }

/* Coupon: no "Heb je een waardebon?" toggle, form always open
   (template inlines display:none, hence !important) */
.woocommerce-form-coupon-toggle { display: none; }
form.checkout_coupon.woocommerce-form-coupon {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
form.checkout_coupon > p:not(.form-row) { display: none; } /* intro text */
form.checkout_coupon p.form-row { margin: 0; }
form.checkout_coupon .form-row-first { flex: 1 1 220px; }
form.checkout_coupon .form-row-last  { flex: 0 0 auto; }
form.checkout_coupon .input-text {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
form.checkout_coupon button {
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}
form.checkout_coupon button:hover { background: var(--navy-soft); }

.woocommerce-checkout .col2-set,
#customer_details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
#order_review, #order_review_heading {
  grid-column: 2;
}
@media (max-width: 900px) { #order_review, #order_review_heading { grid-column: 1; } }

.woocommerce-checkout h3,
.checkout-heading,
#order_review_heading {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 18px;
}

.woocommerce-checkout p.form-row { margin-bottom: 16px; }
.woocommerce-checkout label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 6px;
}

/* Take-away / dine-in: two equal pills.
   WC outputs a flat <input><label><input><label> sequence, so the native
   radio is hidden and each label is the pill with its own drawn dot. */
.snackbar-order-type .woocommerce-input-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
/* Side by side only when there's room (wide column / mobile single-column) */
@media (max-width: 900px) {
  .snackbar-order-type .woocommerce-input-wrapper { grid-template-columns: 1fr 1fr; }
}
.snackbar-order-type .woocommerce-input-wrapper input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.snackbar-order-type .woocommerce-input-wrapper label.radio {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  min-height: 50px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
/* Keep the option text on its own, no stray asterisk drifting to the edge */
.snackbar-order-type .woocommerce-input-wrapper label.radio .required {
  margin-left: 2px;
  border: 0;
  color: var(--danger);
  text-decoration: none;
}
/* Drawn radio dot at the left of each pill */
.snackbar-order-type .woocommerce-input-wrapper label.radio::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.snackbar-order-type .woocommerce-input-wrapper input[type="radio"]:checked + label.radio {
  border-color: var(--gold);
  background: rgba(201,168,106,.1);
}
.snackbar-order-type .woocommerce-input-wrapper input[type="radio"]:checked + label.radio::before {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 4px var(--gold);
}
.snackbar-order-type .woocommerce-input-wrapper input[type="radio"]:focus-visible + label.radio {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  background: var(--white);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,106,.15);
}

#order_review {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 90px;
}
/* High-specificity selectors so parent/WooCommerce table borders lose */
#order_review table.shop_table {
  width: 100%;
  border: none;
  border-collapse: collapse;
  margin: 0;
  background: transparent;
}
#order_review table.shop_table th,
#order_review table.shop_table td {
  padding: 11px 2px;
  font-size: 14px;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
  background: transparent;
}
#order_review table.shop_table td { text-align: right; font-weight: 600; color: var(--navy); }

/* Column header row */
#order_review table.shop_table thead th {
  padding: 0 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: 2px solid var(--border);
}
#order_review table.shop_table thead th.product-total { text-align: right; }

/* Product rows */
#order_review .cart_item .product-name { font-weight: 500; color: var(--text); }
#order_review .cart_item .product-name .product-quantity {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-mute);
  white-space: nowrap;
}

/* Subtotal + coupon rows */
#order_review .cart-subtotal th { font-weight: 600; color: var(--text-soft); }
#order_review .cart-discount th,
#order_review .cart-discount td { color: var(--success); }
#order_review .cart-discount th { font-weight: 600; }
#order_review .woocommerce-remove-coupon {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  text-decoration: none;
}
#order_review .woocommerce-remove-coupon:hover { color: #c0392b; }

/* Total row */
#order_review table.shop_table .order-total th,
#order_review table.shop_table .order-total td {
  font-size: 17px;
  padding-top: 15px;
  border-bottom: none;
  border-top: 2px solid var(--navy);
  color: var(--navy);
}
#order_review table.shop_table .order-total td { font-weight: 800; }

/* Express checkout (Apple Pay / Google Pay) between table and methods */
#order_review .wcpay-express-checkout-wrapper { margin: 18px 0 4px; }
#order_review #wcpay-express-checkout-button-separator {
  margin: 14px 0 !important;
  color: var(--text-mute);
  font-size: 12.5px;
  letter-spacing: 1px;
}

.woocommerce-checkout #payment {
  background: var(--off-white);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin-top: 16px;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
/* Radio and gateway label on one line (global label rule makes labels block) */
.woocommerce-checkout #payment ul.payment_methods li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
  padding: 6px 0;
}
.woocommerce-checkout #payment ul.payment_methods li > label {
  display: inline-block;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li .payment_box {
  flex-basis: 100%;
  margin-top: 10px;
}
.woocommerce-checkout #payment .payment_box {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-soft);
}
.woocommerce-checkout #place_order {
  width: 100%;
  background: var(--gold);
  color: var(--navy);
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 15px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.woocommerce-checkout #place_order:hover { background: var(--gold-dark); transform: translateY(-2px); }

.co-secure-note {
  text-align: center;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--text-mute);
}

/* ── Order-received / thank-you ─────────────────────────────────── */
.woocommerce-order {
  max-width: 680px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
}
@media (max-width: 560px) { .woocommerce-order { padding: 24px 18px; } }

/* "Bedankt. Je bestelling is ontvangen." */
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  margin: 0 0 24px;
}

/* Overview (bestelnummer / datum / e-mail / totaal) as a tidy grid */
.woocommerce-order ul.order_details {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin: 0 0 28px;
  padding: 20px 22px;
  background: var(--off-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.woocommerce-order ul.order_details li {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.woocommerce-order ul.order_details li strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  word-break: break-word;
}
@media (max-width: 560px) { .woocommerce-order ul.order_details { grid-template-columns: 1fr; } }

/* Section titles (Bestelgegevens / Factuuradres) */
.woocommerce-order h2 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 28px 0 14px;
}

/* Order details table */
.woocommerce-order .shop_table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  border-radius: 0;
}
.woocommerce-order .shop_table th,
.woocommerce-order .shop_table td {
  padding: 11px 0;
  font-size: 14px;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border-soft);
}
.woocommerce-order .shop_table td:last-child,
.woocommerce-order .shop_table th:last-child { text-align: right; }
.woocommerce-order .shop_table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.woocommerce-order .shop_table .product-name a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-order .shop_table tfoot th { color: var(--text-soft); font-weight: 600; }
.woocommerce-order .shop_table tfoot td { font-weight: 700; color: var(--navy); }
.woocommerce-order .shop_table tfoot tr:last-child th,
.woocommerce-order .shop_table tfoot tr:last-child td {
  font-size: 16px;
  font-weight: 800;
  border-bottom: none;
  padding-top: 15px;
}

/* Customer / billing address */
.woocommerce-order address {
  font-style: normal;
  background: var(--off-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-soft);
}

/* ==================================================================
   MY ACCOUNT PAGE
================================================================== */
.ma-wrap { background: var(--off-white); min-height: 60vh; }
.ma-header-inner, .ma-body {
  max-width: var(--page-maxw);
  margin: 0 auto;
}
.ma-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  text-align: left;
}
.ma-user-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 10px 16px;
  border-radius: 999px;
}
.ma-user-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 18px;
}
.ma-user-info { display: flex; flex-direction: column; }
.ma-user-name { font-size: 14px; font-weight: 700; color: var(--white); }
.ma-user-email { font-size: 12px; color: rgba(255,255,255,.6); }

.ma-body { padding: 40px 20px 80px; }
.ma-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 820px) { .ma-grid { grid-template-columns: 1fr; } }

.ma-nav {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
/* Account buttons are rendered as Bootstrap .btn — restyle to brand */
.ma-nav .btn-primary,
.ma .btn-primary {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .3px;
  padding: 11px 14px !important;
  border-radius: var(--radius-sm) !important;
}
.ma-nav .btn-primary:hover,
.ma .btn-primary:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--navy) !important;
}

.ma-content {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}

.ma-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
@media (max-width: 560px) { .ma-stats { grid-template-columns: 1fr; } }
.ma-stat {
  background: var(--off-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ma-stat-icon { font-size: 22px; }
.ma-stat-label { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); }
.ma-stat-value { font-size: 22px; font-weight: 800; color: var(--navy); }
.ma-stat-value.small { font-size: 15px; }

.ma-section-label {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
}

.ma-content table.shop_table,
.ma-content .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
}
.ma-content .woocommerce-orders-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-mute);
  padding: 12px 8px;
  border-bottom: 2px solid var(--border-soft);
}
.ma-content .woocommerce-orders-table td {
  padding: 14px 8px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
}
.ma-content .woocommerce-button.button {
  background: var(--navy);
  color: var(--white);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.ma-content .woocommerce-button.button:hover { background: var(--gold); color: var(--navy); }

.ma-guest {
  max-width: 420px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
}
.ma-guest .input-text,
.ma-guest input[type="text"],
.ma-guest input[type="password"],
.ma-guest input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  margin-top: 6px;
}
.ma-guest .woocommerce-form-login__submit,
.ma-guest button[type="submit"] {
  width: 100%;
  background: var(--gold);
  color: var(--navy);
  border: none;
  font-weight: 700;
  padding: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: 8px;
}

/* ==================================================================
   ORDER STATUS PAGE  (dark card)
================================================================== */
.os { background: var(--off-white); min-height: 70vh; }
.os-header-inner { max-width: var(--page-maxw); margin: 0 auto; }
.os-body {
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 20px 80px;
}
.os-card {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.os-card-inner { padding: 36px 30px; text-align: center; }

.os-shop-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.os-loading, .os-error {
  color: rgba(255,255,255,.7);
  font-size: 15px;
  padding: 20px 0;
}
.os-error { display: none; color: #ffb4be; }
.os-error.visible { display: block; }
.os-content { display: none; }
.os-content.visible { display: block; }

.os-order-num {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}

.os-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 26px;
  background: rgba(255,255,255,.1);
  color: var(--white);
}
.os-status-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.os-status-pill.pending    { background: rgba(201,168,106,.2); color: var(--gold); }
.os-status-pill.processing { background: rgba(96,165,250,.2);  color: #93c5fd; }
.os-status-pill.completed  { background: rgba(46,158,91,.22);  color: #6ee7a0; }
.os-status-dot { animation: os-pulse 1.6s ease-in-out infinite; }
@keyframes os-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.os-pickup-block {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}
.os-pickup-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.os-pickup-time {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 700;
  color: var(--white);
  margin-top: 6px;
  line-height: 1;
}
.os-pickup-time.delayed { color: var(--gold); }

.os-banner {
  display: none;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.os-banner.visible { display: flex; }
.os-banner strong { color: var(--white); }
.os-banner span { color: rgba(255,255,255,.75); font-size: 12.5px; }
.os-banner-delay { background: rgba(201,168,106,.14); border: 1px solid rgba(201,168,106,.3); }
.os-banner-ready {
  background: rgba(46,158,91,.16);
  border: 1px solid rgba(46,158,91,.4);
  align-items: center;
  text-align: center;
  flex-direction: column;
}
.os-ready-emoji { font-size: 32px; }

.os-live {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 11.5px;
  color: rgba(255,255,255,.45);
}
.os-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6ee7a0;
  animation: os-pulse 1.6s ease-in-out infinite;
}

/* ==================================================================
   SINGLE PRODUCT PAGE
================================================================== */
.sp-wrap {
  max-width: var(--page-maxw);
  margin: 0 auto;
  padding: 26px 20px 80px;
}

.sp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-mute);
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.sp-breadcrumb a { color: var(--text-soft); text-decoration: none; }
.sp-breadcrumb a:hover { color: var(--gold); }
.sp-breadcrumb-current { color: var(--navy); font-weight: 600; }
.sp-breadcrumb-sep { color: var(--border); }

.sp-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
@media (max-width: 820px) { .sp-layout { grid-template-columns: 1fr; gap: 28px; } }

.sp-main-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--off-white);
  box-shadow: var(--shadow);
}
.sp-main-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.sp-no-img { width: 100%; height: 100%; display: grid; place-items: center; font-size: 72px; opacity: .5; }
.sp-img-badge {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--gold);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.sp-gallery {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.sp-gallery-thumb {
  width: 68px; height: 68px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s ease;
}
.sp-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-gallery-thumb.sp-active,
.sp-gallery-thumb:hover { border-color: var(--gold); }

.sp-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(201,168,106,.12);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.sp-product-name {
  font-family: var(--font-serif);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 18px;
}
/* Pre-order notice for advance-order dishes */
.sp-preorder-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 18px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #8a5a00;
  background: #fff6e0;
  border: 1px solid #f2d492;
  border-radius: var(--radius-sm);
}
.sp-preorder-icon { font-size: 15px; }
.sp-price-block {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.sp-price { font-size: 30px; font-weight: 800; color: var(--navy); }
.sp-vanaf { font-size: 12px; font-weight: 600; color: var(--text-mute); text-transform: uppercase; }
/* Hide WooCommerce's own variation price under the dropdown — the chosen
   price is shown up top in .sp-price instead (see single-product.php). */
.sp-cart-wrap .woocommerce-variation-price,
.sp-cart-wrap .single_variation .price { display: none !important; }
.sp-stock { font-size: 12.5px; font-weight: 600; }
.sp-stock-in { color: var(--success); }
.sp-stock-out { color: var(--danger); }

.sp-short-desc {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: 24px;
}

.sp-cart-wrap { margin-bottom: 26px; }
.sp-cart-wrap .quantity input.qty {
  width: 68px;
  padding: 13px 8px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  margin-right: 10px;
}
.sp-cart-wrap .variations { width: 100%; margin-bottom: 16px; border-collapse: collapse; }
.sp-cart-wrap .variations td { padding: 6px 0; }
.sp-cart-wrap .variations select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
}
.sp-cart-wrap .button,
.sp-cart-wrap button.single_add_to_cart_button {
  background: var(--gold);
  color: var(--navy);
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.sp-cart-wrap .button:hover,
.sp-cart-wrap button.single_add_to_cart_button:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
}

.sp-meta {
  border-top: 1px solid var(--border-soft);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-meta-row { display: flex; gap: 12px; font-size: 13px; }
.sp-meta-label { color: var(--text-mute); font-weight: 600; min-width: 90px; }
.sp-meta-value { color: var(--navy); font-weight: 600; }
.sp-meta-value a { color: var(--gold-dark); text-decoration: none; }

.sp-desc-section {
  margin-top: 56px;
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.sp-desc-inner { max-width: 760px; margin: 0 auto; }
.sp-desc-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
}
.sp-desc-body { font-size: 15px; color: var(--text-soft); line-height: 1.8; }
.sp-desc-body p { margin-bottom: 14px; }

.sp-related { margin-top: 60px; }
.sp-related-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 26px;
  text-align: center;
}
.sp-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* ≥2 columns, like the menu */
  gap: 18px;
}
@media (min-width: 620px)  { .sp-related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .sp-related-grid { grid-template-columns: repeat(4, 1fr); } }
.sp-related-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease;
}
.sp-related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sp-related-card-img { aspect-ratio: 4/3; background: var(--off-white); overflow: hidden; }
.sp-related-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sp-related-card:hover .sp-related-card-img img { transform: scale(1.06); }
.sp-related-no-img { width: 100%; height: 100%; display: grid; place-items: center; font-size: 36px; opacity: .5; }
.sp-related-card-body { padding: 14px; }
.sp-related-card-name { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.sp-related-card-price { font-size: 15px; font-weight: 700; color: var(--navy); margin-top: 6px; }

/* ==================================================================
   WOOCOMMERCE NOTICES (shared)
================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 14px;
  margin: 0 auto 24px;
  max-width: var(--page-maxw);
}
.woocommerce-message { background: rgba(46,158,91,.1);  border: 1px solid rgba(46,158,91,.3);  color: #1e6e3f; }
.woocommerce-info    { background: rgba(17,33,91,.06);   border: 1px solid rgba(17,33,91,.15);  color: var(--navy); }
.woocommerce-error   { background: rgba(209,73,91,.1);   border: 1px solid rgba(209,73,91,.3);  color: #a5283a; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { font-weight: 700; }

/* ==================================================================
   WP CAFE MINI CART
   Full-width green view-cart button; checkout removed in PHP.
   !important beats wp-cafe's late inline CSS.
================================================================== */
.wpc-woocommerce-mini-cart__buttons .button.wc-forward {
  display: block;
  width: 100%;
  margin: 0;
  padding: 13px 16px;
  text-align: center;
  background: var(--success) !important;
  color: var(--white) !important;
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.wpc-woocommerce-mini-cart__buttons .button.wc-forward:hover {
  background: #257f49 !important;
}
.wpc-woocommerce-mini-cart__buttons .button.checkout { display: none !important; }

/* ==================================================================
   SITE FOOTER
================================================================== */
.sb-footer {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: rgba(255,255,255,.8);
  font-family: var(--font-sans);
  padding: 48px 20px 0;
}
.sb-footer-inner {
  max-width: var(--page-maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  justify-content: space-between;
  padding-bottom: 36px;
}
.sb-footer-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
}
.sb-footer-sub { color: var(--gold); margin-top: 4px; font-size: 14px; }
.sb-footer-address { margin-top: 16px; font-size: 14px; }
/* Postcode/city drops to its own line, aligned under the street (past the pin) */
.sb-footer-address-line2 { display: block; padding-left: 1.6em; }
.sb-footer-phone { margin-top: 8px; font-size: 14px; }
.sb-footer-phone a { color: inherit; text-decoration: none; }
.sb-footer-phone a:hover { color: var(--gold); }
.sb-footer-email { margin-top: 8px; font-size: 14px; }
.sb-footer-email a { color: inherit; text-decoration: none; }
.sb-footer-email a:hover { color: var(--gold); }
.sb-footer-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.sb-hours { list-style: none; margin: 0; padding: 0; min-width: 250px; }
.sb-hours li {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  font-size: 14px;
  padding: 4px 0;
}
.sb-hours li span:last-child { font-variant-numeric: tabular-nums; }
.sb-hours li.sb-today { color: var(--white); font-weight: 700; }
.sb-hours li.sb-today span:first-child::after {
  content: '·';
  color: var(--gold);
  margin-left: 6px;
}
.sb-footer-bottom {
  max-width: var(--page-maxw);
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
  padding: 18px 0 22px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

/* ==================================================================
   LAST-ORDER TOAST
================================================================== */
.sb-order-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 36px);
  padding: 14px 16px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: 14px;
  animation: sb-toast-in .35s ease;
}
@keyframes sb-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.sb-order-toast-emoji { font-size: 22px; }
.sb-order-toast-body { display: flex; flex-direction: column; gap: 2px; }
.sb-order-toast-body strong { font-size: 13px; }
.sb-order-toast-body a { color: var(--gold); font-weight: 700; text-decoration: none; }
.sb-order-toast-body a:hover { text-decoration: underline; }
.sb-order-toast-close {
  margin-left: 4px;
  padding: 2px 4px;
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.sb-order-toast-close:hover { color: var(--white); }

/* ==================================================================
   ORDERS DASHBOARD (wp-admin, enqueued by snackbarsdgr-backend)
================================================================== */
.sb-orders-wrap { max-width: 900px; }
.sb-tabs { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.sb-tab {
  border: 1px solid #c3c4c7;
  background: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
}
.sb-tab.active { background: var(--navy, #11215b); border-color: var(--navy, #11215b); color: #fff; }
.sb-count { background: rgba(0,0,0,.12); border-radius: 10px; padding: 1px 8px; font-size: 11px; margin-left: 4px; }
.sb-tab.active .sb-count { background: rgba(255,255,255,.25); }
.sb-live { margin-left: auto; font-size: 12px; color: #666; display: flex; align-items: center; gap: 6px; }
.sb-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e9e5b; animation: sbPulse 1.6s infinite; }
@keyframes sbPulse { 50% { opacity: .35; } }

.sb-card {
  background: #fff;
  border: 1px solid #dcdcde;
  border-left: 4px solid #dba617;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 14px 16px;
}
.sb-card.processing { border-left-color: #2271b1; }
.sb-card.completed { border-left-color: #2e9e5b; }
.sb-card.cancelled, .sb-card.refunded { border-left-color: #d63638; opacity: .75; }
.sb-card-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sb-card-head .sb-num { font-weight: 700; font-size: 15px; }
.sb-card-head .sb-name { font-size: 14px; }
.sb-pickup { font-size: 18px; font-weight: 800; margin-left: auto; }
.sb-pickup small { font-weight: 600; color: #946800; }

.sb-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 10px;
  border-radius: 10px;
  background: #f0f0f1;
}
.sb-badge.pending { background: #fcf9e8; color: #946800; }
.sb-badge.processing { background: #e5f1f8; color: #2271b1; }
.sb-badge.completed { background: #e6f4ea; color: #1e7e3e; }
.sb-badge.cancelled, .sb-badge.refunded { background: #fbeaea; color: #b32d2e; }
.sb-badge.sb-type-dinein { background: #ede7f6; color: #5e35b1; }
.sb-badge.sb-type-takeaway { background: #e8f0e6; color: #3d6b34; }
.sb-badge.sb-unpaid { background: #111; color: #fff; }
.sb-badge.sb-future { background: #e3f0ff; color: #1152a8; }
.sb-badge.sb-special { background: #2d2d2d; color: #ffd54a; }

.sb-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sb-btn { border: none; border-radius: 6px; padding: 8px 14px; font-weight: 700; cursor: pointer; }
.sb-btn-ready { background: #2e9e5b; color: #fff; }
.sb-btn-time { background: #dba617; color: #fff; }
.sb-btn-details { background: #f0f0f1; color: #1d2327; }
.sb-btn-cancel { background: #d63638; color: #fff; }

.sb-delay-row { display: none; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sb-delay-row.open { display: flex; }
.sb-delay-row button {
  border: 1px solid #dba617;
  background: #fff;
  color: #946800;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 700;
  cursor: pointer;
}

.sb-details { display: none; margin-top: 14px; border-top: 1px dashed #dcdcde; padding-top: 12px; font-size: 13px; }
.sb-details.open { display: block; }
.sb-details table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.sb-details th, .sb-details td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #f0f0f1; }
.sb-details td:last-child, .sb-details th:last-child { text-align: right; }
.sb-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 20px; margin-bottom: 12px; }
.sb-meta div span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #787c82; }
.sb-empty { color: #787c82; font-style: italic; }

/* ==================================================================
   SITE HEADER — split title, bigger nav
   The "(Snackbar & Maleisische Chinese Afhaal Centrum)" suffix is
   rendered as its own .site-title-sub line in the branding template
   part (see template-parts/site-branding.php + snackbar_split_site_title).
================================================================== */
.site-title-sub {
  display: block;
  margin: 6px 0 0;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: inherit;
  opacity: .72;
}

.main-navigation .nav-menu > .menu-item > a {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .05em;
}

/* Stack the nav UNDER the branding instead of floating it top-right.
   Parent (min-width:55em) puts .main-navigation position:absolute across the
   header top with large top padding; unwind that so the header flows vertically. */
@media only screen and (min-width: 55em) {
  .site-header { line-height: 1.4; padding-top: 1.2rem; padding-bottom: 0.6rem; }
  .site-header-inner { display: flex; flex-direction: column; }

  .site-branding { float: none; display: block; }

  .main-navigation {
    position: static;
    float: none;
    width: 100%;
    left: auto;
    top: auto;
    margin: 6px 0 0;
  }
  .main-navigation-inner {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 0;
    flex-wrap: wrap;
  }
  .main-navigation .nav-menu { float: none; }
  .main-navigation .nav-menu > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav-search-form { margin-left: auto; }
}

/* ==================================================================
   NAV SEARCH BAR  (all widths)
   The teal search dropdown (#0aac8e via --color-accent) → navy bar with
   a clean white field. Applies to both the desktop dropdown and the
   mobile search, so it lives outside the mobile media query.
================================================================== */
.nav-search-form { --color-accent: var(--navy); }

.nav-search-form .form-search,
.nav-search-form .search-form,
.nav-search-form form[role="search"] {
  background-color: var(--navy) !important;
  box-shadow: 0 5px 20px rgba(8,15,40,.35) !important;
}
.nav-search-form .search-field,
.nav-search-form .search-field:focus {
  background-color: #fff !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm);
  border: 1px solid transparent !important;
}
.nav-search-form .search-field:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201,168,106,.28) !important;
}
/* Search magnifier glyphs → gold so they read on navy */
.nav-search-form .form-search:after,
.nav-search-form .search-form:after,
.nav-search-form form[role="search"]:after,
.search-toggle:before {
  color: var(--gold) !important;
}

/* ==================================================================
   MOBILE OFF-CANVAS NAV  (parent Auberge mobile breakpoint ≤54.9375em)
   ─────────────────────────────────────────────────────────────────
   The parent theme paints the mobile menu in its accent teal (#0aac8e)
   and a grey panel (#3a3c3e). Recolour the whole slide-out to the navy/
   gold snackbar palette. Accent-colour vars are overridden ONLY within
   the nav so site-wide buttons keep their styling.
================================================================== */
@media only screen and (max-width: 54.9375em) {

  /* Retarget the theme colour tokens for everything inside the nav. */
  .main-navigation,
  .nav-search-form {
    --color-navigation: var(--navy);
    --color-navigation-border: var(--navy-soft);
    --color-navigation-text: #fff;
  }

  /* ── The dark sliding panel → navy ── */
  .main-navigation-inner {
    background-color: var(--navy) !important;
    box-shadow: 0 18px 44px rgba(8,15,40,.45);
  }
  .main-navigation .nav-menu,
  .main-navigation .nav-menu li ul {
    background-color: var(--navy) !important;
  }

  /* Menu links */
  .main-navigation .nav-menu a {
    color: #fff !important;
    border-color: rgba(255,255,255,.10) !important;
    font-weight: 600;
    letter-spacing: .04em;
    transition: background-color .15s ease, color .15s ease;
  }
  /* Hover / current item → gold accent bar */
  .main-navigation .nav-menu li:hover > a,
  .main-navigation .nav-menu li a:hover,
  .main-navigation .nav-menu li.active-menu-item > a,
  .main-navigation .nav-menu li.current-menu-item > a,
  .main-navigation .nav-menu li li:hover > a,
  .main-navigation .nav-menu li li.current-menu-item > a {
    background-color: var(--navy-soft) !important;
    color: var(--gold) !important;
    box-shadow: inset 3px 0 0 var(--gold);
  }

  /* ── The teal ✕ / ☰ toggle → navy chip with gold glyph ── */
  .menu-toggle:before {
    background: var(--navy) !important;
    color: var(--gold) !important;
    border-radius: 0 0 var(--radius-sm) 0;
    box-shadow: 0 6px 18px rgba(8,15,40,.35);
  }
  .menu-toggle:active:before,
  .menu-toggle:focus:before,
  .menu-toggle:hover:before {
    background: var(--navy-soft) !important;
    color: #fff !important;
  }

  /* ── Floating cart button → match navy/gold instead of default blue ── */
  .toggle-mobile-sidebar,
  a.toggle-mobile-sidebar {
    background: var(--navy) !important;
    color: var(--gold) !important;
    box-shadow: 0 8px 22px rgba(8,15,40,.35) !important;
  }
}

/* ==================================================================
   "NIETS GEVONDEN" / EMPTY STATE  (search + 404 fallback)
   Child override template-parts/content-none.php. Self-contained card
   in the navy/gold palette — replaces the parent theme's plain heading
   and teal search button.
================================================================== */
.snf {
  max-width: 620px;
  margin: 40px auto 72px;
  padding: 48px 32px 44px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.snf-icon {
  width: 92px;
  height: 92px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  color: var(--navy);
  background: var(--off-white);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.snf-icon svg { width: 44px; height: 44px; }
.snf-title {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--navy);
}
.snf-text {
  margin: 0 auto 28px;
  max-width: 42ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.snf-text strong { color: var(--navy); }
.snf-text a { color: var(--gold-dark); text-decoration: underline; }

/* ── Search box (default WP search form inside .snf-search) ── */
.snf-search { margin: 0 auto 26px; max-width: 460px; }
.snf-search .search-form,
.snf-search form[role="search"] {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.snf-search label { flex: 1 1 auto; margin: 0; display: block; min-width: 0; }
.snf-search .search-field {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100%;
  height: 48px;
  padding: 0 16px !important;
  font-size: 1rem;
  color: var(--text) !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.snf-search .search-field:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201,168,106,.25) !important;
}
.snf-search [type="submit"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: 0 0 auto;
  width: auto !important;
  height: 48px;
  position: static !important;
  opacity: 1 !important;
  overflow: visible !important;
  padding: 0 22px !important;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--white) !important;
  background: var(--navy) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .18s ease, transform .12s ease;
}
.snf-search [type="submit"]:hover {
  background: var(--gold) !important;
  color: var(--navy) !important;
}
.snf-search [type="submit"]:active { transform: translateY(1px); }

/* ── Action buttons ── */
.snf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.snf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.snf-btn:active { transform: translateY(1px); }
.snf-btn-primary {
  background: var(--navy);
  color: var(--white);
}
.snf-btn-primary:hover { background: var(--gold); color: var(--navy); }
.snf-btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}
.snf-btn-ghost:hover { border-color: var(--navy); background: var(--off-white); }

@media (max-width: 520px) {
  .snf { margin: 20px 14px 48px; padding: 36px 20px 32px; }
  .snf-search .search-form,
  .snf-search form[role="search"] { flex-direction: column; }
  .snf-search [type="submit"] { width: 100% !important; }
  .snf-actions { flex-direction: column; }
  .snf-btn { width: 100%; }
}

/* ==================================================================
   HERO "BESTEL NU" CTA  — centered over the front-page banner image.
   Injected via wmhook_banner_content_bottom (see functions.php). The
   parent .site-banner is position:relative, so this overlays it.
================================================================== */
.hero-cta {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;   /* let the wrapper pass clicks through … */
  padding: 20px;
}
.hero-cta-btn {
  pointer-events: auto;   /* … but the button itself is clickable */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  background: var(--navy);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(8,15,40,.45);
  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.hero-cta-btn:hover,
.hero-cta-btn:focus {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(8,15,40,.5);
}
.hero-cta-btn:active { transform: translateY(0); }

@media (max-width: 600px) {
  .hero-cta-btn { padding: 13px 30px; }
}

/* ==================================================================
   AUTO-UPDATING CART  (see js/cart-auto-update.js)
   Quantity changes apply automatically, so the manual "Update
   winkelwagen" button is hidden. To avoid a flash of the button (and
   the whitespace it leaves) before JS runs, it's hidden by DEFAULT and
   only shown when JS is unavailable. The parent theme renders
   <html class="no-js"> and strips that class once JS loads, so:
     • JS on  → not .no-js → row stays hidden from first paint (no flash)
     • JS off → .no-js persists → row shows as a working fallback
================================================================== */
.cart-actions-row { display: none; }
html.no-js .cart-actions-row { display: table-row; }

/* Busy state while a background update is in flight */
.cart-updating {
  position: relative;
  opacity: .55;
  pointer-events: none;
  transition: opacity .15s ease;
}
.cart-updating::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: cart-spin .7s linear infinite;
}
@keyframes cart-spin { to { transform: rotate(360deg); } }