/* WithBig v22 — bold modern design system (Wing Cafe-inspired, &BIG brand) */
:root{
  --wb-green:#1FAE6B;
  --wb-green-deep:#0B6B45;
  --wb-ink:#0B1F1A;
  --wb-cream:#FFF8F0;
  --wb-tomato:#E4572E;
  --wb-sun:#F4C430;
  --wb-eggplant:#2B1A3C;
  --wb-mint:#E4F4EE;
  --wb-line:#DDE6E1;
  --wb-white:#fff;
  --wb-shadow:0 24px 60px rgba(11,31,26,.18);
  --wb-radius:22px;
  --wb-radius-pill:999px;
  --wb-font:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --wb-display:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--wb-font);color:var(--wb-ink);background:var(--wb-cream);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wb-wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
.wb-eyebrow{
  display:inline-block;font-size:12px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wb-green);margin:0 0 10px;
}
.wb-h1,.wb-display{
  font-family:var(--wb-display);font-weight:900;letter-spacing:-.03em;line-height:1.02;
  text-transform:uppercase;margin:0 0 16px;
}
.wb-lead{font-size:clamp(16px,2.2vw,19px);line-height:1.55;opacity:.92;margin:0 0 22px;max-width:42rem}
.wb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border-radius:var(--wb-radius-pill);
  font-weight:850;font-size:15px;text-decoration:none;border:2px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;cursor:pointer;
}
.wb-btn:hover{transform:translateY(-2px)}
.wb-btn-primary{background:var(--wb-green);color:#fff;box-shadow:0 12px 28px rgba(31,174,107,.35)}
.wb-btn-primary:hover{background:var(--wb-green-deep)}
.wb-btn-tomato{background:var(--wb-tomato);color:#fff;box-shadow:0 12px 28px rgba(228,87,46,.35)}
.wb-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.wb-btn-ghost-dark{background:#fff;color:var(--wb-ink);border-color:var(--wb-line)}
.wb-btn-pulse{animation:wbPulse 2.2s ease-in-out infinite}
@keyframes wbPulse{0%,100%{box-shadow:0 12px 28px rgba(31,174,107,.35)}50%{box-shadow:0 16px 40px rgba(31,174,107,.55)}}
@media (prefers-reduced-motion:reduce){.wb-btn-pulse{animation:none}}

/* Full-bleed photo hero */
.wb-hero{
  position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;isolation:isolate;
}
.wb-hero-media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.wb-hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  transform:scale(1.06);animation:wbKenBurns 22s ease-in-out infinite alternate;
}
@keyframes wbKenBurns{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
@media (prefers-reduced-motion:reduce){.wb-hero-media img{animation:none;transform:scale(1.05)}}
.wb-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(8,20,16,.55) 0%,rgba(8,20,16,.42) 40%,rgba(8,20,16,.78) 100%),
    radial-gradient(ellipse at 30% 70%,rgba(31,174,107,.25),transparent 55%);
}
.wb-hero-inner{position:relative;z-index:2;padding:168px 0 56px;width:min(1180px,calc(100% - 32px));margin:0 auto}
.wb-hero-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px;max-width:100%;position:relative;z-index:3}
.wb-hero-brand .tag{
  font-weight:850;letter-spacing:.04em;text-transform:uppercase;font-size:clamp(11px,2.8vw,13px);
  opacity:.95;text-shadow:0 2px 12px rgba(0,0,0,.35);
  white-space:normal;overflow:visible;max-width:100%;line-height:1.35;
  display:inline-block;padding:4px 0;
}
.wb-hero h1{
  font-size:clamp(34px,7vw,64px);font-weight:900;letter-spacing:-.035em;line-height:1.02;
  text-transform:uppercase;margin:0 0 16px;text-shadow:0 6px 30px rgba(0,0,0,.35);max-width:14ch;
}
.wb-hero .wb-lead{color:rgba(255,255,255,.94);max-width:38rem}
.wb-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
@media (max-width:700px){
  .wb-hero{min-height:78vh}
  .wb-hero-inner{padding:132px 0 40px}
  .wb-hero-ctas{flex-direction:column;align-items:stretch}
  .wb-hero-ctas .wb-btn{width:100%}
}

/* Colored bands */
.wb-band{padding:56px 0;position:relative}
.wb-band-dark{background:var(--wb-eggplant);color:#fff}
.wb-band-green{background:linear-gradient(135deg,var(--wb-green-deep),#12885A);color:#fff}
.wb-band-tomato{background:linear-gradient(135deg,#C73E1D,var(--wb-tomato));color:#fff}
.wb-band-sun{background:linear-gradient(135deg,#F7D060,var(--wb-sun));color:var(--wb-ink)}
.wb-band-cream{background:var(--wb-cream)}
.wb-band-white{background:#fff}

/* Wave / torn divider */
.wb-wave{display:block;width:100%;height:48px;margin-top:-1px}
.wb-wave path{fill:var(--wb-cream)}
.wb-wave.on-dark path{fill:var(--wb-eggplant)}
.wb-wave.on-green path{fill:var(--wb-green-deep)}

/* Horizontal carousel */
.wb-carousel{position:relative}
.wb-carousel-track{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:8px 4px 18px;scrollbar-width:none;
}
.wb-carousel-track::-webkit-scrollbar{display:none}
.wb-carousel-track > *{scroll-snap-align:start;flex:0 0 min(82%,340px)}
@media (min-width:900px){
  .wb-carousel-track > *{flex-basis:min(38%,360px)}
  .wb-carousel-track.wb-cards-3 > *{flex-basis:calc(33.333% - 14px)}
}
.wb-carousel-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.wb-carousel-arrows{display:flex;gap:8px}
.wb-carousel-arrows button{
  width:44px;height:44px;border-radius:50%;border:0;background:var(--wb-ink);color:#fff;
  font-size:18px;cursor:pointer;display:grid;place-items:center;
}
.wb-carousel-arrows button:hover{background:var(--wb-green-deep)}
.wb-dots{display:flex;gap:8px;align-items:center}
.wb-dots button{
  width:10px;height:10px;border-radius:999px;border:2px solid rgba(11,31,26,.45);
  background:rgba(11,31,26,.25);padding:0;cursor:pointer;opacity:1;
}
.wb-dots button.is-active{background:var(--wb-green);border-color:var(--wb-green);transform:scale(1.25);box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.wb-band-dark .wb-dots button, .wb-band-green .wb-dots button, .wb-band-tomato .wb-dots button, .wb-band-eggplant .wb-dots button,
.savings-strip .wb-dots button {
  background:rgba(255,255,255,.35); border-color:rgba(255,255,255,.95);
}
.wb-band-dark .wb-dots button.is-active, .wb-band-green .wb-dots button.is-active, .wb-band-tomato .wb-dots button.is-active,
.savings-strip .wb-dots button.is-active {
  background:#fff; border-color:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.2);
}

/* Photo cards */
.wb-photo-card{
  position:relative;border-radius:24px;overflow:hidden;min-height:280px;background:#111;
  box-shadow:var(--wb-shadow);isolation:isolate;
}
.wb-photo-card img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .45s ease;
}
.wb-photo-card:hover img{transform:scale(1.06)}
.wb-photo-card .overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.78));
  z-index:1;
}
.wb-photo-card .body{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px;z-index:2;color:#fff}
.wb-photo-card .body strong{display:block;font-size:20px;font-weight:900;letter-spacing:-.02em;margin-bottom:4px}
.wb-photo-card .body span{opacity:.9;font-size:14px}
.wb-badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:850;background:var(--wb-sun);color:var(--wb-ink);
}
.wb-badge-tomato{background:var(--wb-tomato);color:#fff}
.wb-badge-green{background:var(--wb-green);color:#fff}
.wb-badge-dark{background:var(--wb-eggplant);color:#fff}

/* Circular photo with ring */
.wb-ring{
  width:min(280px,70vw);aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:8px solid var(--wb-green);box-shadow:var(--wb-shadow);
}
.wb-ring img{width:100%;height:100%;object-fit:cover}

/* Benefit / step cards horizontal */
.wb-step-card{
  background:#fff;border-radius:22px;padding:22px;box-shadow:0 16px 40px rgba(11,31,26,.1);
  border:1px solid var(--wb-line);min-height:180px;
}
.wb-step-card .n{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:var(--wb-mint);color:var(--wb-green-deep);font-weight:900;margin-bottom:12px;
}
.wb-step-card h3{margin:0 0 8px;font-size:18px;font-weight:900}
.wb-step-card p{margin:0;color:#355248;line-height:1.5;font-size:14px}

/* Reveal on scroll */
.wb-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
.wb-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.wb-reveal{opacity:1;transform:none;transition:none}}
/* Lists / prototype must NEVER stay invisible behind reveal */
#prototype, #prototype.wb-reveal, #prototype .wb-reveal,
.app, #shopScreen, #createScreen, #shoppingList, .live-list-panel,
body.shared-list-page .wb-reveal, body.shared-list-page #lista-live .wb-reveal {
  opacity:1 !important; transform:none !important; transition:none !important;
}

/* Stats counter */
.wb-stat{font-size:clamp(28px,5vw,44px);font-weight:900;letter-spacing:-.03em}
.wb-stat-label{font-size:13px;font-weight:750;opacity:.8;text-transform:uppercase;letter-spacing:.06em}

/* Grid helpers */
.wb-grid-2{display:grid;gap:28px}
@media (min-width:900px){.wb-grid-2{grid-template-columns:1.05fr .95fr;align-items:center}}
.wb-grid-3{display:grid;gap:18px}
@media (min-width:900px){.wb-grid-3{grid-template-columns:repeat(3,1fr)}}

/* Page shell upgrades for existing pages */
body.wb-v22 .site-header, body.wb-v22 header.site{
  background:transparent;
}
body.wb-v22 .card, body.wb-v22 .panel, body.wb-v22 .app, body.wb-v22 .phone{
  border-radius:22px;box-shadow:0 18px 48px rgba(11,31,26,.12);
}
body.wb-v22 .btn.primary, body.wb-v22 a.btn.primary{
  background:var(--wb-green)!important;border-radius:999px!important;
}
body.wb-v22 .btn.primary:hover{background:var(--wb-green-deep)!important}

/* Overflow safety */
.wb-carousel-track,.wb-wrap,main,body{max-width:100%}
img,svg,video{max-width:100%}


/* Page hero bands for inner pages */
.wb-page-hero{padding:36px 0 18px}
.wb-page-hero h1{font-size:clamp(28px,5vw,44px);font-weight:900;letter-spacing:-.03em;text-transform:uppercase;margin:0 0 10px}
body.wb-v22 .wrap > h1, body.wb-v22 main > h1, body.wb-v22 .eyebrow + h1{
  letter-spacing:-.02em;
}
body.wb-v22 .btn, body.wb-v22 a.btn{border-radius:999px}
body.wb-v22 .card, body.wb-v22 .valuecard, body.wb-v22 .benefit-card{
  border-radius:20px; transition: transform .25s ease, box-shadow .25s ease;
}
body.wb-v22 .card:hover, body.wb-v22 .valuecard:hover{transform:translateY(-3px)}
body.wb-v22 img[src*="/assets/gen/"], body.wb-v22 .recipe-hero img{
  border-radius:18px;
}
/* Recipe list photo strip */
.wb-recipe-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.wb-recipe-grid a{text-decoration:none;color:inherit}
/* Calendar day learning cards */
.learn-panel, .wb-learn-card{
  background:#fff;border-radius:18px;padding:16px 18px;margin:10px 0;
  border-left:6px solid var(--wb-green); box-shadow:0 10px 28px rgba(11,31,26,.08);
}
.wb-learn-card h3{margin:0 0 8px;font-size:16px}
.wb-learn-card .src{font-size:11px;color:#5a6;margin-top:8px}
.cal .day.sarbatoare{background:linear-gradient(180deg,#FFE8E0,#fff)}
.cal .day.post{background:linear-gradient(180deg,#E8F0FF,#fff)}
.cal .day.dezlegare{box-shadow:inset 0 0 0 2px #F4C430}
/* Prevent overflow */
html,body{max-width:100%;overflow-x:hidden}
.wb-hero-media img{max-width:none} /* allow ken burns scale */

/* Calendar day learning card — clear sticky header */
body.wb-v22 #dayPanel,
body.wb-v22 .learn-panel {
  scroll-margin-top: 96px;
}

.shopping-list .empty-state, .shopping-list li.empty-state{
  list-style:none;padding:18px 14px;border:1px dashed var(--line,#DDE6E1);border-radius:14px;
  background:#F7FBF8;color:#355248;font-weight:700;text-align:center;
}

/* Recipe: single primary Adaugă — hide duplicate confirm */
#confirmAddIngredients{display:none!important}
#addIngredientsBtn.btn.primary{background:var(--wb-green,#1FAE6B);color:#fff;border-color:transparent}