@import url("/assets/tokens.css");
.shopping-mission { display: grid; gap: 8px; padding: 16px; margin-bottom: 16px; background: #f5f6ed; border-radius: 12px; font-size: 14px; }
.shopping-mission select, [data-demand-form] input, [data-demand-form] select { min-height: 44px; width: 100%; border: 1px solid #d8dcd0; border-radius: 8px; padding: 10px; font: inherit; background: white; }
[data-demand-form], [data-demand-form] label { display: grid; gap: 12px; }
[data-demand-feedback] { margin: 16px 0; }

/* Catalog and shared sheets use native scrolling and dialog focus management. */
.catalog-pack { display: none; }
body:has(dialog[open]) { overflow: hidden; }
.catalog-sheet { box-sizing: border-box; width: min(100%, 580px); max-width: 100%; max-height: calc(100dvh - env(safe-area-inset-top) - 16px); margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-floating); overscroll-behavior: contain; }
.catalog-sheet::backdrop { background: rgb(18 16 14 / 40%); }
.catalog-sheet > header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; background: white; z-index: 1; border-bottom: 1px solid var(--color-border-subtle); }
.catalog-sheet h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.catalog-sheet > header button { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--color-surface-subtle); }
.catalog-sheet svg { width: 22px; height: 22px; }
.catalog-sheet__body { padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); font-size: 15px; line-height: 1.5; }
.catalog-sheet .button { width: 100%; min-height: 48px; margin-top: 12px; }
.catalog-sheet .button--primary { background: var(--color-accent-action); color: white; }
.catalog-sheet p { overflow-wrap: anywhere; }
.replacement-original { display: grid; grid-template-columns: 56px 1fr auto; gap: 4px 12px; padding: 16px; margin-top: 12px; border-radius: 16px; background: var(--color-surface-subtle); }
.replacement-original > .replacement-choice__image { grid-row: 1 / 3; height: 56px; }
.replacement-original small { grid-column: 2 / -1; color: var(--color-ink-muted); }
.replacement-choice { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding-block: 20px; border-bottom: 1px solid var(--color-border-subtle); }
.replacement-choice__image { height: 80px; border-radius: 14px; overflow: hidden; background: var(--color-surface-subtle); }
.replacement-choice__image .image-media { width: 100%; height: 100%; }
.replacement-choice h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.35; }
.replacement-choice p { margin: 4px 0; font-size: 14px; }
.replacement-choice strong { font-size: 20px; }
.replacement-saving { display: inline-block; color: var(--color-success); font-size: 14px; font-weight: 600; }
.replacement-choice__details { grid-column: 1 / -1; }
.replacement-choice summary, .help-topic summary { min-height: 44px; align-content: center; cursor: pointer; font-weight: 600; }
.replacement-trip { color: var(--color-ink-secondary); font-weight: 600; }
.help-topic { padding-block: 12px; border-bottom: 1px solid var(--color-border-subtle); }
.help-topic p { color: var(--color-ink-secondary); }
.report-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--color-ink-secondary); font: inherit; font-size: 14px; cursor: pointer; }
.report-action svg { width: 18px; height: 18px; }
.sd-compare-store-list > .report-action { justify-self: end; margin-top: -8px; }
[data-report-form] > label { display: grid; gap: 8px; font-weight: 600; }
[data-report-form] select { width: 100%; min-height: 48px; border: 1px solid var(--color-border); border-radius: 12px; padding: 8px 12px; background: white; font: inherit; }
[data-report-form] fieldset { border: 0; padding: 0; margin: 20px 0; }
[data-report-form] legend { font-weight: 600; margin-bottom: 8px; }
.report-reason { display: flex; align-items: center; min-height: 48px; gap: 12px; padding: 8px 0; }
.report-reason input { width: 20px; height: 20px; accent-color: var(--color-accent-action); }
.report-thanks { color: var(--color-success); font-size: 20px; font-weight: 600; }
[data-alternatives-open], [data-alternative-lock], .basket-undo { min-height: 44px; border: 0; background: transparent; color: var(--color-accent-action); font: inherit; font-size: 14px; cursor: pointer; text-align: start; }
[data-alternatives-open] { display: flex; align-items: center; gap: 8px; font-weight: 600; }
[data-alternatives-open] svg { width: 16px; height: 16px; }
[data-alternative-lock] { color: var(--color-ink-muted); }
[data-alternative-slot] { display: block !important; }
.sd-basket-item.list-row:has([data-alternative-slot]) { height: auto; }
.sd-basket-item__body:has([data-alternative-slot]) { gap: 4px; }
.basket-undo { margin-bottom: 12px; }
[data-search-page-controls] { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 20px 24px; }
[data-search-page-controls] p { margin-right: auto; color: var(--color-ink-muted); }

/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 */
/* Hallmark · genre: editorial · macrostructure: ecosystem-index · theme: Pagauk locked · enrichment: product imagery · nav: DESIGN bottom navigation · footer: none · contrast: pass (40–41) · mobile: pass (34, 49, 50–57) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-width: 20rem;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
}

html {
  overflow-x: clip;
}

body {
  min-height: 100dvh;
  overflow-x: clip;
  font-size: var(--text-body);
  line-height: 1.5;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

html {
  scrollbar-color: var(--color-border) var(--color-bg);
}

input {
  caret-color: var(--color-accent-action);
}

button,
input,
a {
  font: inherit;
}

[hidden] {
  display: none !important;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
a[href] {
  touch-action: manipulation;
  user-select: none;
}

a {
  color: inherit;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

:focus-visible {
  border-radius: var(--radius-xs);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-surface);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

.app-shell {
  width: 100%;
  max-width: var(--content-width);
  min-height: 100dvh;
  margin-inline: auto;
  background: var(--color-bg);
}

.screen {
  min-width: 0;
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--screen-padding-x)
    calc(var(--bottom-nav-height) + var(--space-8) + env(safe-area-inset-bottom));
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--control-height);
  gap: var(--space-4);
}

.screen-header--stacked {
  align-items: flex-start;
  padding-block: var(--space-2) var(--space-3);
}

.screen-intro {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}

.screen-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.23;
  overflow-wrap: anywhere;
}

.shell-state {
  display: grid;
  min-height: 18rem;
  align-content: center;
  gap: var(--space-3);
  color: var(--color-ink-secondary);
}

.shell-state h2,
.shell-state p {
  max-width: 55ch;
  margin: 0;
}

.shell-state h2 {
  color: var(--color-ink);
  font-size: var(--text-section);
}

.discover-header,
.context-header,
.header-actions,
.brand-lockup > span,
.section-heading,
.product-price,
.catalog-note,
.why-card {
  display: flex;
  align-items: center;
}

.discover-header,
.context-header,
.section-heading {
  justify-content: space-between;
}

.discover-header,
.context-header {
  min-height: var(--control-height);
  margin-block-end: var(--space-4);
}

.discover-intro {
  margin-block: 0 var(--space-5);
}

.discover-intro h1,
.discover-intro p {
  margin: 0;
}

.discover-intro h1 {
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.discover-intro p {
  margin-block-start: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}

.brand-lockup {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.brand-lockup > strong {
  font-size: var(--text-page-title);
  letter-spacing: -0.035em;
  line-height: 1;
}

.brand-lockup > strong::after {
  color: var(--color-accent);
  content: ".";
}

.brand-lockup > span {
  gap: var(--space-1);
  margin-block-start: var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
}

.brand-lockup svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent);
}

.interest-rail {
  display: flex;
  gap: var(--space-1);
  margin: 0 calc(var(--screen-padding-x) * -1) var(--space-5);
  padding-inline: var(--screen-padding-x);
  overflow-x: auto;
  scrollbar-width: none;
}

.interest-rail::-webkit-scrollbar {
  display: none;
}

.interest-chip {
  display: inline-flex;
  min-height: 2.125rem;
  align-items: center;
  padding-inline: var(--space-3);
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.interest-chip.is-active {
  border-color: var(--color-accent-border);
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  font-weight: 600;
}

.header-actions {
  gap: var(--space-1);
}

.language-toggle {
  display: grid;
  width: auto;
  height: 2.75rem;
  padding-inline: 12px;
  place-items: center;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  font-size: var(--text-label);
  font-weight: 700;
  cursor: pointer;
}

.icon-button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.icon-button svg {
  width: 1.375rem;
  height: 1.375rem;
}

.icon-button.is-saved {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.icon-button.is-saved svg {
  fill: currentColor;
}

.icon-button:active,
.button:active,
.product-card:active,
.hero-card:active {
  transform: translateY(1px);
}

:where(button:not(:disabled), a[href]):active {
  opacity: 0.82;
  transform: scale(0.97);
}

.discovery-section {
  display: grid;
  gap: var(--space-3);
  margin-block-end: var(--space-8);
}

.discovery-section--hero {
  margin-block-end: var(--space-6);
}

.section-heading {
  min-width: 0;
  align-items: flex-end;
  gap: var(--space-3);
}

.section-heading > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.section-heading h2,
.section-heading p {
  margin: 0;
}

.section-heading h2 {
  font-size: var(--text-section);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.section-heading > span,
.section-heading p,
.section-heading > a {
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}

.section-heading > span,
.section-heading > a {
  flex: 0 0 auto;
  white-space: nowrap;
}

.section-heading > a {
  font-weight: 600;
  text-underline-offset: 0.2em;
}

.hero-card {
  position: relative;
  display: grid;
  min-height: 11.25rem;
  overflow: clip;
  border: 0;
  border-radius: var(--radius-xl);
  background: #f9f7ec;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-out);
}

.hero-card__copy {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  width: 62%;
  min-width: 0;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) 0 var(--space-5) var(--space-5);
}

.hero-card__eyebrow {
  color: var(--color-ink);
  font-size: var(--text-body-sm);
  font-weight: 700;
}

.hero-card__copy > strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: -0.035em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hero-card__price,
.product-card__price,
.product-price strong,
.history-card .section-heading > strong {
  font-variant-numeric: tabular-nums;
}

.hero-card__price {
  margin-block-start: var(--space-2);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.hero-card__reason {
  max-width: 15rem;
  color: var(--color-accent-hover);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.35;
}

.hero-card__meta {
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
}

.hero-card__image,
.product-card__image,
.product-hero__image {
  display: grid;
  min-width: 0;
  place-items: center;
}

.image-media {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.image-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.image-media > * {
  grid-area: 1 / 1;
}

.image-media:not(.is-missing) > .image-fallback {
  opacity: 0;
}

.hero-card__image img,
.product-card__image img,
.product-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-card__image {
  position: absolute;
  z-index: var(--z-base);
  inset: 0 0 0 auto;
  width: 48%;
  height: 100%;
}

.hero-card__image::before {
  content: none;
}

.hero-card__image img {
  position: relative;
  z-index: calc(var(--z-base) + 1);
  max-height: none;
  padding: var(--space-3);
}

.hero-card__image .image-fallback {
  width: 4rem;
}

.image-fallback {
  display: grid;
  width: 60%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-accent);
  font-size: var(--text-page-title);
  font-weight: 700;
}

.badge {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.badge--accent {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

.badge--info {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.product-rail {
  display: grid;
  grid-auto-columns: var(--rail-card-width);
  grid-auto-flow: column;
  gap: var(--space-3);
  margin-inline: calc(var(--screen-padding-x) * -1);
  padding-inline: var(--screen-padding-x);
  padding-block: 2px var(--space-3);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: inline proximity;
}

.product-rail::-webkit-scrollbar {
  display: none;
}

.product-card {
  position: relative;
  display: grid;
  min-width: 0;
  scroll-snap-align: start;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-out);
}

.product-card > a {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: inherit;
  text-decoration: none;
}

.product-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: clip;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.product-card__image img {
  padding: var(--space-2);
}

.product-card__image > .badge {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: calc(var(--z-raised) + 1);
}

.product-card__content {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  padding-block-start: var(--space-2);
}

.product-card__content > strong {
  display: -webkit-box;
  min-height: 2.5em;
  overflow: hidden;
  font-size: var(--text-card-title);
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-card__price {
  margin-block-start: var(--space-1);
  font-size: var(--text-section);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.product-card__store {
  max-width: 100%;
  margin-block-start: 0;
  overflow: hidden;
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-note {
  align-items: flex-start;
  gap: var(--space-3);
  margin-block: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-ink);
}

.catalog-note > span,
.why-card__icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.catalog-note svg,
.why-card svg {
  width: 1.125rem;
  height: 1.125rem;
}

.catalog-note h2,
.catalog-note p,
.why-card h2,
.why-card p {
  margin: 0;
}

.catalog-note h2,
.why-card h2 {
  font-size: var(--text-body);
}

.catalog-note p,
.why-card p {
  margin-block-start: var(--space-1);
  color: var(--color-ink-secondary);
  font-size: var(--text-body-sm);
}

.comparison-error .button {
  margin-block-start: var(--space-3);
}

.comparison-findings {
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-info-soft);
}

.finding-list {
  display: grid;
  overflow: clip;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.finding-row {
  display: grid;
  min-height: 5rem;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-block-end: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.finding-row:last-child {
  border-block-end: 0;
}

.finding-row__image {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  overflow: clip;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}

.finding-row__image img {
  width: 100%;
  height: 100%;
  padding: var(--space-1);
  object-fit: contain;
}

.finding-row__copy,
.finding-row__price {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.finding-row__copy small {
  color: var(--color-info);
  font-size: var(--text-label);
  font-weight: 700;
}

.finding-row__copy strong {
  overflow: hidden;
  font-size: var(--text-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finding-row__copy span {
  overflow: hidden;
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finding-row__price {
  align-items: flex-end;
  gap: var(--space-1);
  font-variant-numeric: tabular-nums;
}

.finding-row__price svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-info);
}

.bundle-preview .bundle-card {
  background: var(--color-surface-muted);
}

.product-hero {
  display: grid;
  gap: var(--space-2);
}

.product-hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-height: 22rem;
  margin-block-end: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.product-hero__image img {
  max-width: 21rem;
  padding: var(--space-3);
}

.product-hero > .badge {
  justify-self: start;
}

.product-hero h1 {
  min-width: 0;
  margin: var(--space-1) 0 0;
  font-size: var(--text-product-title);
  line-height: 1.17;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.product-meta {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}

.product-price {
  align-items: baseline;
  gap: var(--space-2);
  margin-block: var(--space-2);
}

.product-price strong {
  font-size: var(--text-price-xl);
  line-height: 1.15;
}

.product-price span {
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}

.price-freshness,
.comparison-freshness,
.coverage-note {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}

.price-freshness time,
.comparison-freshness time {
  display: flex;
  flex-direction: column;
}

.price-freshness small,
.comparison-freshness small {
  margin-block-start: 0.125rem;
  color: var(--color-disabled);
  font-size: var(--text-caption);
}

.price-freshness {
  margin-block: calc(var(--space-2) * -1) var(--space-1);
}

.button {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-inline: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-control);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.button svg {
  width: 1rem;
  height: 1rem;
}

.button--primary {
  width: 100%;
  margin-block-start: var(--space-2);
  background: var(--color-accent-action);
  color: var(--color-accent-ink);
}

.button--secondary {
  width: fit-content;
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
}

.why-card {
  align-items: flex-start;
  gap: var(--space-3);
  margin-block: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-ink);
}

.history-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
}

.history-card .section-heading > strong {
  font-size: var(--text-card-title);
}

.price-chart {
  width: 100%;
  height: auto;
}

.price-chart__grid {
  stroke: var(--color-border-subtle);
  stroke-width: 1;
}

.price-chart__line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.chart-empty {
  min-height: 5.5rem;
  margin: 0;
  align-content: center;
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}

.related {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}

.related-list {
  border-block: 1px solid var(--color-border-subtle);
}

.related-list a {
  display: flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-block-end: 1px solid var(--color-border-subtle);
  font-weight: 600;
  text-decoration: none;
}

.related-list a:last-child {
  border-block-end: 0;
}

.related-list svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.related-list a > span,
.related-list small {
  display: flex;
}

.related-list a > span {
  min-width: 0;
  flex-direction: column;
}

.related-list small {
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  font-weight: 400;
}

.search-label {
  display: block;
  margin-block: var(--space-4) var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: 600;
}

.search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  height: var(--search-height);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-surface-subtle);
  color: var(--color-ink-muted);
}

.search-field:focus-within {
  border-color: var(--color-ink-secondary);
  outline-color: var(--color-focus);
  background: var(--color-surface);
  color: var(--color-ink);
}

.search-field svg {
  width: 1.125rem;
  height: 1.125rem;
}

.search-field input {
  min-width: 0;
  height: 100%;
  padding-inline: var(--space-2) var(--space-6);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-body);
}

.search-field input::placeholder {
  color: var(--color-ink-muted);
}

.search-helper {
  display: block;
  min-height: 1lh;
  margin-block-start: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}

.search-helper[data-error="true"] {
  color: var(--color-accent-hover);
}

.filter-rail {
  display: flex;
  gap: var(--space-2);
  margin-inline: calc(var(--screen-padding-x) * -1);
  padding: var(--space-3) var(--screen-padding-x) var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-rail::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  flex: 0 0 auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-ink);
  font-size: var(--text-label);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.filter-chip.is-active {
  border-color: var(--color-accent-action);
  background: var(--color-accent-action);
  color: var(--color-accent-ink);
}

.filter-chip:active {
  transform: translateY(1px);
}

.result-heading {
  min-height: 2rem;
  align-content: center;
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}

.search-results {
  display: grid;
  gap: var(--space-2);
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 6.5rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
}

.search-row__main {
  display: grid;
  min-width: 0;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.search-row__image {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  overflow: clip;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}

.search-row__image img {
  width: 100%;
  height: 100%;
  padding: var(--space-1);
  object-fit: contain;
}

.search-row__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.search-row__copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-body);
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.search-row__copy > span,
.search-row__copy small {
  overflow: hidden;
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-row__copy b {
  margin-block-start: var(--space-1);
  font-size: var(--text-body-sm);
  font-variant-numeric: tabular-nums;
}

.empty-state {
  display: grid;
  min-height: 15rem;
  align-content: center;
  justify-items: start;
  gap: var(--space-2);
}

.empty-state h2,
.empty-state p {
  max-width: 55ch;
  margin: 0;
}

.empty-state p {
  color: var(--color-ink-secondary);
}

.context-header--title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.context-header--title h1 {
  min-width: 0;
  margin: 0;
  font-size: var(--text-card-title);
  text-align: center;
  overflow-wrap: anywhere;
}

.compare-summary {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.compare-summary > span {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  overflow: clip;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.compare-summary img {
  width: 100%;
  height: 100%;
  padding: var(--space-2);
  object-fit: contain;
}

.compare-summary h2,
.compare-summary p {
  margin: 0;
}

.compare-summary h2 {
  font-size: var(--text-card-title);
  line-height: 1.25;
}

.compare-summary p {
  margin-block-start: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}

.best-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-md);
  background: var(--color-success-soft);
  color: var(--color-ink);
}

.best-price div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.best-price span,
.best-price small {
  color: var(--color-success);
  font-size: var(--text-body-sm);
}

.best-price strong {
  font-size: var(--text-card-title);
}

.best-price > b {
  font-size: var(--text-price-xl);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.best-price--single {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-muted);
}

.best-price--single span,
.best-price--single small {
  color: var(--color-ink-secondary);
}

.comparison-freshness {
  margin-block: var(--space-2) var(--space-4);
}

.coverage-note {
  margin-block-start: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-ink-secondary);
}

.store-list {
  margin-block: var(--space-6);
  border-block: 1px solid var(--color-border-subtle);
}

.store-row {
  display: grid;
  min-height: 4.5rem;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  border-block-end: 1px solid var(--color-border-subtle);
}

.store-row:last-child {
  border-block-end: 0;
}

.store-mark {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  font-size: var(--text-body-sm);
  font-weight: 700;
}

.store-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.store-row small {
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
}

.store-row > b {
  font-size: var(--text-card-title);
  font-variant-numeric: tabular-nums;
}

.alternative-comparisons {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-8);
}

.alternative-comparisons > p {
  margin: 0;
  color: var(--color-ink-secondary);
  font-size: var(--text-body-sm);
}

.alternative-list {
  border-block: 1px solid var(--color-border-subtle);
}

.alternative-row {
  display: grid;
  min-height: 5rem;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  border-block-end: 1px solid var(--color-border-subtle);
  text-decoration: none;
}

.alternative-row:last-child {
  border-block-end: 0;
}

.alternative-row__image {
  display: grid;
  width: 3rem;
  height: 3rem;
  overflow: clip;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}

.alternative-row__image img {
  width: 100%;
  height: 100%;
  padding: var(--space-1);
  object-fit: contain;
}

.alternative-row__copy,
.alternative-row__price {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.alternative-row__copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.alternative-row__copy small,
.alternative-row__price small {
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
}

.alternative-row__price {
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.market-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-block-end: var(--space-6);
}

.market-context > div {
  display: flex;
  min-width: 0;
  min-height: 6rem;
  justify-content: center;
  flex-direction: column;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  color: var(--color-ink);
}

.market-context span,
.market-context small {
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
}

.market-context strong {
  margin-block: var(--space-1);
  font-size: var(--text-card-title);
  font-variant-numeric: tabular-nums;
}

.button--external {
  width: 100%;
  background: var(--color-external);
  color: var(--color-accent-ink);
}

.bundle-filters {
  margin-block-start: var(--space-3);
}

.bundle-list {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
}

.bundle-card {
  position: relative;
  display: grid;
  min-height: 13rem;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 1.15fr);
  overflow: clip;
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  color: var(--color-ink);
}

.bundle-card__copy {
  position: relative;
  z-index: calc(var(--z-raised) + 1);
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2) var(--space-4) var(--space-4);
}

.bundle-card__copy > span {
  color: var(--color-accent-hover);
  font-size: var(--text-label);
  font-weight: 700;
}

.bundle-card__copy h2,
.bundle-card__copy p {
  margin: 0;
}

.bundle-card__copy h2 {
  font-size: var(--text-section);
  line-height: 1.25;
}

.bundle-card__copy p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-ink-secondary);
  font-size: var(--text-body-sm);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bundle-card__copy > strong {
  margin-block-start: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 82%);
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;
}

.bundle-card__copy small {
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
}

.bundle-card__visual {
  position: relative;
  min-width: 0;
  min-height: 13rem;
}

.bundle-card__visual a {
  position: absolute;
  display: grid;
  width: 66%;
  height: 76%;
  place-items: center;
  inset-block-end: 4%;
  inset-inline-end: -1%;
  transform: rotate(4deg);
}

.bundle-card__visual a:nth-child(2) {
  z-index: calc(var(--z-base) + 1);
  width: 62%;
  height: 68%;
  inset-block-end: 2%;
  inset-inline-end: 39%;
  transform: rotate(-7deg);
}

.bundle-card__visual a:nth-child(3) {
  z-index: calc(var(--z-base) + 2);
  width: 54%;
  height: 58%;
  inset-block-end: -1%;
  inset-inline-end: 18%;
  transform: rotate(1deg);
}

.bundle-card__visual img {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: var(--space-1);
  object-fit: contain;
}

.bundle-card--reverse {
  grid-template-columns: minmax(9rem, 1.15fr) minmax(0, 1fr);
}

.bundle-card--reverse .bundle-card__visual {
  grid-column: 1;
  grid-row: 1;
}

.bundle-card--reverse .bundle-card__copy {
  grid-column: 2;
  padding-inline: var(--space-2) var(--space-4);
}

.saved-results {
  margin-block-start: var(--space-4);
}

.empty-state__action {
  width: fit-content;
}

button:disabled,
.button[aria-disabled="true"],
input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.search-field:has(input:disabled) {
  background: var(--color-surface-muted);
  color: var(--color-disabled);
}

.button--external:focus-visible {
  outline-color: var(--color-accent);
}

.skeleton,
.skeleton-line {
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.hero-skeleton {
  min-height: 10.5rem;
  margin-block: var(--space-5);
}

.skeleton-line {
  width: 100%;
  height: var(--space-4);
  margin-block-start: var(--space-3);
}

.skeleton-line--short {
  width: 68%;
}

.bottom-nav {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex;
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: space-around;
  padding: 4px max(16px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  padding-inline: max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-left, 0px));
  border-block-start: 1px solid #f3f4f6;
  background: var(--color-surface);
}

.strategy-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 18px;
}

.strategy-card {
  margin-block-end: 22px;
  background: var(--color-accent-soft);
}

.strategy-card h2,
.strategy-card p {
  margin: 4px 0 0;
}

.strategy-card.is-partial {
  border-color: var(--color-warning);
  background: #fffaf0;
}

.list-products {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.list-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 10px 0;
}

.list-row__image .image-media {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-surface-subtle);
}

.list-row__image img {
  padding: 4px;
}

.list-row__copy {
  min-width: 0;
}

.list-row__copy strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.list-row__copy b {
  display: block;
  margin-block-start: 2px;
  font-size: var(--text-body-sm);
}

.list-row small {
  display: block;
  color: var(--color-ink-muted);
}

.quantity-stepper {
  display: grid;
  grid-template-columns: 30px 22px 30px;
  align-items: center;
  text-align: center;
}

.quantity-stepper button {
  min-width: 30px;
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--color-surface-muted);
  font-size: 1rem;
}

.strategy-card strong {
  display: block;
  font-size: 1.75rem;
  margin: 6px 0;
}

.strategy-card small {
  display: block;
  color: var(--color-ink-muted);
}

.nav-item {
  display: flex;
  min-width: 0;
  min-height: 63px;
  width: 64px;
  width: clamp(3rem, 16vw, 4rem);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  color: var(--color-ink-muted);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.nav-item svg {
  width: 24px;
  height: 24px;
}

.nav-item[aria-current="page"] {
  background: rgb(243 59 78 / 10%);
  color: var(--color-accent-action);
}

.nav-item:active {
  transform: translateY(1px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

noscript {
  display: block;
  padding: var(--space-4);
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

@media (hover: hover) and (pointer: fine) {
  .nav-item:hover,
  .icon-button:hover {
    color: var(--color-ink);
  }

  .icon-button:hover {
    background: var(--color-surface-subtle);
  }

  .product-card:hover,
  .hero-card:hover {
    transform: translateY(-1px);
  }

  .finding-row:hover,
  .interest-chip:hover {
    background: var(--color-surface-subtle);
  }

  .interest-chip.is-active:hover {
    background: var(--color-accent-soft);
  }

  .button--primary:hover {
    background: var(--color-accent-hover);
  }

  .button--secondary:hover {
    background: var(--color-surface-subtle);
  }

  .filter-chip:hover:not(.is-active) {
    background: var(--color-surface-muted);
  }
}

.choice-reason { font-size: 0.8rem; line-height: 1.45; margin: 8px 0; }
[data-choice-hide], [data-choice-undo] { min-height: 44px; padding: 8px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: var(--dur-micro) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-micro) !important;
  }
}

/* Superdesign Discover v3 */
.screen--discover {
  min-height: 100dvh;
  height: auto;
  overflow: visible;
  padding: 0 0 calc(var(--bottom-nav-height) + 32px + env(safe-area-inset-bottom));
  background: #fff;
  color: #1c1c1c;
}

.screen--discover a {
  text-decoration: none;
}

.sd-app-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 56px 20px 16px;
  padding-block-start: var(--shell-top-inset);
  background: #fff;
}

.sd-app-header__brand {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
}

.sd-app-header__brand strong {
  color: #1c1c1c;
  font-size: 20px;
  letter-spacing: -0.06em;
  line-height: 1;
}

.sd-app-header__brand strong span {
  color: #f33b4e;
}

.sd-app-header__brand > span {
  color: #7a7a7a;
  font-size: 12px;
  font-weight: 500;
}

.sd-app-header button,
.sd-app-header a {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: #1c1c1c;
}

.sd-app-header__location {
  gap: 4px;
  font-size: 17px;
  font-weight: 500;
}

.sd-app-header__location svg {
  width: 18px;
  height: 18px;
}

.sd-app-header__actions {
  display: flex;
  gap: 16px;
}

.sd-app-header__actions svg {
  width: 22px;
  height: 22px;
}

.sd-app-header__notification {
  position: relative;
}

.sd-app-header__notification > span {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #f33b4e;
}

.sd-discover-greeting {
  padding: 8px 20px 24px;
}

.sd-discover-greeting h1,
.sd-discover-greeting p,
.sd-section-heading h2,
.sd-section-heading p,
.sd-product-card h3,
.sd-product-card p,
.sd-recipe-teaser h3,
.sd-recipe-teaser p {
  margin: 0;
}

.sd-discover-greeting h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 4px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.sd-discover-greeting h1 span {
  font-size: 24px;
}

.sd-discover-greeting p {
  color: #7a7a7a;
  font-size: 15px;
}

.sd-breakfast-hero {
  position: relative;
  display: flex;
  height: 180px;
  margin: 0 20px 32px;
  overflow: hidden;
  border-radius: 24px;
  padding: 24px;
  background: #f9f7ec;
}

.sd-breakfast-hero__copy {
  z-index: var(--z-base);
  display: flex;
  width: 66.666%;
  align-items: flex-start;
  flex-direction: column;
}

.sd-breakfast-hero__copy strong {
  margin-block-end: 8px;
  font-size: 20px;
  font-weight: 700;
}

.sd-breakfast-hero__copy > span:not(.sd-breakfast-hero__arrow) {
  max-width: 132px;
  font-size: 14px;
  line-height: 1.4;
}

.sd-breakfast-hero__arrow,
.sd-recipe-teaser__arrow {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(28 28 28 / 10%);
}

.sd-breakfast-hero__arrow {
  margin-block-start: 16px;
}

.sd-breakfast-hero__arrow svg,
.sd-recipe-teaser__arrow svg {
  width: 18px;
  height: 18px;
}

.sd-breakfast-hero__media {
  position: absolute;
  inset-inline-end: -16px;
  inset-block-end: 0;
  width: clamp(140px, 46vw, 180px);
  height: 140px;
}

.sd-breakfast-hero__media .image-media,
.sd-breakfast-hero__media img {
  width: 100%;
  height: 100%;
}

.sd-breakfast-hero__media img {
  border-start-start-radius: 999px;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.9;
}

.sd-breakfast-hero__media .image-fallback {
  width: 100%;
  height: 100%;
  border-start-start-radius: 999px;
  border-start-end-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.sd-price-drop-section,
.sd-saved-drop-section,
.sd-discover-rail-section,
.sd-recipe-section {
  margin-block-end: 32px;
}

.sd-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-block-end: 16px;
  padding-inline: 20px;
}

.sd-section-heading h2 {
  margin-block-end: 2px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.sd-section-heading p {
  color: #7a7a7a;
  font-size: 13px;
}

.sd-section-heading > a {
  margin-block-end: 2px;
  color: #f33b4e;
  font-size: 14px;
  font-weight: 500;
}

.sd-price-drop-section .sd-section-heading,
.sd-discover-rail-section .sd-section-heading {
  align-items: flex-start;
}

.sd-product-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 20px 8px;
  scrollbar-width: none;
}

.sd-product-rail::-webkit-scrollbar {
  display: none;
}

.sd-product-card {
  flex: 0 0 120px;
  min-width: 120px;
}

.sd-product-card > a {
  display: block;
  text-decoration: none;
}

.sd-product-card__media {
  position: relative;
  display: flex;
  height: 130px;
  align-items: center;
  justify-content: center;
  margin-block-end: 12px;
  overflow: hidden;
  border-radius: 16px;
  padding: 4px;
  background: #fff;
}

.sd-product-card__media .image-media {
  width: 100%;
  height: 100%;
}

.sd-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
}

.sd-product-card__media .image-fallback {
  width: 80px;
  height: 80px;
}

.sd-product-card__badge {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: var(--z-raised);
  border-radius: 4px;
  padding: 2px 6px;
  background: #f33b4e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.sd-product-card h3 {
  display: -webkit-box;
  height: 40px;
  margin-block-end: 4px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sd-product-card > strong,
.sd-product-card > a > strong {
  display: block;
  margin-block-end: 4px;
  font-size: 16px;
  font-weight: 700;
}

.sd-product-card p {
  color: #7a7a7a;
  font-size: 12px;
}

.sd-product-card__detail {
  display: block;
  margin-block-start: 4px;
  color: #7a7a7a;
  font-size: 11px;
  line-height: 1.35;
}

.sd-recipe-section .sd-section-heading {
  padding-inline: 0;
}

.sd-recipe-section {
  padding-inline: 20px;
}

.sd-recipe-teaser {
  position: relative;
  display: flex;
  min-height: 142px;
  gap: 16px;
  overflow: hidden;
  border-radius: 24px;
  padding: 16px;
  background: #f9f4f0;
}

.sd-recipe-teaser__copy {
  min-width: 0;
  flex: 1;
  padding-block: 8px;
}

.sd-recipe-teaser h3 {
  display: -webkit-box;
  margin-block-end: 8px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sd-recipe-teaser p {
  display: flex;
  gap: 8px;
  margin-block-end: 12px;
  color: #7a7a7a;
  font-size: 12px;
}

.sd-recipe-teaser__copy strong {
  font-size: 15px;
  font-weight: 500;
}

.sd-recipe-teaser__media {
  position: relative;
  display: flex;
  width: 110px;
  flex: 0 0 110px;
  align-items: center;
  justify-content: center;
}

.sd-recipe-teaser__media > .image-media {
  width: 110px;
  height: 110px;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(28 28 28 / 12%);
}

.sd-recipe-teaser__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-recipe-teaser__media .image-fallback {
  width: 100%;
  height: 100%;
}

.sd-recipe-teaser__arrow {
  position: absolute;
  inset-inline-end: -4px;
  inset-block-end: -8px;
  box-shadow: 0 4px 10px rgb(28 28 28 / 14%);
}

/* Superdesign Product v2 */
.screen[data-screen="product"] {
  padding: 0 0 var(--bottom-clearance);
}

.sd-product-toolbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--shell-top-inset) 20px 16px;
  background: #fff;
}

.sd-product-toolbar > div {
  display: flex;
  gap: 2px;
}

.sd-product-toolbar button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: #1c1c1c;
}

.sd-product-toolbar button:first-child {
  margin-inline-start: -12px;
}

.sd-product-toolbar svg {
  width: 24px;
  height: 24px;
}

.sd-product-toolbar [data-save] {
  color: #f33b4e;
}

.sd-product-toolbar [data-save].is-saved svg {
  fill: currentColor;
}

.sd-product-media {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-block-end: 24px;
  padding-inline: 20px;
}

.sd-product-gallery {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y pinch-zoom;
}

.sd-product-gallery::-webkit-scrollbar { display: none; }

.sd-product-media__frame {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 4 / 5;
  align-items: center;
  justify-content: center;
}

.sd-product-media__frame .image-media {
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.sd-product-media__frame img {
  width: 100%;
  height: 100%;
  padding: 10px 14px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.sd-product-media__frame .image-fallback {
  width: calc(100% - 96px);
  height: calc(100% - 60px);
  border-radius: 0;
}

.sd-product-media__badge {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 0;
  z-index: var(--z-raised);
  border-radius: 6px;
  padding: 5px 8px;
  background: #f33b4e;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.sd-product-media__dots {
  display: flex;
  gap: 6px;
}

.sd-product-media__dots button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
}

.sd-product-media__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dedede;
}

.sd-product-media__dots [aria-current="true"] span {
  background: #1c1c1c;
}

.sd-product-info,
.sd-product-insight,
.sd-product-details {
  padding-inline: 20px;
}

.sd-product-basket-button { scroll-margin-block: 24px 110px; }

.sd-product-info h1,
.sd-product-info p,
.sd-product-insight h2,
.sd-product-details h2,
.sd-product-details dl,
.sd-product-details dd {
  margin: 0;
}

.sd-product-info h1 {
  margin-block-end: 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.sd-product-info > p {
  margin-block-end: 18px;
  color: #7a7a7a;
  font-size: 14px;
}

.sd-product-info__price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 24px;
}

.sd-product-info__price > strong {
  font-size: 28px;
  line-height: 1;
}

.sd-product-info__price > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  color: #7a7a7a;
  font-size: 14px;
}

.sd-product-info__price small {
  font-size: 11px;
}

.sd-product-info__price > b {
  border-radius: 3px;
  padding: 2px 5px;
  background: #f2f9f5;
  color: #14833d;
  font-size: 11px;
}

.sd-product-basket-button {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: #f33b4e;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 5px 14px rgb(243 59 78 / 18%);
}

.sd-product-basket-button.is-added {
  background: #dc2f42;
}

.sd-product-basket-button.quantity-stepper {
  gap: 4px;
}

.sd-product-basket-button.quantity-stepper button {
  display: grid;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  border: 4px solid #dc2f42;
  border-radius: 50%;
  background: #fff;
  color: #1c1c1c;
  font-size: 16px;
}

.sd-product-basket-button.quantity-stepper b {
  width: 24px;
  color: #fff;
  font-size: 16px;
  text-align: center;
}

.sd-product-insight,
.sd-product-details {
  margin-block-start: 28px;
}

.sd-product-insight h2,
.sd-product-details h2 {
  margin-block-end: 14px;
  font-size: 15px;
}

.sd-product-insight > div {
  display: grid;
  grid-template-columns: 24px auto 1fr;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.sd-product-insight > div > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #e8f5e9;
  color: #4caf50;
}

.sd-product-insight svg {
  width: 14px;
  height: 14px;
}

.sd-product-insight small {
  color: #7a7a7a;
}

.sd-product-details dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  border-block-end: 1px solid #f3f4f6;
  font-size: 14px;
}

.sd-product-details dt {
  color: #7a7a7a;
}

.sd-product-details dd {
  max-width: 60%;
  font-weight: 500;
  text-align: end;
}

.sd-product-details > a {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 12px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.sd-product-details > a svg {
  width: 18px;
  height: 18px;
  color: #a3a3a3;
}

/* Superdesign Shopping Basket v3 */
.screen[data-screen="shopping-list"] {
  min-height: 100dvh;
  padding: 0 0 calc(300px + env(safe-area-inset-bottom));
  background: #f8f8f8;
}

.sd-basket-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: var(--shell-top-inset) 20px 12px;
  background: #fff;
}

.sd-basket-header h1 {
  margin: 0;
  font-size: 18px;
  text-align: center;
}

.sd-basket-header button {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: #1c1c1c;
}

.sd-basket-header button:last-child {
  justify-content: flex-end;
  color: #7a7a7a;
  font-size: 14px;
}

.sd-basket-header svg {
  width: 24px;
  height: 24px;
}

.sd-basket-canvas {
  min-height: calc(100dvh - 112px);
  padding: 24px 20px calc(186px + env(safe-area-inset-bottom));
  background: #f8f8f8;
}

.sd-basket-items.list-products {
  display: flex;
  gap: 16px;
  flex-direction: column;
  margin: 0;
}

.sd-basket-item.list-row {
  display: flex;
  height: 108px;
  min-height: 108px;
  align-items: stretch;
  gap: 16px;
  border: 0;
  border-radius: 20px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(28 28 28 / 6%);
}

.sd-basket-item__image .image-media {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 16px;
  background: #f6f6f6;
}

.sd-basket-item__image img {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.sd-basket-item__image .image-fallback {
  width: 64px;
  height: 64px;
}

.sd-basket-item__body {
  display: flex;
  min-width: 0;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
}

.sd-basket-item__body > div:first-child,
.sd-basket-item__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sd-basket-item__body > div:first-child > strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sd-basket-item__body > div:first-child > a {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.sd-basket-item__body > div:first-child > a > strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sd-basket-item__body [data-list-remove] {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  margin: -12px -12px 0 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #a3a3a3;
}

.sd-basket-item__body [data-list-remove] svg {
  width: 19px;
  height: 19px;
}

.sd-basket-item__footer {
  align-items: flex-end;
}

.sd-basket-item__footer > span {
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
}

.sd-basket-item__footer small {
  display: block;
  overflow: hidden;
  color: #7a7a7a;
  font-size: 12px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-basket-item__body > b {
  display: none;
}

.sd-basket-item .quantity-stepper {
  display: flex;
  height: 44px;
  align-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f6f6f6;
}

.sd-basket-item .quantity-stepper button {
  display: grid;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  border: 4px solid #f6f6f6;
  border-radius: 50%;
  background: #fff;
  font-size: 16px;
}

.sd-basket-item .quantity-stepper b {
  width: 20px;
  font-size: 14px;
  text-align: center;
}

.sd-basket-summary.strategy-card {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: var(--bottom-clearance);
  z-index: calc(var(--z-sticky) - 1);
  width: min(100%, var(--content-width));
  transform: translateX(-50%);
  margin: 0;
  border: 0;
  border-block-start: 1px solid #f3f4f6;
  border-radius: 0;
  padding: 16px 20px 20px;
  background: #fff;
  box-shadow: 0 -4px 20px rgb(28 28 28 / 4%);
}

.sd-basket-summary > div {
  display: flex;
  min-height: 42px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sd-basket-summary > div > span {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: 500;
}

.sd-basket-summary > div small {
  color: #7a7a7a;
  font-size: 11px;
  font-weight: 400;
}

.sd-basket-summary.strategy-card > div > strong {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

.sd-basket-summary > button,
.sd-basket-empty__action {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  background: #f33b4e;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.sd-basket-summary > button svg {
  width: 18px;
  height: 18px;
}

.sd-basket-empty {
  display: grid;
  min-height: calc(100dvh - 215px);
  place-content: center;
  gap: 8px;
  padding: 24px 20px;
  text-align: center;
}

.sd-basket-empty h2,
.sd-basket-empty p {
  margin: 0;
}

.sd-basket-empty p {
  color: #7a7a7a;
}

.sd-basket-empty__action {
  margin-block-start: 14px;
  padding-inline: 20px;
}

/* Superdesign Recipes v1 */
.screen[data-screen="recipes"] {
  min-height: 100dvh;
  padding: 0 0 calc(190px + env(safe-area-inset-bottom));
  background: #fff;
}

.sd-recipes-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--shell-top-inset) 20px 16px;
  background: #fff;
}

.sd-recipes-header h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 44px;
}

.sd-recipes-header button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: #1c1c1c;
}

.sd-recipes-header svg {
  width: 22px;
  height: 22px;
}

.sd-recipes-canvas {
  padding-block-end: 24px;
}

.sd-recipe-filters.filter-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin: 0;
  padding: 8px 20px 24px;
  scrollbar-width: none;
}

.sd-recipe-filters::-webkit-scrollbar {
  display: none;
}

.sd-recipe-filters > button {
  border: 0;
  cursor: pointer;
  font: inherit;
  min-width: max-content;
  min-height: 44px;
  border-radius: 999px;
  padding: 9px 16px;
  background: #f6f6f6;
  color: #1c1c1c;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.sd-recipe-filters > .is-active {
  background: #f33b4e;
  color: #fff;
}

.sd-recipes-today {
  padding-inline: 20px;
}

.sd-recipes-today > h2,
.sd-recipes-today > p,
.sd-recipe-feature h3,
.sd-recipe-feature p,
.sd-recipe-row p {
  margin: 0;
}

.sd-recipes-today > h2 {
  margin-block-end: 2px;
  font-size: 20px;
  letter-spacing: -0.015em;
}

.sd-recipes-today > p {
  margin-block-end: 20px;
  color: #7a7a7a;
  font-size: 14px;
}

.sd-recipe-feature {
  display: block;
  overflow: hidden;
  margin-block-end: 24px;
  border-radius: 24px;
  background: #f6f6f6;
  color: #1c1c1c;
  text-decoration: none;
}

.sd-recipe-feature__image {
  display: grid;
  width: 100%;
  height: 180px;
  overflow: hidden;
  place-items: center;
  border-radius: 0;
  background: #f0f0f0;
}

.sd-recipe-feature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-recipe-feature__image .image-fallback {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.sd-recipe-feature > div {
  padding: 20px;
}

.sd-recipe-feature h3 {
  margin-block-end: 8px;
  font-size: 20px;
  line-height: 1.3;
}

.sd-recipe-feature p {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #7a7a7a;
  font-size: 14px;
}

.sd-recipe-feature p i,
.sd-recipe-row p i {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #7a7a7a;
}

.sd-recipe-feature footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 16px;
}

.sd-recipe-feature footer > strong {
  font-size: 15px;
}

.sd-recipe-feature footer > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(28 28 28 / 10%);
}

.sd-recipe-feature footer svg {
  width: 18px;
  height: 18px;
}

.sd-recipe-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sd-recipe-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: 72px;
  align-items: center;
  gap: 16px;
  color: #1c1c1c;
  text-decoration: none;
}

.sd-recipe-row .image-media {
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  background: #f6f6f6;
}

.sd-recipe-row img,
.sd-recipe-row .image-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-recipe-row strong,
.sd-recipe-row small {
  display: block;
}

.sd-recipe-row strong {
  font-size: 16px;
  line-height: 1.25;
}

.sd-recipe-row p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block: 3px 1px;
  color: #7a7a7a;
  font-size: 13px;
}

.sd-recipe-row small {
  color: #7a7a7a;
  font-size: 13px;
}

.sd-recipe-row.is-empty strong {
  color: #7a7a7a;
}

.sd-recipe-feature.is-loading > div {
  min-height: 142px;
}

.sd-recipe-feature.is-loading .sd-recipe-feature__image,
.sd-recipe-feature.is-loading > div {
  background: linear-gradient(90deg, #f3f3f3 25%, #fafafa 50%, #f3f3f3 75%);
  background-size: 200% 100%;
  animation: recipe-loading 1.2s linear infinite;
}

@keyframes recipe-loading {
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-recipe-feature.is-loading .sd-recipe-feature__image,
  .sd-recipe-feature.is-loading > div {
    animation: none;
  }
}

/* Superdesign Recipe Detail v4 */
.screen[data-screen="recipes"]:has(.sd-recipe-detail) {
  position: relative;
  padding: 0 0 calc(190px + env(safe-area-inset-bottom));
}

.sd-recipe-detail { padding-block-end: 110px; }

.sd-recipe-back {
  position: absolute;
  inset-block-start: var(--shell-top-inset);
  inset-inline-start: 20px;
  z-index: var(--z-raised);
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #1c1c1c;
  box-shadow: 0 4px 14px rgb(28 28 28 / 16%);
}

.sd-recipe-back svg { width: 24px; height: 24px; }

.sd-recipe-detail__hero {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: #f6f6f6;
}

.sd-recipe-detail__hero > .image-media,
.sd-recipe-detail__hero img,
.sd-recipe-detail__hero .image-fallback {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.sd-recipe-detail__hero img { object-fit: cover; }

.sd-recipe-detail__hero > div {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding: 20px;
  background: linear-gradient(to top, rgb(0 0 0 / 60%), transparent 60%);
  color: #fff;
}

.sd-recipe-detail__hero h1,
.sd-recipe-detail__hero p,
.sd-recipe-cost small,
.sd-recipe-cost strong,
.sd-recipe-ingredients h2,
.sd-recipe-instructions h2 { margin: 0; }

.sd-recipe-detail__hero h1 {
  margin-block-end: 8px;
  font-size: 28px;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.sd-recipe-detail__hero p {
  display: flex;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}

.sd-recipe-detail__hero p span { display: flex; align-items: center; gap: 6px; }
.sd-recipe-detail__hero p svg { width: 18px; height: 18px; }

.sd-recipe-cost {
  display: flex;
  min-height: 90px;
  align-items: center;
  justify-content: space-between;
  margin: 24px 20px 32px;
  border: 1px solid rgb(243 59 78 / 10%);
  border-radius: 24px;
  padding: 16px 20px;
  background: #fcecee;
  color: #f33b4e;
}

.sd-recipe-cost div { display: flex; flex-direction: column; }
.sd-recipe-cost small { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.sd-recipe-cost strong { font-size: 24px; line-height: 1.1; }

.sd-recipe-cost > span {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
  background: #f33b4e;
  color: #fff;
}

.sd-recipe-cost svg { width: 24px; height: 24px; }

.sd-recipe-ingredients,
.sd-recipe-instructions { margin-block-end: 32px; padding-inline: 20px; }

.sd-recipe-ingredients > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 14px;
}

.sd-recipe-ingredients h2,
.sd-recipe-instructions h2 { font-size: 18px; line-height: 1.35; }
.sd-recipe-ingredients > header > span { color: #7a7a7a; font-size: 13px; font-weight: 500; }

.sd-recipe-ingredient {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  min-height: 68px;
  align-items: center;
  gap: 16px;
}

.sd-recipe-ingredient > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: #f6f6f6;
  color: #7a7a7a;
}

.sd-recipe-ingredient__image .image-media { width: 100%; height: 100%; }

.sd-recipe-ingredient svg { width: 18px; height: 18px; }
.sd-recipe-ingredient div { min-width: 0; }

.sd-recipe-ingredient strong,
.sd-recipe-ingredient small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-recipe-ingredient strong { font-size: 15px; font-weight: 500; }
.sd-recipe-ingredient small { color: #7a7a7a; font-size: 12px; }
.sd-recipe-ingredient b { font-size: 15px; }
.sd-recipe-instructions h2 { margin-block-end: 20px; }

.sd-recipe-instructions ol {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  counter-reset: recipe-step;
  list-style: none;
}

.sd-recipe-instructions li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 16px;
  counter-increment: recipe-step;
  font-size: 15px;
  line-height: 1.55;
}

.sd-recipe-instructions li::before {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #f6f6f6;
  color: #7a7a7a;
  content: counter(recipe-step);
  font-size: 12px;
  font-weight: 700;
}

.sd-recipe-action {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: var(--bottom-clearance);
  z-index: calc(var(--z-sticky) + 1);
  width: min(calc(100% - 40px), calc(var(--content-width) - 40px));
  transform: translateX(-50%);
}

.sd-recipe-action button {
  display: flex;
  width: 100%;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 16px;
  background: #f33b4e;
  color: #fff;
  box-shadow: 0 8px 20px rgb(243 59 78 / 24%);
  font-size: 16px;
  font-weight: 700;
}

.sd-recipe-action button svg { width: 20px; height: 20px; }
.sd-recipe-action button:disabled { background: #a3a3a3; }

/* Superdesign Profile v1 */
.screen[data-screen="profile"] {
  min-height: 100dvh;
  padding: 0 0 calc(var(--bottom-nav-height) + var(--space-8) + env(safe-area-inset-bottom));
  background: #fff;
}

.sd-profile-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--shell-top-inset) 20px 16px;
  background: #fff;
}

.sd-profile-header h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.025em;
  line-height: 44px;
}

.sd-profile-header button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center end;
  border: 0;
  padding: 0;
  background: transparent;
  color: #1c1c1c;
}

.sd-profile-header svg {
  width: 24px;
  height: 24px;
}

.sd-profile-canvas {
  padding-block-end: 24px;
}

.sd-profile-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 20px 40px;
}

.sd-profile-user > div {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sd-profile-avatar {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  place-items: center;
  border-radius: 50%;
  background: #f33b4e;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgb(28 28 28 / 12%);
}

.sd-profile-user h2,
.sd-profile-user p,
.sd-loyalty-section h2 {
  margin: 0;
}

.sd-profile-user h2 {
  margin-block-end: 2px;
  font-size: 18px;
  line-height: 1.2;
}

.sd-profile-user p {
  color: #7a7a7a;
  font-size: 14px;
}

.sd-profile-user > span {
  color: #a3a3a3;
}

.sd-profile-user > span svg {
  width: 20px;
  height: 20px;
}

.sd-loyalty-section {
  margin-block-end: 32px;
}

.sd-loyalty-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 20px;
  padding-inline: 20px;
}

.sd-loyalty-section h2 {
  font-size: 16px;
}

.sd-loyalty-section header > span {
  color: #f33b4e;
  font-size: 14px;
  font-weight: 500;
}

.sd-loyalty-tiles {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 20px 8px;
  scrollbar-width: none;
}

.sd-loyalty-tiles::-webkit-scrollbar {
  display: none;
}

.sd-loyalty-tile {
  display: flex;
  min-width: 64px;
  align-items: center;
  gap: 8px;
  flex-direction: column;
  border: 0;
  padding: 0;
  background: transparent;
  color: #1c1c1c;
}

.sd-loyalty-mark {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 1px 3px rgb(28 28 28 / 12%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.sd-loyalty-tile.is-selected .sd-loyalty-mark {
  box-shadow: 0 0 0 3px #fcecee, 0 1px 3px rgb(28 28 28 / 12%);
  transform: translateY(-2px);
}

.sd-loyalty-tile:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

.sd-loyalty-mark--lidl {
  border: 4px solid #fff000;
  background: #0050aa;
}

.sd-loyalty-mark--rimi {
  background: #e21937;
  font-style: italic;
}

.sd-loyalty-mark--maxima {
  background: #003b7a;
  font-size: 24px;
}

.sd-loyalty-mark--iki {
  background: #008738;
  font-size: 18px;
}

.sd-loyalty-tile small {
  font-size: 12px;
  font-weight: 500;
}

.sd-profile-menu {
  padding-inline: 20px;
}

.sd-profile-row {
  display: grid;
  width: 100%;
  min-height: 57px;
  grid-template-columns: 24px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 16px;
  border: 0;
  border-block-end: 1px solid #f3f4f6;
  padding: 0;
  background: transparent;
  color: #1c1c1c;
  text-align: start;
  text-decoration: none;
}

.sd-profile-row__icon svg {
  width: 22px;
  height: 22px;
}

.sd-profile-row > strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-profile-row > small {
  color: #7a7a7a;
  font-size: 14px;
  white-space: nowrap;
}

.sd-profile-row__arrow {
  color: #a3a3a3;
}

.sd-profile-row__arrow svg {
  width: 18px;
  height: 18px;
}

.sd-profile-row--language {
  grid-template-columns: 24px minmax(0, 1fr) auto;
}

.sd-profile-row--language > small { display: none; }

.sd-profile-row--language .language-toggle {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .sd-loyalty-mark {
    transition: none;
  }
}

/* Superdesign completion: search, comparisons, and shared draft details */
.sd-discover-greeting p + p {
  margin-block-start: 2px;
  font-size: 14px;
  font-weight: 500;
}



.sd-product-card__actions {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 8px;
  margin-block-start: 10px;
}

.sd-product-card__basket,
.sd-product-card__save {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 12px;
}

.sd-product-card__basket { background: #f33b4e; color: #fff; }
.sd-product-card__basket.is-added { background: #dc2f42; }
.sd-product-card__basket { position: relative; }
.sd-product-card__quantity { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; display: grid; min-width: 20px; height: 20px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #1c1c1c; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.sd-product-card__save { background: #f6f6f6; color: #1c1c1c; }
.sd-product-card__save.is-saved { color: #f33b4e; }
.sd-product-card__save.is-saved svg { fill: currentColor; }
.sd-product-card__basket svg,
.sd-product-card__save svg { width: 19px; height: 19px; }

.sd-product-alternatives {
  margin-block: 32px 16px;
}

.sd-product-alternatives > header {
  padding-inline: 20px;
  margin-block-end: 16px;
}

.sd-product-alternatives h2,
.sd-product-alternatives p { margin: 0; }
.sd-product-alternatives h2 { font-size: 18px; line-height: 1.3; }
.sd-product-alternatives p { color: #7a7a7a; font-size: 13px; }

.screen[data-screen="search"], .screen[data-screen="bundles"]:has(#collection-products) {
  min-height: 100dvh;
  padding: 0 0 var(--bottom-clearance);
  background: #fff;
}

.sd-search-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-block-end: 1px solid #f9f9f9;
  padding: var(--shell-top-inset) 20px 10px;
  background: #fff;
}

.sd-search-header > button,
.sd-search-header > a {
  min-height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #f33b4e;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.sd-search-header > p {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #7a7a7a;
  font-size: 11px;
  font-style: italic;
}

.sd-search-header > p svg { width: 12px; height: 12px; }

.sd-search-field {
  display: grid;
  height: 48px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 2px solid rgb(243 59 78 / 20%);
  border-radius: 16px;
  padding: 0 14px;
  background: #f6f6f6;
}

.sd-search-field:focus-within { border-color: #f33b4e; }
.sd-search-field > svg { width: 20px; height: 20px; color: #f33b4e; }
.sd-search-field input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; }
.sd-search-field input::placeholder { color: #7a7a7a; }
.sd-search-field button { display: grid; width: 40px; height: 40px; place-items: center; border: 0; padding: 0; background: transparent; color: #a3a3a3; }
.sd-search-field button svg { width: 20px; height: 20px; }

.sd-search-categories.filter-rail {
  position: sticky;
  inset-block-start: 126px;
  z-index: calc(var(--z-sticky) - 1);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0;
  border-block-end: 1px solid #f9f9f9;
  padding: 12px 20px;
  background: rgb(255 255 255 / 95%);
  scrollbar-width: none;
}

.sd-search-categories::-webkit-scrollbar { display: none; }
.sd-search-categories .filter-chip { min-width: max-content; min-height: 44px; border: 0; border-radius: 16px; padding: 0 20px; background: #f6f6f6; color: #1c1c1c; font-size: 14px; }
.sd-search-categories .filter-chip.is-active { background: #f33b4e; color: #fff; font-weight: 700; box-shadow: 0 3px 8px rgb(243 59 78 / 18%); }
.sd-search-subcategories { display: flex; gap: 8px; overflow-x: auto; padding: 0 20px 12px; scrollbar-width: none; }
.sd-search-subcategories::-webkit-scrollbar { display: none; }
.sd-search-subcategories .filter-chip { min-width: max-content; min-height: 36px; border: 1px solid #e7e7e7; border-radius: 999px; padding: 0 14px; background: #fff; color: #4a4a4a; font-size: 13px; }
.sd-search-subcategories .filter-chip.is-active { border-color: #f33b4e; color: #f33b4e; font-weight: 700; }

.sd-search-result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
}

.sd-search-result-heading h1 { margin: 0; font-size: 18px; }
.sd-search-result-heading h1 span { color: #a3a3a3; font-weight: 400; }
.sd-search-result-heading button { display: flex; min-height: 44px; align-items: center; gap: 5px; border: 0; padding: 0; background: transparent; color: #7a7a7a; font-size: 14px; }
.sd-search-result-heading svg { width: 17px; height: 17px; }

.sd-search-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  padding: 0 20px 32px;
}

.sd-search-grid .sd-product-card { min-width: 0; flex: none; }
.sd-search-grid .sd-product-card__media { height: auto; aspect-ratio: 1 / 1; }
.sd-search-grid .empty-state { grid-column: 1 / -1; }

.screen[data-screen="compare"] {
  min-height: 100dvh;
  padding: 0 0 calc(210px + env(safe-area-inset-bottom));
  background: #fff;
}

.sd-compare-header,
.sd-basket-compare-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background: #fff;
}

.sd-compare-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: var(--shell-top-inset) 20px 12px;
}

.sd-compare-header h1 { margin: 0; font-size: 17px; text-align: center; }
.sd-compare-header a,
.sd-compare-header button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; padding: 0; background: transparent; }
.sd-compare-header a { margin-inline-start: -12px; }
.sd-compare-header svg { width: 23px; height: 23px; }

.sd-compare-purpose { padding: 12px 20px 10px; }
.sd-compare-purpose p,
.sd-compare-purpose h2 { margin: 0; }
.sd-compare-purpose p { margin-block-end: 4px; color: #f33b4e; font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.sd-compare-purpose h2 { font-size: 22px; letter-spacing: -.025em; line-height: 1.2; }

.sd-compare-product { display: flex; align-items: center; gap: 20px; border-block-end: 1px solid #f3f4f6; padding: 16px 20px; }
.sd-compare-product > span { width: 80px; height: 80px; flex: 0 0 80px; overflow: hidden; border-radius: 16px; padding: 8px; background: #f6f6f6; }
.sd-compare-product > div { min-width: 0; }
.sd-compare-product .image-media,
.sd-compare-product img,
.sd-compare-product .image-fallback { width: 100%; height: 100%; object-fit: contain; }
.sd-compare-product h2,
.sd-compare-product p { margin: 0; }
.sd-compare-product h2 { overflow-wrap: anywhere; font-size: 18px; line-height: 1.25; }
.sd-compare-product p { color: #7a7a7a; font-size: 14px; }

.sd-compare-canvas { padding: 16px 20px 24px; }
.sd-compare-saving { display: flex; align-items: center; gap: 12px; margin-block-end: 24px; border: 1px solid #d1ebd9; border-radius: 16px; padding: 16px; background: #f2f9f5; color: #14833d; }
.sd-compare-saving > span { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 50%; background: #14833d; color: #fff; }
.sd-compare-saving svg { width: 21px; height: 21px; }
.sd-compare-saving strong,
.sd-compare-saving small { display: block; }
.sd-compare-saving strong { font-size: 15px; }
.sd-compare-saving small { opacity: .8; font-size: 12px; }

.sd-compare-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-block-end: 16px; }
.sd-compare-heading h2,
.sd-compare-heading p { margin: 0; }
.sd-compare-heading h2 { font-size: 20px; }
.sd-compare-heading p { color: #7a7a7a; font-size: 13px; text-align: end; }
.sd-compare-heading small { display: block; font-size: 11px; }

.sd-compare-store-list { display: grid; gap: 12px; }
.sd-compare-store { display: grid; min-height: 76px; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid #f1f1f1; border-radius: 16px; padding: 12px 16px; background: #fff; color: #1c1c1c; text-decoration: none; }
.sd-compare-store.is-best { border: 2px solid #14833d; background: #f2f9f5; box-shadow: 0 3px 9px rgb(20 131 61 / 10%); }
.sd-compare-store strong,
.sd-compare-store small,
.sd-compare-store b { display: block; }
.sd-compare-store > div { min-width: 0; }
.sd-compare-store > div small { overflow: hidden; color: #7a7a7a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sd-compare-store.is-best > div small,
.sd-compare-store.is-best > span:last-child { color: #14833d; }
.sd-compare-store > span:last-child { text-align: end; }
.sd-compare-store > span:last-child b { font-size: 18px; }
.sd-compare-store.is-best > span:last-child b { font-size: 20px; }
.sd-compare-store > span:last-child small { color: #7a7a7a; font-size: 10px; font-weight: 700; }

.sd-store-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: #fff; color: #1c1c1c; font-size: 10px; font-style: normal; font-weight: 900; box-shadow: 0 1px 3px rgb(28 28 28 / 10%); }
.sd-store-mark--rimi { background: #e21937; color: #fff; font-style: italic; }
.sd-store-mark--maxima { background: #003b7a; color: #fff; font-size: 16px; }
.sd-store-mark--iki { color: #008738; font-size: 11px; font-style: italic; }
.sd-store-mark--lidl { border: 2px solid #fff000; background: #0050aa; color: #fff; }

.sd-compare-coverage { margin: 16px 0 0; color: #7a7a7a; font-size: 13px; }
.sd-compare-history { margin-block-start: 32px; border-radius: 24px; padding: 20px; background: #f6f6f6; }
.sd-compare-history > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.sd-compare-history h2,
.sd-compare-history p { margin: 0; }
.sd-compare-history h2 { font-size: 20px; }
.sd-compare-history > div > span { border-radius: 8px; padding: 4px 8px; background: #eaf8ee; color: #20733f; font-size: 12px; font-weight: 700; }
.sd-compare-history .price-chart { width: 100%; height: 132px; }
.sd-compare-history > p { color: #7a7a7a; font-size: 12px; }

.sd-compare-action { position: fixed; inset-inline-start: 50%; inset-block-end: var(--bottom-clearance); z-index: calc(var(--z-sticky) + 1); width: min(100%, var(--content-width)); transform: translateX(-50%); padding: 14px 20px; background: rgb(255 255 255 / 94%); }
.sd-compare-basket-button { display: flex; width: 100%; height: 64px; align-items: center; justify-content: center; border: 0; border-radius: 16px; background: #f33b4e; color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 10px 24px rgb(243 59 78 / 28%); }
.sd-compare-basket-button.is-added { background: #dc2f42; }

.sd-basket-header { grid-template-columns: 44px 1fr auto; }
.sd-basket-canvas { padding-block-start: 24px; }
.sd-basket-summary > a { display: flex; width: 100%; min-height: 64px; align-items: center; justify-content: center; gap: 10px; border-radius: 20px; background: #f33b4e; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; box-shadow: 0 9px 22px rgb(243 59 78 / 24%); }
.sd-basket-summary > a svg { width: 22px; height: 22px; }

.sd-basket-compare-header { border-block-end: 1px solid #f1f1f1; padding: var(--shell-top-inset) 20px 12px; }
.sd-basket-compare-header > div { display: flex; align-items: center; gap: 4px; }
.sd-basket-compare-header a { display: grid; width: 44px; height: 44px; place-items: center; margin-inline-start: -8px; }
.sd-basket-compare-header svg { width: 24px; height: 24px; }
.sd-basket-compare-header h1,
.sd-basket-compare-header p { margin: 0; }
.sd-basket-compare-header h1 { font-size: 18px; }
.sd-basket-compare-header p { margin-inline-start: 40px; color: #7a7a7a; font-size: 13px; }
.sd-basket-compare-canvas { padding: 24px 20px calc(292px + env(safe-area-inset-bottom)); background: #f8f8f8; }
.sd-basket-compare-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block-end: 28px; }
.sd-basket-compare-options > button { position: relative; display: flex; min-height: 154px; align-items: flex-start; flex-direction: column; border: 1px solid #ececec; border-radius: 24px; padding: 16px; background: #fff; color: #1c1c1c; text-align: start; box-shadow: 0 1px 3px rgb(28 28 28 / 5%); }
.sd-basket-compare-options > button.is-best { border: 2px solid #f33b4e; background: #fcecee; color: #f33b4e; }
.sd-basket-compare-options > button.is-selected { border-color: var(--color-accent-action); box-shadow: 0 0 0 3px rgb(243 59 78 / 18%), var(--shadow-card); }
.sd-basket-compare-options > button.is-best.is-selected { border-color: #f33b4e; }
.sd-basket-compare-options > button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.sd-basket-compare-options > button > b { position: absolute; inset-block-start: -12px; inset-inline-start: 50%; transform: translateX(-50%); border-radius: 999px; padding: 5px 10px; background: #f33b4e; color: #fff; font-size: 10px; white-space: nowrap; }
.sd-basket-compare-options small { margin-block: 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.sd-basket-compare-options strong { font-size: 20px; }
.sd-basket-compare-options p { margin: 2px 0 0; color: #7a7a7a; font-size: 11px; line-height: 1.25; }
.sd-store-stack { display: flex; min-height: 34px; }
.sd-store-stack .sd-store-mark { width: 32px; height: 32px; margin-inline-start: -7px; border: 2px solid #fff; border-radius: 9px; font-size: 7px; }
.sd-store-stack .sd-store-mark:first-child { margin-inline-start: 0; }

.sd-basket-calculator,
.sd-basket-flow,
.sd-basket-breakdown > div { border: 1px solid #eee; border-radius: 24px; background: #fff; box-shadow: 0 1px 3px rgb(28 28 28 / 5%); }
.sd-basket-calculator { margin-block-end: 28px; padding: 20px; }
.sd-basket-calculator h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 15px; }
.sd-basket-calculator h2 svg { width: 18px; height: 18px; color: #f33b4e; }
.sd-basket-calculator dl { margin: 0; }
.sd-basket-calculator dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 6px; font-size: 14px; }
.sd-basket-calculator dt { color: #7a7a7a; }
.sd-basket-calculator dd { margin: 0; }
.sd-basket-calculator dl > div:last-child { margin-block-start: 8px; border-block-start: 1px solid #eee; padding-block-start: 14px; font-weight: 800; }
.sd-basket-calculator dl > div:last-child dt { color: #1c1c1c; }
.sd-basket-calculator dl > div:last-child dd { border-radius: 999px; padding: 4px 12px; background: #eaf8ee; color: #20733f; font-size: 16px; }

.sd-basket-flow { margin-block-end: 28px; padding: 20px 24px; background: #f9f4f0; text-align: center; }
.sd-basket-flow h2 { margin: 0 0 16px; font-size: 13px; }
.sd-basket-flow > div { display: flex; align-items: center; justify-content: space-between; }
.sd-basket-flow > div > svg { width: 30px; height: 30px; color: #7a7a7a; }
.sd-basket-flow > div > span { flex: 1; margin-inline: 16px; border-block-start: 1px dashed #f33b4e; }

.sd-basket-breakdown h2 { margin: 0 0 14px 4px; color: #7a7a7a; font-size: 13px; letter-spacing: .08em; }
.sd-basket-breakdown > div { overflow: hidden; }
.sd-basket-breakdown table { width: 100%; border-collapse: collapse; text-align: start; }
.sd-basket-breakdown th { padding: 12px; background: #f6f6f6; color: #a3a3a3; font-size: 10px; text-align: start; }
.sd-basket-breakdown th:last-child,
.sd-basket-breakdown td:last-child { text-align: end; }
.sd-basket-breakdown td { border-block-start: 1px solid #f5f5f5; padding: 13px 12px; font-size: 12px; }
.sd-basket-breakdown td:first-child { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-store-label { border-radius: 4px; padding: 2px 5px; background: #777; color: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.sd-store-label--rimi { background: #e21937; }
.sd-store-label--maxima { background: #003b7a; }
.sd-store-label--iki { background: #008738; }
.sd-store-label--lidl { background: #0050aa; }

.sd-basket-compare-actions { position: fixed; inset-inline-start: 50%; inset-block-end: var(--bottom-clearance); z-index: calc(var(--z-sticky) + 1); display: grid; width: min(100%, var(--content-width)); transform: translateX(-50%); gap: 8px; border-radius: 28px 28px 0 0; padding: 12px 20px 16px; background: rgb(255 255 255 / 96%); box-shadow: 0 -8px 24px rgb(28 28 28 / 8%); }
.sd-basket-compare-actions p { margin: 0; color: #7a7a7a; font-size: 12px; text-align: center; }
.sd-basket-compare-actions button { display: flex; min-height: 54px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 18px; background: #f6f6f6; color: #1c1c1c; font-weight: 700; }
.sd-basket-compare-actions button:first-of-type { min-height: 60px; background: #f33b4e; color: #fff; font-size: 17px; box-shadow: 0 8px 20px rgb(243 59 78 / 25%); }
.sd-basket-compare-actions svg { width: 21px; height: 21px; }

/* Scoped finish pass: keep the Superdesign shapes, but tighten surfaces and
   narrow-screen behavior across the complete basket/recipe scroll paths. */
.screen[data-screen="shopping-list"],
.screen[data-screen="shopping-list"] .sd-basket-canvas,
.screen[data-screen="shopping-list"] .sd-basket-compare-canvas {
  background: var(--color-surface-muted);
}

.sd-basket-header,
.sd-basket-compare-header,
.sd-recipes-header {
  border-block-end: 1px solid var(--color-border-subtle);
  box-shadow: 0 1px 0 rgb(28 28 28 / 2%);
}

.sd-basket-item.list-row,
.sd-basket-calculator,
.sd-basket-breakdown > div,
.sd-basket-compare-options > button {
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}

.sd-basket-item.list-row:active,
.sd-basket-compare-options > button:active {
  transform: scale(.99);
}

.sd-basket-summary.strategy-card,
.sd-basket-compare-actions,
.sd-recipe-action {
  box-shadow: 0 -8px 24px rgb(28 28 28 / 7%);
}

.sd-recipe-feature,
.sd-recipe-row,
.sd-recipe-ingredient,
.sd-recipe-instructions li {
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) ease;
}

.sd-recipe-feature:active,
.sd-recipe-row:active,
.sd-recipe-ingredient:active {
  transform: scale(.99);
}

.sd-recipe-row {
  border-block-end: 1px solid var(--color-border-subtle);
  padding-block-end: var(--space-4);
}

.sd-recipe-row:last-child { border-block-end: 0; }

.sd-basket-breakdown > div { overflow-x: auto; }

.sd-basket-breakdown table {
  min-width: 100%;
  table-layout: fixed;
}

.sd-basket-breakdown th:first-child,
.sd-basket-breakdown td:first-child { width: 48%; }

.sd-basket-breakdown th:nth-child(2),
.sd-basket-breakdown td:nth-child(2) { width: 30%; }

.sd-basket-breakdown td { overflow-wrap: anywhere; }



@media (prefers-reduced-motion: reduce) {
  .sd-basket-item.list-row,
  .sd-basket-compare-options > button,
  .sd-recipe-feature,
  .sd-recipe-row,
  .sd-recipe-ingredient,
  .sd-recipe-instructions li { transition: none; }
}

.sd-profile-user { margin-block-end: 28px; }
.sd-profile-start { display: flex; align-items: center; justify-content: space-between; margin: 0 20px 28px; border-radius: 24px; padding: 20px; background: #f33b4e; color: #fff; text-decoration: none; box-shadow: 0 8px 20px rgb(243 59 78 / 18%); }
.sd-profile-start h2,
.sd-profile-start p,
.sd-profile-highlight strong,
.sd-profile-highlight p { margin: 0; }
.sd-profile-start h2 { font-size: 17px; }
.sd-profile-start p { opacity: .9; font-size: 13px; }
.sd-profile-start > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 20%); }
.sd-profile-start svg { width: 20px; height: 20px; }
.sd-profile-highlight { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; gap: 14px; margin: 0 20px 32px; border: 1px solid #d5eedc; border-radius: 24px; padding: 18px; background: #eaf8ee; color: #20733f; }
.sd-profile-highlight > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #20733f; color: #fff; }
.sd-profile-highlight svg { width: 21px; height: 21px; }
.sd-profile-highlight > svg { color: #6fb589; }
.sd-profile-highlight strong { display: block; font-size: 14px; }
.sd-profile-highlight p { font-size: 15px; font-weight: 700; }
.sd-loyalty-section { border-block: 1px solid #f3f4f6; padding-block: 24px; background: #f8f8f8; }
.sd-loyalty-section > header > div p { margin: 2px 0 0; color: #7a7a7a; font-size: 12px; }
.sd-loyalty-tile { min-width: 80px; }
.sd-loyalty-mark { width: 80px; height: 80px; border-radius: 22px; }
.sd-loyalty-tile small { font-size: 13px; font-weight: 700; }

.sd-recipe-ingredient { border: 1px solid transparent; border-radius: 16px; padding: 10px 14px; background: rgb(246 246 246 / 50%); color: #1c1c1c; text-decoration: none; }
.sd-recipe-ingredient + .sd-recipe-ingredient { margin-block-start: 10px; }
.sd-recipe-instructions ol { gap: 16px; }
.sd-recipe-instructions li { grid-template-columns: 32px 1fr; border: 1px solid #f1f1f1; border-radius: 16px; padding: 16px; background: rgb(248 248 248 / 40%); }
.sd-recipe-instructions li::before { width: 32px; height: 32px; background: #fff; color: #f33b4e; box-shadow: 0 1px 3px rgb(28 28 28 / 8%); }

@media (prefers-reduced-motion: reduce) {
  .sd-compare-store,
  .sd-basket-compare-actions button,
  .sd-profile-start { transition: none; }
}

/* Compact mobile chrome and the catalog layout. */
.sd-app-header { gap: 12px; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
.sd-app-header__brand { flex-wrap: wrap; gap: 4px 8px; }
.sd-app-header__actions { flex-shrink: 0; gap: 4px; }
.sd-app-header__brand > span { font-size: 12px; }
.sd-basket-header { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
.sd-basket-header button:last-child { width: auto; min-width: 44px; white-space: normal; }
.sd-compare-header h1, .sd-basket-compare-header h1 { min-width: 0; overflow-wrap: anywhere; }
.sd-profile-row[data-help] { width: 100%; text-align: start; font: inherit; background: white; cursor: pointer; }
.catalog-header.sd-search-header { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: var(--shell-top-inset) 20px 12px; border-bottom: 1px solid var(--color-border-subtle); }
.catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.catalog-heading h1 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -.035em; }
.catalog-heading a { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-action); }
.catalog-heading svg { width: 23px; height: 23px; }
.catalog-header .sd-search-field { border: 1px solid transparent; background: var(--color-surface-subtle); border-radius: 14px; padding: 0 10px 0 14px; }
.catalog-header .sd-search-field:focus-within { border-color: var(--color-accent-action); }
.catalog-header input { font-size: 16px; }
.catalog-header .sd-search-field button { height: 44px; width: 44px; }
.catalog-tools { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.catalog-tools label { display: flex; gap: 4px; align-items: center; }
.catalog-tools svg { width: 18px; height: 18px; }
.catalog-tools select { font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; max-width: 100%; border: 0; color: var(--color-ink); background: transparent; }
.catalog-tools p { margin: 0; font-size: 12px; color: var(--color-ink-muted); flex: 1 1 120px; text-align: end; }
.catalog-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 8px 20px; }
.catalog-path :is(button, a) { min-height: 44px; border: 0; padding: 4px 0; background: transparent; color: var(--color-ink-muted); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.catalog-path [aria-current] { color: var(--color-ink); font-weight: 600; }
.catalog-path span { color: var(--color-border); }
.catalog-categories { display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 12px; overflow-x: auto; padding: 8px 20px 20px; scroll-snap-type: x proximity; }
.catalog-category { display: flex; min-width: 0; flex-direction: column; gap: 8px; align-items: stretch; padding: 0; background: transparent; border: 0; color: var(--color-ink); text-align: start; cursor: pointer; scroll-snap-align: start; }
.catalog-category__image { display: grid; place-items: center; aspect-ratio: 1.12; overflow: hidden; border-radius: 18px; background: var(--color-surface-subtle); }
.catalog-category__image > svg { width: 36px; height: 36px; color: var(--color-ink-muted); }
.catalog-category__image .image-media { width: 100%; height: 100%; }
.catalog-category__image img { padding: 8px; object-fit: contain; mix-blend-mode: multiply; }
.catalog-category strong { font-size: 13px; line-height: 1.35; font-weight: 600; }
.catalog-category small { display: none; }
.catalog-layout.is-category-home { display: block; }
.is-category-home .catalog-navigation { border: 0; }
.is-category-home .catalog-categories { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: 24px 16px; }
.is-category-home .catalog-category { flex-direction: column; align-items: stretch; }
.is-category-home .catalog-category__image { width: 100%; aspect-ratio: 1.5; }
.is-category-home .catalog-category strong { font-size: 16px; }
.is-category-home .catalog-category small { display: block; color: var(--color-ink-muted); font-size: 12px; line-height: 1.5; }
[data-alternatives-open] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 8px 14px; border: 0; border-radius: 12px; background: var(--color-success-soft); color: var(--color-success); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
[data-alternatives-open] svg { width: 16px; height: 16px; }
.sd-basket-compare-options > .is-best:not(.is-selected) { background: #f5f5f5; border-color: #e3e3e3; }
.sd-basket-compare-options > .is-best:not(.is-selected) > b { background: #e9e9e9; color: #666; }
.catalog-sheet textarea { width: 100%; margin-top: 12px; }
.shopping-idea.bundle-card { display: block; padding: 20px; background: #f7faf6; border: 1px solid #e3ebdf; border-radius: 20px; }
.shopping-idea header h2 { margin: 4px 0 8px; }
.shopping-idea p { color: var(--color-ink-secondary); font-size: 14px; }
.shopping-idea__items label { display: grid; grid-template-columns: 20px 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e3ebdf; cursor: pointer; }
.shopping-idea__items input { width: 18px; height: 18px; accent-color: var(--color-success); }
.shopping-idea__image { width: 48px; height: 48px; overflow: hidden; border-radius: 10px; }
.shopping-idea__image .image-media { width: 100%; height: 100%; }
.shopping-idea__items a { color: inherit; font-size: 14px; text-decoration: none; }
.shopping-idea small { display: block; font-size: 12px; color: var(--color-ink-muted); }
.shopping-idea footer { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 12px; }
.shopping-idea > button { width: 100%; background: var(--color-success); color: white; border: 0; }
.discover-shelf-pair { display: flex; gap: 20px; overflow-x: auto; padding-inline: 20px; }
.discover-shelf-pair > section { flex: 0 0 auto; width: min(320px, 82vw); min-width: 0; padding-inline: 0; }
.discover-shelf-pair > section:has(.sd-product-rail > :only-child) { width: min(175px, 48vw); }
.discover-shelf-pair .sd-section-heading { padding-inline: 0; min-height: 84px; }
.discover-shelf-pair h2 { font-size: 17px; }
.discover-shelf-pair .sd-product-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 0; gap: 12px; }
.discover-shelf-pair .sd-product-rail:has(> :only-child) { grid-template-columns: 1fr; }
.discover-shelf-pair .sd-product-card { width: auto; min-width: 0; }


.catalog-products .sd-search-result-heading { gap: 12px; padding-top: 8px; }
.catalog-products h2 { margin: 0; font-size: 21px; letter-spacing: -.025em; }
[data-result-count] { color: var(--color-ink-muted); font-size: 13px; white-space: nowrap; }
.catalog-products .sd-search-grid { gap: 28px 14px; }
.catalog-products .sd-product-card { position: relative; container-type: inline-size; }
.catalog-products .sd-product-card > a { display: flex; flex-direction: column; align-items: stretch; }
.catalog-products .sd-product-card__media { order: 0; aspect-ratio: 1; border-radius: 20px; margin-bottom: 12px; }
.catalog-products .sd-product-card > a > strong { order: 1; font-size: 23px; line-height: 1.2; letter-spacing: -.03em; padding-right: 42px; }
.catalog-products .catalog-pack { display: block; order: 2; color: var(--color-ink-muted); font-size: 13px; min-height: 20px; margin-top: 4px; }
.catalog-products .sd-product-card h3 { order: 3; font-size: 14px; line-height: 1.4; margin: 8px 0 4px; min-height: 0; }
.catalog-products .sd-product-card p { order: 4; font-size: 13px; }
.catalog-products .sd-product-card__actions { position: absolute; inset: auto 0 auto auto; top: calc(100cqw + 12px); margin: 0; }
.catalog-products .sd-product-card__basket { width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-action); }
.catalog-products .sd-product-card__save { display: none; }


@media (max-width: 359px) {
  .catalog-header.sd-search-header { padding-inline: 16px; }
  .catalog-heading h1 { font-size: 21px; }
  .catalog-products .sd-product-card > a > strong { font-size: 20px; }
}
.app-shell { width: 100%; max-width: 480px; margin-inline: auto; }
.previous-price { color: #888; font-size: 12px; margin-left: 6px; }
[data-alternatives-open] { border: 0; border-radius: 8px; padding: 8px 0; min-height: 44px; color: #487854; background: transparent; font-size: 12px; font-weight: 500; }
.catalog-products .sd-product-card__actions { position: static; display: flex; justify-content: space-between; margin-top: 8px; }
.catalog-products .sd-product-card__save { display: inline-flex; }
.sd-product-card__actions button { min-width: 44px; min-height: 44px; }
.sd-basket-summary.strategy-card { position: fixed; inset-inline-start: 50%; transform: translateX(-50%); width: min(100%, 480px); bottom: var(--bottom-clearance); z-index: 15; background: #fff; padding: 14px 20px; border-top: 1px solid #eee; margin: 0; }
.bottom-nav, .sd-basket-compare-actions { max-width: 480px; margin-inline: auto; }
.sd-basket-compare-options { display: flex; flex-direction: column; gap: 12px; }
.sd-basket-compare-options > button { position: relative; width: 100%; min-height: 114px; border: 1px solid #e6e6e6; border-radius: 22px; padding: 18px; text-align: left; background: #f6f6f6; color: #333; }
.sd-basket-compare-options > button.is-selected { border: 2px solid #288e50; background: #f0f8eb; }
.sd-basket-compare-options > button > strong { display: block; font-size: 28px; margin: 8px 0; }
.sd-basket-compare-options > button > b { position: static; display: inline-block; background: #e8e8e8; color: #666; border-radius: 8px; padding: 4px 8px; margin-bottom: 8px; }
.sd-basket-compare-options > button.is-selected > b { background: #d4edc4; color: #245837; }
.sd-basket-compare-options small, .sd-basket-compare-options p { display: block; margin: 0; }
.missing-notice { padding: 20px; border-radius: 22px; background: #fff1c9; margin-block: 20px; }
.missing-notice h2 { font-size: 21px; }
.missing-notice button { background: #272823; color: white; padding: 12px 16px; border: 0; border-radius: 14px; min-height: 44px; }
.plan-products article, .missing-product { display: flex; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid #eee; }
.plan-products article > span, .missing-product > span { width: 56px; height: 64px; flex-shrink: 0; }
.plan-products article > div, .missing-product > div { flex: 1; min-width: 0; }
.plan-products small { display: block; color: #777; margin-top: 6px; }
.alternative-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.alternative-grid .sd-product-card { width: auto; min-width: 0; }
.discover-shelf-pair { gap: 16px; align-items: stretch; }
.discover-shelf-pair > section { width: 80%; flex: 0 0 80%; }
.discover-shelf-pair .sd-section-heading { text-align: center; justify-content: center; min-height: 90px; }
.discover-single-feature { margin: 16px 20px 28px; padding: 22px !important; border-radius: 28px; background: #f2edff; }
.discover-single-feature:nth-of-type(even) { background: #fff0ce; }
.discover-single-feature .sd-section-heading { padding: 0; }
.discover-single-feature .sd-product-rail { display: block; overflow: visible; padding: 0; }
.discover-single-feature .sd-product-card { width: 100%; min-width: 0; background: transparent; }
.discover-single-feature .sd-product-card > a { display: block; min-height: 140px; }
.discover-single-feature .sd-product-card__media { width: 44%; height: 150px; float: right; margin: 0 0 12px 16px; background: transparent; }
.discover-single-feature .sd-product-card__actions { clear: both; display: flex; justify-content: space-between; }
.meal-feature { margin: 0 20px 26px; padding: 22px; border-radius: 28px; background: #fce7df; }
.meal-feature h2 { margin: 0 0 16px; font-size: 27px; letter-spacing: -.035em; }
.meal-feature .sd-recipe-teaser { margin: 0; padding: 0; background: transparent; box-shadow: none; }
.explore-feature { display: flex; gap: 20px; align-items: center; margin: 12px 20px 28px; padding: 24px; border-radius: 26px; color: #304735; background: #e5efcf; font-size: 26px; font-weight: 700; text-decoration: none; }
.ideas-feature { display: flex; overflow: hidden; background: #eee6ff; padding: 24px; border-radius: 28px; color: #302448; text-decoration: none; min-height: 205px; }
.ideas-feature > div { width: 55%; }
.ideas-feature h3 { font-size: 28px; margin: 14px 0; line-height: 1.05; letter-spacing: -.04em; }
.ideas-feature span svg { width: 18px; vertical-align: middle; }
.ideas-feature__photos { position: relative; }
.ideas-feature__photos > span { position: absolute; width: 100px; height: 100px; background: #fff; border-radius: 22px; padding: 8px; transform: rotate(9deg); right: -12px; top: -5px; }
.ideas-feature__photos > span:nth-child(2) { top: 58px; right: 22px; transform: rotate(-12deg); }
.ideas-feature__photos > span:nth-child(3) { top: 116px; right: -12px; transform: rotate(6deg); }
.comparison-findings { margin: 24px 20px; padding: 22px; background: #e5f1dc; border-radius: 28px; }
.comparison-findings .finding-row { background: rgba(255,255,255,.75); border: 0; border-radius: 18px; padding: 12px; margin-top: 10px; }
.shopping-idea.bundle-card { background: #f7f3eb; border: 0; border-radius: 28px; }
.shopping-idea.bundle-card:nth-child(even) { background: #f0ebfa; }
.shopping-idea h2 { font-size: 28px; letter-spacing: -.04em; }
.shopping-idea > button { border-radius: 16px; min-height: 50px; }
.loyalty-state { display: block; margin-top: 10px; font-size: 12px; color: #666; }
.is-selected .loyalty-state { color: #237442; font-weight: 700; }
.shopping-idea__items .bundle-quantity { display: block; width: 56px; height: 44px; margin-top: 8px; border: 1px solid #ddd7ca; border-radius: 10px; padding: 6px; background: #fff; }
.finding-row__price small { display: block; color: #64705e; font-size: 11px; }
.pagauk-logo { display: block; width: 128px; height: 33px; background: url('/assets/pagauk-logo.png') -32px -13px / 175px 58px no-repeat; }
.sd-app-header__brand { align-items: flex-start; gap: 4px; }
.sd-app-header__brand > span:not(.pagauk-logo) { margin-left: 44px; }
.basket-linked-card { position: relative; }
.basket-product-link::after { content: ''; position: absolute; inset: 0; border-radius: 22px; z-index: 1; }
.basket-linked-card button, .basket-linked-card .quantity-stepper, .basket-linked-card [data-alternative-slot] { position: relative; z-index: 2; }
.basket-linked-card:has(.basket-product-link:focus-visible) { outline: 2px solid var(--color-accent-action); outline-offset: 3px; }
.shopping-idea.bundle-story { padding: 0; overflow: hidden; border-radius: 24px; background: #fff; margin-bottom: 18px; }
.bundle-cover { position: relative; min-height: 230px; padding: 22px 18px; overflow: hidden; list-style: none; cursor: pointer; color: white; background: linear-gradient(140deg, #352247 10%, #653456 64%, #c06540); }
.bundle-cover::-webkit-details-marker { display: none; }
.bundle-story--friends .bundle-cover { background: linear-gradient(145deg, #282664, #3a468c 60%, #526197); }
.bundle-story--breakfast .bundle-cover { background: linear-gradient(130deg, #f5d3b5, #f3ad7e); color: #34221b; }
.bundle-story--budget .bundle-cover { background: linear-gradient(125deg, #ddeab1, #a9d697); color: #213e26; }
.bundle-cover__copy { position: relative; z-index: 2; width: 55%; text-shadow: 0 1px 12px rgb(0 0 0 / 12%); }
.bundle-cover__copy h2 { font-size: 25px; line-height: 1.06; margin: 0 0 8px; letter-spacing: -.035em; }
.bundle-cover__copy p { color: inherit; font-size: 12px; line-height: 1.4; margin: 0 0 32px; }
.bundle-cover__copy > strong { display: inline-block; padding: 6px 12px; color: #261d26; background: #fff1e5; border-radius: 20px; font-size: 17px; }
.bundle-cover__copy small { margin-top: 8px; color: inherit; font-size: 11px; }
.bundle-cover__photos { position: absolute; inset: 0 0 0 50%; pointer-events: none; }
.bundle-cover__photos > .image-media { position: absolute; width: 104px; height: 142px; bottom: 22px; right: 4px; background: transparent; transform: rotate(9deg); filter: drop-shadow(0 10px 8px rgb(0 0 0 / 20%)); }
.bundle-cover__photos > .image-media:nth-child(2) { right: 61px; bottom: -2px; width: 105px; transform: rotate(-9deg); z-index: 1; }
.bundle-cover__photos > .image-media:nth-child(3) { bottom: 104px; right: 12px; width: 105px; height: 115px; transform: rotate(7deg); }
.bundle-cover__photos img { width: 100%; height: 100%; object-fit: contain; }
.bundle-editor { padding: 18px; }
.bundle-editor > header { display: none; }
.bundle-editor > button { width: 100%; min-height: 48px; background: var(--color-success); color: white; border: 0; border-radius: 14px; }
.bundle-story[open] .bundle-cover { border-radius: 0 0 22px 22px; }
.catalog-products .sd-product-card__actions { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
.catalog-products .sd-product-card__basket { width: 100%; min-height: 48px; border-radius: 14px; font-size: 15px; font-weight: 700; background: #f33b4e; color: #fff; }
.catalog-products .sd-product-card__save { width: 48px; height: 48px; border-radius: 14px; background: #f4f4f4; }
.sd-product-card__basket { font-size: 12px; font-weight: 700; }
.sd-product-card__badge { max-width: 65px; background: #f33b4e; color: white; border-radius: 10px; padding: 5px 8px; }
.sd-basket-compare-options > .plan-choice { display: flex; align-items: stretch; padding: 20px; border: 1px solid #e8e3e3; border-radius: 24px; box-shadow: none; }
.sd-basket-compare-options > .plan-choice.is-selected { border: 2px solid #f33b4e; background: #fff1f2; outline: none; }
.plan-choice__heading, .plan-choice__body, .plan-choice__footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.plan-choice__heading { font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
.plan-choice__radio { width: 24px; height: 24px; border: 1px solid #d1c9c9; border-radius: 50%; text-align: center; font-size: 16px; line-height: 22px; }
.is-selected .plan-choice__radio { background: #f33b4e; border-color: #f33b4e; color: #fff; }
.plan-choice__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 18px 0 12px; }
.plan-choice__body > strong { font-size: 30px; letter-spacing: -.045em; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.plan-choice__body .sd-store-stack { justify-content: flex-start; margin: 0; }
.plan-choice__body .sd-store-mark { width: 44px; height: 44px; border: 3px solid white; border-radius: 50%; }
.plan-choice__stores { display: block; color: #656060; font-size: 13px; margin-bottom: 12px; }
.plan-choice__footer { font-size: 12px; color: #777; flex-wrap: wrap; }
.plan-choice__coverage { flex-basis: 100%; font-size: 18px; color: #242424; }
.receipt-store { margin: 24px 0 8px; font-size: 24px; }
.sd-recipe-ingredient .ingredient-owned { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13px; min-height: 44px; cursor: pointer; }
.ingredient-owned input { width: 20px; height: 20px; accent-color: #426b4c; }
.sd-recipe-ingredient:has(input:checked) > div strong { text-decoration: line-through; color: #666; }
.plan-choice__footer b { border-radius: 8px; padding: 5px 9px; background: #e8e8e8; color: #727272; font-size: 11px; }
.plan-choice.is-selected .plan-choice__footer b { background: #ffe0e4; color: #ae2541; }
.meal-feature { position: relative; overflow: hidden; }
.meal-feature > .sunset-art, .sd-breakfast-hero > .sunset-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sd-breakfast-hero { position: relative; overflow: hidden; }
.sd-breakfast-hero__copy, .sd-breakfast-hero__media { position: relative; z-index: 1; }
.meal-feature > h2, .meal-feature > a { position: relative; z-index: 1; }
.sunset-art, .sunset-art * { stroke: none; }
.sd-basket-compare-options > .plan-choice.is-best:not(.is-selected) { color: #666; background: #f5f5f5; }
.bundle-cover__photos > .image-media { border-radius: 16px; overflow: hidden; background: #fff; padding: 4px; }

/* Permanent editorial artwork and the compact consumer canvas. */
.screen :is(.sd-app-header, .sd-search-header, .sd-basket-header, .sd-profile-header, .sd-section-heading, .sd-product-rail, .catalog-navigation, .catalog-products, .sd-basket-canvas) { padding-inline: 16px; }
.sd-discover-greeting { padding-inline: 16px; }
.sd-discover-greeting p:last-child:not(:first-of-type) { display: none; }
.screen :is(.meal-feature, .sd-breakfast-hero, .explore-feature, .discover-single-feature) { margin-inline: 16px; }
.sd-product-rail, .sd-search-grid, .alternative-grid, .bundle-list { gap: 12px; }
.image-media img { mix-blend-mode: normal; }
.sd-product-card__media { background: #fff; }
.sd-product-card__save { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.catalog-category:not([data-category]) .catalog-category__image { background: #fff; }
.catalog-category:not([data-category]) .catalog-category__image img { object-fit: contain; padding: 3px; }
[data-search-sentinel] { display: block; width: 100%; height: 1px; }
.meal-invitation { min-height: 246px; padding: 24px 18px; }
.meal-invitation::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #ffefd9 0%, rgb(255 239 217 / 96%) 28%, rgb(255 239 217 / 76%) 49%, transparent 74%); pointer-events: none; }
.meal-invitation > a { display: block; width: 52%; color: #352b31; text-decoration: none; }
.meal-invitation h2 { font-size: 29px; line-height: 1.05; margin-bottom: 12px; }
.meal-invitation p { font-size: 14px; line-height: 1.4; margin-bottom: 30px; }
.meal-invitation a > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.meal-invitation svg { width: 20px; height: 20px; flex-shrink: 0; }
.sky-morning { background: linear-gradient(#c7ddf1, #ffe1ba); }
.sky-evening { background: linear-gradient(#d0c5ef, #f5bdc0 65%, #ffd9ab); }
.loyalty-shelf { margin: 8px 16px 28px; padding: 18px 0; border-radius: 24px; background: #edf2df; }
.loyalty-shelf .sd-section-heading { padding-inline: 16px; margin-bottom: 16px; }
.loyalty-shelf .sd-product-card { background: white; border-radius: 18px; padding: 8px; }
.loyalty-shelf .sd-product-card__media { border-radius: 12px; }
.loyalty-shelf:has(.sd-product-card:only-child) .sd-product-rail { display: block; }
.loyalty-shelf:has(.sd-product-card:only-child) .sd-product-card { width: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px; }
.loyalty-shelf:has(.sd-product-card:only-child) .sd-product-card > a { display: contents; }
.loyalty-shelf:has(.sd-product-card:only-child) .sd-product-card > a > :not(.sd-product-card__media) { grid-column: 2; }
.loyalty-shelf .sd-product-card:has(a:focus-visible) { outline: 2px solid #f33b4e; outline-offset: 3px; }
.loyalty-shelf:has(.sd-product-card:only-child) .sd-product-card__media { grid-column: 1; grid-row: 1 / 5; height: 132px; margin: 0; }
.loyalty-shelf:has(.sd-product-card:only-child) .sd-product-card > :not(.sd-product-card__media) { grid-column: 2; }
.recipe-shelf { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 24px; }
.sd-recipe-section { padding-inline: 0; }
.screen .sd-recipe-section .sd-section-heading { padding-inline: 16px; }
.bundle-preview { margin-inline: 16px; }
.sd-recipes-canvas { padding-inline: 16px; }
.sd-recipe-list { gap: 0; }
.sd-recipe-row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding-block: 16px; }
.sd-recipe-row .image-media { width: 96px; height: 96px; border-radius: 18px; }
.sd-recipe-row strong { font-size: 16px; line-height: 1.3; }
.sd-recipe-row p { flex-wrap: wrap; }
.sd-recipe-detail__hero { height: 340px; border-radius: 0 0 28px 28px; }
.sd-recipe-detail__hero > div { padding: 24px 16px; background: linear-gradient(to top, rgb(0 0 0 / 78%), transparent 85%); }
.sd-recipe-cost { margin: 20px 16px 28px; background: #f2f4ed; border: 0; color: #252b21; }
.sd-recipe-cost small { font-size: 13px; letter-spacing: 0; font-weight: 500; }
.sd-recipe-cost > span { background: white; color: #f33b4e; }
.recipe-cost-pending { margin: 20px 16px 28px; padding: 18px; background: #f7f4ee; border-radius: 20px; }
.recipe-cost-pending strong { font-size: 18px; }
.recipe-cost-pending p { margin: 8px 0 12px; font-size: 14px; line-height: 1.4; color: #655f56; }
.recipe-cost-pending button { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.recipe-cost-pending svg { width: 18px; height: 18px; }
.sd-recipe-ingredients, .sd-recipe-instructions { padding-inline: 16px; scroll-margin-top: 24px; }
.sd-profile-start { background: #f5eadb; color: #382b25; box-shadow: none; border-radius: 22px; margin-inline: 16px; }
.sd-profile-highlight { margin-inline: 16px; border: 0; background: #efeafa; color: #433256; }
.sd-profile-highlight > span { background: white; color: #f33b4e; }
.sd-loyalty-section { background: white; border: 0; padding-inline: 16px; }
.sd-loyalty-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-inline: 0; overflow: visible; }
.sd-loyalty-tile { width: 100%; min-width: 0; padding: 14px; border: 1px solid #eee9e3; border-radius: 20px; background: #faf8f4; }
.sd-loyalty-tile.is-selected { border-color: #f33b4e; background: #fff1f2; }
.sd-loyalty-mark { width: 64px; height: 64px; border-radius: 16px; }
.sd-loyalty-tile small { margin-top: 8px; }
.sd-loyalty-tile .loyalty-state { margin-top: 4px; }
.sd-profile-highlight { text-decoration: none; }
.sd-recipes-today { padding-inline: 0; }
.sd-profile-menu { margin-inline: 16px; }
.sd-basket-compare-options > .plan-choice { padding: 16px; border-radius: 20px; }
.plan-choice__body { margin: 12px 0; }
.plan-choice__body > strong { font-size: 28px; }
.recipe-shelf .sd-recipe-teaser { flex: 0 0 74%; display: flex; flex-direction: column-reverse; gap: 0; padding: 0; background: #f8f3e9; border-radius: 20px; }
.recipe-shelf .sd-recipe-teaser__media { width: 100%; flex: 0 0 152px; height: 152px; }
.recipe-shelf .sd-recipe-teaser__media > .image-media { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.recipe-shelf .sd-recipe-teaser__media img { object-fit: cover; padding: 0; }
.recipe-shelf .sd-recipe-teaser__copy { padding: 16px; }
.recipe-shelf .sd-recipe-teaser h3 { font-size: 18px; }
.recipe-shelf .sd-recipe-teaser__arrow { right: 12px; bottom: -20px; box-shadow: none; }
.comparison-findings { margin: 4px 16px 28px; padding: 0; background: none; }
.comparison-findings .finding-list { display: grid; gap: 12px; }
.comparison-findings .finding-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 16px; margin: 0; background: #f2f4ed; border-radius: 20px; }
.finding-row__image { width: 64px; height: 76px; background: white; border-radius: 12px; }
.finding-row__copy strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; }
.finding-row__copy > small, .finding-row__copy > span { display: none; }
.finding-row__price { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
.finding-offer { flex: 1; padding: 8px 10px; background: white; border-radius: 12px; }
.finding-offer:first-child { background: #dcebc9; }
.finding-offer strong { font-size: 19px; }
.ideas-feature h3 { margin-top: 0; font-size: 27px; }
.ideas-feature p { font-size: 12px; }
.ideas-feature p b { display: block; margin-top: 6px; font-size: 22px; }
.ideas-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 10px 12px; background: white; border-radius: 22px; font-size: 12px; font-weight: 700; }
.catalog-layout.is-category-home .catalog-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; overflow: visible; padding: 0; }
.catalog-layout.is-category-home .catalog-category { width: auto; min-width: 0; min-height: 160px; position: relative; padding: 12px; overflow: hidden; border-radius: 20px; text-align: left; background: #f5f0e8; }
.catalog-layout.is-category-home .catalog-category__image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; background: none; }
.catalog-category__image img { width: 100%; height: 100%; object-fit: cover; object-position: 75% center; padding: 0; mix-blend-mode: normal; }
.catalog-layout.is-category-home .catalog-category strong { position: relative; display: block; z-index: 1; align-self: start; max-width: 100%; font-size: 16px; line-height: 1.15; padding: 5px; border-radius: 8px; background: rgb(255 255 255 / 88%); color: #292524; }
.catalog-layout.is-category-home .catalog-category small { display: none; }
.category-banner { position: relative; min-height: 155px; overflow: hidden; border-radius: 22px; margin: 10px 0 16px; background: #f6efe6; }
.category-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.category-banner h1 { position: relative; width: 51%; font-size: 25px; line-height: 1.1; padding: 20px 14px; margin: 0; letter-spacing: -.035em; }
.catalog-sort { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 14px; font-size: 12px; color: #65605c; }
.catalog-sort select { min-height: 44px; min-width: 0; max-width: 53%; border: 1px solid #e7e2dd; border-radius: 12px; padding: 8px; background: white; font: inherit; color: #302b28; }
.discover-categories { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 20px; }
.discover-categories a { flex: 0 0 86px; color: inherit; text-decoration: none; text-align: center; font-size: 12px; line-height: 1.25; }
.discover-categories img { display: block; width: 86px; height: 76px; border-radius: 20px; object-fit: cover; object-position: right; margin-bottom: 8px; }
.bundle-story .bundle-cover { min-height: 216px; background: #f1eaf6; color: #322b35; padding: 20px 16px; }
.bundle-cover__copy { width: 48%; text-shadow: none; }
.bundle-cover__copy p { margin-bottom: 18px; }
.bundle-cover__copy > strong { background: rgb(255 255 255 / 85%); }
.bundle-cover__photos { inset: 0; z-index: 0; }
.bundle-cover__photos > .editorial-image { width: 100%; height: 100%; object-fit: cover; }
.ideas-feature { position: relative; padding: 20px 16px; }
.ideas-feature > div:first-child { position: relative; width: 48%; z-index: 1; }
.ideas-feature > .ideas-feature__photos { position: absolute; inset: 0; width: 100%; }
.ideas-feature__photos > img { width: 100%; height: 100%; object-fit: cover; }
.bundle-editor > button { background: #f33b4e; }
.shopping-idea__items label { gap: 8px; grid-template-columns: 24px 40px minmax(0, 1fr) 58px; }
.shopping-idea__items label > input[type=checkbox] { width: 24px; height: 44px; }
.shopping-idea__items a { overflow-wrap: anywhere; }
.sunset-art { object-fit: cover; }
.sd-basket-item.list-row { padding-block: 12px; }
.sd-basket-summary.strategy-card { padding-inline: 16px; }
.bottom-nav .nav-item span { white-space: normal; line-height: 1.15; text-align: center; }

/* Motion is tied to the interaction, never a quantity-driven page render. */
button, .button { transition: transform 120ms ease, background-color 180ms ease, color 180ms ease; }
[data-bundle-filter] { min-width: 44px; }
button:active, .button:active { transform: scale(.97); }
.plan-choice { transition: background-color 180ms ease, border-color 180ms ease; }
.sd-basket-compare-options > .plan-choice { border-width: 2px; }
.action-pulse { animation: action-pulse 200ms ease; }
.screen-enter { animation: screen-enter 180ms ease; }
.catalog-sheet[open] { animation: sheet-enter 220ms ease; }
.bundle-story[open] .bundle-editor { animation: screen-enter 220ms ease; }
@keyframes action-pulse { 50% { transform: scale(1.08); } }
@keyframes screen-enter { from { opacity: .35; } to { opacity: 1; } }
@keyframes sheet-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.onboarding { width: min(100%, 480px); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: auto; border: 0; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: #fffaf6; color: #2d2726; overflow-y: auto; }
.onboarding[open] { display: flex; flex-direction: column; }
.onboarding::backdrop { background: #f1ece8; }
.onboarding > header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 48px; }
.onboarding button { font: inherit; min-width: 44px; min-height: 44px; border: 0; cursor: pointer; }
.onboarding > header button, [data-onboarding-language] { background: transparent; color: #675c56; }
.onboarding-step { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding-top: 220px; }
.onboarding-scene { position: absolute; inset: 0; margin: 0; height: 100%; padding: 0; overflow: hidden; pointer-events: none; animation: screen-enter 240ms ease; }
.onboarding-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.onboarding-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #fff6e4 0%, rgb(255 246 228 / 94%) 28%, rgb(255 246 228 / 78%) 37%, transparent 53%); }
.onboarding-counter, .onboarding-plans, .onboarding-scene .onboarding-example { z-index: 1; }
.onboarding-mini-search { display: none; }
.onboarding-scene svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.onboarding h1 { position: relative; font-size: clamp(28px, 8vw, 36px); line-height: 1.05; letter-spacing: -.045em; margin: 22px 0 12px; max-width: 400px; animation: onboarding-step 240ms ease; }
.onboarding h1:focus { outline: none; }
.onboarding-step > p { position: relative; color: #51463e; font-size: 15px; line-height: 1.45; max-width: 380px; margin: 0 0 20px; }
.onboarding-example { display: block; color: #766b66; font-size: 11px; text-align: center; }
.onboarding footer { position: relative; flex-shrink: 0; text-align: center; }
.onboarding footer > .button { width: 100%; background: #f33b4e; color: white; border-radius: 16px; min-height: 52px; display: flex; justify-content: center; align-items: center; gap: 12px; font-weight: 700; }
.onboarding footer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.onboarding-progress { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; }
.onboarding-progress span { width: 7px; height: 7px; border-radius: 10px; background: #d9d0ca; }
.onboarding-progress [aria-current] { width: 24px; background: #f33b4e; }
.onboarding-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 75%; animation: demo-reveal 700ms 150ms both; }
.onboarding-categories > div { position: relative; overflow: hidden; border-radius: 15px; background: #fff7eb; }
.onboarding-categories img { width: 100%; height: 100%; object-fit: cover; object-position: right; }
.onboarding-categories b { position: absolute; top: 8px; left: 8px; right: 8px; font-size: 11px; line-height: 1.1; background: rgb(255 255 255 / 85%); padding: 4px; border-radius: 6px; }
.onboarding-demo-card { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: white; font-size: 13px; margin-top: 12px; animation: demo-reveal 700ms 400ms both; }
.onboarding-demo-card > span { flex: 1; }
.onboarding-food { height: 52%; position: relative; }
.onboarding-food img { height: 100%; width: 100%; object-fit: cover; object-position: right; border-radius: 18px; }
.onboarding-heart { position: absolute; right: -54px; top: 0; background: white; border-radius: 50%; padding: 10px; line-height: 0; color: #e53248; animation: action-pulse 200ms 1.2s; }
.onboarding-counter { display: flex; align-items: center; justify-content: space-around; border-radius: 24px; background: #f33b4e; color: white; height: 44px; width: 160px; position: absolute; bottom: 43%; left: calc(50% - 105px); }
.demo-count { visibility: hidden; animation: demo-old-count 1s step-end; }
.demo-count-final { position: absolute; left: 63%; animation: demo-reveal 200ms 1s both; }
.onboarding-plans { position: absolute; left: 16px; right: 16px; bottom: 43%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.onboarding-plan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 2px solid transparent; border-radius: 17px; background: rgb(255 255 255 / 94%); font-size: 12px; }
.onboarding-plan > strong { font-size: 20px; }
.onboarding-scene .onboarding-example { position: absolute; bottom: 40%; width: 100%; color: #51463e; }
.onboarding-plan > div { grid-row: 2; }
.demo-store { font-size: 10px; margin-right: 7px; font-weight: 700; }
.demo-check { position: absolute; right: -6px; top: -6px; border-radius: 50%; background: #f33b4e; color: white; width: 20px; text-align: center; opacity: 0; }
.demo-plan-1 { animation: demo-plan 800ms; }
.demo-plan-2 { animation: demo-plan 800ms 800ms; }
.demo-plan-3 { animation: demo-plan 800ms 1600ms forwards; }
.demo-plan-1 .demo-check { animation: demo-check 800ms; }
.demo-plan-2 .demo-check { animation: demo-check 800ms 800ms; }
.demo-plan-3 .demo-check { animation: demo-check 800ms 1600ms forwards; }
@keyframes onboarding-step { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes demo-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes demo-old-count { from { visibility: visible; } to { visibility: hidden; } }
@keyframes demo-plan { 10%, 100% { border-color: #f33b4e; background: #fff1f2; } }
@keyframes demo-check { 10%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  button:active, .button:active { transform: none; }
  .demo-plan-3 { border-color: #f33b4e; background: #fff1f2; }
  .demo-plan-3 .demo-check { opacity: 1; }
}

/* Shopping plan: choose stops, resolve missing items, then read the receipt. */
.sd-basket-compare-options > .plan-choice { background: #fff; border-color: transparent; box-shadow: 0 5px 22px #37252c09; padding: 18px; }
.sd-basket-compare-options > .plan-choice.is-best:not(.is-selected) { background: #fff; color: #10131a; }
.sd-basket-compare-options > .plan-choice.is-selected { background: #fff5f6; border-color: #fa3458; color: #ed2048; box-shadow: 0 0 0 2px #ffe0e7; }
.plan-choice__heading { font-size: 20px; letter-spacing: -.04em; }.plan-choice__body > strong { font-size: 30px; }
.plan-choice__stores { color: #171921; font-size: 14px; }.plan-choice__body .sd-store-mark { width: 50px; height: 50px; box-shadow: 0 3px 12px #302e3010; }
.plan-missing { margin: 24px 0; }.plan-missing h2 { font-size: 18px; letter-spacing: -.025em; }
.plan-missing .missing-product { background: white; border-radius: 18px; padding: 14px; margin: 12px 0; }
.plan-missing .missing-product small { display: block; color: #787881; font-size: 12px; margin: 7px 0; }
.missing-remove { min-height: 44px; padding: 8px 0; color: #777; background: transparent; border: 0; font: inherit; font-size: 12px; }
.plan-next { width: 100%; min-height: 52px; display: flex; justify-content: center; align-items: center; gap: 10px; text-align: center; }
.receipt-header { background: #fff; border-radius: 0 0 22px 22px; }.receipt-count { color: #777781; font-size: 13px; }
.plan-products > article { background: white; border-radius: 18px; padding: 12px; margin: 10px 0; grid-template-columns: 62px minmax(0,1fr) auto; }
.plan-products > article > a { width: 62px; height: 76px; background: #faf7f7; border-radius: 12px; overflow: hidden; }
.plan-products > article > a img { width: 100%; height: 100%; object-fit: contain; }.plan-products strong { font-size: 14px; line-height: 1.35; }
.plan-products .quantity-stepper { margin-top: 8px; }.plan-products [data-list-remove] { border: 0; background: none; min-height: 44px; min-width: 44px; }
.receipt-total { display: flex; justify-content: space-between; font-size: 18px; padding: 20px 4px; }
.comparison-findings .finding-row { grid-template-columns: 82px minmax(0,1fr); background: white; gap: 12px; padding: 14px; border-radius: 22px; box-shadow: 0 4px 20px #3b253109; }
.comparison-findings .finding-row__image { grid-row: 1 / 3; width: 82px; height: 108px; border: 1px solid #f0eff0; }
.comparison-findings .finding-row__price { grid-column: 2; display: flex; gap: 7px; min-width: 0; }
.finding-offer { flex: 1; min-width: 0; background: #f5f5f5; padding: 10px; border-radius: 12px; }
.finding-offer.is-lowest { background: #eaf8e9; }.finding-offer > small { font-size: 11px; display: block; font-weight: 700; }
.finding-offer em { display: block; font-weight: 400; font-style: normal; font-size: 9px; color: #31774b; margin-top: 3px; }
.finding-offer > strong { display: block; font-size: 21px; letter-spacing: -.04em; margin-top: 5px; }
.finding-row__price > svg { width: 12px; flex-shrink: 0; }.finding-row__copy strong { -webkit-line-clamp: 3; }
.sd-basket-compare-header [data-clear-list] { min-height: 44px; min-width: 44px; border: 0; background: transparent; color: var(--muted, #737580); }
.screen[data-screen="shopping-list"]:has(.sd-basket-compare-canvas) { padding-bottom: calc(210px + env(safe-area-inset-bottom)); }
.sd-basket-compare-canvas { padding-bottom: 24px; }
.plan-products > article { display: grid; gap: 12px; border: 0; }
.plan-products > article > div { display: grid; grid-template-columns: 1fr 44px; }
.plan-products > article > div > strong, .plan-products > article > div > small,
.plan-products [data-alternative-slot] { grid-column: 1 / -1; }
.plan-products .quantity-stepper { width: fit-content; }
.plan-products [data-list-remove] { grid-column: 2; grid-row: 3; align-self: end; color: #80818a; }
.plan-products [data-list-remove] svg { width: 18px; height: 18px; }
.plan-products > article > b { font-size: 17px; align-self: start; padding-top: 4px; }

/* Flat vector mascot: the same shopping-bag character across all three steps. */
.onboarding { background: #fffbfc; color: #252534; }
.onboarding-step { padding-top: 0; min-height: 0; justify-content: center; text-align: center; }
.onboarding-scene { position: relative; inset: auto; flex: 0 0 auto; height: clamp(250px, 40dvh, 370px); width: 100%; overflow: visible; }
.onboarding-scene::after { content: none; }
.onboarding-scene .pagauk-mascot { display: block; width: 100%; height: calc(100% - 52px); fill: initial; stroke: none; stroke-width: 0; }
.onboarding h1 { margin: 24px auto 12px; max-width: 360px; font-weight: 900; letter-spacing: -.035em; line-height: 1.1; }
.onboarding-step > p { margin: 0 auto 24px; max-width: 310px; color: #74727d; }
.onboarding-mini-search { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 8px; margin: 0 auto; border: 2px solid #eee6ea; border-radius: 16px; padding: 12px; color: #74727d; font-size: 12px; }
.onboarding-counter { bottom: 6px; left: calc(50% - 105px); }
.onboarding-plans { bottom: 10px; left: 0; right: 0; }
.onboarding-plan { background: #fff; border-color: #eee6ea; padding: 8px 4px; }
.onboarding-scene .onboarding-example { bottom: -10px; }
.onboarding footer > .button { background: #f74361; box-shadow: 0 4px 0 #d92c4f; }
.onboarding-progress { margin: 14px 0 20px; }
@media (max-height: 700px) {
  .onboarding-scene { height: 240px; }
  .onboarding h1 { font-size: 28px; margin-top: 18px; }
  .onboarding-step > p { font-size: 14px; margin-bottom: 12px; }
}

/* Compact recipe grid with readable, untruncated titles. */
.sd-recipes-canvas .sd-recipe-feature,
.sd-recipes-canvas .sd-recipe-row {
  background: #fff;
  border: 1px solid #eeebee;
  border-radius: 20px;
  overflow: hidden;
}
.sd-recipes-canvas .sd-recipe-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.sd-recipes-canvas .sd-recipe-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
.sd-recipes-canvas .sd-recipe-row .image-media,
.sd-recipes-canvas .sd-recipe-feature__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}
.sd-recipes-canvas .sd-recipe-row > div,
.sd-recipes-canvas .sd-recipe-feature > div { padding: 18px; }
.sd-recipes-canvas .sd-recipe-row strong,
.sd-recipes-canvas .sd-recipe-feature h3 {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #20212a;
  overflow-wrap: anywhere;
}
.sd-recipes-canvas .sd-recipe-row p,
.sd-recipes-canvas .sd-recipe-feature p {
  font-size: 14px;
  line-height: 1.5;
  color: #60616c;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}
.sd-recipes-canvas .sd-recipe-row small,
.sd-recipes-canvas .sd-recipe-feature footer > strong {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: #20212a;
}
.sd-recipes-canvas .sd-recipe-feature footer { margin-top: 0; }
.sd-recipes-canvas .sd-recipe-feature footer > span { width: 44px; height: 44px; background: #fff0f3; color: #ed3658; box-shadow: none; }
.sd-recipes-canvas .sd-recipe-row:hover,
.sd-recipes-canvas .sd-recipe-feature:hover { border-color: #e2cbd2; }
.recipe-shelf .sd-recipe-teaser__copy p { font-size: 14px; line-height: 1.5; color: #60616c; }
.sd-recipes-canvas .sd-recipe-row { border-radius: 14px; min-width: 0; }
.sd-recipes-canvas .sd-recipe-row .image-media { aspect-ratio: 4 / 3; }
.sd-recipes-canvas .sd-recipe-row > div { padding: 12px 10px; flex: 1; display: flex; flex-direction: column; }
.sd-recipes-canvas .sd-recipe-row strong { font-size: 15px; line-height: 1.35; letter-spacing: 0; }
.sd-recipes-canvas .sd-recipe-row p { font-size: 12px; gap: 5px; margin: 8px 0 10px; }
.sd-recipes-canvas .sd-recipe-row small { font-size: 16px; margin-top: auto; }

/* Recipe photography replaces the product cutout in the time-of-day feature. */
#discover-meals { display: grid; gap: 12px; margin: 0 16px 24px; }
#discover-meals .sd-meal-recipe { position: relative; display: block; margin: 0; padding: 0; height: auto; min-height: 220px; overflow: hidden; border-radius: 20px; background: #f6ced0; color: #302129; }
.sd-meal-recipe__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#discover-meals .sd-breakfast-hero__copy { position: relative; width: 52%; padding: 22px 0 20px 18px; min-height: 220px; display: flex; flex-direction: column; align-items: flex-start; }
#discover-meals .sd-breakfast-hero__copy strong { font-size: clamp(24px, 6vw, 32px); line-height: 1.05; }
#discover-meals .sd-breakfast-hero__copy > span:not(.sd-breakfast-hero__arrow) { font-size: 13px; line-height: 1.3; max-width: none; margin-top: 10px; color: #47333c; }
#discover-meals .sd-breakfast-hero__arrow { margin-top: auto; }
.onboarding *, .onboarding *::before, .onboarding *::after { animation: none !important; transition: none !important; }
.onboarding-scene .pagauk-mascot { width: 100%; height: 100%; object-fit: contain; }


.onboarding-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.onboarding-header-actions select { max-width: 140px; min-height: 44px; }
.plan-choice__radio { flex-shrink: 0; }
@media (max-width: 360px) { .plan-choice__body .sd-store-mark { width: 38px; height: 38px; } }

.ready-meals-shelf .sd-section-heading > a { margin-inline-start: auto; flex-shrink: 0; font-size: 13px; color: #777; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.plan-choice__coverage.is-partial { color: #b9626b; }
.sd-recipe-ingredient { grid-template-columns: 24px 40px minmax(0, 1fr) auto; column-gap: 10px; }
.sd-recipe-ingredient .ingredient-owned { grid-column: 1; grid-row: 1; justify-content: center; }
.sd-recipe-ingredient__image { grid-column: 2; grid-row: 1; }
.sd-recipe-ingredient > div { grid-column: 3; grid-row: 1; }
.sd-recipe-ingredient > b { grid-column: 4; grid-row: 1; }
.ingredient-owned span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.basket-savings { padding: 18px 20px; margin: 12px 0 24px; border-radius: 20px; background: #e8f4e8; color: #28623d; }
.basket-savings strong { display: block; font-size: 26px; }
.basket-savings p { margin: 6px 0 0; font-size: 13px; }
.ingredient-owned-hint { margin: 0 0 12px; color: #737373; font-size: 13px; }
.ready-meals-shelf .sd-section-heading { align-items: center; gap: 12px; }
.ready-meals-shelf .sd-section-heading p:empty { display: none; }
.search-top { position: fixed; z-index: 40; right: max(20px, calc((100vw - 1200px) / 2)); bottom: calc(var(--bottom-nav-height) + 16px + env(safe-area-inset-bottom)); width: 48px; height: 48px; border: 1px solid #dedede; border-radius: 50%; background: #fff; color: #262626; box-shadow: 0 3px 12px #0002; font-size: 28px; cursor: pointer; }
.search-top[hidden] { display: none; }
.deposit-note { display: block; margin-block: 4px; font-size: 12px; line-height: 1.35; font-weight: 400; color: #666; }

/* Stable cards: conditions stay over the photo; actions share the row baseline. */
.sd-product-rail .sd-product-card { display: flex; flex-direction: column; align-self: stretch; }
.sd-product-rail .sd-product-card > a { flex: 1; }
.sd-product-card .catalog-pack { display: block; min-height: 20px; color: var(--color-ink-muted); font-size: 12px; }
.sd-product-rail .sd-product-card__actions { margin-top: auto; padding-top: 10px; }
.loyalty-badge { position: absolute; z-index: 2; inset: auto auto 6px 6px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 12px); border-radius: 7px; padding: 4px 6px; background: #e0f0ff; color: #17527b; font-size: 11px; font-weight: 600; line-height: 16px; }
.loyalty-badge svg { width: 14px; height: 14px; }
.product-complements { margin: 24px 16px; padding: 12px; border-radius: 16px; background: #fafafa; }
.product-complements .sd-section-heading { padding: 0 0 12px; }
.product-complements .sd-section-heading h2 { font-size: 18px; }
.product-complements .sd-search-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 12px; padding: 0; }
.product-complements .sd-search-grid .sd-product-card__media { height: 112px; aspect-ratio: auto; }
.product-complements .sd-product-card h3 { font-size: 13px; }
.product-complements .sd-product-card > a > strong { font-size: 15px; }
.product-complements .sd-product-card { width: 100%; min-width: 0; }
.collection-tiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0 0 24px; }
.collection-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 210px; border-radius: 22px; background: #f5e8d8; padding: 16px; color: #242424; text-decoration: none; }
.collection-tile h2 { font-size: 18px; line-height: 1.15; margin: 0; z-index: 1; overflow-wrap: anywhere; }
.collection-tile .editorial-image { width: 100%; height: 140px; margin-top: auto; object-fit: contain; mix-blend-mode: multiply; }
.collection-tile > span { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: white; }
.collection-wholesome { background: #e4f1d0; }
.collection-home-beauty { background: #eae3f8; }
.collection-top { background: #fff0a9; }
.collection-deals { background: #ffdedf; }
.collection-kids-deals { background: #daeff5; }
.collection-header { display: flex; align-items: center; gap: 12px; }
.collection-header > a { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.collection-header h1 { flex: 1; min-width: 0; margin: 0; font-size: 22px; line-height: 1.2; text-align: left; overflow-wrap: break-word; }
.collection-header > a { flex-shrink: 0; }
.collection-filters a { color: inherit; text-decoration: none; }
.collection-filters a[aria-current] strong { text-decoration: underline; text-underline-offset: 5px; }
.collection-filters .catalog-category__image img { object-fit: contain; object-position: center; padding: 8px; }
.screen .collection-header { padding: var(--shell-top-inset) 16px 12px; border-bottom: 1px solid var(--color-border-subtle); }
.catalog-products .sd-search-result-heading { padding-inline: 0; }
.collection-more { display: block; margin: 24px auto; }
.collection-preview .collection-tiles { padding-inline: 0; }
.sd-section-heading > a { flex-shrink: 0; font-size: 13px; padding-block: 12px; }
.loyalty-shelf:has(.sd-product-card:only-child) .sd-product-card__media { grid-row: 1 / 7; }

/* A single outer gutter; nested product grids must not add another one. */
.catalog-products .sd-search-grid { padding-inline: 0; }
.loyalty-badge { width: 24px; height: 24px; padding: 0; justify-content: center; }
.collection-tiles { display: flex; overflow-x: auto; gap: 16px; scroll-snap-type: x proximity; }
.collection-tiles .collection-tile { flex: 0 0 132px; min-height: 0; padding: 0; border-radius: 0; background: white; overflow: visible; scroll-snap-align: start; }
.collection-tile .editorial-image { width: 112px; height: 112px; align-self: center; margin: 0 0 8px; mix-blend-mode: normal; }
.collection-tile h2 { font-size: 15px; line-height: 1.25; text-align: center; overflow-wrap: normal; }

/* Compact category labels; preserve the original category artwork and framing. */
.discover-categories a { flex-basis: 104px; font-size: 13px; font-weight: 600; }
.discover-categories img { width: 104px; height: 86px; }
.catalog-categories { grid-auto-columns: 104px; }
.discover-categories a > span, .catalog-category strong, .catalog-layout.is-category-home .catalog-category strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.3; }
.discover-categories a > span, .catalog-category strong { min-height: 2.6em; }