/* ============================================================
   GRUBPLANIT — BRAND LAYER (on top of Bootstrap 5)
   ============================================================ */
/* overflow-x:hidden turns the body into a scroll container, which stops position:sticky
   working anywhere on the page. overflow-x:clip hides the same overflow without doing that;
   the hidden line stays first as the fallback for browsers that do not know clip. */
body{ overflow-x:hidden; overflow-x:clip; }
a{ text-decoration:none; }
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--navy-950); color:#fff;
  padding:12px 18px; z-index:2000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Navbar ---------- */
.navbar-brand{ display:flex; align-items:center; gap:10px; }
.navbar-brand img{ height:34px; width:auto; }
.navbar-brand span{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--navy-800); }
.navbar{ background:rgba(255,255,255,.86); backdrop-filter:blur(12px); border-bottom:1px solid rgba(20,28,26,.10); }
.navbar .nav-link{ font-weight:600; color:var(--navy-700); position:relative; }
.navbar .nav-link.active{ color:var(--navy-900); }
.navbar .nav-link::after{ content:''; position:absolute; left:.5rem; right:.5rem; bottom:2px; height:2px; background:var(--fresh-600); transform:scaleX(0); transition:transform .2s; }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after{ transform:scaleX(1); }
.icon-btn{
  width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--bs-border-color);
  display:inline-flex; align-items:center; justify-content:center; color:var(--navy-700); flex:0 0 auto;
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ border-color:var(--ocean-600); color:var(--ocean-700); }
.avatar{
  width:40px; height:40px; border-radius:50%; background:linear-gradient(120deg,var(--fresh-600),var(--ocean-700));
  color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}

/* ---------- Cuisine chip slider ---------- */
.chip-scroll{ display:flex; flex-wrap:nowrap; gap:.5rem; overflow-x:auto; overflow-y:hidden; padding:.75rem .1rem; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.chip-scroll::-webkit-scrollbar{ height:5px; }
.chip-scroll::-webkit-scrollbar-thumb{ background:var(--bs-border-color); border-radius:3px; }

/* A chip strip inside a rail is driven by its arrows, so the scrollbar comes off — a grey bar
   under a row of pills reads as a mistake rather than a control. The strip still scrolls by
   touch, trackpad and keyboard; only the bar is gone. */
.chip-rail{ position:relative; }
.chip-rail .chip-scroll{ scrollbar-width:none; -ms-overflow-style:none; }
.chip-rail .chip-scroll::-webkit-scrollbar{ display:none; }

/* Room for the arrows to sit over, so a chip never ends up half-hidden under one. */
.chip-rail .chip-scroll{ padding-left:2px; padding-right:2px; scroll-padding:0 44px; }

.chip-rail-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:20;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  padding:0; border:1px solid var(--bs-border-color); border-radius:50%;
  background:#fff; color:var(--navy-800); cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(18,32,58,.28);
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.chip-rail-arrow.prev{ left:-4px; }
.chip-rail-arrow.next{ right:-4px; }
.chip-rail-arrow:hover{ background:var(--navy-800); color:#fff; border-color:var(--navy-800); box-shadow:0 8px 20px -6px rgba(18,32,58,.42); }
.chip-rail-arrow:focus-visible{ outline:2px solid var(--ocean-600); outline-offset:2px; }
.chip-rail-arrow[hidden]{ display:none; }

/* The strip fades out where it continues, so a half-visible chip looks intended rather than
   clipped. Only on the side there is more to see. */
.chip-rail::before, .chip-rail::after{
  content:''; position:absolute; top:0; bottom:0; width:56px; z-index:15;
  pointer-events:none; opacity:0; transition:opacity .2s ease;
}
.chip-rail::before{ left:0; background:linear-gradient(90deg, var(--chip-rail-fade,#fff), transparent); }
.chip-rail::after{ right:0; background:linear-gradient(270deg, var(--chip-rail-fade,#fff), transparent); }
.chip-rail.has-prev::before{ opacity:1; }
.chip-rail.has-next::after{ opacity:1; }

/* The strip sits on the cream filter bar on the listing pages and on white on the home page,
   so the fade takes its colour from whatever it is over. */
.filter-bar .chip-rail{ --chip-rail-fade:var(--cream-100); }

@media (max-width:576px){
  /* Fingers do this better than a 34px target, and the arrows would cover two chips. */
  .chip-rail-arrow{ display:none !important; }
  .chip-rail::before, .chip-rail::after{ width:28px; }
}
.chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--bs-border-color);
  border-radius:var(--r-pill); padding:.45rem 1rem; font-size:13.5px; font-weight:600; color:var(--navy-700); white-space:nowrap;
  transition:all .18s ease;
}
.chip:hover{ border-color:var(--ocean-600); color:var(--ocean-800); transform:translateY(-1px); }
.chip.active{ background:var(--navy-800); color:#fff; border-color:var(--navy-800); }

/* ---------- Hero carousel ---------- */
.hero-carousel .carousel-item{ min-height:440px; display:flex; align-items:center; }
.hero-slide{ position:relative; width:100%; padding:4rem 0; }
.hero-slide.aura{ display:flex; align-items:center; }

/* ---------- Refined button scale (overrides Bootstrap's chunky defaults) ---------- */
.btn{ border-radius:var(--r-pill); font-weight:700; letter-spacing:.005em; padding:.55rem 1.25rem; font-size:14px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:active{ transform:scale(.97); }
.btn-lg{ padding:.7rem 1.6rem; font-size:15px; }
.btn-sm{ padding:.4rem .85rem; font-size:12.5px; }
.btn svg{ width:15px; height:15px; }
.btn-sm svg{ width:13px; height:13px; }
.hero-slide .container{ position:relative; z-index:2; }
/* Only the first slide is the page's h1; the rest are h2 so the page has one heading, and
   both need the same look. */
.hero-slide h1, .hero-slide h2{ color:#fff; font-size:clamp(32px,5vw,56px); line-height:1.05; }
.hero-slide h1 em, .hero-slide h2 em{ font-style:italic; color:var(--gold-300); }
.hero-slide p{ color:rgba(255,255,255,.86); font-size:17px; max-width:480px; }
.carousel-indicators [data-bs-target]{ background:rgba(255,255,255,.5); }
.carousel-indicators .active{ background:#fff; }
@media (max-width:576px){ .hero-carousel .carousel-item{ min-height:380px; } .carousel-control-prev, .carousel-control-next{ display:none; } }

/* ---------- Section headers ---------- */
.sec-icon{
  width:38px; height:38px; border-radius:11px; background:var(--mist-100); color:var(--ocean-800);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.sec-icon svg{ width:19px; height:19px; }
.eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fresh-700); font-weight:600; }
.sec-more{ color:var(--fresh-700); font-weight:700; font-size:14px; white-space:nowrap; }
.sec-more svg{ width:15px; height:15px; transition:transform .2s; }
.sec-more:hover svg{ transform:translateX(3px); }

/* ---------- Rail (horizontal scroll on home) ---------- */
.rail{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x proximity; }
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-thumb{ background:var(--bs-border-color); border-radius:3px; }
.rail .rail-item{ flex:0 0 260px; scroll-snap-align:start; }
@media (max-width:576px){ .rail .rail-item{ flex-basis:210px; } }

/* ---------- Recipe card ---------- */
.recipe-card{ overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; border:none; box-shadow:0 1px 2px rgba(20,28,26,.04), 0 8px 24px -14px rgba(18,32,58,.25); }
.recipe-card:hover{ transform:translateY(-5px); box-shadow:0 20px 45px -18px rgba(18,32,58,.32); }
.recipe-card .aura-card{ border-radius:0; position:relative; }
.recipe-card .aura-icon{ width:88px; height:88px; right:-14px; top:-8px; opacity:.45; bottom:auto; }
.badge-exclusive{ position:absolute; top:10px; left:10px; z-index:2; background:rgba(255,255,255,.92); color:var(--navy-800); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:5px 9px; border-radius:var(--r-pill); }
.save-btn{ position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%; background:rgba(20,28,26,.35); color:#fff; border:none; display:flex; align-items:center; justify-content:center; }
.save-btn:hover, .save-btn.is-saved{ background:var(--fresh-600); }
.save-btn svg{ width:16px; height:16px; }
.card-title a{ color:var(--navy-800); background-image:linear-gradient(currentColor,currentColor); background-position:0 100%; background-repeat:no-repeat; background-size:0 1px; transition:background-size .2s; }
.card-title a:hover{ background-size:100% 1px; }
.tag{ display:inline-flex; align-items:center; gap:5px; background:var(--mist-100); color:var(--navy-700); font-size:12px; font-weight:700; font-family:var(--font-mono); padding:5px 10px; border-radius:var(--r-pill); }
.tag svg{ width:13px; height:13px; }
.tag-price{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--bs-border-color); color:var(--navy-700); }
.tag-price[data-tier="1"]{ box-shadow:inset 0 0 0 1.5px var(--fresh-600); color:var(--fresh-700); }
.tag-price[data-tier="2"]{ box-shadow:inset 0 0 0 1.5px var(--gold-500); color:#8a6c14; }
.tag-price[data-tier="3"]{ box-shadow:inset 0 0 0 1.5px var(--navy-700); color:var(--navy-700); }
.btn-cook{ background:var(--fresh-600); border-color:var(--fresh-600); color:#fff; }
.btn-cook:hover{ background:var(--fresh-700); border-color:var(--fresh-700); color:#fff; }
.btn-order{ background:var(--harbor-600); border-color:var(--harbor-600); color:#fff; }
.btn-order:hover{ background:var(--harbor-700); border-color:var(--harbor-700); color:#fff; }

/* Compact action row inside recipe cards */
.card-action-row{ display:flex; gap:6px; margin-top:auto; padding-top:2px; }
.card-action-row .btn{ padding:.4rem .5rem; font-size:11.5px; gap:4px; }
.card-action-row .btn svg{ width:12px; height:12px; }

/* ---------- CTA band ---------- */
.cta-band{ border-radius:var(--r-lg); background:linear-gradient(120deg,var(--fresh-600),var(--ocean-700)); color:#fff; position:relative; overflow:hidden; }
.cta-band::before{ content:''; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(circle at 85% 20%, rgba(255,255,255,.22), transparent 45%), radial-gradient(circle at 10% 90%, rgba(255,255,255,.14), transparent 40%); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h3{ color:#fff; }
.cta-band .form-control{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.35); color:#fff; }
.cta-band .form-control::placeholder{ color:rgba(255,255,255,.65); }
.cta-band .btn-light{ color:var(--navy-800); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-950); color:rgba(255,255,255,.7); }
.site-footer h6{ color:#fff; letter-spacing:.06em; text-transform:uppercase; font-size:13px; font-family:var(--font-body); }
.site-footer a{ color:rgba(255,255,255,.7); }
.site-footer a:hover{ color:#fff; }
.footer-brand img{ height:30px; filter:brightness(0) invert(1); }
.footer-brand span{ font-family:var(--font-display); font-size:19px; color:#fff; font-weight:700; }
.footer-social a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:inline-flex; align-items:center; justify-content:center; }
.footer-social svg{ width:15px; height:15px; }

/* "Wherever you find it" -- the band above the footer (footer.blade.php, root build only). */
.ft-band{ position:relative; margin-top:1.5rem; padding:44px 0; background:var(--gp-deep, #0f4c3f); color:#fff; }
.ft-band-row{ display:flex; align-items:center; gap:56px; }
.ft-band-lead{ flex:0 1 360px; }
.ft-band-lead h2{ margin:0 0 12px; font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1.15; color:#fff; }
.ft-band-lead p{ margin:0; font-size:14.5px; line-height:1.55; color:#a9d6cb; }
.ft-band-cards{ flex:1 1 auto; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ft-card{ display:flex; flex-direction:column; align-items:flex-start; padding:22px 24px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.07); }
.ft-card-label{ font:700 10.5px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:#7fd1a0; }
.ft-card p{ margin:12px 0 16px; font-size:14px; line-height:1.45; color:#fff; }
.ft-card small{ margin-top:14px; font-family:var(--font-body); font-size:11.5px; line-height:1.4; color:rgba(255,255,255,.5); }
.ft-ext-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:46px; border:none; border-radius:var(--r-pill); background:#fff; color:#0f4c3f; font:700 14px/1 var(--font-body); text-decoration:none; cursor:pointer; }
.ft-ext-btn:hover{ background:#eff5eb; color:#0f4c3f; }
.ft-stores{ display:flex; flex-wrap:wrap; gap:10px; }
.ft-stores .store-badge{ width:auto; max-width:none; margin:0; padding:8px 14px; border:1px solid rgba(255,255,255,.2); }
@media (max-width:991.98px){ .ft-band-row{ flex-direction:column; align-items:stretch; gap:24px; } .ft-band-lead{ flex:none; } }
@media (max-width:575.98px){ .ft-band-cards{ grid-template-columns:1fr; } .ft-band-lead h2{ font-size:26px; } }

/* ---------- Auth (login/register) ---------- */
.auth-visual{ position:relative; background:linear-gradient(115deg, var(--ocean-600), var(--ocean-800) 65%, var(--navy-800)); color:#fff; min-height:280px; }
.auth-visual::after{ content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
.auth-visual > *{ position:relative; z-index:1; }
.auth-visual img{ height:32px; filter:brightness(0) invert(1); }
.auth-visual .navbar-brand span{ color:#fff; }
.auth-stats strong{ display:block; font-family:var(--font-display); font-size:26px; color:#fff; }
.auth-stats span{ font-size:12px; color:rgba(255,255,255,.7); }

.stepper{ display:flex; align-items:center; gap:6px; }
.stepper .dot{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--mist-100); color:var(--navy-700); font-size:12.5px; font-weight:800; transition:all .3s; }
.stepper .dot.is-active{ background:var(--fresh-600); color:#fff; box-shadow:0 0 0 5px rgba(79,155,68,.16); }
.stepper .dot.is-done{ background:var(--navy-800); color:#fff; }
.stepper .bar{ flex:1; height:2px; background:var(--bs-border-color); position:relative; overflow:hidden; }
.stepper .bar::after{ content:''; position:absolute; inset:0; background:var(--fresh-600); transform:scaleX(var(--p,0)); transform-origin:left; transition:transform .3s; }
.step-panel{ display:none; }
.step-panel.is-active{ display:block; animation:fadeUp .4s ease; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.pw-meter{ display:flex; gap:4px; margin-top:8px; }
.pw-meter span{ height:4px; flex:1; background:var(--bs-border-color); border-radius:2px; }
.pill-check .form-check-input{ display:none; }
.pill-check .form-check-label{ display:inline-flex; align-items:center; gap:6px; padding:.5rem 1rem; border-radius:var(--r-pill); border:1.5px solid var(--bs-border-color); font-size:13.5px; font-weight:600; color:var(--navy-700); cursor:pointer; background:#fff; }
.pill-check .form-check-input:checked + .form-check-label{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; }

/* ---------- Recipe detail ---------- */
.aura-hero{ aspect-ratio:16/9; }
.aura-thumb{ aspect-ratio:1/1; width:74px; height:74px; cursor:pointer; }
.aura-thumb.is-active{ box-shadow:0 0 0 3px var(--fresh-600); }
.aura-thumb .aura-icon{ width:55%; height:55%; right:12%; bottom:8%; opacity:.5; }
.gallery-main .aura-icon{ width:44%; height:44%; right:6%; bottom:6%; opacity:.32; }
.rating-row .stars{ color:var(--gold-500); display:inline-flex; gap:2px; }
.rating-row .stars svg{ width:16px; height:16px; }
.like-btn{ border:none; background:none; display:inline-flex; align-items:center; gap:6px; color:var(--ink-600); font-weight:700; font-size:13px; }
.like-btn svg{ width:17px; height:17px; }
.like-btn.is-liked{ color:#D64550; }
.meta-cell{ text-align:center; padding:.9rem .5rem; }
.meta-cell svg{ width:19px; height:19px; color:var(--ocean-700); margin-bottom:4px; }
.meta-cell strong{ display:block; font-family:var(--font-display); font-size:17px; color:var(--navy-800); }
.meta-cell span{ display:block; font-size:10.5px; color:var(--ink-400); text-transform:uppercase; letter-spacing:.05em; font-family:var(--font-mono); }

.nutri-ring{ position:relative; width:104px; height:104px; flex:0 0 auto; }
.nutri-ring .ring-visual{ position:absolute; inset:0; border-radius:50%; transition:background 1s ease; }
.nutri-ring .ring-visual::after{ content:''; position:absolute; inset:14px; background:#fff; border-radius:50%; box-shadow:inset 0 0 0 1px var(--bs-border-color); }
.nutri-ring-val{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.nutri-ring-val strong{ font-family:var(--font-display); font-size:20px; color:var(--navy-800); line-height:1; }
.nutri-ring-val span{ font-size:10px; color:var(--ink-400); text-transform:uppercase; }
.nutri-table-row{ display:flex; justify-content:space-between; padding:8px 0; border-top:1px dashed var(--bs-border-color); font-size:13.5px; }
.nutri-table-row:first-child{ border-top:none; }
.nutri-table-row span:last-child{ font-weight:700; color:var(--navy-800); font-family:var(--font-mono); }

.serving-adjust{ display:inline-flex; align-items:center; gap:10px; background:var(--cream-100); border-radius:var(--r-pill); padding:6px 8px; }
.serving-adjust button{ width:28px; height:28px; border-radius:50%; background:#fff; border:1px solid var(--bs-border-color); }
.serving-adjust span{ font-weight:700; font-size:13.5px; min-width:66px; text-align:center; display:inline-block; }

.ingredient-item{ display:flex; align-items:center; gap:12px; padding:9px 2px; border-top:1px solid var(--cream-200); font-size:14px; }
.ingredient-item:first-child{ border-top:none; }
.ingredient-item .form-check-input{ margin:0; flex:0 0 auto; }
.ingredient-item .form-check-input:checked ~ label{ text-decoration:line-through; color:var(--ink-400); }
.ingredient-item label{ flex:1; cursor:pointer; margin:0; }
.ingredient-qty{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-400); font-weight:600; }

.instruction-step{ display:flex; gap:1rem; }
.instruction-num{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:var(--navy-800); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; }
.instruction-time{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-size:12px; color:var(--ocean-800); font-weight:700; }
.instruction-time svg{ width:13px; height:13px; }

.pairing-card{ flex:0 0 190px; overflow:hidden; }
.pairing-card .aura{ height:100px; }
.pairing-card .aura-icon{ width:56px; height:56px; right:-6px; bottom:-6px; opacity:.5; }

/* ---------- Category page ---------- */
.cat-header{ position:relative; overflow:hidden; color:#fff; }
.cat-header::after{ content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
.cat-header .container{ position:relative; z-index:1; }
.cat-header h1{ color:#fff; }
.cat-header p{ color:rgba(255,255,255,.82); }
.cat-header .breadcrumb a{ color:rgba(255,255,255,.75); }
.cat-header .breadcrumb-item.active{ color:#fff; }
.cat-header-stats strong{ display:block; font-family:var(--font-display); font-size:24px; color:#fff; }
.cat-header-stats span{ font-size:11.5px; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.04em; }
.aura-static-fusion{ background:linear-gradient(150deg,#3E6FA8 0%,#5C4A82 55%,#23406E 100%); }
.aura-static-legends{ background:linear-gradient(150deg,#2A4A73 0%,#1C2D4B 60%,#12203A 100%); }
.aura-static-speed{ background:linear-gradient(150deg,#57A34B 0%,#2E7A73 55%,#1F5A63 100%); }
.aura-static-event{ background:linear-gradient(150deg,#B5502E 0%,#8C3A2C 55%,#4A2530 100%); }
.aura-static-lean{ background:linear-gradient(150deg,#6FAE63 0%,#3E7C36 60%,#26502A 100%); }
.aura-static-sweet{ background:linear-gradient(150deg,#C98BB0 0%,#8A5A96 55%,#4E3A6B 100%); }
.filter-bar{ position:sticky; top:56px; z-index:900; background:var(--cream-100); border-bottom:1px solid var(--bs-border-color); }

/* ---------- Recipe detail page: ecommerce-style layout ---------- */
.pdp-gallery-sticky{ position:sticky; top:88px; }
.pdp-gallery-css-slider{ position:relative; }
.pdp-slide-radio{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.pdp-gallery-main-wrap{ position:relative; background:var(--mist-100); aspect-ratio:1/1; }
.pdp-slide-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; z-index:1; transition:opacity .25s ease; }
.pdp-slide-radio:nth-of-type(1):checked ~ .pdp-gallery-main-wrap .pdp-slide-img-0{ opacity:1; z-index:2; }
.pdp-slide-radio:nth-of-type(2):checked ~ .pdp-gallery-main-wrap .pdp-slide-img-1{ opacity:1; z-index:2; }
.pdp-slide-radio:nth-of-type(3):checked ~ .pdp-gallery-main-wrap .pdp-slide-img-2{ opacity:1; z-index:2; }
.pdp-thumb{
  width:76px; height:76px; border-radius:var(--r-sm); overflow:hidden; padding:0; border:2px solid transparent;
  background:var(--mist-100); flex:0 0 auto; cursor:pointer; display:block; transition:border-color .15s ease;
}
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp-slide-radio:nth-of-type(1):checked ~ .pdp-thumbs-row .pdp-thumb:nth-child(1),
.pdp-slide-radio:nth-of-type(2):checked ~ .pdp-thumbs-row .pdp-thumb:nth-child(2),
.pdp-slide-radio:nth-of-type(3):checked ~ .pdp-thumbs-row .pdp-thumb:nth-child(3){ border-color:var(--fresh-600); }
.pdp-thumb:hover{ border-color:var(--fresh-600); }
@media (max-width:991px){ .pdp-gallery-sticky{ position:static; } }

.pdp-buybox{
  background:#fff; border:1px solid var(--bs-border-color); border-radius:var(--r-lg);
  padding:24px 26px; box-shadow:var(--shadow-card);
}
@media (max-width:576px){ .pdp-buybox{ padding:18px; } }

/* ---------- Recipe detail: price indicator, serves card, portions drawer ---------- */
.price-indicator{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--gold-500); }
.serves-card{
  display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--bs-border-color);
  border-radius:var(--r-lg); padding:14px 16px; box-shadow:var(--shadow-card);
}
.serves-icon{ width:40px; height:40px; border-radius:50%; background:var(--mist-100); color:var(--ocean-800); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.serves-icon svg{ width:19px; height:19px; }
.serves-edit-btn{ background:var(--cream-200); color:var(--navy-800); border:none; border-radius:var(--r-pill); padding:8px 16px; font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
.serves-edit-btn:hover{ background:#DCE8D5; }

.pairing-pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--cream-200); border-radius:var(--r-pill);
  padding:8px 14px; font-size:13.5px; font-weight:700; color:var(--navy-800);
}
.pairing-pill .pp-icon{ font-size:15px; }
.pairing-pill .pp-info{ color:var(--ink-400); display:flex; }
.pairing-pill .pp-info svg{ width:14px; height:14px; }

.category-pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--cream-200); border-radius:var(--r-pill);
  padding:9px 16px; font-size:13.5px; font-weight:700; color:var(--fresh-700);
}
.category-pill svg{ width:15px; height:15px; }

.nutri-stat-card{ background:var(--cream-100); border-radius:var(--r-md); padding:14px 10px; text-align:center; }
.nutri-stat-card strong{ display:block; font-family:var(--font-display); font-size:20px; color:var(--navy-800); }
.nutri-stat-card strong.stat-accent-green{ color:var(--fresh-600); }
.nutri-stat-card strong.stat-accent-blue{ color:var(--ocean-700); }
.nutri-stat-card span{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-400); font-family:var(--font-mono); margin-top:3px; }

/* Portions drawer stepper rows */
.portion-row{ display:flex; align-items:center; gap:14px; background:var(--cream-200); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:12px; }
.portion-row strong{ font-family:var(--font-display); font-size:15.5px; color:var(--navy-800); }
.portion-stepper{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.portion-stepper span{ font-weight:700; font-size:16px; min-width:16px; text-align:center; color:var(--navy-800); }
.portion-btn{ width:34px; height:34px; border-radius:50%; border:none; background:var(--cream-100); color:var(--ink-600); font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; }
.portion-btn-add{ background:var(--fresh-600); color:#fff; }
.portion-btn-add:hover{ background:var(--fresh-700); }

/* ---------- Profile page ---------- */
.profile-side{ position:sticky; top:80px; }
.diet-tile{ border:1.5px solid var(--bs-border-color); border-radius:var(--r-md); padding:14px 10px; text-align:center; cursor:pointer; background:#fff; transition:all .15s ease; }
.diet-tile .form-check-input{ display:none; }
.diet-tile .ic{ font-size:22px; display:block; margin-bottom:6px; }
.diet-tile:has(.form-check-input:checked){ border-color:var(--fresh-600); background:#F1F8EF; }
.list-group-item.active{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; }
.list-group-item.active svg{ color:#fff; }

/* ---------- Similar recipes offcanvas ---------- */
.offcanvas-similar .offcanvas-header{ border-bottom:1px solid var(--bs-border-color); }
.offcanvas-similar .offcanvas-title{ font-family:var(--font-display); font-size:20px; color:var(--navy-800); }
.similar-row{
  display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--r-md);
  cursor:pointer; transition:background .15s ease; text-decoration:none; color:inherit;
}
.similar-row:hover{ background:var(--cream-100); }
.similar-row .aura{ width:64px; height:64px; border-radius:var(--r-sm); flex:0 0 auto; }
.similar-row .aura-icon{ width:55%; height:55%; right:10%; bottom:8%; opacity:.5; }
.similar-row-body{ flex:1; min-width:0; }
.similar-row-body h6{ font-size:14px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.similar-row-body .tag{ font-size:11px; padding:3px 8px; }
.similar-row-arrow{ color:var(--ink-400); flex:0 0 auto; }

/* ---------- Share ingredients modal ---------- */
.share-ing-list{ max-height:280px; overflow-y:auto; }
.share-ing-list li{ padding:6px 0; border-bottom:1px dashed var(--bs-border-color); font-size:14px; }
.share-ing-list li:last-child{ border-bottom:none; }
.share-channel-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; border:1px solid var(--bs-border-color); border-radius:var(--r-md); padding:12px 8px; background:#fff; font-size:12px; font-weight:600; color:var(--navy-700); flex:1; }
.share-channel-btn:hover{ border-color:var(--ocean-600); color:var(--ocean-800); }
.share-channel-btn svg{ width:20px; height:20px; }

/* ---------- Order In page ---------- */
.order-hero{ position:relative; overflow:hidden; color:#fff; }
.order-hero::after{ content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
.order-hero .container{ position:relative; z-index:1; }
.order-hero h1{ color:#fff; }
.order-hero p{ color:rgba(255,255,255,.85); }
.order-summary-card{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); border-radius:var(--r-lg); padding:16px 18px; backdrop-filter:blur(6px); display:flex; align-items:center; gap:14px; }
.order-summary-card .aura{ width:56px; height:56px; border-radius:var(--r-sm); flex:0 0 auto; }
.shop-card{ display:flex; gap:14px; padding:14px; border-radius:var(--r-lg); background:#fff; box-shadow:0 1px 2px rgba(20,28,26,.04), 0 8px 24px -16px rgba(18,32,58,.25); transition:transform .2s ease, box-shadow .2s ease; }
.shop-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -18px rgba(18,32,58,.32); }
.shop-card .aura{ width:96px; height:96px; border-radius:var(--r-md); flex:0 0 auto; }
.shop-card-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.shop-card-body h3{ font-size:16px; margin-bottom:2px; }
.shop-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.shop-rating{ display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:13px; color:var(--navy-800); }
.shop-rating svg{ width:14px; height:14px; color:var(--gold-500); }
@media (max-width:480px){ .shop-card{ flex-direction:column; } .shop-card .aura{ width:100%; height:120px; } }

/* ============================================================
   HOME PAGE V2 — image-forward, light premium layout.
   Scoped under body.home-v2 so other pages are unaffected.
   ============================================================ */
:root{ --paper-warm:#FAF7F2; }
body.home-v2{ background:var(--paper-warm); color:var(--ink-900); }

/* Alternating full-bleed section bands */
.band-white{ background:#fff; }
.band-cream{ background:var(--paper-warm); }

/* ---------- Hero image carousel ---------- */
.hero-carousel-v2{ position:relative; }
.hero-carousel-v2 .carousel-item{ min-height:60vh; max-height:640px; }
.hero-slide-v2{ position:relative; width:100%; height:60vh; max-height:640px; overflow:hidden; }
.hero-slide-v2 img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-slide-v2::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,32,58,.88) 0%, rgba(20,32,58,.42) 42%, rgba(20,32,58,.04) 75%),
             linear-gradient(90deg, rgba(20,32,58,.62) 0%, rgba(20,32,58,.06) 55%);
}
.hero-caption-v2{ position:absolute; left:0; bottom:0; z-index:2; width:100%; padding:0 0 3rem; }
.hero-caption-v2 h1{ color:#fff; font-size:clamp(28px,4.4vw,50px); line-height:1.08; max-width:640px; }
.hero-caption-v2 h1 em{ font-style:italic; color:var(--gold-300); }
.hero-caption-v2 p{ color:rgba(255,255,255,.85); max-width:480px; font-size:15.5px; }
.hero-carousel-v2 .carousel-indicators{ margin-bottom:1.1rem; }
.hero-carousel-v2 .carousel-indicators [data-bs-target]{ width:26px; height:3px; background:rgba(255,255,255,.4); border:none; border-radius:2px; }
.hero-carousel-v2 .carousel-indicators .active{ background:var(--fresh-600); }
@media (max-width:576px){ .hero-slide-v2{ height:52vh; min-height:360px; } .hero-caption-v2{ padding-bottom:2rem; } .hero-carousel-v2 .carousel-control-prev, .hero-carousel-v2 .carousel-control-next{ display:none; } }

/* ---------- Poster cards (image-based, light card body) ---------- */
.poster-card{ background:#fff; border:1px solid var(--line-100); overflow:hidden; border-radius:var(--r-md); box-shadow:var(--shadow-card); transition:transform .25s ease, box-shadow .25s ease; }
.poster-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); }
.poster-media{ position:relative; display:block; overflow:hidden; background:var(--mist-100); }
.poster-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.poster-card:hover .poster-media img{ transform:scale(1.06); }
.poster-top-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,30,54,.35) 0%, transparent 32%); pointer-events:none; }
.poster-body{ padding:12px 12px 4px; }
.poster-body .card-title, .poster-body .card-title a{ color:var(--navy-800); }
/* Same mark .photo-empty draws (see the NO DISH PHOTO block below): the GrubPlanit logo,
   faint, centered. This card used to draw its own different placeholder -- a generic bowl icon --
   here instead (client report, 2026-09-10). */
.poster-fallback-icon{
  display:none; position:absolute; inset:0; z-index:0;
  background-image:url('/frontend/image/logo.png');
  background-repeat:no-repeat; background-position:center; background-size:min(45%,110px) auto;
  opacity:.5;
}
.poster-media.poster-fallback{ background:var(--mist-100,#E7EDE4); }
.poster-media.poster-fallback .poster-fallback-icon{ display:block; }
.poster-card .card-action-row{ background:#fff; }

.rail-v2{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x proximity; }
.rail-v2::-webkit-scrollbar{ height:6px; }
.rail-v2::-webkit-scrollbar-thumb{ background:var(--line-100); border-radius:3px; }
.rail-v2 .rail-item{ flex:0 0 250px; scroll-snap-align:start; }
@media (max-width:576px){ .rail-v2 .rail-item{ flex-basis:198px; } }

body.home-v2 .cta-band{ box-shadow:0 20px 50px -20px rgba(18,32,58,.35); }

/* ---------- Site navbar: logo + big search + account + hamburger ---------- */
.navbar-shell{ width:100%; }
.navbar-inner-v2{ display:flex; align-items:center; gap:16px; width:100%; }
.home-search-form{ flex:1 1 auto; max-width:640px; }
.home-search-form .input-group{ background:#fff; border:1px solid var(--line-100); border-radius:var(--r-pill); overflow:hidden; box-shadow:var(--shadow-card); }
.home-search-form .input-group-text{ background:transparent; border:none; color:var(--ink-400); padding-left:18px; }
.home-search-form .form-control{ background:transparent; border:none; color:var(--ink-900); padding:12px 16px 12px 8px; font-size:15px; box-shadow:none; }
.home-search-form .form-control::placeholder{ color:var(--ink-400); }
.home-search-form .form-control:focus{ box-shadow:none; }
@media (max-width:576px){ .home-search-form .form-control{ padding:10px 12px 10px 6px; font-size:14px; } }

/* Mic button on a search box (header-home.blade.php, search.blade.php) -- unscoped since the
   search-results page's own copy of the box isn't wrapped in .home-search-form. Hidden by
   default in markup; voice-search.js reveals it only where SpeechRecognition really exists. */
.voice-search-btn{ background:transparent; border:none; color:var(--ink-400); padding:0 14px; display:flex; align-items:center; cursor:pointer; }
.voice-search-btn:hover{ color:var(--ocean-600); }
.voice-search-btn.is-listening{ color:#e0433b; }
.voice-search-btn[hidden]{ display:none !important; }

/* ---- Header: paste a link or photo, Add to Chrome, Scan any plate ---------------------------
   import.js puts .is-link on the search form (and on the panel's own field) while it holds a
   link: a platform chip replaces the magnifier and "Get the recipe" replaces the Paste pill.   */
:root{ --gp-deep:#0f4c3f; }

.paste-pill{ flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; gap:6px; height:32px; margin:0 6px 0 2px; padding:0 13px; border:none; border-radius:var(--r-pill); background:rgba(79,155,68,.14); color:var(--fresh-700); font:700 12.5px/1 var(--font-body); white-space:nowrap; cursor:pointer; }
.paste-pill:hover, .paste-pill[aria-expanded="true"]{ background:rgba(79,155,68,.26); }
.link-chip{ display:none; flex:0 0 auto; align-self:center; align-items:center; height:28px; margin-left:12px; padding:0 12px; border-radius:var(--r-pill); background:var(--cream-100); color:var(--fresh-700); font:700 12.5px/1 var(--font-body); white-space:nowrap; }
.get-recipe-btn{ display:none; flex:0 0 auto; align-self:center; align-items:center; height:36px; margin:0 4px 0 6px; padding:0 18px; border:none; border-radius:var(--r-pill); background:var(--fresh-600); color:#fff; font:700 13.5px/1 var(--font-body); white-space:nowrap; cursor:pointer; }
.get-recipe-btn:hover{ background:var(--fresh-700); }
.is-link .link-chip, .is-link .get-recipe-btn{ display:inline-flex; }
.home-search-form.is-link .input-group-text, .home-search-form.is-link .voice-search-btn, .home-search-form.is-link .paste-pill{ display:none !important; }
/* Bootstrap squares off and butts together every child of an .input-group, with selectors too
   specific to beat by weight -- so inside one these three restate their own radius and margin. */
.input-group > .paste-pill, .input-group > .link-chip, .input-group > .get-recipe-btn{ border-radius:var(--r-pill) !important; }
.input-group > .paste-pill{ margin:0 6px 0 2px !important; }
.input-group > .link-chip{ margin:0 0 0 12px !important; }
.input-group > .get-recipe-btn{ margin:0 4px 0 6px !important; }
.home-search-form .input-group{ flex-wrap:nowrap; }
@media (max-width:575.98px){ .paste-pill{ padding:0 10px; } .paste-pill span{ display:none; } .get-recipe-btn{ padding:0 12px; font-size:12.5px; } .home-search-form.is-link .link-chip{ display:none; } }

.hdr-chrome{ align-items:center; gap:8px; height:40px; padding:0 16px; border:1px solid var(--gp-deep); border-radius:var(--r-pill); background:#fff; color:var(--gp-deep); font:600 13.5px/1 var(--font-body); white-space:nowrap; text-decoration:none; cursor:pointer; }
.hdr-chrome:hover{ background:var(--cream-100); color:var(--gp-deep); }
.hdr-app{ align-items:center; gap:10px; height:40px; padding:0 20px 0 14px; border:none; border-radius:var(--r-pill); background:var(--gp-deep); color:#fff; text-align:left; white-space:nowrap; cursor:pointer; }
.hdr-app:hover{ background:#0b3d32; }
.hdr-app-tx small{ display:block; margin-bottom:3px; font:700 8.5px/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:#7fd1a0; }
.hdr-app-tx b{ display:block; font:700 13px/1 var(--font-body); }

/* The paste panel and the install dialog */
.install-panel{ border-radius:20px; background:#fff; box-shadow:0 24px 60px -20px rgba(15,76,63,.35); }
.install-panel .modal-title{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--gp-deep); }
.install-panel .modal-header{ padding:20px 22px 0; }

/* The paste panel is a card that drops down under the header search box, not a dialog: no
   backdrop, no close button -- an outside click or Escape closes it. import.js sets its
   position and width from the search box each time it opens. */
.paste-panel{ position:fixed; z-index:1050; box-sizing:border-box; padding:18px 20px 16px; border:1px solid #e6ede3; border-radius:16px; background:#fff; box-shadow:0 18px 44px -16px rgba(15,76,63,.28), 0 2px 6px rgba(15,76,63,.06); }
.paste-panel[hidden]{ display:none !important; }
.paste-panel.is-open{ animation:gp-pop .16s ease-out; }
@keyframes gp-pop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.paste-title{ margin:0 0 12px; font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.3; color:var(--gp-deep); }

/* The Add to Chrome card: hung under the header button the way the paste panel hangs under the
   search box; import.js places it. */
.chrome-panel{ position:fixed; z-index:1050; box-sizing:border-box; width:400px; max-width:calc(100vw - 24px); padding:20px 20px 16px; border:1px solid #e6ede3; border-radius:18px; background:#fff; box-shadow:0 18px 44px -16px rgba(15,76,63,.28), 0 2px 6px rgba(15,76,63,.06); }
.chrome-panel[hidden]{ display:none !important; }
.chrome-panel.is-open{ animation:gp-pop .16s ease-out; }
.chrome-head{ display:flex; align-items:flex-start; gap:14px; }
.chrome-ic{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:#e8f0fb; color:#3b74c4; }
.chrome-title{ margin:0; font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.2; color:var(--gp-deep); }
.chrome-sub{ margin:6px 0 0; font-size:12.5px; line-height:1.4; color:var(--ink-600); }
.chrome-steps{ display:grid; gap:8px; margin:16px 0 14px; padding:0; list-style:none; }
.chrome-step{ display:flex; align-items:center; gap:12px; min-height:46px; padding:8px 12px; border-radius:12px; background:#f5f8f4; font-size:13px; line-height:1.35; color:var(--ink-900); }
.chrome-step-n{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:#dcecd6; color:var(--fresh-700); font:700 12px/22px var(--font-body); text-align:center; }
.chrome-step-t{ flex:1 1 auto; }
.chrome-step-art{ flex:0 0 auto; width:70px; height:auto; margin-left:auto; }
.chrome-cta{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:46px; border:none; border-radius:var(--r-pill); background:var(--gp-deep); color:#fff; font:700 14px/1 var(--font-body); text-decoration:none; cursor:pointer; }
.chrome-cta:hover{ background:#0b3d32; color:#fff; }
.chrome-note{ margin:12px 0 0; font-size:11.5px; line-height:1.4; color:var(--ink-400); }
@media (max-width:420px){ .chrome-step-art{ display:none; } }

/* /extension (extension.blade.php): why the header's Scan any plate button holds still while its
   reason rotates. The demo pills are the header button's own look, made inert. */
.ext-page{ max-width:1140px; }
.ext-title{ margin:0 0 10px; font-family:var(--font-display); font-weight:700; font-size:clamp(26px, 3.6vw, 34px); line-height:1.2; color:var(--gp-deep); }
.ext-lede{ max-width:900px; margin:0 0 28px; font-size:15px; line-height:1.65; color:var(--ink-600); }
.ext-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.ext-grid + .ext-grid{ margin-top:16px; }
.ext-card{ padding:20px 22px; border:1px solid var(--line-100); border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(20,28,26,.03); }
.ext-card-head{ display:flex; align-items:center; gap:10px; }
.ext-time{ font:600 12px/1 var(--font-mono); color:var(--ink-400); }
.ext-demo{ display:flex; justify-content:center; width:212px; max-width:100%; margin:20px auto 16px; padding:0 18px; cursor:default; }
.ext-demo:hover{ background:var(--gp-deep); }
.ext-cap{ max-width:250px; margin:0 auto; font-size:13px; line-height:1.5; text-align:center; color:var(--ink-600); }
.ext-h{ margin:0 0 14px; font:700 15px/1.2 var(--font-body); color:var(--gp-deep); }
.ext-list{ margin:0; padding:0; list-style:none; }
.ext-list li{ position:relative; padding-left:20px; font-size:13.5px; line-height:1.6; color:var(--ink-600); }
.ext-list li + li{ margin-top:12px; }
.ext-dots li::before{ content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--fresh-600); }
.ext-checks li::before{ content:"\2713"; position:absolute; left:0; top:0; font-weight:700; color:var(--fresh-600); }
.ext-green{ border-color:#d7e6d1; background:#eff6ec; }
.ext-blue{ border-color:#d3e3f6; background:#e9f2fc; }
.ext-blue p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-600); }
.ext-blue p + p{ margin-top:14px; }
.ext-blue strong{ color:var(--ink-900); }
@media (max-width:991.98px){ .ext-grid{ grid-template-columns:1fr; } }

.paste-field{ display:flex; align-items:center; gap:8px; height:42px; margin:0; padding:0 5px 0 14px; border:1px solid #e3eadf; border-radius:var(--r-pill); background:#f5f8f4; }
.paste-field:focus-within{ border-color:rgba(79,155,68,.5); }
.paste-field-lead{ display:inline-flex; color:var(--fresh-700); }
.paste-field.is-link .paste-field-lead{ display:none; }
.paste-field .link-chip{ margin-left:0; }
.paste-input{ flex:1 1 auto; min-width:0; border:none; outline:none; background:transparent; font-size:13.5px; color:var(--ink-900); }
.paste-input::placeholder{ color:var(--ink-400); }
.paste-photo-btn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:none; border-radius:50%; background:#fff; color:var(--fresh-600); cursor:pointer; }
.paste-field .get-recipe-btn{ height:32px; margin:0 0 0 6px; font-size:13px; }
.paste-field .link-chip{ height:26px; }
.paste-photo-btn:hover{ background:var(--cream-100); color:var(--fresh-700); }
.paste-field.is-link .paste-photo-btn{ display:none; }
.paste-sources{ display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:11.5px; line-height:1.4; color:var(--ink-400); }
.paste-src-tiles{ display:inline-flex; flex:0 0 auto; gap:4px; }
.paste-src{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:1px solid var(--line-100); border-radius:6px; background:#fff; }
.paste-src svg{ width:11px; height:11px; }
@media (min-width:480px){ .paste-sources > span:last-child{ white-space:nowrap; } }
@media (max-width:479.98px){ .paste-src-tiles{ display:none; } }
.paste-foot-ic{ flex:0 0 auto; color:var(--ocean-600); }

.paste-status{ display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--cream-100); color:var(--ink-900); font-size:13.5px; line-height:1.4; }
.paste-status[hidden]{ display:none !important; }
.paste-status.is-error{ background:#fdeceb; color:#8a2a22; }
.paste-status.is-error .paste-spinner{ display:none; }
.paste-spinner{ flex:0 0 auto; width:16px; height:16px; border:2px solid rgba(15,76,63,.2); border-top-color:var(--gp-deep); border-radius:50%; animation:gp-spin .8s linear infinite; }
@keyframes gp-spin{ to{ transform:rotate(360deg); } }
.paste-panel.is-working .paste-field{ opacity:.55; pointer-events:none; }

.paste-foot{ display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line-100); font-size:12.5px; line-height:1.4; color:var(--ink-600); }
.paste-add{ flex:0 0 auto; margin-left:auto; padding:0; border:none; background:none; color:var(--gp-deep); font:700 12.5px/1 var(--font-body); white-space:nowrap; text-decoration:none; cursor:pointer; }
.paste-add:hover{ color:var(--fresh-700); text-decoration:underline; }

.paste-drop{ display:none; position:absolute; inset:0; z-index:5; align-items:center; justify-content:center; border:2px dashed var(--fresh-600); border-radius:16px; background:rgba(239,245,235,.96); color:var(--gp-deep); font:700 17px/1.3 var(--font-display); text-align:center; pointer-events:none; }
.paste-panel.is-dragover .paste-drop{ display:flex; }

.install-dialog{ max-width:320px; }
.install-panel{ text-align:center; }
.install-panel .modal-header{ justify-content:center; position:relative; }
.install-panel .btn-close{ position:absolute; top:16px; right:16px; }
.install-panel .modal-body{ padding:8px 24px 20px; }
.install-sub{ margin:0 0 14px; font-size:13px; line-height:1.45; color:var(--ink-600); }
.install-qr{ width:184px; height:184px; margin:0 auto; padding:12px; border:1px solid var(--line-100); border-radius:16px; background:#fff; }
.install-qr img{ display:block; width:100%; height:100%; }
.install-or{ margin:16px 0 10px; font:700 10.5px/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-400); }
.store-badge{ display:flex; align-items:center; gap:10px; width:100%; max-width:190px; margin:0 auto 8px; padding:8px 14px; border:none; border-radius:10px; background:#000; color:#fff; text-align:left; text-decoration:none; cursor:pointer; }
.store-badge:hover{ background:#1c1c1c; color:#fff; }
.store-badge svg{ flex:0 0 auto; width:22px; height:22px; fill:currentColor; }
.store-badge small{ display:block; margin-bottom:2px; font:500 9.5px/1 var(--font-body); letter-spacing:.02em; }
.store-badge b{ display:block; font:600 15px/1.05 var(--font-body); }
.install-more{ display:block; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-100); color:var(--fresh-700); font:700 13px/1 var(--font-body); text-decoration:none; }
.install-more:hover{ color:var(--gp-deep); text-decoration:underline; }

/* ============================================================
   FIND SIMILAR RECIPES — right-side drawer (matches reference
   mock's content, adapted to slide in from the right).
   ============================================================ */
.similar-sheet{ --bs-offcanvas-width: 420px; background:var(--cream-100); }
.similar-sheet .offcanvas-header{
  padding:20px 22px 16px; border-bottom:1px solid var(--line-100);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.sheet-close-btn{
  width:38px; height:38px; border-radius:50%; background:var(--cream-200); border:none;
  display:flex; align-items:center; justify-content:center; color:var(--navy-700); flex:0 0 auto;
  transition:all .15s ease;
}
.sheet-close-btn:hover{ background:var(--navy-800); color:#fff; transform:rotate(90deg); }
.sheet-close-btn svg{ width:17px; height:17px; }
.similar-sheet .offcanvas-body{ padding:18px 22px 24px; }
.sheet-title{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--navy-800); }
.sheet-sub{ color:var(--ink-600); font-size:14px; margin-bottom:18px; }
.sheet-sub b{ color:var(--navy-800); font-weight:700; }
@media (max-width:480px){ .similar-sheet{ --bs-offcanvas-width: 100vw; } }
.filter-check-row{
  display:flex; align-items:center; gap:14px; background:var(--cream-200); border-radius:var(--r-lg);
  padding:14px 16px; margin-bottom:12px; cursor:pointer; transition:background .15s ease;
}
.filter-check-row:hover{ background:#DCE8D5; }
.filter-check-row .fr-emoji{ font-size:22px; flex:0 0 auto; width:28px; text-align:center; }
.filter-check-row .fr-text{ flex:1; min-width:0; }
.filter-check-row .fr-text strong{ display:block; font-size:15.5px; color:var(--navy-800); font-family:var(--font-display); font-weight:700; }
.filter-check-row .fr-text span{ display:block; font-size:13.5px; color:var(--ink-600); margin-top:1px; }
.filter-check-row .fr-check{
  width:26px; height:26px; border-radius:7px; background:#fff; border:1.5px solid rgba(0,0,0,.08);
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.filter-check-row .fr-check svg{ width:15px; height:15px; opacity:0; transform:scale(.6); transition:all .15s ease; color:var(--fresh-600); }
.filter-check-row.is-checked .fr-check{ background:var(--fresh-600); border-color:var(--fresh-600); }
.filter-check-row.is-checked .fr-check svg{ opacity:1; transform:scale(1); color:#fff; }
.custom-search-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); font-weight:700; margin:18px 0 8px; }
.custom-search-input{ background:var(--cream-200); border:none; border-radius:var(--r-lg); padding:14px 16px; font-size:14.5px; color:var(--navy-800); width:100%; }
.custom-search-input::placeholder{ color:var(--ink-400); }
.custom-search-input:focus{ outline:none; box-shadow:0 0 0 3px rgba(79,155,68,.22); }
.sheet-actions{ display:flex; gap:12px; margin-top:20px; }
.sheet-btn{ flex:1; border:none; border-radius:var(--r-lg); padding:15px; font-weight:700; font-size:15px; background:var(--cream-200); color:var(--navy-800); transition:background .15s ease; }
.sheet-btn:hover{ background:#DCE8D5; }
.sheet-btn-primary{ background:var(--cream-200); color:var(--navy-800); }
.sheet-btn-primary:hover{ background:#CFE0C7; }
.card.border-0.shadow-sm.rounded-4.p-4.mt-4 {
    background: #fff!important;
}

/* ============================================================
   FIND SIMILAR RECIPES SHEET
   Lives here rather than in recipe.css: every card on every page opens this sheet now,
   and recipe.css is loaded by the recipe page alone -- so everywhere else it came out
   unstyled, with the two rows and their labels running together on one line.
   ============================================================ */
/* The app shows these as soft tiles with the value under the label, so the reader sees what
   they are about to search for, not only what the field is called. */
.similar-opt{
  display:flex; align-items:center; gap:14px; width:100%;
  background:var(--mint-50,#EFF5EB); border:1px solid transparent; border-radius:14px;
  padding:14px 16px; margin-bottom:10px; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.similar-opt:hover{ border-color:var(--fresh-600,#3F8F4B); }
.similar-opt:has(.form-check-input:checked){ border-color:var(--fresh-600,#3F8F4B); background:#E8F2E2; }
.similar-icon{ font-size:22px; line-height:1; flex:0 0 auto; }
.similar-text{ flex:1 1 auto; min-width:0; }
.similar-text b{ display:block; font-size:16px; color:var(--navy-800,#12203A); line-height:1.3; }
.similar-text span{ display:block; font-size:14px; color:var(--ink-400,#7A8794); }
.similar-opt .form-check-input{ flex:0 0 auto; width:22px; height:22px; margin:0; cursor:pointer; }

.similar-custom-label{
  display:block; margin:18px 0 8px;
  font:600 12px/1 var(--font-mono,ui-monospace,monospace); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-400,#7A8794);
}

/* The sheet says its own colours and type rather than taking whatever the page it opened over
   happens to set — it is drawn on top of the home feed, a listing and a recipe alike. */
#similarModal .modal-content{ background:#fff; }
#similarModal .modal-title{ font-family:var(--font-display); color:var(--navy-800); }
#similarModal [data-similar-basis]{
  font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--ink-400,#7A8794);
  margin-bottom:14px;
}
#similarModal .form-control{ font-family:var(--font-body); }

/* The sign-in page's left panel is navy and the logo is dark ink on transparent, so it was
   invisible there — the page looked as though it had no logo at all. White it out for that panel
   only; the copy on the white column beside it is fine as it is. */
.auth-visual .navbar-brand img{ filter:brightness(0) invert(1); }

/* ============================================================
   SIGN-UP GATE
   The page someone meets after pressing save while signed out. Split: brand left, form right;
   the brand panel is a persuasion surface and the form is the job, so below 900px the form goes
   first and under 600px of height the panel is dropped entirely — by then the reader is already
   persuaded and is only being kept from what they came for.
   ============================================================ */
.gate{
  /* Deep herb, with the tone-on-tone leaf. ~5% between ground and leaf: strong enough to read at
     arm's length as texture, weak enough not to become camouflage. */
  --herb:#22402A;
  --herb-leaf:#2B4C32;
  --herb-tint:#9DC98C;
  --herb-body:#C3D6BC;
  --gate-ground:#F1F4F4;
}

.gate .auth-visual, .gate-brand{
  background:var(--herb);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='124'%3E%3Cg fill='%232B4C32'%3E%3Cpath d='M13 1C3 6 3 20 13 26C23 20 23 6 13 1Z' transform='translate(8,12) rotate(-25 13 13)'/%3E%3Cpath d='M13 1C3 6 3 20 13 26C23 20 23 6 13 1Z' transform='translate(76,50) rotate(38 13 13)'/%3E%3Cpath d='M13 1C3 6 3 20 13 26C23 20 23 6 13 1Z' transform='translate(36,90) rotate(6 13 13)'/%3E%3C/g%3E%3C/svg%3E");
  color:#fff;
  display:flex; flex-direction:column;
  padding:40px 44px;
}
/* The gradient and noise the old panel carried are off: the leaf is the texture here. */
.gate .auth-visual::after{ display:none; }

.gate-logo{ margin-bottom:24px; }
.gate-logo img{ height:30px; width:auto; }

/* Headline directly below the logo, never centred — a centred panel drifts as the form beside
   it changes height. */
.gate-claim{ max-width:34ch; }
.gate-claim h2{
  font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:clamp(26px,3.2vw,38px); line-height:1.1; letter-spacing:-.01em; margin:0 0 14px;
}
.gate-claim p{ color:var(--herb-body); font-size:15.5px; line-height:1.55; max-width:52ch; margin:0; }

.gate-feats{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:9px; }
.gate-feats li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--herb-body); }
.gate-feats li::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--herb-tint); flex:0 0 auto; }

/* Footed, under a hairline. The sentence names the diet tracks; the row carries the proof. */
.gate-stats{ display:flex; gap:30px; margin-top:auto; padding-top:22px; border-top:1px solid rgba(157,201,140,.22); }
.gate-stats strong{ display:block; font-family:var(--font-mono); font-size:18px; font-weight:600; color:#fff; }
.gate-stats span{ display:block; font-size:11px; color:var(--herb-tint); margin-top:3px; }

.gate-form{
  background:var(--gate-ground);
  display:flex; align-items:center; justify-content:center;
  padding:40px 24px;
  position:relative;
}
.gate-form-inner{ width:100%; max-width:380px; }

.gate-home-link{
  position:absolute; top:20px; right:24px;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1rem;
  border:1px solid var(--line-100,#DDE4D6);
  border-radius:999px;
  background:#fff;
  color:var(--navy-800,#12203A);
  font-weight:600; font-size:13.5px;
  text-decoration:none; white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.gate-home-link svg{ width:16px; height:16px; }
.gate-home-link:hover{ border-color:var(--fresh-600); color:var(--fresh-700); }

/* The context card: the reader can see the dish is still there. */
.gate-ctx{
  display:flex; align-items:center; gap:11px;
  background:#fff; border-radius:9px; padding:9px 11px; margin-bottom:18px;
  box-shadow:0 1px 2px rgba(20,28,26,.05);
}
.gate-ctx-th{
  position:relative; flex:0 0 56px; width:56px; aspect-ratio:16/9; border-radius:5px;
  overflow:hidden; background:var(--mist-100,#E7EDE4);
}
.gate-ctx-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.gate-ctx-t{ min-width:0; }
.gate-ctx-t b{ display:block; font-size:12.5px; font-weight:600; color:var(--navy-800); line-height:1.25; }
.gate-ctx-t span{ display:block; font-size:10.5px; color:var(--ink-400,#7A8794); margin-top:2px; }

@media (max-width:991.98px){
  /* The form first: someone who has just tapped save should see it without scrolling. The panel
     becomes a shortened block beneath, headline and one stat. */
  .gate{ display:flex; flex-direction:column; }
  .gate-form{ order:1; padding:28px 20px; }
  .gate-brand{ order:2; padding:28px 20px; }
  .gate-claim p, .gate-feats{ display:none; }
  .gate-stats > *:not(:first-child){ display:none; }
}

@media (max-height:600px){
  /* A persuasion surface, and the reader has already been persuaded. */
  .gate-brand{ display:none; }
}

/* The post-save app invitation, inline on the recipe. */
.post-save{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  background:var(--mint-50,#EFF5EB); border:1px solid var(--fresh-600,#3F8F4B);
  border-radius:12px; padding:12px 16px; margin-bottom:16px;
}
.post-save-t b{ color:var(--navy-800); }
.post-save-t span{ color:var(--ink-400,#7A8794); margin-left:6px; font-size:14px; }
.post-save-acts{ display:flex; align-items:center; gap:8px; }

/* ============================================================
   NO DISH PHOTO — the mark stands in
   Drawn only where there is no photo: includes/photo.blade.php renders it when the recipe has no
   image, and photo.js puts it in place of one that failed to load. It is never behind a photo
   that works, so nothing shows through.
   ============================================================ */
.photo-empty{
  position:absolute; inset:0; display:block;
  background-image:url('/frontend/image/logo.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:min(58%,140px) auto;
  opacity:.5;
}

/* Navy ground, dark mark: whiten it, as the sign-in panel does. */
.photo-empty.is-dark{
  background-color:var(--nfl-panel,#16263C);
  filter:brightness(0) invert(1);
  opacity:.32;
}

/* The circles are small enough that the mark needs more of them to read. */
.gp-circle .ring .photo-empty{ background-size:64% auto; }