/*
 * Smart Page — public page styles, ported from the dlink-premium prototype's phone preview
 * (temp/smartpage-public-design-spec.md). Self-contained: the standard page's gtin-v2/style.css is
 * not loaded. Mobile-first single column (max 430px), slide-in detail panels toggled by smart.js.
 */
:root {
  --sp-bg: #f4f5f8;
  --sp-ink: #0e1758;         /* luna-5: titles */
  --sp-text: #1d2530;
  --sp-accent: #2e46ff;      /* luna-4 */
  --sp-l1: #f0f3ff;          /* luna-1 */
  --sp-l2: #c8d5fe;          /* luna-2 */
  --sp-l3: #6b89ff;          /* luna-3 */
  --sp-muted: #67717e;
  --sp-label: #707a8f;
  --sp-sub: #5c6b8a;
  --sp-border: #e2e6e9;
  --sp-green: #1fad6b;
  --sp-red: #ef4343;
  --sp-ease: cubic-bezier(.32, .72, 0, 1);
  --sp-max: 430px;
}
html, body { margin: 0; padding: 0; }
.sp-body {
  background: var(--sp-bg); color: var(--sp-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5;
}
.sp-body.sp-locked { overflow: hidden; }
.sp, .sp * { box-sizing: border-box; }
.sp { max-width: var(--sp-max); margin: 0 auto; min-height: 100vh; padding-bottom: 20px; position: relative; }
/* Resets are wrapped in :where() (zero specificity) so a component's own padding / colour /
   size always wins — ".sp button { padding: 0 }" used to beat ".sp-card-tile { padding: 20px }". */
:where(.sp) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(.sp) a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:where(.sp) :is(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; }
:where(.sp) p { margin: 0; }
:where(.sp) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sp [hidden] { display: none !important; }
.sp :focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; border-radius: 8px; }

/* ---------------------------------------------------------------- surfaces */
.neo-card {
  background:
    radial-gradient(120% 55% at 15% 0%, hsl(0 0% 100% / .9) 0%, hsl(0 0% 100% / 0) 55%),
    linear-gradient(115deg, hsl(0 0% 100% / 0) 32%, hsl(0 0% 100% / .25) 42%, hsl(0 0% 100% / 0) 52%),
    linear-gradient(160deg, hsl(0 0% 100% / .8) 0%, hsl(226 100% 97% / .76) 65%, hsl(226 96% 89% / .28) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid hsl(0 0% 100% / .9);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .95), inset 0 -6px 14px -10px hsl(228 100% 71% / .18),
              0 1px 2px hsl(233 40% 20% / .05), 0 14px 34px -20px hsl(233 52% 28% / .34);
}
.neo-btn { background: var(--sp-accent); color: #fff; box-shadow: 0 8px 20px -6px hsl(233 100% 59% / .45); }
.neo-cobalt { background: linear-gradient(135deg, #2e46ff 0%, hsl(236 80% 42%) 55%, #0e1758 100%); color: #fff; }
.neo-glass-btn {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(90% 120% at 15% -20%, hsl(0 0% 100% / .45) 0%, hsl(0 0% 100% / 0) 60%),
              linear-gradient(135deg, hsl(228 100% 71% / .95) 0%, hsl(233 100% 59% / .85) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid hsl(0 0% 100% / .5);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .6), inset 0 -6px 12px -8px hsl(233 72% 20% / .35), 0 8px 20px -10px hsl(233 100% 59% / .45);
}
.feedback-glass {
  background: linear-gradient(145deg, hsl(0 0% 100% / .94), hsl(226 100% 97% / .82));
  border: 1px solid hsl(0 0% 100% / .85);
  box-shadow: inset 0 1px 0 #fff, 0 14px 34px -20px hsl(233 72% 20% / .18);
  -webkit-backdrop-filter: blur(24px) saturate(1.15); backdrop-filter: blur(24px) saturate(1.15);
}

/* ---------------------------------------------------------------- search + recall */
.sp-searchbar { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; padding: 6px 16px;
  background: hsl(220 23% 96.5% / .85); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.sp-search { flex: 1; display: flex; align-items: center; gap: 8px; border-radius: 16px; background: #fff; padding: 8px 12px;
  box-shadow: 0 0 0 1px hsl(226 96% 89% / .6), 0 1px 2px hsl(233 40% 20% / .05); }
.sp-search svg { color: var(--sp-accent); }
.sp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 12px/1.4 inherit; font-family: inherit; color: var(--sp-ink); }
.sp-search input::placeholder { color: hsl(233 100% 59% / .6); }
.sp-search input::-webkit-search-cancel-button { display: none; }
.sp-search-count { border-radius: 999px; background: var(--sp-l1); padding: 2px 8px; font-size: 10px !important; font-weight: 600; color: var(--sp-accent) !important; font-variant-numeric: tabular-nums; }
.sp-hit { animation: sp-flash 1.6s ease-out; }
@keyframes sp-flash { from { background: hsl(45 95% 60% / .55); } to { background: transparent; } }
.sp-recall { margin: 12px 16px 0; display: flex; align-items: center; gap: 12px; border-radius: 16px; border: 1px solid hsl(0 84% 60% / .3);
  background: hsl(0 84% 60% / .1); color: var(--sp-red) !important; padding: 12px 16px; font-size: 12px; font-weight: 600; line-height: 1.25; }
.sp-recall svg { width: 20px; height: 20px; stroke-width: 1.75; }
.sp-recall .sm { width: 16px; height: 16px; }
.sp-recall span { flex: 1; }

/* ---------------------------------------------------------------- hero */
.sp-hero { padding: 8px 16px; }
.sp-brandrow { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 20px; margin-bottom: 0; animation: sp-rise .5s var(--sp-ease) both; }
/* sized by its shape: a wide logo up to 140px wide, a tall (portrait) one up to 56px high — not squeezed into 28px */
.sp-logo { display: block; width: auto; height: auto; min-height: 28px; max-height: 56px; max-width: 140px; object-fit: contain; object-position: left center; }
.sp-brand { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--sp-ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-verified-wrap { position: relative; }
.sp-verified { position: relative; width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: hsl(152 70% 40% / .1); box-shadow: 0 0 0 1px hsl(152 70% 40% / .2); color: var(--sp-green) !important; transition: transform .15s; }
.sp-verified:active { transform: scale(.95); }
.sp-verified svg { stroke-width: 2.2; position: relative; }
.sp-ping { position: absolute; inset: 0; border-radius: 999px; background: hsl(152 70% 40% / .2); animation: sp-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes sp-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.sp-popover { position: absolute; right: 0; top: 40px; z-index: 25; width: 240px; border-radius: 16px; padding: 14px; background: #fff;
  font-size: 12px; line-height: 1.375; box-shadow: 0 8px 24px hsl(215 25% 15% / .08), 0 0 0 1px var(--sp-border); }
.sp-popover b { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sp-popover b svg { color: var(--sp-green); }
.sp-popover p { margin-top: 6px; color: var(--sp-muted); }
.sp-stage { position: relative; margin-top: -8px; aspect-ratio: 1 / 1; border-radius: 32px; background: #f6f7f9;
  box-shadow: 0 4px 10px hsl(222 30% 20% / .05), 0 24px 48px -16px hsl(222 30% 20% / .22); animation: sp-rise .55s .05s var(--sp-ease) both; }
.sp-gallery { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 32px; }
.sp-gallery::-webkit-scrollbar { display: none; }
.sp-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; }
.sp-slide img { width: 100%; height: 100%; object-fit: contain; border-radius: 28px; }
.sp-slide-empty svg { width: 64px; height: 64px; color: var(--sp-l2); stroke-width: 1.5; }
.sp-gdots { position: absolute; bottom: -18px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.sp-gdots button, .sp-bn-dots button { height: 12px; padding: 0 2px; display: flex; align-items: center; }
.sp-gdots button::after { content: ""; display: block; height: 3px; width: 10px; border-radius: 999px; background: hsl(233 72% 20% / .2); transition: all .5s ease-out; }
.sp-gdots button.on::after { width: 24px; background: var(--sp-accent); }
.sp-hero-text { padding: 24px 8px 0; }
.sp-title { font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--sp-ink); text-wrap: balance; }
.sp-size { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--sp-accent); font-variant-numeric: tabular-nums; }
.sp-facts { margin-top: 16px; display: flex; border-radius: 16px; background: #fff; padding: 4px;
  box-shadow: 0 0 0 1px hsl(226 96% 89% / .6), 0 1px 2px hsl(233 40% 20% / .05), 0 10px 24px -14px hsl(233 60% 30% / .3); }
.sp-facts > div { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; padding: 8px 4px; text-align: center; }
.sp-facts > div + div::before { content: ""; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: var(--sp-l2); }
.sp-facts b { font-size: 14px; font-weight: 700; line-height: 1.15; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.sp-facts span { margin-top: 4px; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: hsl(233 100% 59% / .8); }
/* a long label never grows the cell: at most two lines */
.sp-facts span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
@keyframes sp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- banners */
.sp-banners { padding-top: 20px; }
.sp-bn-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 8px; scrollbar-width: none; }
.sp-bn-track::-webkit-scrollbar { display: none; }
.sp-bn { position: relative; isolation: isolate; flex: 0 0 auto; scroll-snap-align: center; min-width: 280px; width: 280px; height: 144px; border-radius: 20px;
  overflow: hidden; background: var(--sp-l1); color: var(--sp-text) !important; text-align: left; box-shadow: 0 8px 20px -14px hsl(233 100% 59% / .4); transition: transform .15s; }
.sp-bn:active { transform: scale(.98); }
.sp-bn-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right; }
.sp-bn-fade { position: absolute; inset: 0; background: linear-gradient(to right, hsl(226 100% 97% / .95), hsl(226 100% 97% / .7), transparent); }
.sp-bn-tag { position: absolute; top: 12px; right: 12px; z-index: 2; border-radius: 999px; background: hsl(0 0% 100% / .6); padding: 1px 6px;
  font-size: 7.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: hsl(233 100% 59% / .8); box-shadow: 0 0 0 1px hsl(0 0% 100% / .7); }
.sp-bn-body { position: relative; z-index: 2; height: 100%; width: 58%; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px; }
.sp-bn-eyebrow { font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .15em; opacity: .7; }
.sp-bn-title { font-size: 15px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-bn-cta { margin-top: 6px; width: fit-content; white-space: nowrap; border-radius: 12px; padding: 4px 10px; font-size: 10px; font-weight: 600; }
.sp-bn-dots { display: flex; justify-content: center; gap: 4px; }
.sp-bn-dots button::after { content: ""; display: block; height: 6px; width: 6px; border-radius: 999px; background: var(--sp-border); transition: all .3s; }
.sp-bn-dots button.on::after { width: 16px; background: var(--sp-text); }

/* ---------------------------------------------------------------- units + tiles */
.sp-unit { padding-top: 24px; animation: sp-rise .5s var(--sp-ease) both; }
.sp-unit-head { padding: 0 24px 12px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--sp-ink); }
.sp-pad { padding: 0 20px; }
.sp-stack { display: flex; flex-direction: column; gap: 12px; }
.sp-mt { margin-top: 12px; }
.sp-tile { position: relative; isolation: isolate; width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px;
  text-align: left; color: var(--sp-ink) !important; transition: transform .15s; }
.sp-tile:active { transform: scale(.98); }
.sp-ib { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; background: var(--sp-l1); color: var(--sp-accent); display: flex; align-items: center; justify-content: center; }
.sp-ib svg { width: 20px; height: 20px; stroke-width: 1.75; }
.sp-ib.sm { width: 36px; height: 36px; }
.sp-ib.sm svg { width: 16px; height: 16px; }
.sp-tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-tile-text .t { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.sp-tile-text .s { margin-top: 2px; font-size: 10.5px; color: hsl(215 25% 15% / .7); }
.sp-chev { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 999px; background: #f3f4f7; color: hsl(233 72% 20% / .6); display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.sp-chev svg { stroke-width: 2.25; }
.sp-tile:hover .sp-chev { transform: translateX(2px); }
.sp-list { border-radius: 18px; overflow: hidden; }
.sp-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.sp-list-row + .sp-list-row { border-top: 1px solid hsl(210 15% 90% / .6); }
.sp-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-list-text b { font-size: 12.5px; font-weight: 600; color: var(--sp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-list-text small { font-size: 10.5px; color: var(--sp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-arrow { color: var(--sp-accent); }
.sp-arrow.muted { color: var(--sp-muted); }

/* Digital Link data card (prototype "Informații nutriționale" card: title, badge strip, footer) */
.sp-card-tile { position: relative; isolation: isolate; display: block; width: 100%; border-radius: 24px; padding: 20px; text-align: left;
  color: var(--sp-ink) !important; transition: transform .15s; }
.sp-card-tile:active { transform: scale(.98); }
.sp-ct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sp-ct-title { font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.sp-strip { margin-top: 16px; display: flex; border-radius: 16px; background: var(--sp-l1); padding: 4px; }
.sp-strip > span { position: relative; flex: 1; min-width: 0; display: block; padding: 10px 8px; text-align: center; }
.sp-strip > span + span::before { content: ""; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: var(--sp-l2); }
.sp-strip b { display: block; font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--sp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-strip small { display: block; margin-top: 6px; font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: hsl(233 100% 59% / .8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the energy line of the Nutriție card: in the card head, in place of the title */
.sp-ct-head:has(.sp-ct-energy) { align-items: center; }
.sp-ct-energy { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; }
.sp-ct-kcal { min-width: 0; display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.sp-ct-kcal b { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.sp-ct-kcal span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--sp-sub); }
.sp-ct-energy em { border-radius: 999px; background: var(--sp-l1); padding: 3px 8px; font-style: normal; line-height: 1.2;
  font-size: 10px; font-weight: 600; color: var(--sp-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the declared carbon footprint next to the recyclable share on the Sustenabilitate card */
.sp-ct-energy em.sp-ct-co2 { background: hsl(152 70% 40% / .12); color: var(--sp-green); white-space: nowrap; }
.sp-ct-foot { margin-top: 14px; line-height: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--sp-label); }
.sp-card-tile:hover .sp-chev { transform: translateX(2px); }

/* experience tiles */
.sp-xp-track { margin: -8px 0 -20px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 8px 20px 32px; scrollbar-width: none; }
.sp-xp-track::-webkit-scrollbar { display: none; }
.sp-xp { position: relative; flex: 0 0 auto; width: 160px; height: 176px; border-radius: 18px; overflow: hidden; scroll-snap-align: start; transform: translateZ(0);
  text-align: left; transition: box-shadow .3s, transform .15s; }
.sp-xp:hover { box-shadow: 0 12px 24px -12px hsl(233 100% 59% / .6); }
.sp-xp:active { transform: scale(.98); }
.sp-xp-img, .sp-xp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-xp-story { background: radial-gradient(80% 60% at 80% 10%, hsl(228 100% 71% / .55), transparent), linear-gradient(160deg, #2e46ff, #0e1758); }
.sp-xp-recipes { background: radial-gradient(80% 60% at 20% 10%, hsl(25 95% 55% / .55), transparent), linear-gradient(160deg, #f97a1f, #7c2d12); }
.sp-xp-product-line { background: radial-gradient(80% 60% at 70% 10%, hsl(152 60% 50% / .55), transparent), linear-gradient(160deg, #1fad6b, #0b3d2a); }
.sp-xp-shade { position: absolute; inset: 0; background: linear-gradient(to top, hsl(222 50% 12% / .98) 0%, hsl(222 48% 16% / .85) 35%, hsl(222 42% 22% / .45) 62%, transparent 88%); }
.sp-xp-sheen { position: absolute; left: -33%; top: 0; height: 100%; width: 50%; transform: rotate(12deg); background: linear-gradient(to right, transparent, hsl(220 27% 97% / .2), transparent); filter: blur(12px); }
.sp-xp-inner { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1.5px 0 hsl(0 0% 100% / .9), inset 0 20px 30px -20px hsl(0 0% 100% / .5); }
.sp-xp-border { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(145deg, #fff, hsl(215 60% 85% / .5) 30%, hsl(0 0% 100% / .3) 55%, hsl(220 50% 80% / .6) 80%, #fff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.sp-xp-body { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; color: #f5f7f9; }
.sp-xp-eyebrow { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: hsl(220 27% 97% / .7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-xp-row { margin-top: 4px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.sp-xp-title { font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.sp-xp-arrow { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 11px;
  background: hsl(220 27% 97% / .2); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .6), 0 0 0 1px hsl(220 27% 97% / .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* resources + GS1 + fineprint */
.sp-res { margin: 32px 16px 0; border-radius: 20px; overflow: hidden; }
.sp-res-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; }
.sp-res-btn b { font-size: 14px !important; font-weight: 700; letter-spacing: -0.01em; }
.sp-res-btn small { font-size: 11px !important; }
.sp-gs1 { margin: 32px 16px 8px; border-radius: 18px; padding: 16px; }
.sp-gs1-row { display: flex; align-items: center; gap: 10px; }
.sp-gs1-row p { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--sp-label); }
.sp-gs1-row img { height: 24px; width: auto; }
.sp-gs1-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid hsl(226 96% 89% / .6); display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 500; color: var(--sp-sub); }
.sp-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--sp-green); }
.sp-fine { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 8px 16px 0; font-size: 10px; color: var(--sp-label); }
.sp-fine a:hover { text-decoration: underline; }
.sp-lang img { display: block; border-radius: 2px; }

/* ---------------------------------------------------------------- panels */
.sp-panel { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 30; max-width: var(--sp-max); margin: 0 auto; overflow-y: auto;
  padding-bottom: 28px; background: var(--sp-bg); scrollbar-width: none; transform: translateX(100%); transition: transform .45s var(--sp-ease); }
.sp-panel::-webkit-scrollbar { display: none; }
.sp-panel.is-open { transform: translateX(0); }
.sp-landing { z-index: 40; }
.sp-phead { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  background: hsl(220 23% 96.5% / .9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.sp-phead h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.025em; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-phead small { font-size: 11px; color: var(--sp-muted); }
.sp-back { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--sp-ink) !important; transition: transform .2s; }
.sp-back svg { stroke-width: 1.75; }
.sp-back:hover { transform: translateX(-2px); }
.sp-rows { border-radius: 18px; overflow: hidden; }
.sp-row { display: grid; grid-template-columns: minmax(0, 9rem) 1fr; gap: 12px; padding: 11px 16px; font-size: 12px; }
.sp-row + .sp-row { border-top: 1px solid hsl(210 15% 90% / .6); }
.sp-row .k { font-weight: 500; color: var(--sp-label); }
.sp-row .v { color: var(--sp-ink); font-weight: 600; white-space: pre-line; word-break: break-word; }
.sp-label { padding: 24px 4px 10px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--sp-label); }
.sp-h2 { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--sp-ink); }
.sp-muted { margin-top: 4px; font-size: 12px; color: var(--sp-muted); line-height: 1.55; }
.sp-eyebrow { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--sp-label); }
.sp-eyebrow.accent { color: var(--sp-accent); }
.sp-eyebrow.light { color: hsl(0 0% 100% / .8); }
.sp-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--sp-accent); }
.sp-card { border-radius: 20px; padding: 16px; }

/* campaign landing */
.sp-landing-hero { position: relative; height: 240px; background: linear-gradient(135deg, var(--sp-l2), var(--sp-l1)); }
.sp-landing-hero img { width: 100%; height: 100%; object-fit: cover; }
.sp-landing-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--sp-bg), hsl(220 23% 96.5% / .2), transparent); }
.sp-landing-hero .sp-back { position: absolute; left: 16px; top: 24px; z-index: 2; }
.sp-landing-tag { position: absolute; right: 16px; top: 32px; z-index: 2; border-radius: 999px; background: hsl(0 0% 100% / .7); padding: 2px 8px;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--sp-ink); box-shadow: 0 0 0 1px var(--sp-border); }
.sp-landing-body { position: relative; z-index: 3; margin-top: -40px; padding: 0 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.sp-landing-body h2 { margin-top: 4px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; color: #181f2f; }
.sp-sub { margin-top: 8px; font-size: 13px; line-height: 1.625; color: #525f7a; white-space: pre-line; }
.sp-period { margin-top: 12px; border-radius: 12px; background: var(--sp-l1); padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--sp-ink); }
.sp-points { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.375; color: hsl(222 30% 16%); }
.sp-points > div { display: flex; gap: 10px; align-items: flex-start; }
.sp-check { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 999px; background: var(--sp-l1); color: var(--sp-ink); display: flex; align-items: center; justify-content: center; }
.sp-check svg { width: 14px; height: 14px; }
.sp-cta { display: block; width: 100%; border-radius: 16px; padding: 14px 0; text-align: center; font-size: 14px !important; font-weight: 600; }
.sp-cta-ghost { font-size: 13px !important; color: var(--sp-ink) !important; }

/* story */
.sp-cover { margin: 8px 20px 0; border-radius: 26px; background: linear-gradient(to top, #0e1758, hsl(233 72% 20% / .85)), radial-gradient(90% 70% at 80% 0%, #2e46ff, #0e1758);
  padding: 176px 20px 20px; color: #fff; } /* 176px of the cover image above the text, as the prototype (pt-44) */
.sp-cover { position: relative; overflow: hidden; }
.sp-cover > * { position: relative; }
.sp-cover-img { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-cover.has-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, #0e1758, hsl(233 72% 20% / .6), transparent); }
.sp-cover.has-img > :not(.sp-cover-img) { z-index: 2; }
.sp-cover h2 { margin-top: 4px; font-size: 22px; font-weight: 700; line-height: 1.25; }
.sp-cover p { margin-top: 8px; font-size: 12px; opacity: .85; white-space: pre-line; }
/* "Descoperă <brand>": the prototype's light link button on the story cover */
.sp-story-site { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 16px;
  font-size: 12px; font-weight: 600; background: hsl(0 0% 100% / .9); color: var(--sp-ink) !important; transition: transform .15s; }
.sp-story-site:active { transform: scale(.95); }
.sp-story-site svg { width: 14px; height: 14px; }
.sp-pill-light { margin-top: 12px; display: inline-flex; border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 600; background: hsl(220 27% 97% / .9); color: var(--sp-ink) !important; }
.sp-section { padding: 24px 20px 0; }
.sp-section h3 { padding-bottom: 12px; font-size: 15px; font-weight: 700; letter-spacing: -0.025em; color: var(--sp-ink); }
.sp-chapter { margin-bottom: 10px; font-size: 12.5px; }
.sp-chapter b { color: var(--sp-ink); }
.sp-chapter p { margin-top: 4px; color: var(--sp-sub); line-height: 1.55; }
.sp-award { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 14px; }
.sp-medal { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: hsl(45 95% 52% / .2); color: #f9bf10; }
.sp-medal svg { width: 20px; height: 20px; }
.sp-story-certs .sp-medal { background: hsl(142 71% 35% / .15); color: #1a9948; }
.sp-story-green .sp-medal { background: hsl(152 70% 40% / .12); color: var(--sp-green); }
.sp-story-csr .sp-medal { background: var(--sp-l1); color: #065c79; }
.sp-award-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-award-text b { font-size: 12.5px; font-weight: 700; color: var(--sp-ink); }
.sp-award-text small { font-size: 10.5px; color: var(--sp-muted); white-space: pre-line; }

/* CSR: "Impact în comunitate" cards (prototype BrandStory) */
.sp-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sp-sec-head small { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--sp-muted); }
.sp-csr { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: 16px;
  background: linear-gradient(to bottom right, hsl(226 96% 89% / .6), hsl(226 100% 97% / .7), hsl(226 96% 89% / .4));
  box-shadow: inset 0 0 0 1px hsl(233 100% 59% / .1), 0 10px 30px -12px hsl(233 100% 59% / .25);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); transition: transform .3s, box-shadow .3s; }
.sp-csr::before { content: ""; position: absolute; inset: 0 0 50% 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, hsl(0 0% 100% / .6), transparent); }
.sp-csr::after { content: ""; position: absolute; right: -24px; top: -24px; z-index: -1; width: 112px; height: 112px; border-radius: 999px;
  background: hsl(233 100% 59% / .15); filter: blur(40px); pointer-events: none; }
.sp-csr:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px hsl(233 100% 59% / .15), 0 16px 36px -14px hsl(233 100% 59% / .35); }
.sp-csr-row { display: flex; align-items: flex-start; gap: 12px; }
.sp-csr-ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  border: 1px solid hsl(0 0% 100% / .7); background: hsl(0 0% 100% / .6); color: var(--sp-accent); }
.sp-csr-ic svg { width: 20px; height: 20px; }
.sp-csr-body { min-width: 0; flex: 1; }
.sp-csr-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: clamp(14px, 3.8vw, 16px); font-weight: 700; line-height: 1.3; color: var(--sp-ink); }
.sp-csr-p { margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: clamp(12px, 3.3vw, 13px); line-height: 1.625; color: hsl(215 25% 15% / .7); }
.sp-csr-v { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-radius: 16px; border: 1px solid hsl(0 0% 100% / .7); background: hsl(0 0% 100% / .55); padding: 10px 14px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sp-csr-num { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sp-csr-num b { font-size: clamp(17px, 5.5vw, 22px); font-weight: 700; line-height: 1; color: var(--sp-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-csr-num small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 500; color: var(--sp-muted); }
.sp-csr-go, .sp-csr-all { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; border-radius: 999px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.sp-csr-go { padding: 6px 12px; font-size: 11.5px; }
.sp-csr-go svg { width: 14px; height: 14px; }
.sp-csr-all { margin-top: 12px; padding: 8px 16px; font-size: 12px; }
.sp-csr-all svg { width: 14px; height: 14px; }

/* green impact tiles */
.sp-green-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp-green { display: flex; flex-direction: column; border-radius: 18px; padding: 14px; }
.sp-green-ic { width: 16px; height: 16px; color: var(--sp-green); }
.sp-green-v { margin-top: 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.sp-green-l { font-size: 10.5px; color: var(--sp-muted); }
.sp-green-d { margin-top: 4px; font-size: 10px; color: var(--sp-sub); line-height: 1.45; }
.sp-green-a { margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--sp-green) !important; text-decoration: underline !important; }

/* awards grouped by kind, medal colours */
.sp-award-group + .sp-award-group { margin-top: 14px; }
.sp-award-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-muted); }
.sp-award-h i { font-style: normal; border-radius: 999px; background: #f0f2f4; padding: 0 6px; font-size: 9.5px; }
.sp-award-text small + small { margin-top: 2px; }
.sp-medal-gold { background: hsl(45 95% 52% / .2) !important; color: #f9bf10 !important; }
.sp-medal-silver { background: var(--sp-l2) !important; color: var(--sp-ink) !important; }
.sp-medal-bronze { background: hsl(25 95% 55% / .15) !important; color: #f97a1f !important; }
.sp-medal-trophy, .sp-medal-none { background: var(--sp-l1) !important; color: var(--sp-accent) !important; }

/* recipes */
.sp-recipe { display: flex; align-items: center; gap: 12px; border-radius: 20px; padding: 10px; text-align: left; transition: transform .15s; }
.sp-recipe:active { transform: scale(.98); }
.sp-recipe img, .sp-recipe-ph { width: 80px; height: 80px; flex: 0 0 auto; border-radius: 14px; object-fit: cover; background: var(--sp-l1); color: var(--sp-accent); display: flex; align-items: center; justify-content: center; }
.sp-recipe-ph svg { width: 26px; height: 26px; stroke-width: 1.5; }
.sp-recipe-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-recipe-text b { font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--sp-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-recipe-text small { font-size: 10.5px; color: var(--sp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-meta { margin-top: 4px; display: flex; gap: 12px; font-size: 10.5px; color: var(--sp-muted); }
.sp-recipe-hero { position: relative; margin: 8px 20px 0; height: 208px; border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, #f97a1f, #7c2d12); }
.sp-recipe-hero img { width: 100%; height: 100%; object-fit: cover; }
.sp-recipe-hero .sp-back { position: absolute; left: 12px; top: 12px; }
.sp-stats { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-stats > div { border-radius: 14px; padding: 8px 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--sp-ink); }
.sp-stats > .sp-serves { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; }
.sp-serves button { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; color: var(--sp-accent); }
.sp-serves button svg { width: 14px; height: 14px; }
.sp-serves span { display: inline-flex; align-items: center; gap: 4px; }
.sp-serves span svg { width: 12px; height: 12px; }
.sp-h3row { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 0 8px; }
.sp-h3row h3 { font-size: 15px; font-weight: 700; color: var(--sp-ink); }
.sp-h3row small { font-size: 10.5px; color: var(--sp-muted); }
.sp-ingr { border-radius: 18px; overflow: hidden; }
.sp-ingr-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: left; font-size: 12.5px; color: var(--sp-ink) !important; }
.sp-ingr-row + .sp-ingr-row { border-top: 1px solid hsl(210 15% 90% / .6); }
.sp-tick { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sp-border); display: flex; align-items: center; justify-content: center; }
.sp-ingr-row.on .sp-tick { background: var(--sp-green); box-shadow: none; }
.sp-ingr-row.on .sp-tick::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; }
.sp-ingr-row.on span:last-child { color: var(--sp-muted); text-decoration: line-through; }
.sp-seg { margin-bottom: 12px; display: flex; gap: 4px; }
.sp-seg span { flex: 1; height: 4px; border-radius: 999px; background: var(--sp-l2); }
.sp-seg span.done { background: var(--sp-accent); }
.sp-seg span.cur { background: var(--sp-l3); }
.sp-step { border-radius: 18px; padding: 16px; animation: sp-in-right .3s ease both; }
@keyframes sp-in-right { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.sp-step-n { font-size: 11px; font-weight: 600; color: var(--sp-accent); }
.sp-step p { margin-top: 4px; font-size: 13px; line-height: 1.625; color: var(--sp-ink); }
.sp-step-nav { margin-top: 12px; display: flex; gap: 8px; }
.sp-pill { border-radius: 999px; padding: 8px 16px; font-size: 12px !important; font-weight: 600; color: var(--sp-ink) !important; }
.sp-pill-primary { flex: 1; background: var(--sp-accent) !important; color: #fff !important; text-align: center; }
.sp-pill-light { background: #f5f7f9 !important; color: var(--sp-accent) !important; margin-top: 12px; }
.sp-done { border-radius: 18px; padding: 16px; }
.sp-done b { font-size: 14px; }
.sp-done p { margin-top: 4px; font-size: 11.5px; opacity: .85; }
.sp-tip { margin-top: 12px; border-radius: 14px; background: var(--sp-l1); padding: 10px 14px; font-size: 11.5px; color: var(--sp-ink); }
.sp-panel .sp-cta.neo-glass-btn { margin-top: 12px; border-radius: 999px; padding: 12px 0; font-size: 13px !important; }

/* product line (Gama de produse) */
.sp-pl { display: block; border-radius: 20px; padding: 6px; overflow: hidden; transition: transform .3s ease-out, box-shadow .3s; }
.sp-pl:hover { transform: translateY(-2px); box-shadow: 0 12px 40px hsl(215 25% 15% / .1), 0 0 0 1px hsl(228 100% 71% / .4); }
.sp-pl-img { position: relative; display: block; height: 128px; border-radius: 15px; overflow: hidden; background: linear-gradient(160deg, var(--sp-l2), var(--sp-l1)); }
.sp-pl-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s ease-out; }
.sp-pl:hover .sp-pl-img img { transform: scale(1.04); }
.sp-pl-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, hsl(233 72% 20% / .8), hsl(233 72% 20% / .1), transparent); }
.sp-pl-cap { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; color: #fff; }
.sp-pl-cap b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.sp-pl-foot { display: flex; align-items: center; gap: 8px; padding: 10px 8px 6px; }
.sp-chip { border-radius: 999px; background: var(--sp-l1); padding: 2px 8px; font-size: 9.5px; font-weight: 600; color: var(--sp-ink); box-shadow: 0 0 0 1px hsl(226 96% 89% / .7); }
.sp-chip.mono { font-variant-numeric: tabular-nums; }
.sp-go { margin-left: auto; width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.sp-pl:hover .sp-go { transform: translateX(2px); }

/* feedback */
.sp-fb { padding-top: 8px; }
.sp-fb-card { border-radius: 20px; padding: 20px; }
.sp-fb-title { font-size: 15px; font-weight: 600; color: var(--sp-ink); }
.sp-fb-stats { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; padding: 8px 0; }
.sp-fb-stats b { display: block; font-size: 14px; font-weight: 600; line-height: 1; color: var(--sp-ink); }
.sp-fb-stats small { display: block; margin-top: 4px; font-size: 9px; color: var(--sp-muted); }
.sp-fb-head { display: flex; align-items: center; justify-content: space-between; }
.sp-fb-head b { font-size: 13px; font-weight: 600; color: var(--sp-ink); }
.sp-fb-head small { font-size: 10px; font-weight: 500; color: var(--sp-muted); }
.sp-fb-bar { margin-top: 8px; height: 4px; border-radius: 999px; background: hsl(226 96% 89% / .3); overflow: hidden; }
.sp-fb-bar span { display: block; height: 100%; width: 0; background: hsl(233 100% 59% / .45); transition: width .3s; }
.sp-stars { margin-top: 16px; display: flex; justify-content: center; gap: 6px; }
.sp-stars button { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s; }
.sp-stars button:hover { background: hsl(226 96% 89% / .3); transform: translateY(-1px); }
.sp-stars svg { width: 26px; height: 26px; stroke-width: 1.5; stroke: hsl(215 10% 45% / .35); transition: all .15s; }
.sp-stars button.on svg { fill: hsl(228 100% 71% / .25); stroke: var(--sp-accent); }
.sp-star-label { margin-top: 4px; text-align: center; font-size: 10.5px; font-weight: 500; color: var(--sp-muted); }
.sp-criteria { margin-top: 16px; }
.sp-crit { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 11.5px; font-weight: 500; color: var(--sp-ink); }
.sp-crit + .sp-crit { border-top: 1px solid hsl(210 15% 90% / .4); }
.sp-faces { display: flex; gap: 4px; }
.sp-faces button { width: 32px; height: 32px; border-radius: 999px; font-size: 16px; opacity: .7; transition: all .15s; }
.sp-faces button:hover { background: hsl(226 96% 89% / .3); }
.sp-faces.has button { opacity: .35; filter: grayscale(1); }
.sp-faces.has button.on { opacity: 1; filter: none; background: hsl(226 96% 89% / .4); box-shadow: 0 0 0 1px hsl(228 100% 71% / .3); }
.sp-again-label { margin-top: 16px; font-size: 11.5px; font-weight: 500; color: var(--sp-ink); }
.sp-again { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sp-again button { height: 40px; border-radius: 12px; font-size: 11px !important; font-weight: 500; background: hsl(0 0% 100% / .5); color: var(--sp-muted) !important; }
.sp-again button:hover { background: hsl(226 96% 89% / .3); }
.sp-again button.on { background: hsl(226 96% 89% / .4); color: var(--sp-ink) !important; box-shadow: 0 0 0 1px hsl(228 100% 71% / .3); }
.sp-submit { margin-top: 20px; width: 100%; height: 44px; border-radius: 12px; font-size: 12px !important; font-weight: 600; color: #fff !important; }
.sp-submit:disabled { opacity: .4; cursor: default; }
.sp-submit:not(:disabled):hover { filter: brightness(1.05); }
.sp-thanks { text-align: center; padding: 24px; animation: sp-rise .4s ease both; }
.sp-thanks-ic { margin: 0 auto; width: 48px; height: 48px; border-radius: 999px; background: hsl(226 96% 89% / .3); color: var(--sp-accent); display: flex; align-items: center; justify-content: center; }
.sp-thanks-ic svg { width: 24px; height: 24px; }
.sp-thanks b { display: block; margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--sp-ink); }
.sp-thanks p { margin-top: 4px; font-size: 11px; opacity: .85; }

@media (min-width: 640px) {
  .sp-body { background: radial-gradient(120% 80% at 50% -10%, #f8f9fb 0%, #e6e9ed 60%, #d6dbe1 100%); }
  .sp { background: var(--sp-bg); box-shadow: 0 32px 80px hsl(215 25% 15% / .12); }
}
@media (prefers-reduced-motion: reduce) {
  .sp *, .sp-panel { animation: none !important; transition: none !important; }
}

/* ---- "Nutriție" panel (smart-nutrition.html): the prototype's nutrition table + expandable rows ---- */
.neo-liquid {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(90% 70% at 10% -10%, hsl(0 0% 100% / .45) 0%, hsl(0 0% 100% / 0) 55%),
    radial-gradient(70% 80% at 110% 120%, hsl(228 100% 71% / .55) 0%, hsl(228 100% 71% / 0) 60%),
    linear-gradient(135deg, hsl(228 100% 71% / .88) 0%, hsl(233 100% 59% / .78) 55%, hsl(233 100% 59% / .9) 100%);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .55), inset 0 -10px 24px -14px hsl(233 72% 20% / .35), 0 18px 36px -18px hsl(233 100% 59% / .4);
}
.neo-liquid::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, hsl(0 0% 100% / 0) 30%, hsl(0 0% 100% / .22) 42%, hsl(0 0% 100% / 0) 54%); }
.neo-liquid > * { position: relative; }
.neo-glass-pill { background: hsl(0 0% 100% / .18); border: 1px solid hsl(0 0% 100% / .35); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.sp-nt { margin-top: 8px; border-radius: 22px; overflow: hidden; padding: 0 !important; border: 0 !important; }
.sp-nt-head { border-radius: 22px; padding: 16px 20px 20px; }
.sp-nt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-nt-ttl { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; opacity: .8; }
.sp-nt-badge { border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 600; }
.sp-nt-tabs { display: flex; border-radius: 999px; padding: 2px; }
.sp-nt-tabs button { border-radius: 999px; padding: 4px 12px; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; opacity: .7;
  transition: opacity .2s, background-color .3s var(--sp-ease), box-shadow .3s var(--sp-ease); }
.sp-nt-tabs button.on { opacity: 1; background: hsl(0 0% 100% / .25); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .45), 0 2px 8px hsl(222 47% 11% / .12); }
.sp-nt-tabs button:active { transform: scale(.95); }
.sp-nt-energy { margin-top: 12px; display: flex; align-items: center; gap: 16px; }
.sp-nt-ring { position: relative; width: 76px; height: 76px; flex: 0 0 auto; }
.sp-nt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); stroke-width: 7; }
.sp-nt-ring circle { fill: none; stroke: currentColor; }
.sp-nt-ring circle.bg { stroke-opacity: .18; }
.sp-nt-ring circle.fg { stroke-linecap: round; transition: stroke-dashoffset .5s var(--sp-ease); }
.sp-nt-ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sp-nt-ring b { font-size: 15px; font-weight: 700; line-height: 1; }
.sp-nt-ring small { margin-top: 2px; font-size: 8.5px; opacity: .75; }
.sp-nt-kcal { display: flex; align-items: baseline; gap: 4px; }
.sp-nt-kcal b { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sp-nt-kcal span { font-size: 13px; font-weight: 600; opacity: .8; }
.sp-nt-kj { margin-top: 4px; font-size: 11.5px; opacity: .75; }
.sp-nt-rows { padding: 0 16px; }
.sp-nt-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.sp-nt-row + .sp-nt-row { border-top: 1px solid hsl(220 20% 88% / .6); }
.sp-nt-ic, .sp-acc-ic { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 12px; background: var(--sp-l1); color: var(--sp-accent); display: flex; align-items: center; justify-content: center; }
.sp-nt-ic svg, .sp-acc-ic svg { width: 16px; height: 16px; stroke-width: 1.75; }
.sp-nt-main { min-width: 0; flex: 1; }
.sp-nt-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sp-nt-line span { font-size: 12.5px; font-weight: 600; }
.sp-nt-line b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-nt-bar { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.sp-nt-bar > span { height: 4px; flex: 1; overflow: hidden; border-radius: 999px; background: hsl(220 14% 93%); }
.sp-nt-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(100deg, var(--sp-accent), hsl(239 84% 67%)); transition: width .5s var(--sp-ease); }
.sp-nt-bar small { font-size: 10px; color: var(--sp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-nt-bar em { font-style: normal; }
.sp-nt-note { border-top: 1px solid hsl(220 20% 88% / .6); background: hsl(220 14% 96% / .4); padding: 8px 16px; font-size: 9.5px; line-height: 1.35; color: var(--sp-muted); }

.sp-accs { border-radius: 18px; overflow: hidden; padding: 0 !important; }
.sp-acc + .sp-acc { border-top: 1px solid hsl(0 0% 100% / .8); }
.sp-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; transition: background-color .2s; }
.sp-acc summary::-webkit-details-marker { display: none; }
.sp-acc summary:hover { background: hsl(0 0% 100% / .4); }
.sp-acc-t { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sp-acc-t b { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: hsl(222 32% 14%); }
.sp-acc-t small { font-size: 10px; color: hsl(220 20% 45%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-acc-n { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: hsl(220 35% 32%); }
.sp-acc .sp-dot { width: 10px; height: 10px; flex: 0 0 auto; }
.sp-acc .sp-dot.sm { width: 8px; height: 8px; display: inline-block; }
.sp-dot-orange { background: #f26334 !important; }
.sp-dot-yellow { background: #fbb034 !important; }
.sp-dot-green { background: var(--sp-green) !important; }
.sp-acc-chev { width: 14px !important; height: 14px !important; color: var(--sp-muted); transition: transform .25s var(--sp-ease); }
.sp-acc[open] .sp-acc-chev { transform: rotate(180deg); }
.sp-acc-body { padding: 4px 16px 12px 60px; }
.sp-acc[open] .sp-acc-body { animation: sp-acc-in .25s var(--sp-ease); }
@keyframes sp-acc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sp-acc-body p { font-size: 10.5px; line-height: 1.55; white-space: pre-line; }
/* a long name ("Fructe cu coajă lemnoasă (nuci) și derivatele lor") wraps in its own column; the value
   ("Poate conține" + dot) stays on one line, aligned with the name's first line */
.sp-acc-fact { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: 10.5px; line-height: 1.4; padding: 4px 0; }
.sp-acc-fact span:first-child { min-width: 0; flex: 1 1 auto; font-weight: 500; overflow-wrap: anywhere; }
.sp-acc-fact span:last-child { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--sp-muted); }
.sp-fine-note { padding: 16px 4px 0; font-size: 10px; color: var(--sp-muted); }

/* ---- "Sustenabilitate" panel (smart-packaging.html): indicator, tiles, components, bins ---- */
.sp-pk { margin-top: 8px; border-radius: 18px; padding: 20px; }
.sp-label-in { padding: 0 0 10px; }
.sp-pk-list ~ .sp-label-in, .sp-pk-tiles + .sp-label-in { padding-top: 18px; }
.sp-pk-score { display: flex; align-items: center; gap: 16px; }
.sp-pk-ring { position: relative; width: 84px; height: 84px; flex: 0 0 auto; border-radius: 999px; padding: 4px;
  background: linear-gradient(145deg, #fff, var(--sp-l1)); box-shadow: inset 0 1px 0 #fff, 0 12px 26px -12px hsl(233 100% 59% / .45); }
.sp-pk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); stroke-width: 5; }
.sp-pk-ring circle { fill: none; }
.sp-pk-ring circle.bg { stroke: var(--tone-soft, hsl(233 100% 59% / .1)); }
.sp-pk-ring circle.fg { stroke: var(--tone, var(--sp-accent)); stroke-linecap: round; filter: drop-shadow(0 0 2px var(--tone-soft)); }
.sp-pk-ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sp-pk-ring b { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.sp-pk-ring small { margin-top: 2px; font-size: 7.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--sp-label); }
.sp-pk-parts { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sp-pk-level { align-self: flex-start; border-radius: 999px; background: var(--sp-accent); color: #fff; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.sp-pk-bar { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; font-size: 11px; }
.sp-pk-bar span { font-weight: 500; color: var(--sp-sub); }
.sp-pk-bar b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sp-ink); }
.sp-pk-bar i, .sp-pk-share { grid-column: 1 / -1; display: block; height: 4px; border-radius: 999px; background: hsl(233 100% 59% / .1); overflow: hidden; }
.sp-pk-bar em, .sp-pk-share em { display: block; height: 100%; border-radius: 999px; background: linear-gradient(100deg, var(--sp-accent), hsl(239 84% 67%)); }
/* score colour bands (the prototype's): excellent green, good light green, moderate orange, poor red */
.sp-tone-excellent { --tone: #1fad6b; --tone-soft: hsl(152 70% 40% / .15); }
.sp-tone-good { --tone: #7ac143; --tone-soft: hsl(94 52% 51% / .15); }
.sp-tone-moderate { --tone: #f26334; --tone-soft: hsl(15 88% 58% / .15); }
.sp-tone-poor { --tone: #ef4343; --tone-soft: hsl(0 84% 60% / .15); }
.sp-pk-score .sp-pk-ring { box-shadow: inset 0 1px 0 #fff, 0 12px 26px -12px var(--tone, hsl(233 100% 59% / .45)); }
.sp-pk-bar[class*="sp-tone-"] i { background: var(--tone-soft); }
.sp-pk-bar[class*="sp-tone-"] em { background: var(--tone); }
.sp-pk-scale { position: relative; margin-top: 18px; }
.sp-pk-scale i { display: block; height: 8px; border-radius: 999px; opacity: .9;
  background: linear-gradient(90deg, #ef4343, #f26334, #fbb034, #7ac143, #1fad6b); }
.sp-pk-scale span { position: absolute; top: 4px; width: 16px; height: 16px; border-radius: 999px; background: #fff;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--tone), 0 2px 6px hsl(222 47% 11% / .25); }
.sp-pk-src, .sp-pk-missing { margin-top: 12px; font-size: 10px; line-height: 1.4; color: var(--sp-muted); }
.sp-pk-missing { margin-top: 0; font-size: 11.5px; color: var(--sp-sub); }
.sp-pk-tiles { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-pk-tile { border-radius: 16px; background: hsl(0 0% 100% / .7); padding: 12px; box-shadow: inset 0 1px 0 #fff, 0 6px 16px -12px hsl(233 50% 30% / .35); }
/* declared carbon footprint (Sustenabilitate › Amprentă de carbon) */
.sp-co2 { display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 14px 16px; }
.sp-co2-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: hsl(152 70% 40% / .12); color: var(--sp-green); }
.sp-co2-ic svg { width: 20px; height: 20px; }
.sp-co2-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-co2-v { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.sp-co2-v b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.sp-co2-v span { font-size: 12px; font-weight: 600; color: var(--sp-ink); }
.sp-co2-v small, .sp-co2-t > small { font-size: 11px; color: var(--sp-muted); }
.sp-co2-km { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--sp-sub); }
.sp-co2-km svg { width: 15px; height: 15px; }
.sp-pk-ic { width: 28px; height: 28px; border-radius: 10px; background: var(--sp-l1); color: var(--sp-accent); display: flex; align-items: center; justify-content: center; }
.sp-pk-ic svg { width: 14px; height: 14px; }
.sp-pk-tile b { margin-top: 8px; display: block; font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--sp-ink); }
.sp-pk-tile small { margin-top: 4px; display: block; font-size: 10px; line-height: 1.35; color: var(--sp-sub); }
.sp-pk-list { border-radius: 16px; background: hsl(0 0% 100% / .6); padding: 0 14px; }
.sp-pk-part { padding: 10px 0; }
.sp-pk-part + .sp-pk-part { border-top: 1px solid hsl(220 20% 88% / .5); }
.sp-pk-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-pk-name { min-width: 0; font-size: 12.5px; }
.sp-pk-name b { font-weight: 600; }
.sp-pk-name span { color: var(--sp-sub); }
.sp-pk-name small { display: block; font-size: 10px; color: var(--sp-sub); }
.sp-pk-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; background: hsl(220 14% 93%); padding: 2px 8px;
  font-size: 9.5px; font-weight: 600; color: var(--sp-muted); white-space: nowrap; }
.sp-pk-pill i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.sp-pk-pill.ok { background: hsl(152 70% 40% / .1); color: var(--sp-green); }
.sp-pk-share { margin-top: 6px; }
.sp-bin { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.sp-bin + .sp-bin { border-top: 1px solid hsl(0 0% 100% / .8); }
.sp-bin-dot { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; box-shadow: inset 0 -3px 0 hsl(0 0% 0% / .12); }
.sp-bin-yellow { background: #f5c400; }
.sp-bin-blue { background: #1e6fd9; }
.sp-bin-green { background: #1fad6b; }
.sp-bin-residual { background: #6b7280; }
.sp-method { margin-top: 16px; font-size: 10.5px; color: var(--sp-muted); }
.sp-method summary { cursor: pointer; font-weight: 600; color: var(--sp-accent); list-style: none; }
.sp-method summary::-webkit-details-marker { display: none; }
.sp-method p { margin-top: 8px; line-height: 1.55; }

/* "Ghid de reciclare": one glassy card per bin, as the prototype's "Unde reciclezi?" */
.sp-rc-own { margin-top: 8px; }
.sp-rc-own p { margin-top: 6px; font-size: 12px; line-height: 1.5; white-space: pre-line; }
.sp-rc-list { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.sp-rc { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; color: var(--sp-text); }
.sp-rc::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: hsl(0 0% 100% / .35);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
.sp-rc-blob { position: absolute; z-index: -2; border-radius: 999px; filter: blur(36px); }
.sp-rc-blob.a { left: -32px; top: -40px; width: 160px; height: 160px; }
.sp-rc-blob.b { right: -40px; top: 16px; width: 144px; height: 144px; }
.sp-rc-yellow .sp-rc-blob.a { background: #f5c400; } .sp-rc-yellow .sp-rc-blob.b { background: #ffe27a; } .sp-rc-yellow { --rc: #a67c00; box-shadow: 0 8px 20px -14px hsl(45 100% 35% / .45); }
.sp-rc-blue .sp-rc-blob.a { background: #1e6fd9; } .sp-rc-blue .sp-rc-blob.b { background: #8ab8f5; } .sp-rc-blue { --rc: #1e6fd9; box-shadow: 0 8px 20px -14px hsl(214 76% 48% / .45); }
.sp-rc-green .sp-rc-blob.a { background: #1fad6b; } .sp-rc-green .sp-rc-blob.b { background: #8fdcb6; } .sp-rc-green { --rc: #13824f; box-shadow: 0 8px 20px -14px hsl(152 70% 30% / .45); }
.sp-rc-residual .sp-rc-blob.a { background: #6b7280; } .sp-rc-residual .sp-rc-blob.b { background: #c4c8cf; } .sp-rc-residual { --rc: #4b5563; box-shadow: 0 8px 20px -14px hsl(220 9% 30% / .45); }
.sp-rc-in { padding: 20px; }
.sp-rc-head { display: flex; align-items: center; gap: 12px; }
.sp-rc-ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 999px; background: hsl(0 0% 100% / .6); color: var(--rc);
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px hsl(222 40% 20% / .35); }
.sp-rc-ic svg { width: 20px; height: 20px; stroke-width: 1.75; }
.sp-rc-head b { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.sp-rc-head small { display: block; margin-top: 2px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; opacity: .65; }
.sp-rc-rows { margin-top: 14px; border-radius: 18px; background: hsl(0 0% 100% / .5); padding: 0 12px; box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .8); }
.sp-rc-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; font-size: 11px; font-weight: 500; }
.sp-rc-row + .sp-rc-row { border-top: 1px solid hsl(0 0% 100% / .7); }
.sp-rc-row small { display: block; font-size: 10px; font-weight: 400; color: var(--sp-sub); }
.sp-rc-check { margin-top: 1px; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 999px; background: hsl(0 0% 100% / .8); color: var(--rc);
  display: flex; align-items: center; justify-content: center; }
.sp-rc-check svg { width: 10px; height: 10px; stroke-width: 3; }
.sp-rc-tip { color: var(--sp-sub); }
.sp-rc-tip .sp-rc-check svg { stroke-width: 2.5; }