.btn-white{ background:var(--white); color:var(--green-deep); }

.btn-white:hover{ box-shadow:var(--shadow-md); }

.hero{ background:var(--white); overflow:hidden; }

.hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding-top:56px; padding-bottom:56px; }

.hero-copy h1{ font-size:52px; line-height:1.06; margin-bottom:20px; }

.hero-copy h1 em{ font-style:normal; color:var(--green-deep); }

.hero-copy p.lede{ font-size:18px; color:var(--ink-soft); max-width:44ch; margin-bottom:30px; }

.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }

.hero-meta{ display:flex; gap:26px; flex-wrap:wrap; }

.hero-meta-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink-soft); }

.hero-meta-item svg{ color:var(--green); flex-shrink:0; }

.hero-display{ position:relative; aspect-ratio:1/0.92; }

.hero-display .plate{
    position:absolute; inset:4%; background:var(--soft); border-radius:32px;
  }

.hero-static-image{ position:absolute; inset:4%; width:92%; height:92%; object-fit:cover; border-radius:32px; }

.hero-item{ position:absolute; width:30%; filter:drop-shadow(0 14px 20px rgba(24,34,28,.16)); transition:transform .3s ease; }

.hero-item:hover{ transform:translateY(-6px) rotate(0deg) !important; }

.hero-badge{
    position:absolute; background:var(--white); border-radius:var(--r-pill); box-shadow:var(--shadow-md);
    padding:10px 16px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  }

.hero-badge svg{ color:var(--green); }

@media (max-width:960px){ .hero .wrap{ grid-template-columns:1fr; padding-top:32px; padding-bottom:0; } }

@media (max-width:960px){ .hero-copy h1{ font-size:38px; } }

@media (max-width:960px){ .hero-display{ aspect-ratio:1/0.8; margin-top:8px; } }

.strip{ background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.strip .wrap{ display:flex; align-items:center; justify-content:center; gap:40px; padding:13px 24px; flex-wrap:wrap; }

/* .strip-track/.strip-set are dissolved (display:contents) above the mobile
   breakpoint, so .strip-item/.divider lay out exactly as direct children of
   .strip .wrap, unchanged from before — see the mobile block below for why
   the wrappers exist at all. */
.strip-track,
.strip-track .strip-set{ display:contents; }

.strip-track .strip-set[aria-hidden]{ display:none; }

.strip-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--green-deep); white-space:nowrap; }

.strip-item svg{ width:17px; height:17px; flex-shrink:0; }

.strip-item .divider{ width:1px; height:14px; background:var(--line-strong); margin-left:40px; }

/* Mobile ("the trust bar shows UK-wide delivery / authentic products /
   secure checkout stacked vertically — want it compact, horizontal, and
   continuously scrolling instead"): 3 real sentence-length claims in a
   plain wrapping flex row (the desktop rule above) have nowhere to go on a
   narrow phone screen except onto their own line each, which is exactly
   the tall vertical stack that was reported. Turned into a single
   continuously-scrolling horizontal marquee instead — .strip-set is
   rendered twice in front-page.php (the 2nd copy is aria-hidden, screen
   readers only ever see the real one), so translating the whole track
   exactly -50% loops seamlessly from the 2nd copy back into the 1st with
   no visible jump or restart. */
@media (max-width:760px){
	.strip .wrap{ display:block; padding:10px 0; overflow:hidden;
		-webkit-mask-image:linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
		mask-image:linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
	.strip-track{ display:flex; width:max-content; animation:debijoe-strip-marquee 16s linear infinite; }
	.strip-track .strip-set{ display:flex; align-items:center; gap:24px; flex-shrink:0; padding-right:24px; }
	.strip-track .strip-set[aria-hidden]{ display:flex; }
	.strip-item{ font-size:12px; }
	.strip-item .divider{ margin-left:24px; }
}

@keyframes debijoe-strip-marquee{
	from{ transform:translateX(0); }
	to{ transform:translateX(-50%); }
}

@media (max-width:760px) and (prefers-reduced-motion: reduce){
	.strip-track{ animation:none; }
	.strip .wrap{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
	.strip-track .strip-set[aria-hidden]{ display:none; }
}

section.bg-white{ background:var(--white); }

section.bg-warm{ background:var(--warm); }

section.bg-soft{ background:var(--soft); }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; }

.section-head h2{ font-size:30px; margin-top:6px; }

.section-head p{ color:var(--ink-soft); font-size:15px; margin-top:6px; }

.section-link{ font-size:14px; font-weight:700; color:var(--green-deep); display:flex; align-items:center; gap:6px; flex-shrink:0; white-space:nowrap; padding-bottom:4px; }

.section-link svg{ width:15px; height:15px; transition:transform .15s ease; }

.section-link:hover svg{ transform:translateX(3px); }

@media (max-width:640px){ .section-head{ flex-direction:column; align-items:flex-start; } }

@media (max-width:640px){ section{ padding:44px 0; } }

.scroller-shell{ position:relative; }

.scroller{ display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:6px; scrollbar-width:none; }

.scroller::-webkit-scrollbar{ display:none; }

.scroller-nav{ position:absolute; top:38%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; z-index:5; }

.scroller-nav.prev{ left:-19px; }

.scroller-nav.next{ right:-19px; }

@media (max-width:760px){ .scroller-nav{ display:none; } }

.product-card{
    position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
    padding:14px; display:flex; flex-direction:column; gap:10px; flex-shrink:0; width:212px;
    transition:box-shadow .2s ease, transform .2s ease;
  }

.product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }

.grid .product-card{ width:auto; }

.product-link{ display:contents; }

.product-art{ aspect-ratio:1/1; background:var(--warm); border-radius:10px; overflow:hidden; position:relative; }

.product-art svg{ width:100%; height:100%; transition:transform .3s ease; }

.product-card:hover .product-art svg{ transform:scale(1.05); }

.save-tag{ position:absolute; top:8px; left:8px; background:var(--deep-panel-bg); color:var(--deep-panel-fg); font-size:10.5px; font-weight:800; padding:4px 8px; border-radius:6px; letter-spacing:.02em; }

.stock-tag{ position:absolute; top:8px; left:8px; background:var(--ink-soft); color:var(--white); font-size:10.5px; font-weight:800; padding:4px 8px; border-radius:6px; letter-spacing:.02em; }

.product-name{ font-size:14.5px; font-weight:700; line-height:1.3; min-height:2.6em; }

.price-row{ display:flex; align-items:baseline; gap:8px; }

.price-now{ font-size:16.5px; font-weight:800; }

.price-prev{ font-size:13px; color:var(--ink-soft); text-decoration:line-through; }

.card-control{ height:40px; }

.add-btn{
    display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:100%;
    background:var(--soft); color:var(--green-deep); border:none; border-radius:var(--r-btn);
    padding:10px; font-weight:700; font-size:13.5px; transition:background .15s ease, color .15s ease;
  }

.add-btn:hover{ background:var(--green); color:var(--on-green); }

.add-btn:disabled{ background:var(--warm); color:var(--ink-soft); cursor:not-allowed; }

.add-btn svg{ width:16px; height:16px; }

.qty-stepper{
    display:flex; align-items:center; justify-content:space-between; width:100%; height:100%;
    background:var(--green); border-radius:var(--r-btn); padding:0 4px;
  }

.qty-stepper.pulse{ animation:qtyPulse .22s ease; }

@keyframes qtyPulse{ 0%{ transform:scale(1); } 40%{ transform:scale(1.04); } 100%{ transform:scale(1); } }

.qty-btn{
    width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.16); color:var(--on-green);
    border:none; font-size:17px; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center;
    transition:background .15s ease;
  }

.qty-btn:hover{ background:rgba(255,255,255,.32); }

.qty-value{ color:var(--on-green); font-weight:800; font-size:14.5px; min-width:20px; text-align:center; font-variant-numeric:tabular-nums; }

.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

@media (max-width:960px){ .grid{ grid-template-columns:repeat(3,1fr); } }

@media (max-width:640px){ .grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }

@media (max-width:640px){ .product-card{ padding:10px; } }

.aisle-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

@media (max-width:960px){ .aisle-grid{ grid-template-columns:repeat(2,1fr); } }

@media (max-width:520px){ .aisle-grid{ grid-template-columns:1fr 1fr; gap:12px; } }

.aisle-card{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1.05; display:block; }

.aisle-card .art{ position:absolute; inset:0; }

.aisle-card .fade{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(7,20,13,.72) 100%); }

.aisle-card .label{ position:absolute; left:14px; right:14px; bottom:14px; color:#fff; font-weight:800; font-size:15px; }

.aisle-card .label small{ display:block; font-weight:600; font-size:11.5px; opacity:.85; margin-top:2px; }

.aisle-card:hover .art svg{ transform:scale(1.06); }

.aisle-card .art svg{ width:100%; height:100%; transition:transform .35s ease; }

.meal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

@media (max-width:900px){ .meal-grid{ grid-template-columns:repeat(2,1fr); } }

@media (max-width:560px){ .meal-grid{ grid-template-columns:1fr; } }

.meal-card{ border-radius:18px; overflow:hidden; background:var(--white); border:1px solid var(--line); }

.meal-plate{ aspect-ratio:4/3; position:relative; background:var(--warm); }

.meal-plate svg{ width:100%; height:100%; }

/* A real uploaded photo (the_post_thumbnail('medium')) had no sizing rule
   at all here — only the default illustration <svg> did — so it rendered
   at its own natural size inside this 4:3 frame instead of filling it,
   which is why an uploaded image looked like a raw, inconsistently
   cropped photo next to the polished default mound illustration (same
   on mobile and desktop; .meal-grid only changes the column count, not
   this frame). object-fit:cover fills the frame edge-to-edge like a
   proper dish photo, matching the default illustration's own
   preserveAspectRatio="xMidYMid slice" (SVG's equivalent of cover), so
   real photos and the default illustration read as the same design. */
.meal-plate img{ width:100%; height:100%; object-fit:cover; display:block; }

.meal-body{ padding:18px 20px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }

.meal-body h3{ font-size:18px; }

.meal-body p{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }

.meal-cta{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--green-deep); flex-shrink:0; }

.meal-cta svg{ width:15px; height:15px; }

.wholesale{ background:var(--deep-panel-bg); color:var(--deep-panel-fg); position:relative; overflow:hidden; }

.wholesale .wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; position:relative; z-index:2; }

.wholesale h2{ font-size:34px; color:var(--deep-panel-fg); margin-bottom:16px; }

.wholesale p{ font-size:16px; color:rgba(255,255,255,.82); max-width:46ch; margin-bottom:26px; }

.wholesale-points{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }

.wholesale-points div{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:rgba(255,255,255,.92); }

.wholesale-points svg{ color:var(--deep-panel-fg); flex-shrink:0; width:18px; height:18px; }

.wholesale .btn-white{ background:var(--deep-panel-cta-bg); color:var(--deep-panel-cta-fg); }

.wholesale .btn-white:hover{ background:var(--deep-panel-cta-bg); box-shadow:var(--shadow-md); filter:brightness(0.97); }

.wholesale-art{ position:relative; aspect-ratio:1/0.85; }

@media (max-width:900px){ .wholesale .wrap{ grid-template-columns:1fr; } }

@media (max-width:900px){ .wholesale-art{ display:none; } }

.trust-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; }

@media (max-width:860px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }

.trust-item{ display:flex; flex-direction:column; gap:12px; }

.trust-icon{ width:44px; height:44px; border-radius:12px; background:var(--soft); display:flex; align-items:center; justify-content:center; color:var(--green-deep); }

.trust-item h3{ font-size:15.5px; font-weight:700; }

.trust-item p{ font-size:13.5px; color:var(--ink-soft); }

.reveal{ opacity:1; transform:none; }

@media (prefers-reduced-motion:no-preference){ .reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; } }

@media (prefers-reduced-motion:no-preference){ .reveal.in-view{ opacity:1; transform:none; } }