/* ── Adabakes Theme – main.css ── */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 17px;
  overflow-x: hidden;
  background: #f5efe3;
}
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: #f5efe3;
  color: #1a3a2a;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
img { display: block; max-width: 100%; }

/* Color tokens */
:root {
  --green:  #1a3a2a;
  --green2: #254d38;
  --cream:  #f5efe3;
  --cream2: #ede4d3;
  --rust:   #8a3324;
  --rust2:  #a33d2b;
}

.serif { font-family: 'Cormorant Garamond', Georgia, serif; }
.hidden { display: none; }

/* ── Nav ── */
header { display: contents; }
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--green);
  transition: box-shadow .3s ease;
}
#nav.shadow { box-shadow: 0 2px 30px rgba(0,0,0,.25); }
.nav-inner {
  max-width: 1300px; margin: 0 auto;
  padding: 0 32px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; }
.nav-logo img { width: 40px; height: 40px; border-radius: 4px; }
.nav-logo-text { display: none; }
@media(min-width:600px){ .nav-logo-text { display: block; } }
.nav-logo-text span { color: rgba(245,239,227,.55); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; font-family: 'DM Sans', sans-serif; }
.nav-links { display: none; gap: 32px; }
@media(min-width:900px){ .nav-links { display: flex; } }
.nav-links a { color: rgba(245,239,227,.7); font-size: .85rem; font-weight: 500; text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--cream); }
.nav-icons { display: flex; align-items: center; gap: 2px; }
.nav-icon {
  background: none; border: none; color: var(--cream); cursor: pointer;
  padding: 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; position: relative; transition: color .2s;
}
.nav-icon:hover { color: rgba(245,239,227,.65); }
.nav-icon-label { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; font-family: 'DM Sans', sans-serif; line-height: 1; }
.cart-count {
  position: absolute; top: 2px; right: 2px;
  background: var(--rust); color: var(--cream);
  font-size: .6rem; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
/* Cart drawer */
#cart-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999;
}
#cart-overlay.open { display: block; }
#cart-drawer {
  position: fixed; top: 0; right: -420px; width: min(420px, 95vw); height: 100%;
  background: var(--cream); z-index: 1000; display: flex; flex-direction: column;
  transition: right .35s cubic-bezier(.4,0,.2,1); box-shadow: -4px 0 24px rgba(0,0,0,.12);
}
#cart-drawer.open { right: 0; }
.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid rgba(26,58,42,.1);
  background: var(--green);
}
.cart-drawer-header h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600;
  color: var(--cream); margin: 0;
}
#cart-close {
  background: none; border: none; color: var(--cream); cursor: pointer;
  padding: 4px; display: flex; align-items: center;
}
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; position: relative; }
.cart-drawer-body .woocommerce-mini-cart { list-style: none; padding: 0; margin: 0; }
/* WC blockUI loading overlay inside the cart drawer */
.cart-drawer-body .blockOverlay { background: rgba(245,239,227,.75) !important; border-radius: 8px !important; z-index: 10 !important; }
.cart-drawer-body .blockUI { position: absolute !important; }
.cart-drawer-body .woocommerce-mini-cart-item { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 8px; padding: 14px 0; border-bottom: 1px solid rgba(26,58,42,.08); align-items: center; }
.cart-drawer-body .woocommerce-mini-cart-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.cart-drawer-body .woocommerce-mini-cart-item a:not(.remove) { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; color: var(--green); text-decoration: none; font-size: .92rem; font-weight: 600; line-height: 1.35; }
.cart-drawer-body .woocommerce-mini-cart-item a:not(.remove):hover { color: var(--rust); }
.cart-drawer-body .woocommerce-mini-cart-item a.remove { color: rgba(26,58,42,.4); text-decoration: none; font-size: 1.1rem; line-height: 1; flex: 0 0 auto; }
.cart-drawer-body .woocommerce-mini-cart-item a.remove:hover { color: var(--rust); }
/* Forces the qty/price row to always start a fresh line, regardless of how
   long the product title above it is — see PHP filter that wraps this in
   one element instead of leaving loose sibling nodes. */
.cart-drawer-body .adabakes-mini-cart-qtyprice { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; padding-left: 72px; font-size: .9rem; color: rgba(26,58,42,.75); }
.cart-drawer-body .adabakes-mini-cart-qty-wrap { display: inline-flex; align-items: center; gap: 2px; border: 1px solid rgba(26,58,42,.25); border-radius: 999px; padding: 2px; }
.cart-drawer-body .adabakes-qty-btn { width: 26px; height: 26px; flex: 0 0 auto; border: none; background: transparent; color: var(--green); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cart-drawer-body .adabakes-qty-btn:hover:not(:disabled) { background: rgba(26,58,42,.08); }
.cart-drawer-body .adabakes-qty-btn:disabled { opacity: .4; cursor: default; }
.cart-drawer-body .adabakes-qty-value { min-width: 20px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--green); }
.cart-drawer-body .woocommerce-mini-cart__total { margin-top: 20px; font-weight: 600; color: var(--green); display: flex; justify-content: space-between; font-size: 1rem; }
.cart-drawer-body .woocommerce-mini-cart__buttons { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cart-drawer-body .woocommerce-mini-cart__buttons a { display: block; text-align: center; padding: 13px; border-radius: 99px; font-weight: 600; font-size: .85rem; text-decoration: none; }
.cart-drawer-body .button.wc-forward { background: var(--rust); color: var(--cream); }
.cart-drawer-body .checkout { background: var(--green); color: var(--cream); }
#ham { background: none; border: none; color: var(--cream); cursor: pointer; padding: 8px; }
@media(min-width:900px){ #ham { display: none; } }
#mob { background: #0f2218; overflow: hidden; max-height: 0; transition: max-height .35s ease; }
#mob.open { max-height: 400px; }
#mob a { display: block; color: rgba(245,239,227,.8); padding: 14px 32px; font-size: .9rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.06); transition: color .2s; }
#mob a:hover { color: var(--cream); }
#mob .mob-cta { background: var(--rust); color: var(--cream); margin: 16px 32px 20px; border-radius: 99px; text-align: center; }

/* ── Hero – desktop split ── */
#hero {
  min-height: 100svh; padding-top: 64px;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--green);
}
.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px,6vw,88px) clamp(32px,6vw,80px);
}

/* Hero word animation */
@keyframes wordIn {
  from { opacity: 0; filter: blur(6px); transform: translateY(10px); }
  to   { opacity: 1; filter: blur(0px); transform: translateY(0); }
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(245,239,227,.5); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 28px;
  opacity: 0; animation: wordIn .6s cubic-bezier(.22,1,.36,1) .05s forwards;
}
.hero-eyebrow::before {
  content: ''; display: inline-block;
  width: 24px; height: 1px; background: var(--rust);
}
.hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.2rem, 6vw, 5.5rem);
  font-weight: 400; line-height: 1.05;
  color: var(--cream); margin-bottom: 28px;
}
.hero-h1 em  { font-style: italic; color: rgba(245,239,227,.45); }
.hero-h1 strong { color: var(--rust); font-weight: 600; }
.hw { display: inline-block; opacity: 0; animation: wordIn .7s cubic-bezier(.22,1,.36,1) forwards; }
.hw1 { animation-delay: .1s; }
.hw2 { animation-delay: .3s; }
.hw3 { animation-delay: .55s; }
.hw4 { animation-delay: .8s; }
.hw5 { animation-delay: 1.05s; }
.hw6 { animation-delay: 1.3s; }
.hw7 { animation-delay: 1.55s; }
.hero-sub {
  color: rgba(245,239,227,.55); font-size: 1.05rem; line-height: 1.75;
  max-width: 380px; margin-bottom: 44px;
  opacity: 0; animation: wordIn .6s cubic-bezier(.22,1,.36,1) 1.25s forwards;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px;
  opacity: 0; animation: wordIn .6s cubic-bezier(.22,1,.36,1) 1.45s forwards;
}
.hero-stats {
  display: flex; gap: 32px;
  padding-top: 32px; border-top: 1px solid rgba(245,239,227,.1);
  opacity: 0; animation: wordIn .6s cubic-bezier(.22,1,.36,1) 1.6s forwards;
}
.hero-stat p:first-child {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem; font-weight: 600; color: var(--cream); line-height: 1;
}
.hero-stat p:last-child {
  color: rgba(245,239,227,.4); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; margin-top: 4px;
}
.hero-img { position: relative; overflow: hidden; }
.hero-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 6s ease;
}
.hero-img:hover img { transform: scale(1.03); }
.hero-badge {
  position: absolute; bottom: 24px; left: 24px;
  background: rgba(26,58,42,.92); backdrop-filter: blur(8px);
  border: 1px solid rgba(245,239,227,.15);
  color: var(--cream); padding: 12px 16px; border-radius: 12px;
  font-size: .75rem;
}
.hero-badge strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; margin-bottom: 2px; }

/* ── Buttons ── */
.btn-primary {
  background: var(--cream); color: var(--green);
  font-weight: 600; font-size: .85rem; padding: 14px 28px;
  border-radius: 99px; text-decoration: none;
  transition: background .2s, transform .2s; display: inline-block;
}
.btn-primary:hover { background: var(--cream2); transform: translateY(-1px); color: var(--green); }
.btn-ghost {
  border: 1px solid rgba(245,239,227,.25); color: rgba(245,239,227,.8);
  font-size: .85rem; font-weight: 500; padding: 14px 28px;
  border-radius: 99px; text-decoration: none;
  transition: border-color .2s, color .2s; display: inline-block;
}
.btn-ghost:hover { border-color: rgba(245,239,227,.6); color: var(--cream); }
.btn-cream {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream); color: var(--green);
  font-weight: 600; font-size: .85rem; padding: 14px 28px;
  border-radius: 99px; text-decoration: none;
  transition: background .2s;
}
.btn-cream:hover { background: var(--cream2); color: var(--green); }
.btn-rust {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rust); color: var(--cream);
  font-weight: 600; font-size: .85rem; padding: 14px 28px;
  border-radius: 99px; text-decoration: none;
  transition: background .2s, gap .2s;
}
.btn-rust:hover { background: var(--rust2); gap: 12px; color: var(--cream); }

/* ── Section helpers ── */
.section { padding: clamp(52px,6vw,88px) clamp(20px,4vw,40px); }
.container { max-width: 1300px; margin: 0 auto; }
.section-label {
  display: flex; align-items: center; gap: 12px;
  color: var(--rust); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 20px;
}
.section-label::after { content: ''; flex: 1; max-width: 48px; height: 1px; background: var(--rust); }
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 400; line-height: 1.1; color: var(--green);
}
.section-title em { font-style: italic; color: rgba(26,58,42,.4); }

/* ── Products ── */
#products { background: var(--cream); }
.products-header {
  display: flex; flex-direction: column; gap: 24px; margin-bottom: 64px;
}
@media(min-width:768px){
  .products-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.products-link {
  color: var(--green); font-size: .85rem; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--green); padding-bottom: 2px;
  transition: gap .2s, color .2s; white-space: nowrap; align-self: flex-start;
}
.products-link:hover { gap: 12px; color: var(--rust); border-color: var(--rust); }
.products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
@media(max-width:600px){ .products-grid { grid-template-columns: 1fr; } }
.product-card {
  background: #fff; overflow: hidden; cursor: pointer;
  transition: box-shadow .4s ease;
}
.product-card-img-link { display: block; text-decoration: none; }
.product-name-link { text-decoration: none; }
.product-name-link:hover .product-name { text-decoration: underline; text-underline-offset: 3px; }
.product-card:hover { box-shadow: 0 32px 80px rgba(26,58,42,.14); z-index: 1; position: relative; }
.product-card:hover .product-img img { transform: scale(1.05); }
.product-img { aspect-ratio: 4/5; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.25,.46,.45,.94); }
.product-body { padding: 28px 32px 32px; }
.product-cat { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(26,58,42,.35); margin-bottom: 8px; }
.product-name { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 600; color: var(--green); line-height: 1.15; margin-bottom: 10px; }
.product-desc { font-size: .9rem; color: rgba(26,58,42,.5); line-height: 1.7; margin-bottom: 24px; }
.product-footer { display: flex; align-items: center; justify-content: space-between; }
.product-price { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--green); }
.product-add {
  background: var(--green); color: var(--cream);
  border: none; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  padding: 11px 22px; border-radius: 99px; cursor: pointer;
  transition: background .2s, transform .2s;
}
.product-add:hover { background: var(--green2); transform: translateY(-1px); }

/* ── Feature split ── */
#feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; background: var(--green); }
@media(max-width:768px){ #feature { grid-template-columns: 1fr; } }
.feature-img { position: relative; overflow: hidden; }
@media(max-width:768px){ .feature-img { height: 60vw; min-height: 280px; } }
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.feature-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px,8vw,100px) clamp(32px,6vw,72px);
}
.feature-label { color: var(--rust); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; }
.feature-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem,4vw,3.4rem); font-weight: 400; color: var(--cream); line-height: 1.1; margin-bottom: 24px; }
.feature-title em { font-style: italic; color: rgba(245,239,227,.4); }
.feature-body { color: rgba(245,239,227,.6); font-size: .95rem; line-height: 1.75; max-width: 420px; margin-bottom: 36px; }

/* ── Foodtruck ── */
#foodtruck { background: var(--cream2); }
.foodtruck-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media(max-width:768px){ .foodtruck-inner { grid-template-columns: 1fr; gap: 40px; } }
.foodtruck-img { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
.foodtruck-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.foodtruck-img:hover img { transform: scale(1.03); }
.foodtruck-body { color: rgba(26,58,42,.6); font-size: .95rem; line-height: 1.75; margin-bottom: 32px; margin-top: 20px; }

/* ── Booking form ── */
#booking { background: var(--green); }
.booking-inner { max-width: 680px; margin: 0 auto; }
.booking-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem,4vw,3rem); font-weight: 400; color: var(--cream); line-height: 1.15; margin-bottom: 10px; }
.booking-sub { color: rgba(245,239,227,.5); font-size: .9rem; margin-bottom: 48px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media(max-width:600px){ .form-row { grid-template-columns: 1fr; } }
.field-group { margin-bottom: 16px; }
.field-group label { display: block; color: rgba(245,239,227,.5); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 8px; }
.field-group input,
.field-group textarea,
.field-group select {
  width: 100%; background: rgba(255,255,255,.07);
  border: 1px solid rgba(245,239,227,.15); border-radius: 10px; padding: 14px 16px;
  color: var(--cream); font-family: 'DM Sans', sans-serif; font-size: .9rem;
  transition: border-color .2s;
}
.field-group input::placeholder, .field-group textarea::placeholder { color: rgba(245,239,227,.22); }
.field-group input:focus, .field-group textarea:focus, .field-group select:focus { outline: none; border-color: rgba(245,239,227,.5); }
.field-group textarea { resize: none; }
.field-group select option { background: #1a3a2a; }

/* ── About ── */
#about { background: var(--cream); }
.about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media(max-width:768px){ .about-inner { grid-template-columns: 1fr; gap: 40px; } }
.about-img-wrap { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; position: relative; }
.about-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-badge {
  position: absolute; bottom: -20px; right: -20px;
  background: var(--rust); color: var(--cream);
  border-radius: 12px; padding: 18px 20px; text-align: center;
}
@media(max-width:500px){ .about-badge { bottom: -14px; right: -10px; padding: 12px 14px; } }
.about-badge strong { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 600; display: block; line-height: 1; }
.about-badge span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.about-img { position: relative; }
.about-body { color: rgba(26,58,42,.6); font-size: 1rem; line-height: 1.8; margin-top: 20px; margin-bottom: 36px; }
.about-stats { display: flex; gap: 32px; padding-top: 32px; border-top: 1px solid rgba(26,58,42,.1); }
.about-stat strong { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 600; color: var(--green); display: block; line-height: 1; }
.about-stat span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(26,58,42,.4); }

/* ── Testimonials ── */
#testimonials { background: var(--green); }
.testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 56px; }
@media(max-width:700px){ .testimonials-grid { grid-template-columns: 1fr; } }

.testimonial-rotator { position: relative; min-height: 130px; }
.testimonial-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.testimonial-slide.is-active { opacity: 1; pointer-events: auto; position: relative; }
@media(prefers-reduced-motion: reduce){ .testimonial-slide { transition: none; } }
.testimonial { background: rgba(255,255,255,.05); padding: clamp(32px,5vw,56px); position: relative; }
.testimonial-quote { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.2rem,2.2vw,1.6rem); font-style: italic; font-weight: 400; color: rgba(245,239,227,.85); line-height: 1.55; margin-bottom: 32px; }
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(138,51,36,.3); font-family: 'Cormorant Garamond', serif; color: var(--rust); font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.testimonial-name { color: var(--cream); font-size: .85rem; font-weight: 600; }
.testimonial-loc { color: rgba(245,239,227,.35); font-size: .75rem; margin-top: 2px; }
.testimonial-stars { position: absolute; top: clamp(24px,4vw,40px); right: clamp(24px,4vw,40px); color: var(--rust); font-size: .75rem; letter-spacing: 2px; }

/* ── Contact ── */
#contact { background: var(--cream2); }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
@media(max-width:768px){ .contact-inner { grid-template-columns: 1fr; gap: 48px; } }
.contact-body { color: rgba(26,58,42,.6); font-size: 1rem; line-height: 1.75; margin-top: 20px; margin-bottom: 40px; }
.contact-items { display: flex; flex-direction: column; gap: 16px; }
.contact-item { display: flex; align-items: center; gap: 14px; background: var(--cream); border-radius: 10px; padding: 14px 18px; }
.contact-icon { width: 38px; height: 38px; border-radius: 8px; background: rgba(26,58,42,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-icon svg { stroke: var(--green); }
.contact-item-text p:first-child { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(26,58,42,.4); margin-bottom: 2px; }
.contact-item-text a, .contact-item-text p:last-child { font-size: .9rem; color: var(--green); text-decoration: none; font-weight: 500; }
.contact-item-text a:hover { color: var(--rust); }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%; background: var(--cream); border: 1px solid rgba(26,58,42,.12);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 12px;
  font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--green);
  transition: border-color .2s;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(26,58,42,.25); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: rgba(26,58,42,.4); }
.contact-form textarea { resize: none; height: 130px; }

/* ── Forms shared ── */
.form-submit {
  width: 100%; background: var(--rust); color: var(--cream);
  border: none; font-family: 'DM Sans', sans-serif; font-weight: 600;
  font-size: .9rem; padding: 16px; border-radius: 99px;
  cursor: pointer; transition: background .2s; margin-top: 8px;
}
.form-submit:hover { background: var(--rust2); }
.form-submit-green { background: var(--green); }
.form-submit-green:hover { background: var(--green2); }
.form-success { display: none; text-align: center; color: rgba(26,58,42,.65); padding: 16px; font-size: .9rem; }
.form-error  { display: none; text-align: center; color: var(--rust); padding: 8px; font-size: .85rem; }

/* WooCommerce's product review form auto-generates a <p class="form-submit">
   wrapper around its real <input type="submit">, colliding with our own
   .form-submit *button* class used elsewhere (contact/foodtruck/birthday
   forms) — scoped to .comment-form so those other buttons are untouched. */
.comment-form .form-submit { width: auto; background: none; padding: 0; border-radius: 0; margin-top: 8px; }
.comment-form .form-submit input[type="submit"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; background: var(--rust); color: var(--cream);
  border: none; font-family: 'DM Sans', sans-serif; font-weight: 600;
  font-size: .9rem; padding: 16px; border-radius: 99px;
  cursor: pointer; transition: background .2s;
}
.comment-form .form-submit input[type="submit"]:hover { background: var(--rust2); }
.comment-form p { margin-bottom: 14px; }
.comment-form label { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 600; color: var(--green); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
  width: 100%; border: 1.5px solid rgba(26,58,42,.15); border-radius: 8px; padding: 10px 14px;
  font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--green); background: #fff; outline: none;
  box-sizing: border-box;
}
.comment-form input[type="text"]:focus, .comment-form input[type="email"]:focus, .comment-form textarea:focus { border-color: rgba(26,58,42,.4); }
.comment-form-rating select { border: 1.5px solid rgba(26,58,42,.15); border-radius: 8px; padding: 10px 14px; font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--green); background: #fff; }
/* WooCommerce's JS swaps the rating <select> above for p.stars > span >
   a.star-1..a.star-5, each anchor holding localized text ("1 van de 5
   sterren"). WC's own star font never loads (its stylesheets are dequeued
   in functions.php), so each anchor is clipped to one unicode ★ glyph:
   the text is shoved out of view with text-indent and the star drawn in
   ::before. Hover previews the fill; WC adds .selected/.active on click. */
p.stars { display: inline-flex; margin: 0 0 4px; }
p.stars > span { display: inline-flex; gap: 6px; }
p.stars a { position: relative; display: inline-block; width: 1.15em; height: 1.15em; overflow: hidden; font-size: 1.3rem; line-height: 1.15; text-indent: 2em; white-space: nowrap; text-decoration: none; }
p.stars a::before { content: "★"; position: absolute; top: 0; left: 0; text-indent: 0; color: rgba(26,58,42,.25); transition: color .15s; }
p.stars:hover a::before { color: var(--rust); }
p.stars a:hover ~ a::before { color: rgba(26,58,42,.25); }
p.stars.selected a::before { color: var(--rust); }
p.stars.selected a.active ~ a::before { color: rgba(26,58,42,.25); }

/* ── Footer ── */
footer { background: #0f2218; color: rgba(245,239,227,.45); font-size: .85rem; }
.footer-inner {
  max-width: 1300px; margin: 0 auto;
  padding: 64px 32px 32px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px;
}
@media(max-width:768px){ .footer-inner { grid-template-columns: 1fr 1fr; } }
@media(max-width:500px){ .footer-inner { grid-template-columns: 1fr; } }
.footer-brand img { width: 42px; height: 42px; border-radius: 4px; margin-bottom: 14px; }
.footer-brand p { color: rgba(245,239,227,.85); line-height: 1.7; font-size: .85rem; max-width: 240px; }
.footer-brand small { color: rgba(245,239,227,.25); font-size: .72rem; margin-top: 14px; display: block; }
.footer-brand small + small { margin-top: 4px; }
.footer-brand small a { color: rgba(245,239,227,.4); text-decoration: none; transition: color .2s; }
.footer-brand small a:hover { color: rgba(245,239,227,.85); }
.footer-contact { margin-top: 16px; display: grid; gap: 5px; }
.fc-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; font-size: .74rem; color: rgba(245,239,227,.45); }
.fc-label { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,239,227,.28); }
.fc-row a { color: rgba(245,239,227,.45); text-decoration: none; transition: color .2s; }
.fc-row a:hover { color: rgba(245,239,227,.85); }
.footer-col h4 { color: rgba(245,239,227,.6); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; color: rgba(245,239,227,.4); text-decoration: none; padding: 5px 0; transition: color .2s; }
.footer-col a:hover { color: rgba(245,239,227,.85); }
.footer-bottom {
  max-width: 1300px; margin: 0 auto;
  padding: 20px 32px; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .75rem; color: rgba(245,239,227,.25);
}

/* ── Sticky mobile CTA ── */
#sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: rgba(26,58,42,.97); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(245,239,227,.1);
  padding: 12px 20px; transform: translateY(110%);
  transition: transform .4s ease;
}
@media(min-width:900px){ #sticky-bar { display: none; } }
#sticky-bar.show { transform: translateY(0); }
#sticky-bar a { display: block; text-align: center; background: var(--rust); color: var(--cream); font-weight: 600; font-size: .85rem; padding: 14px; border-radius: 99px; text-decoration: none; }

/* ── Scroll reveal ── */
.reveal    { opacity: 0; transform: translateY(28px);  transition: opacity .65s ease, transform .65s ease; }
.reveal-l  { opacity: 0; transform: translateX(-28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-r  { opacity: 0; transform: translateX(28px);  transition: opacity .7s ease, transform .7s ease; }
.reveal.in, .reveal-l.in, .reveal-r.in { opacity: 1; transform: translate(0); }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }

/* ── Hero mobile full-bleed ── */
@media(max-width:768px){
  #hero { display: block; min-height: 100svh; padding-top: 0; position: relative; }
  #hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
  #hero .hero-img::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(15,34,24,.97) 0%, rgba(15,34,24,.93) 38%, rgba(15,34,24,.72) 62%, rgba(15,34,24,.32) 85%, transparent 100%);
  }
  #hero .hero-text { position: relative; z-index: 2; min-height: 100svh; padding: 80px 28px 48px; justify-content: flex-end; }
  #hero .hero-eyebrow, #hero .hero-h1, #hero .hero-sub { text-shadow: 0 2px 14px rgba(0,0,0,.5); }
  #hero .hero-eyebrow { color: rgba(245,239,227,.78); }
  #hero .hero-sub     { color: rgba(245,239,227,.8); }
  #hero .hero-h1   { font-size: clamp(3rem, 11vw, 4.2rem); margin-bottom: 20px; }
  #hero .hero-sub  { font-size: .95rem; margin-bottom: 32px; max-width: 100%; }
  #hero .hero-actions { margin-bottom: 40px; }
  #hero .hero-stats   { gap: 24px; }
  #hero .hero-badge   { display: none; }
}

/* ── WooCommerce shop pages ── */
.woo-page .site-main { max-width: 1300px; margin: 0 auto; padding: clamp(80px,8vw,120px) clamp(20px,4vw,40px) clamp(60px,8vw,100px); }
.woo-page .woocommerce-breadcrumb { font-size: .8rem; color: rgba(26,58,42,.4); margin-bottom: 40px; }
.woo-page .woocommerce-breadcrumb a { color: rgba(26,58,42,.5); text-decoration: none; }

/* Shop page: result count + sort dropdown, above the product grid.
   These are sibling elements (<p> then <form>) with no shared wrapper in
   WooCommerce's default markup, so inline-block (not flex) is what lets
   them sit on the same line and wrap naturally on narrow screens. */
.woocommerce-result-count,
.woocommerce-ordering { display: inline-block; vertical-align: middle; margin: 0 16px 24px 0; font-size: .85rem; color: rgba(26,58,42,.55); font-family: 'DM Sans', sans-serif; }
.woocommerce-ordering select.orderby {
  border: 1.5px solid rgba(26,58,42,.15); border-radius: 8px; padding: 8px 14px;
  font-family: 'DM Sans', sans-serif; font-size: .85rem; color: var(--green); background: #fff;
  outline: none; cursor: pointer;
}
.woocommerce-ordering select.orderby:focus { border-color: rgba(26,58,42,.4); }

/* WC product grid */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; list-style: none; padding: 0; margin: 0; }
@media(max-width:768px){ .woocommerce ul.products { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ .woocommerce ul.products { grid-template-columns: 1fr; } }
.woocommerce ul.products li.product { background: #fff; overflow: hidden; transition: box-shadow .4s; position: relative; }
.woocommerce ul.products li.product:hover { box-shadow: 0 20px 60px rgba(26,58,42,.12); }
.woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .6s; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; color: var(--green); padding: 20px 24px 6px; }
.woocommerce ul.products li.product .price { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--green); padding: 0 24px 16px; display: block; }
.woocommerce ul.products li.product .button { margin: 0 24px 24px; background: var(--green); color: var(--cream); border: none; border-radius: 99px; padding: 10px 20px; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .2s; display: inline-block; text-decoration: none; }
.woocommerce ul.products li.product .button:hover { background: var(--green2); }

/* Cross-sells on the cart page use the WooCommerce "Product Collection"
   Gutenberg block (wc-block-components-product-button), not the classic
   ul.products loop above — different markup entirely, needs its own rule
   or it falls back to WordPress core's default block-button styling
   (dark/near-black, poor contrast against this theme's cream background). */
.wc-block-components-product-button .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link {
  background: var(--green); color: var(--cream) !important; border: none; border-radius: 99px;
  padding: 10px 20px; font-family: 'DM Sans', sans-serif; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: background .2s; text-decoration: none; display: inline-block;
}
.wc-block-components-product-button .wp-block-button__link:hover,
.wc-block-grid__product .wp-block-button__link:hover { background: var(--green2); color: var(--cream) !important; }

/* Shop loop: bestseller ribbon + dietary tags */
.shop-badge-bestseller {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--rust); color: var(--cream);
  font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 99px;
}
.woocommerce ul.products li.product .shop-loop-tags { padding: 0 24px; margin-bottom: 2px; }

/* Remove underlines from all WC product links */
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product a:hover { text-decoration: none; }
.woocommerce div.product .variations a,
.woocommerce div.product .variations label,
.woocommerce div.product .variable-items-wrapper a { text-decoration: none; }
/* Variation swatches text style */
.woocommerce div.product .variable-items-wrapper .variable-item { border: 1px solid rgba(26,58,42,.2); border-radius: 6px; padding: 6px 14px; font-size: .82rem; font-weight: 500; color: var(--green); cursor: pointer; transition: border-color .2s, background .2s; text-decoration: none; }
.woocommerce div.product .variable-items-wrapper .variable-item.selected { border-color: var(--green); background: var(--green); color: var(--cream); }

/* Variation attribute rows — CartFlows Variation Swatches plugin (cfvsw-*).
   The plugin's "no label" setting puts .cfvsw-label-none on <body>, hiding
   the Smaak/Verpakking row labels, so the two option groups ran together as
   one anonymous pile of pills. Labels are forced back on and each attribute
   becomes its own labeled block with space between. The rules above target
   .variable-items-wrapper, an earlier swatch plugin's markup — kept in case
   that plugin returns, but the live site renders cfvsw markup. */
.woocommerce div.product table.variations { width: 100%; border-collapse: collapse; margin: 4px 0 10px; }
.woocommerce div.product table.variations tbody,
.woocommerce div.product table.variations tr,
.woocommerce div.product table.variations th,
.woocommerce div.product table.variations td { display: block; padding: 0; border: 0; text-align: left; }
.woocommerce div.product table.variations tr + tr { margin-top: 18px; }
body.cfvsw-label-none table.variations tr th.label { display: block !important; }
.woocommerce div.product table.variations th.label label { display: block; margin: 0 0 8px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(26,58,42,.5); }
/* Plugin JS appends the chosen value ("Smaak : Pistache") inside the label */
.woocommerce div.product table.variations .cfvsw-selected-label { text-transform: none; letter-spacing: .02em; font-weight: 500; }
/* Pills — !important where the plugin inlines styles (border-radius) or uses
   its own !important (selected border-color). Selection fills green like the
   old .variable-item.selected look. */
/* Cards instead of thin pills (2026-08-18): matches the Sweet Vibes
   product-page pattern — bigger touch target, option name + a one-line
   explanation stacked inside, so shoppers don't need to hover the "?" icon
   to know what a flavor/pack size actually is. Description text comes from
   adabakesSwatchDescriptions (functions.php) via main.js, which appends
   .cfvsw-swatch-desc inside .cfvsw-swatch-inner — cards without a matching
   description (no JS map entry) just show the label, same as before. */
/* Container is the .summary column (~265-300px even on desktop, this is
   never full page width) — a fixed 2-column grid fits it at every viewport;
   auto-fill with a 150px minimum collapsed to 1 column here and was dropped. */
.woocommerce div.product .cfvsw-swatches-container { --cfvsw-swatches-border-color: var(--green); --cfvsw-swatches-border-color-hover: var(--green); display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.woocommerce div.product .cfvsw-swatches-option.cfvsw-label-option { border: 1px solid rgba(26,58,42,.25); border-radius: 10px !important; padding: 8px 10px; font-family: 'DM Sans', sans-serif; font-size: .8rem; font-weight: 600; color: var(--green); background: #fff; transition: border-color .2s, background .2s, color .2s; display: flex; align-items: flex-start; min-width: 0; box-sizing: border-box; white-space: normal; }
.woocommerce div.product .cfvsw-swatches-option.cfvsw-label-option:hover { border-color: var(--green); }
.woocommerce div.product .cfvsw-swatches-option.cfvsw-label-option.cfvsw-selected-swatch { background: var(--green); color: var(--cream); border-color: var(--green) !important; }
.woocommerce div.product .cfvsw-swatches-option .cfvsw-swatch-inner { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
.woocommerce div.product .cfvsw-swatches-option .cfvsw-swatch-desc { display: block; font-size: .68rem; font-weight: 400; line-height: 1.3; color: rgba(26,58,42,.55); overflow-wrap: break-word; word-break: break-word; white-space: normal; }
.woocommerce div.product .cfvsw-swatches-option.cfvsw-selected-swatch .cfvsw-swatch-desc { color: rgba(245,239,227,.8); }

/* WC single product */
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media(max-width:768px){ .woocommerce div.product { grid-template-columns: 1fr; } }
/* Anything after the gallery + summary (description tabs, upsells, related products)
   must span both grid columns, otherwise it auto-places into a single column and
   leaves the other column visually empty. */
.woocommerce div.product > :nth-child(n+3) { grid-column: 1 / -1; }
/* Grid items default to min-width:auto, which floors their width at their content's
   natural size (e.g. the tabs row, a wide table) — this silently defeats any
   overflow-x:auto/wrapping fix on a descendant and can push the whole page wider
   than the screen on mobile. Same fix already used for .woocommerce-Address below. */
.woocommerce div.product > * { min-width: 0; }
/* Product gallery — main image + thumbnails below */
.woocommerce div.product .woocommerce-product-gallery { border-radius: 8px; overflow: visible; position: relative; }
.woocommerce-product-gallery .flex-viewport { border-radius: 8px; overflow: hidden; }
.woocommerce-product-gallery .slides { display: flex; list-style: none; padding: 0; margin: 0; transition: none; }
.woocommerce-product-gallery .slides li { min-width: 100%; flex-shrink: 0; }
.woocommerce-product-gallery .slides li img,
.woocommerce-product-gallery .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; display: block; }
.woocommerce-product-gallery figure.woocommerce-product-gallery__wrapper { margin: 0; }
/* Thumbnails strip below */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs { display: flex; gap: 8px; margin-top: 10px; padding: 0; list-style: none; overflow-x: auto; flex-wrap: nowrap; }
.woocommerce-product-gallery .flex-control-thumbs li { flex-shrink: 0; }
.woocommerce-product-gallery .flex-control-thumbs li img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s; border: 2px solid transparent; display: block; }
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover { opacity: 1; border-color: var(--green); }
.woocommerce div.product .summary { padding-top: 8px; }
.woocommerce div.product .product_title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem,4vw,3rem); font-weight: 400; line-height: 1.1; color: var(--green); margin-bottom: 12px; }
.woocommerce div.product .price { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--green); display: block; margin-bottom: 18px; }
.woocommerce div.product .woocommerce-product-details__short-description { color: rgba(26,58,42,.6); font-size: .95rem; line-height: 1.75; margin-bottom: 20px; }
.woocommerce div.product .single_add_to_cart_button { background: var(--rust); color: var(--cream); border: none; border-radius: 99px; padding: 14px 32px; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.woocommerce div.product .single_add_to_cart_button:hover { background: var(--rust2); }
/* Quantity stepper: −/+ buttons (main.js injects them into .quantity)
   instead of the native number-input spin arrows, matching the cart drawer's
   existing qty pattern and the +/- convention used by Sweet Vibes/De Notenshop.
   .cart/.woocommerce-variation-add-to-cart get flex+gap here too, since the
   theme relies on WooCommerce core CSS for that row and the button was
   sitting flush against the quantity field with no breathing room. */
/* Scoped narrowly: form.cart on a *variable* product also wraps the
   attribute swatches table above this row — flexing the whole form would
   pull the table into the same row. Simple products' form.cart has no such
   table, only the quantity+button pair, so it's safe to flex directly. */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.woocommerce div.product .quantity { display: inline-flex; align-items: center; border: 1px solid rgba(26,58,42,.2); border-radius: 999px; overflow: hidden; margin: 0; }
.woocommerce div.product .quantity input.qty { border: none; border-radius: 0; padding: 10px 0; font-size: 1rem; width: 40px; margin: 0; text-align: center; -moz-appearance: textfield; }
.woocommerce div.product .quantity input.qty::-webkit-inner-spin-button,
.woocommerce div.product .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce div.product .quantity .qty-btn { border: none; background: transparent; width: 38px; height: 42px; flex: 0 0 auto; font-size: 1.15rem; font-weight: 600; line-height: 1; color: var(--green); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.woocommerce div.product .quantity .qty-btn:hover { background: rgba(26,58,42,.07); }

/* Hide "Wissen" variation reset link */
.woocommerce div.product .reset_variations { display: none !important; }

/* Delivery promise under Add to Cart */
.product-delivery-note { margin-top: 16px; font-size: .8rem; font-weight: 600; color: var(--green); letter-spacing: .01em; }

/* USP bullet list, directly under price */
.product-usp-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.product-usp-list li { position: relative; padding-left: 22px; font-size: .88rem; color: rgba(26,58,42,.75); line-height: 1.4; }
.product-usp-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--rust); font-weight: 700; }
.product-usp-footnote { font-size: .76rem; color: rgba(26,58,42,.45); line-height: 1.5; margin: 6px 0 0; }
/* Customer-life value block, directly under Add to Cart */
.product-moments { margin: 20px 0 4px; padding: 16px 18px; background: rgba(26,58,42,.04); border-radius: 10px; }
.product-moments-headline { font-family: Georgia, serif; font-size: 1.02rem; font-weight: 600; color: var(--green); line-height: 1.35; margin: 0 0 12px; }
.product-moments .product-usp-list { margin: 0 0 10px; }
.product-moments-note { font-size: .8rem; color: rgba(26,58,42,.6); margin: 0 0 8px; }
.product-moments-diet { font-size: .78rem; color: rgba(26,58,42,.5); margin: 0; }

/* Nutrition & Ingredients tab */
.nutrition-footnote { font-size: .8rem; color: rgba(26,58,42,.45); margin-top: -6px; }
.nutrition-allergen-note { font-size: .85rem; color: var(--rust); background: rgba(138,51,36,.06); border-radius: 8px; padding: 10px 14px; margin: 12px 0 20px; line-height: 1.55; }
.nutrition-sugar-tag { font-size: .8rem; font-weight: 600; color: var(--green); margin: -4px 0 16px; }
.nutrition-heat-warning { font-size: .85rem; color: var(--rust); background: rgba(138,51,36,.06); border-radius: 8px; padding: 10px 14px; margin: 8px 0 16px; line-height: 1.55; }
.woocommerce div.product .woocommerce-tabs .panel h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--green); margin: 20px 0 6px; }
.nutrition-table { width: 100%; max-width: 480px; border-collapse: collapse; margin-top: 8px; }
.nutrition-table tr { border-bottom: 1px solid rgba(26,58,42,.1); }
.nutrition-table tr:last-child { border-bottom: none; }
.nutrition-table td { padding: 9px 0; font-size: .9rem; color: rgba(26,58,42,.75); }
.nutrition-table td:last-child { text-align: right; font-weight: 600; color: var(--green); }
.nutrition-table-2col { max-width: 560px; }
.nutrition-table-2col th { padding: 9px 0; font-size: .78rem; font-weight: 600; color: rgba(26,58,42,.5); text-align: right; }
.nutrition-table-2col th:first-child { text-align: left; }
.nutrition-table-2col td { text-align: right; }
.nutrition-table-2col td:first-child { text-align: left; color: rgba(26,58,42,.75); font-weight: 400; }
.nutrition-flavor-block { margin-bottom: clamp(20px,3vw,28px); padding-bottom: clamp(20px,3vw,28px); border-bottom: 1px solid rgba(26,58,42,.08); }
.nutrition-flavor-block:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* Additional information tab (WooCommerce's default weight/dimensions table) */
.woocommerce-product-attributes.shop_attributes { width: 100%; max-width: 480px; border-collapse: collapse; margin-top: 8px; }
.woocommerce-product-attributes.shop_attributes tr { border-bottom: 1px solid rgba(26,58,42,.1); }
.woocommerce-product-attributes.shop_attributes tr:last-child { border-bottom: none; }
.woocommerce-product-attributes.shop_attributes th,
.woocommerce-product-attributes.shop_attributes td { padding: 9px 12px 9px 0; font-size: .9rem; text-align: left; font-weight: 400; }
.woocommerce-product-attributes.shop_attributes th { color: var(--green); font-weight: 600; width: 140px; }
.woocommerce-product-attributes.shop_attributes td { color: rgba(26,58,42,.75); }
.woocommerce-product-attributes.shop_attributes td p { margin: 0; }

/* FAQ accordion */
.product-faq-item { border-bottom: 1px solid rgba(26,58,42,.1); padding: 14px 0; }
.product-faq-item summary { cursor: pointer; font-weight: 600; color: var(--green); font-size: .92rem; list-style: none; }
.product-faq-item summary::-webkit-details-marker { display: none; }
.product-faq-item summary::after { content: '+'; float: right; color: var(--rust); font-weight: 700; }
.product-faq-item[open] summary::after { content: '−'; }
.product-faq-item p { margin-top: 10px; }

/* Product meta (category link) */
/* SKU/category/tag meta line ("Artikelnummer / Categorie / Tags") — not needed on the front end */
.woocommerce div.product .product_meta { display: none; }

/* Description / reviews tabs */
.woocommerce div.product .woocommerce-tabs { margin-top: clamp(32px,4vw,48px); padding-top: clamp(24px,3vw,32px); border-top: 1px solid rgba(26,58,42,.1); }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0 0 24px; border-bottom: 1px solid rgba(26,58,42,.1); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; }
/* On narrow screens the 4 tab labels (incl. long Dutch ones like "Voeding & Ingrediënten")
   don't fit in one row. Without this, they'd overflow and get clipped by body's
   overflow-x:hidden instead of wrapping or scrolling — same scroll pattern already
   used for the product gallery thumbnail strip above. */
@media(max-width:768px){
  .woocommerce div.product .woocommerce-tabs ul.tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-right: 24px; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li { flex-shrink: 0; }
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 4px 2px 10px; font-size: .85rem; font-weight: 600; letter-spacing: .02em; color: rgba(26,58,42,.4); text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--green); border-color: var(--rust); }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 760px; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--green); margin: 18px 0 10px; }
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li { color: rgba(26,58,42,.65); font-size: .95rem; line-height: 1.65; }
.woocommerce div.product .woocommerce-tabs .panel ul { margin: 0 0 12px; padding-left: 20px; }

/* Newsletter card on product page */
.product-newsletter { grid-column: 1 / -1; margin-top: clamp(32px,4vw,48px); }
.product-newsletter-inner { max-width: 560px; margin: 0 auto; text-align: center; background: var(--cream2); border-radius: 12px; padding: clamp(28px,4vw,40px) clamp(20px,4vw,36px); }
.product-newsletter .section-label { justify-content: center; }
.product-newsletter-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem,2.8vw,2.1rem); font-weight: 400; color: var(--green); line-height: 1.15; margin: 10px 0 8px; }
.product-newsletter-title em { font-style: italic; color: rgba(26,58,42,.4); }
.product-newsletter-sub { color: rgba(26,58,42,.55); font-size: .88rem; line-height: 1.6; margin-bottom: 18px; }
.product-newsletter .nl-form-row { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.product-newsletter .nl-form-row input { flex: 1; min-width: 0; border: 1.5px solid rgba(26,58,42,.15); border-radius: 99px; padding: 13px 20px; font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--green); background: #fff; outline: none; }
.product-newsletter #nl-ok, .product-newsletter #nl-err { margin-top: 12px; font-size: .85rem; }
.product-newsletter #nl-ok { color: rgba(26,58,42,.6); }
.product-newsletter #nl-err { color: var(--rust); }

/* Related / upsell products on single product page */
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.upsells { margin-top: clamp(36px,4.5vw,56px); padding-top: clamp(24px,3vw,32px); border-top: 1px solid rgba(26,58,42,.1); }
.woocommerce div.product .related.products > h2,
.woocommerce div.product .up-sells.upsells > h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem,2.6vw,2rem); font-weight: 400; color: var(--green); margin-bottom: 20px; }

/* WC notices */
.woocommerce-message, .woocommerce-info {
  background: rgba(26,58,42,.06); border-left: 3px solid var(--green);
  padding: 14px 20px; border-radius: 0 8px 8px 0;
  margin-bottom: 24px; font-size: .9rem; color: var(--green);
}
.woocommerce-error { background: rgba(138,51,36,.06); border-left: 3px solid var(--rust); padding: 14px 20px; border-radius: 0 8px 8px 0; margin-bottom: 24px; color: var(--rust); }

/* WC cart & checkout */
.woo-page .woocommerce table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.woo-page .woocommerce table.shop_table th { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(26,58,42,.5); padding: 12px 16px; border-bottom: 2px solid rgba(26,58,42,.1); text-align: left; }
.woo-page .woocommerce table.shop_table td { padding: 16px; border-bottom: 1px solid rgba(26,58,42,.08); vertical-align: middle; }

/* Cart product image */
.woo-page .woocommerce table.shop_table td.product-thumbnail img,
table.shop_table td.product-thumbnail img { width: 100px; height: 100px; object-fit: cover; border-radius: 6px; }

/* Free shipping bar (rendered via woocommerce_cart_collaterals hook) */
.adabakes-shipping-bar { background: #fff; border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; border: 1px solid rgba(26,58,42,.1); }
.adabakes-shipping-bar p { font-size: .82rem; color: rgba(26,58,42,.65); margin-bottom: 10px; }
.adabakes-shipping-bar-track { background: rgba(26,58,42,.1); border-radius: 99px; height: 6px; overflow: hidden; }
.adabakes-shipping-bar-fill { background: var(--green); height: 100%; border-radius: 99px; transition: width .4s; }
.adabakes-shipping-bar-success { background: rgba(26,58,42,.06); border-radius: 8px; padding: 12px 20px; margin-bottom: 20px; border: 1px solid rgba(26,58,42,.1); font-size: .82rem; color: var(--green); font-weight: 600; }

/* Checkout payment methods */
.woocommerce-checkout #payment { background: #fff; border-radius: 12px; padding: 24px; border: 1px solid rgba(26,58,42,.08); }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 20px; border: none; }
.woocommerce-checkout #payment ul.payment_methods li { padding: 12px 0; border-bottom: 1px solid rgba(26,58,42,.06); display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; }
.woocommerce-checkout #payment ul.payment_methods li img { height: 24px; width: auto; margin: 0; }
.woocommerce-checkout #payment .payment_method_mollie_wc_gateway_ideal img,
.woocommerce-checkout #payment .payment_method_mollie_wc_gateway_creditcard img { max-width: 44px; }
.woocommerce-checkout #payment .place-order { padding: 0; background: none; border: none; }
body.adabakes-cart .wc-block-cart__submit-button,
body.adabakes-cart .wc-proceed-to-checkout a,
body.adabakes-cart .checkout-button,
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wc-proceed-to-checkout a,
body.woocommerce-cart .checkout-button,
.woo-page .woocommerce .button.checkout-button,
.woo-page .woocommerce #place_order { background: var(--green) !important; color: var(--cream) !important; border: none; border-radius: 99px; padding: 16px 32px; font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .2s; display: block; width: 100%; text-align: center; text-decoration: none; margin-top: 16px; }
body.adabakes-cart .wc-block-cart__submit-button:hover,
body.adabakes-cart .wc-proceed-to-checkout a:hover,
body.adabakes-cart .checkout-button:hover,
body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a:hover,
body.woocommerce-cart .checkout-button:hover,
.woo-page .woocommerce .button.checkout-button:hover,
.woo-page .woocommerce #place_order:hover { background: var(--green2) !important; color: var(--cream) !important; }

/* My-account login/register submit buttons (inputs above already covered by
   the .form-row input.input-text rules below) */
.woo-page .woocommerce .woocommerce-form-login__submit,
.woo-page .woocommerce .woocommerce-form-register__submit {
  background: var(--green); color: var(--cream); border: none; border-radius: 99px;
  padding: 14px 32px; font-family: 'DM Sans', sans-serif; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.woo-page .woocommerce .woocommerce-form-login__submit:hover,
.woo-page .woocommerce .woocommerce-form-register__submit:hover { background: var(--green2); }
.woo-page .woocommerce .woocommerce-form__input-checkbox { width: auto; margin-right: 6px; vertical-align: middle; }

/* Checkout form fields */
.woo-page .woocommerce form .form-row label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(26,58,42,.5); margin-bottom: 6px; display: block; }
.woo-page .woocommerce form .form-row input.input-text,
.woo-page .woocommerce form .form-row textarea { width: 100%; border: 1px solid rgba(26,58,42,.15); border-radius: 10px; padding: 12px 16px; font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--green); transition: border-color .2s; background: #fff; }
.woo-page .woocommerce form .form-row input.input-text:focus,
.woo-page .woocommerce form .form-row textarea:focus { outline: none; border-color: rgba(26,58,42,.4); }

/* ── Inner page wrapper ── */
.page-main { max-width: 900px; margin: 0 auto; padding: clamp(100px,10vw,140px) clamp(20px,4vw,40px) clamp(60px,8vw,100px); }
.page-main h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.4rem,5vw,4rem); font-weight: 400; line-height: 1.1; color: var(--green); margin-bottom: 32px; }
.page-main h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 400; color: var(--green); margin: 40px 0 16px; }
.page-main p  { color: rgba(26,58,42,.65); font-size: 1rem; line-height: 1.8; margin-bottom: 20px; }
.page-main a  { color: var(--rust); }

/* ── Recipe archive grid ── */
.recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.recipe-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(26,58,42,.06); display: flex; flex-direction: column; }
.recipe-card-img { display: block; aspect-ratio: 4/3; overflow: hidden; }
.recipe-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.recipe-card:hover .recipe-card-img img { transform: scale(1.04); }
.recipe-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.recipe-meta-row { display: flex; gap: 14px; margin-bottom: 12px; }
.recipe-meta-row span { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: rgba(26,58,42,.45); }
.recipe-card-title { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--green); line-height: 1.25; margin-bottom: 10px; }
.recipe-card-title a { text-decoration: none; color: inherit; }
.recipe-card-title a:hover { color: var(--rust); }
.recipe-card-excerpt { color: rgba(26,58,42,.55); font-size: .85rem; line-height: 1.65; flex: 1; margin-bottom: 16px; }
.recipe-card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--rust); font-size: .82rem; font-weight: 600; text-decoration: none; }
.recipe-card-link:hover { gap: 10px; }
@media(max-width:900px) { .recipe-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:560px) { .recipe-grid { grid-template-columns: 1fr; } }

/* ── Single post / recipe ── */
.single-post-grid { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.single-post-grid-full { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.single-content { font-size: 1rem; line-height: 1.85; color: rgba(26,58,42,.7); }
.single-content h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem,3vw,2rem); font-weight: 600; color: var(--green); margin: 40px 0 16px; }
.single-content h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--green); margin: 28px 0 10px; }
.single-content p { margin-bottom: 20px; }
.single-content ul, .single-content ol { padding-left: 24px; margin-bottom: 20px; }
.single-content li { margin-bottom: 8px; }
.single-content img { border-radius: 8px; max-width: 100%; }
.single-content a { color: var(--rust); }

.recipe-card-sidebar { position: sticky; top: 100px; background: #fff; border-radius: 16px; box-shadow: 0 2px 20px rgba(26,58,42,.08); overflow: hidden; }
.recipe-sidebar-meta { display: grid; grid-template-columns: 1fr 1fr; background: var(--green); padding: 20px; gap: 16px; }
.recipe-sidebar-stat { display: flex; align-items: center; gap: 10px; color: var(--cream); }
.recipe-sidebar-stat svg { opacity: .6; flex-shrink: 0; }
.recipe-sidebar-stat p { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; line-height: 1; }
.recipe-sidebar-stat span { font-size: .7rem; opacity: .5; text-transform: uppercase; letter-spacing: .1em; }
.recipe-sidebar-section { padding: 24px; border-bottom: 1px solid rgba(26,58,42,.07); }
.recipe-sidebar-section:last-of-type { border-bottom: none; }
.recipe-sidebar-section h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 600; color: var(--green); margin-bottom: 14px; }
.recipe-sidebar-section ul, .recipe-sidebar-section ol { padding-left: 20px; margin: 0; }
.recipe-sidebar-section li { font-size: .85rem; color: rgba(26,58,42,.65); line-height: 1.6; margin-bottom: 6px; }
@media(max-width:768px) {
  .single-post-grid { grid-template-columns: 1fr; }
  .recipe-card-sidebar { position: static; }
}

/* ── Homepage two-panel (foodtruck + cake) ── */
.home-two-panel { display: grid; grid-template-columns: 1fr 1fr; }
.home-panel { display: flex; flex-direction: column; text-decoration: none; overflow: hidden; }
.home-panel-green { background: var(--green); }
.home-panel-rust  { background: var(--rust); }
.home-panel-img { aspect-ratio: 3/2; overflow: hidden; }
.home-panel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; filter: brightness(.85); }
.home-panel:hover .home-panel-img img { transform: scale(1.04); }
.home-panel-body { padding: clamp(28px,4vw,52px); flex: 1; display: flex; flex-direction: column; }
.home-panel-label { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,239,227,.5); margin-bottom: 14px; }
.home-panel-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 400; color: var(--cream); line-height: 1.15; margin-bottom: 14px; }
.home-panel-title em { color: rgba(245,239,227,.55); }
.home-panel-text { color: rgba(245,239,227,.6); font-size: .88rem; line-height: 1.75; flex: 1; margin-bottom: 28px; }
.home-panel-cta { color: var(--cream); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: letter-spacing .2s; }
.home-panel:hover .home-panel-cta { letter-spacing: .14em; }
@media(max-width:640px) {
  .home-two-panel { grid-template-columns: 1fr; }
}

/* ── Birthday cake page ── */
@media(max-width:768px) {
  .cake-split-grid  { grid-template-columns: 1fr !important; gap: 40px !important; }
  .cake-sizes-grid  { grid-template-columns: 1fr !important; }
  .cake-types-grid  { grid-template-columns: 1fr !important; }
  /* Shared with page-foodtruck.php's hero — that page also has its own local
     copy of this rule (harmless duplicate), but this class needs to live
     here so every page using .foodtruck-hero-grid gets it, not just that
     one. Bug found 2026-08-23: page-verjaardagstaart.php reused the class
     without ever getting the stacking fix, so its hero never collapsed to
     one column on mobile. */
  .foodtruck-hero-grid { grid-template-columns: 1fr !important; }
  .cake-order-grid  { grid-template-columns: 1fr !important; gap: 48px !important; }
  .how-it-works-grid { grid-template-columns: 1fr !important; gap: 32px !important; max-width: 100% !important; }
  .ft-features-grid { grid-template-columns: 1fr !important; }
}

/* ── Social + Newsletter split section ── */
.snl-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 56px;
  align-items: start;
}
.snl-divider {
  background: rgba(26,58,42,.1);
  align-self: stretch;
  min-height: 200px;
}
.snl-newsletter,
.snl-social { padding: 8px 0; }

/* Newsletter form — cream background version */
.nl-form-row { flex-wrap: wrap; }
.nl-form-row input::placeholder { color: rgba(26,58,42,.35); }
.nl-form-row input:focus { border-color: rgba(26,58,42,.4) !important; outline: none; }
@media(max-width:700px) {
  .snl-grid { grid-template-columns: 1fr; gap: 48px 0; }
  .snl-divider { display: none; }
  .nl-form-row { flex-direction: column; }
  .nl-form-row input, .nl-form-row button { width: 100%; }
}

/* ── Cookie consent banner ── */
#cookie-banner {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 40px); max-width: 680px;
  background: var(--green); color: var(--cream);
  border-radius: 14px; padding: 20px 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  z-index: 9999;
  animation: cookie-in .35s ease both;
}
#cookie-banner.cookie-hide { animation: cookie-out .35s ease both; }
@keyframes cookie-in  { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes cookie-out { from { opacity:1; transform:translateX(-50%) translateY(0); } to { opacity:0; transform:translateX(-50%) translateY(20px); } }
.cookie-inner { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.cookie-text { flex:1; font-size:.85rem; line-height:1.6; color:rgba(245,239,227,.8); margin:0; min-width:200px; }
.cookie-text a { color:var(--cream); text-decoration:underline; }
.cookie-actions { display:flex; gap:10px; flex-shrink:0; }
.cookie-btn { border:none; border-radius:99px; padding:10px 20px; font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:600; cursor:pointer; transition:background .2s,color .2s; white-space:nowrap; }
.cookie-btn-primary { background:var(--cream); color:var(--green); }
.cookie-btn-primary:hover { background:#e8e0d0; }
.cookie-btn-ghost { background:rgba(245,239,227,.12); color:var(--cream); }
.cookie-btn-ghost:hover { background:rgba(245,239,227,.22); }
@media(max-width:520px) {
  .cookie-inner { flex-direction:column; align-items:flex-start; gap:14px; }
  .cookie-actions { width:100%; }
  .cookie-btn { flex:1; text-align:center; }
}

@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal, .reveal-l, .reveal-r { opacity: 1; transform: none; }
  .hw, .hero-eyebrow, .hero-sub, .hero-actions, .hero-stats { opacity: 1; filter: none; }
}

/* ── Trust badges (KoRo-style icon strip) ── */
.trust-bar { background: var(--rust); padding: 18px 20px; }
.trust-bar-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px,4vw,44px); }
.trust-badge { display: flex; align-items: center; gap: 9px; }
.trust-badge svg { color: var(--cream); flex-shrink: 0; opacity: .9; }
.trust-badge span { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--cream); white-space: nowrap; }
@media(max-width:600px){ .trust-badge span { font-size: .72rem; } }

/* ── Category showcase ── */
.cat-section { padding: clamp(56px,7vw,88px) 0 clamp(40px,6vw,64px); background: var(--cream); }
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media(max-width:900px){ .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:560px){ .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.cat-card { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 3/4; display: block; text-decoration: none; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.25,.46,.45,.94); }
.cat-card:hover img { transform: scale(1.07); }
.cat-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,36,25,.88) 0%, rgba(26,58,42,.18) 58%, transparent 100%); }
.cat-card-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 14px 16px; }
.cat-card-name { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: #fff; line-height: 1.1; margin-bottom: 3px; }
.cat-card-cta { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: rgba(245,239,227,.65); transition: color .2s; }
.cat-card:hover .cat-card-cta { color: var(--rust); }

/* ── Product dietary tags ── */
.product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ptag { font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: rgba(26,58,42,.06); border: 1px solid rgba(26,58,42,.12); color: rgba(26,58,42,.6); }

/* ── Testimonials ── */
.testi-section { background: var(--green); padding: clamp(64px,9vw,108px) 0; }
.testi-heading { text-align: center; margin-bottom: clamp(36px,5vw,56px); }
.testi-heading .section-label { color: var(--rust); margin: 0 auto 14px; width: fit-content; }
.testi-heading .section-label::after { background: var(--rust); }
.testi-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.9rem,3.6vw,2.8rem); font-weight: 400; color: var(--cream); line-height: 1.15; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media(max-width:768px){ .testi-grid { grid-template-columns: 1fr; gap: 20px; } }
.testi-card { background: rgba(245,239,227,.06); border: 1px solid rgba(245,239,227,.12); border-radius: 6px; padding: 32px 28px; }
.testi-stars { color: #e8c872; font-size: 1rem; letter-spacing: 2px; margin-bottom: 18px; }
.testi-quote { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 400; color: var(--cream); line-height: 1.6; margin-bottom: 22px; }
.testi-author { font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(245,239,227,.45); }

/* ── About page: story grid ── */
.about-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,100px); align-items: start; }
.about-story-sticky { position: sticky; top: 120px; }
@media(max-width:768px){
  .about-story-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-story-sticky { position: static; top: auto; }
}

/* ── My Account page ── */
/* Safety-net baseline for any generic WooCommerce button we haven't styled
   specifically elsewhere — more specific rules (checkout-button, single
   add-to-cart, etc.) already use their own colors and win on specificity. */
.woo-page .woocommerce .woocommerce-Button,
.woo-page .woocommerce a.button,
.woo-page .woocommerce button.button {
  display: inline-block; background: var(--green); color: var(--cream); border: none;
  border-radius: 99px; padding: 12px 26px; font-family: 'DM Sans', sans-serif;
  font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .2s;
}
.woo-page .woocommerce .woocommerce-Button:hover,
.woo-page .woocommerce a.button:hover,
.woo-page .woocommerce button.button:hover { background: var(--green2); color: var(--cream); }

.adabakes-myaccount-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 32px; align-items: start; margin: clamp(24px,4vw,40px) 0 clamp(60px,8vw,100px); }
@media(max-width:768px){ .adabakes-myaccount-layout { grid-template-columns: 1fr; } }

.woocommerce-MyAccount-navigation { background: var(--cream2); border-radius: 12px; padding: 16px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation-link a {
  display: block; padding: 12px 16px; border-radius: 8px; font-family: 'DM Sans', sans-serif;
  font-size: .88rem; font-weight: 600; color: rgba(26,58,42,.65); text-decoration: none;
  transition: background .2s, color .2s;
}
.woocommerce-MyAccount-navigation-link a:hover { background: rgba(26,58,42,.06); color: var(--green); }
.woocommerce-MyAccount-navigation-link.is-active a { background: var(--green); color: var(--cream); }
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(26,58,42,.1); }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--rust); }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: rgba(138,51,36,.08); color: var(--rust2); }

.woocommerce-MyAccount-content { background: #fff; border-radius: 12px; padding: clamp(24px,4vw,40px); box-shadow: 0 4px 24px rgba(26,58,42,.06); }
.woocommerce-MyAccount-content p { color: rgba(26,58,42,.7); line-height: 1.65; font-size: .92rem; }
.woocommerce-MyAccount-content a { color: var(--rust); font-weight: 600; text-decoration: none; }
.woocommerce-MyAccount-content a:hover { color: var(--rust2); text-decoration: underline; }
.woocommerce-MyAccount-content mark { background: none; color: var(--green); font-weight: 700; }

/* Orders table */
.woocommerce-orders-table,
.woocommerce-MyAccount-orders { width: 100%; border-collapse: collapse; }
.woocommerce-orders-table thead th { text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(26,58,42,.45); padding: 0 0 10px; border-bottom: 1px solid rgba(26,58,42,.12); }
.woocommerce-orders-table tbody td { padding: 14px 0; border-bottom: 1px solid rgba(26,58,42,.08); font-size: .88rem; color: rgba(26,58,42,.75); }
.woocommerce-orders-table tbody tr:last-child td { border-bottom: none; }
.woocommerce-orders-table__cell-order-status { text-transform: capitalize; }
.woocommerce-orders-table__cell-order-actions .woocommerce-Button { padding: 8px 16px; font-size: .78rem; margin: 2px; }

/* Addresses */
.woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width:600px){ .woocommerce-Addresses { grid-template-columns: 1fr; } }
/* min-width: 0 is required on grid items — without it, a grid item won't
   shrink below its content's natural width, which is what was pushing the
   Verzendadres card past the container edge. */
.woocommerce-Address { min-width: 0; background: var(--cream2); border-radius: 10px; padding: 20px 24px; box-sizing: border-box; }
/* The edit/add-address link ("Toevoegen X" / "Bewerken") is positioned
   absolutely rather than assumed to sit in a flex row next to the heading —
   WooCommerce's default markup floats it, which was overlapping the title
   text; padding-right on the title reserves room for it regardless of the
   exact DOM order WooCommerce renders. */
.woocommerce-Address-title { position: relative; margin-bottom: 10px; padding-right: 90px; }
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--green); margin: 0; }
.woocommerce-Address-title a { position: absolute; top: 2px; right: 0; font-size: .78rem; font-weight: 600; color: var(--rust); text-decoration: none; white-space: normal; text-align: right; }
.woocommerce-Address-title a:hover { color: var(--rust2); text-decoration: underline; }
.woocommerce-Address address { font-style: normal; color: rgba(26,58,42,.7); font-size: .88rem; line-height: 1.6; overflow-wrap: break-word; }

/* Edit account / address forms — reuse the checkout form-row look */
.woocommerce-EditAccountForm .form-row label,
.woocommerce-address-fields .form-row label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(26,58,42,.5); margin-bottom: 6px; display: block; }
.woocommerce-EditAccountForm .form-row input.input-text,
.woocommerce-address-fields .form-row input.input-text,
.woocommerce-address-fields .form-row select { width: 100%; border: 1px solid rgba(26,58,42,.15); border-radius: 10px; padding: 12px 16px; font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--green); background: #fff; }
.woocommerce-EditAccountForm fieldset { border: none; padding: 0; margin: 24px 0; }
.woocommerce-EditAccountForm legend { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--green); padding: 0; margin-bottom: 12px; }

/* ── Star ratings & product reviews ─────────────────────────────
   WC's classic stylesheets (and with them its "star" icon font) are
   dequeued in functions.php, so its rating markup renders as raw text
   everywhere those are the only source. Rebuilt here with unicode ★. WC
   markup: .star-rating > span[width:N%] — the span width is the fill
   percentage; the accessible text inside is pushed below the clipped
   1-line box (same trick WC core uses).
   2026-08-19: the WooCommerce *Blocks* stylesheet (wc-blocks.css, used by
   block-based product grids like the empty-cart "Nieuw in de winkel"
   upsell) is NOT dequeued and ships its own .star-rating::before with
   content:"SSSSS" (a WooCommerce icon-font glyph — shows as raw "SSSSS"
   text whenever that font fails to load). Same class name as the classic
   markup, so !important here to guarantee our ★ version always wins
   regardless of which stylesheet happens to load last. */
/* font-family: inherit on the ::before rules alone isn't enough — wc-blocks.css
   sets font-family:WooCommerce on .star-rating itself (not just its pseudo-
   elements), so "inherit" was just inheriting that same missing icon font
   right back. Reset it here, on the real element, to a normal font stack. */
.star-rating { position: relative; display: inline-block; width: 5.5em; height: 1.1em; line-height: 1.1; overflow: hidden; font-size: .95rem; letter-spacing: .1em; white-space: nowrap; font-family: 'DM Sans', sans-serif !important; }
.star-rating::before { content: "★★★★★" !important; position: absolute; top: 0; left: 0; color: rgba(26,58,42,.18); }
.star-rating > span { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; padding-top: 1.5em; }
.star-rating > span::before { content: "★★★★★" !important; position: absolute; top: 0; left: 0; color: var(--rust); }
/* WooCommerce Blocks nests a third element in here — .star-rating > span >
   span.rating (the accessible "5.00 out of 5" text carrier) — that ships its
   OWN "SSSSS" ::before, overlapping the two ★ layers above and rendering as
   stray S-letterforms bleeding through the stars. It's redundant with the
   two ★ layers already drawing the rating, so just remove its icon glyph. */
.star-rating .rating::before, .star-rating .rating::after { content: none !important; }

/* Shop grid: rating sits between title and price inside the card padding */
.woocommerce ul.products li.product .star-rating { margin: 0 24px 2px; font-size: .85rem; }

/* Product summary: stars + "(1 klantbeoordeling)" link on one line */
.woocommerce div.product .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link { font-size: .85rem; color: rgba(26,58,42,.55); text-decoration: none; }
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link:hover { color: var(--rust); text-decoration: underline; }

/* Reviews tab: WC renders an <ol class="commentlist"> (hence the stray
   "1." numbering) with a gravatar per review — numbering and avatar are
   dropped, each review becomes a plain white card. */
.woocommerce-Reviews { max-width: 720px; }
.woocommerce-Reviews .woocommerce-Reviews-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--green); margin: 0 0 20px; }
.woocommerce-Reviews ol.commentlist { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 14px; }
.woocommerce-Reviews ol.commentlist li { margin: 0; }
.woocommerce-Reviews .comment_container { background: #fff; border: 1px solid rgba(26,58,42,.08); border-radius: 12px; padding: 20px 24px; }
.woocommerce-Reviews .comment_container img.avatar { display: none; }
.woocommerce-Reviews .comment-text .star-rating { margin-bottom: 8px; }
.woocommerce-Reviews .comment-text p.meta { margin: 0 0 8px; font-size: .85rem; color: rgba(26,58,42,.5); }
.woocommerce-Reviews .comment-text .woocommerce-review__author { font-weight: 600; color: var(--green); font-style: normal; }
.woocommerce-Reviews .comment-text .description { color: rgba(26,58,42,.75); font-size: .92rem; line-height: 1.6; }
.woocommerce-Reviews .comment-text .description p { margin: 0; }

/* Review form heading + intro line */
#reviews #review_form_wrapper { margin-top: 8px; }
#reviews .comment-reply-title { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--green); margin-bottom: 4px; }
#reviews .comment-notes { font-size: .85rem; color: rgba(26,58,42,.5); margin-bottom: 16px; }