/* ============================================================
   GRUBPLANIT — BRAND LAYER (on top of Bootstrap 5)
   ============================================================ */
body{ overflow-x:hidden; }
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(239,245,235,.9); backdrop-filter:blur(10px); }
.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; }
.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; }
.hero-slide h1{ color:#fff; font-size:clamp(32px,5vw,56px); line-height:1.05; }
.hero-slide h1 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; }

/* ---------- 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); }
body.home-v2 .navbar{ background:rgba(250,247,242,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-100); }

/* 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); }
.poster-fallback-icon{ display:none; position:absolute; inset:0; align-items:center; justify-content:center; color:var(--ocean-700); opacity:.25; z-index:0; }
.poster-fallback-icon svg{ width:56%; height:56%; }
.poster-media.poster-fallback{ background:linear-gradient(150deg,var(--mist-200),var(--mist-100)); }
.poster-media.poster-fallback .poster-fallback-icon{ display:flex; }
.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); }

/* ---------- Minimal home navbar: logo + big search + hamburger only ---------- */
body.home-v2 .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; } }

/* ============================================================
   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;
}