:root {
  --color-background: #fcf9f8;
  --color-surface: #ffffff;
  --color-surface-tonal: #fff8f5;
  --color-surface-alt: #f0f4f9;
  --color-text-primary: #1b1b1c;
  --color-text-secondary: #5c403c;
  --color-text-subtle: #767676;
  --color-border: #e5bdb8;
  --color-accent: #b81311;
  --color-accent-on: #ffffff;
  --color-success: #236b3a;
  --color-warning: #7b5000;
  --color-danger: #ba1a1a;
  --color-rating: #7b5000;
  --color-brand-gradient-start: #f44336;
  --color-brand-gradient-end: #ff9800;
  --color-background-gradient-start: #ffe8d8;
  --color-background-gradient-middle: #ffffff;
  --color-background-gradient-end: #eef1f3;
  --font-family-primary: "Manrope";
  --font-family-fallback: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --type-display-size: 2.5rem;
  --type-display-weight: 800;
  --type-display-line-height: 1.1;
  --type-display-tracking: -.02em;
  --type-h1-size: 1.875rem;
  --type-h1-weight: 700;
  --type-h1-line-height: 1.2;
  --type-h1-tracking: -.01em;
  --type-h2-size: 1.5rem;
  --type-h2-weight: 700;
  --type-h2-line-height: 1.25;
  --type-h2-tracking: 0;
  --type-h3-size: 1.25rem;
  --type-h3-weight: 700;
  --type-h3-line-height: 1.3;
  --type-h3-tracking: 0;
  --type-h4-size: 1.125rem;
  --type-h4-weight: 600;
  --type-h4-line-height: 1.35;
  --type-h4-tracking: 0;
  --type-body-size: 1rem;
  --type-body-weight: 400;
  --type-body-line-height: 1.5;
  --type-body-tracking: 0;
  --type-body-sm-size: .875rem;
  --type-body-sm-weight: 400;
  --type-body-sm-line-height: 1.43;
  --type-body-sm-tracking: 0;
  --type-label-size: .75rem;
  --type-label-weight: 600;
  --type-label-line-height: 1.33;
  --type-label-tracking: .01em;
  --type-caption-size: .6875rem;
  --type-caption-weight: 500;
  --type-caption-line-height: 1.3;
  --type-caption-tracking: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --radius-card: 1rem;
  --radius-control: .5rem;
  --shadow-card: 0 10px 28px rgba(93, 62, 43, .08);
  font-family: var(--font-family-primary), var(--font-family-fallback);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: var(--color-text-primary);
  background: linear-gradient(var(--color-background-gradient-start), var(--color-background-gradient-middle) 38%, var(--color-background-gradient-end));
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.skip-link, .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; }
.skip-link:focus { z-index: 10; width: auto; height: auto; margin: 1rem; padding: .75rem 1rem; clip: auto; background: var(--color-surface); }
.site-header, main, .site-footer { width: min(1120px, calc(100% - 2.5rem)); margin-inline: auto; }
.site-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); }
.brand { display: inline-flex; gap: .7rem; align-items: center; font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-line-height); text-decoration: none; }
.brand-logo { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; }
.brand-subtitle { display: block; color: var(--color-text-subtle); font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-line-height); letter-spacing: var(--type-label-tracking); }
.location-label { color: var(--color-text-secondary); font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-line-height); }
.intro { padding: 3rem 0 2rem; }
.eyebrow { margin: 0 0 .6rem; color: var(--color-accent); font-size: var(--type-label-size); font-weight: var(--font-weight-bold); line-height: var(--type-label-line-height); letter-spacing: var(--type-label-tracking); text-transform: uppercase; }
h1 { max-width: 780px; margin: 0; font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-line-height); letter-spacing: var(--type-display-tracking); }
h3 { margin: 0; font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-tracking); }
h4 { margin: 0; font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-line-height); letter-spacing: var(--type-h4-tracking); }
.intro-copy { max-width: 640px; margin: .8rem 0 0; color: var(--color-text-secondary); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); }
.toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(190px, 240px) minmax(160px, 200px); gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.search-field, .select-field { display: flex; align-items: center; min-height: 48px; border-radius: var(--radius-control); background: var(--color-surface-alt); }
.search-field { gap: var(--space-2); padding: 0 var(--space-3); }
.search-field svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--color-text-secondary); stroke-width: 1.8; }
.search-field input, .select-field select { width: 100%; min-width: 0; min-height: 48px; border: 0; border-radius: inherit; outline: none; background: transparent; color: var(--color-text-primary); font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-line-height); }
.select-field { padding: 0 var(--space-3); }
.select-field select { cursor: pointer; }
.results-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin: var(--space-8) 0 var(--space-4); }
h2 { margin: 0; font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-tracking); }
.results-head p { margin: 0; color: var(--color-text-subtle); font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-line-height); }
.offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.offer-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.card-open { display: flex; flex: 1; flex-direction: column; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.product-image, .image-placeholder { display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; object-fit: contain; background: var(--color-surface); color: var(--color-text-subtle); }
.image-placeholder { font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-line-height); }
.card-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.store-name { color: var(--color-text-subtle); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-line-height); letter-spacing: var(--type-caption-tracking); }
.product-name { display: -webkit-box; min-height: 2.6em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--type-body-size); font-weight: var(--font-weight-semibold); line-height: var(--type-body-line-height); }
.price-line { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: var(--space-2) var(--space-1); margin-top: auto; }
.club-price { display: grid; min-width: 0; gap: var(--space-1); }
.club-price-value { display: flex; min-width: 0; align-items: baseline; gap: var(--space-1); }
.price-label { color: var(--color-text-subtle); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-line-height); }
.common-price { display: flex; min-width: 0; grid-column: 1 / -1; align-items: baseline; justify-content: space-between; gap: var(--space-2); color: var(--color-text-subtle); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-line-height); }
.common-price-value { flex: none; color: var(--color-text-secondary); font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-line-height); }
.discount-label { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); background: var(--color-surface-alt); color: var(--color-success); font-size: var(--type-caption-size); font-weight: var(--font-weight-semibold); line-height: var(--type-caption-line-height); white-space: nowrap; }
.price { font-size: var(--type-h3-size); font-weight: var(--font-weight-extrabold); line-height: var(--type-h3-line-height); }
.offer-validity { color: var(--color-text-subtle); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-line-height); }
.unit { color: var(--color-text-subtle); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-line-height); letter-spacing: var(--type-caption-tracking); }
.comparison-label { color: var(--color-success); font-size: var(--type-caption-size); font-weight: var(--font-weight-semibold); line-height: var(--type-caption-line-height); }
.comparison-label.high { color: var(--color-warning); }
.rating-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.stars { display: inline-flex; gap: 2px; color: var(--color-rating); }
.stars svg { width: 14px; height: 14px; fill: currentColor; }
.rating-label { color: var(--color-text-secondary); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-line-height); letter-spacing: var(--type-caption-tracking); }
.state-card { padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text-secondary); text-align: center; }
.state-card.error { color: var(--color-danger); }
.state-card[hidden], .offer-grid:empty, .pagination:empty { display: none; }
.pagination { display: grid; justify-items: center; gap: var(--space-2); margin: var(--space-8) 0; }
.load-more-button, .detail-action { min-height: 44px; padding: 0 1rem; border: 0; border-radius: var(--radius-control); background: linear-gradient(90deg, var(--color-brand-gradient-start), var(--color-brand-gradient-end)); color: var(--color-accent-on); font-size: var(--type-body-sm-size); font-weight: var(--font-weight-semibold); cursor: pointer; }
.load-more-button:disabled { background: var(--color-text-subtle); cursor: wait; }
.load-more-status { color: var(--color-text-subtle); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); }
.load-more-sentinel { display: block; width: 1px; height: 1px; }
.product-dialog { width: min(720px, calc(100% - 2rem)); max-height: min(90vh, 850px); padding: var(--space-6); overflow: auto; border: 0; border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text-primary); box-shadow: 0 18px 60px rgba(27, 27, 28, .24); }
.product-dialog::backdrop { background: rgba(27, 27, 28, .55); }
.dialog-close { position: sticky; top: 0; display: grid; width: 44px; height: 44px; place-items: center; margin: 0 0 0 auto; border: 0; border-radius: 50%; background: var(--color-surface-alt); color: var(--color-text-primary); cursor: pointer; }
.dialog-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.detail-heading { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.detail-heading img, .detail-image-placeholder { width: 108px; height: 108px; border-radius: var(--radius-control); object-fit: contain; background: var(--color-surface-tonal); }
.detail-heading h2 { font-size: var(--type-h3-size); line-height: var(--type-h3-line-height); }
.detail-heading p { margin: .35rem 0 0; color: var(--color-text-subtle); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); }
.detail-offers { display: grid; gap: var(--space-2); margin: var(--space-4) 0 var(--space-8); padding: 0; list-style: none; }
.detail-offers li { display: flex; min-width: 0; justify-content: space-between; gap: var(--space-4); padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-tonal); color: var(--color-text-primary); }
.detail-market { display: grid; min-width: 0; gap: var(--space-1); }
.detail-price { align-self: center; font-size: var(--type-body-size); font-weight: var(--font-weight-bold); line-height: var(--type-body-line-height); }
.detail-prices { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.detail-price-option { display: flex; min-width: max-content; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.detail-price-label { color: var(--color-text-subtle); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-line-height); }
.rating-summary { display: grid; justify-items: start; gap: var(--space-2); margin: 0 0 var(--space-6); padding: var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-tonal); }
.rating-summary h3 { font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-line-height); }
.rating-summary .rating-row { margin-top: 0; }
.rating-summary p { margin: 0; }
.detail-chart { width: 100%; min-height: 220px; margin-top: var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-alt); }
.detail-chart text { fill: var(--color-text-secondary); font: var(--type-caption-size, .6875rem) var(--font-family-primary), var(--font-family-fallback); }
.detail-chart .grid { stroke: var(--color-border); stroke-width: 1; }
.detail-chart .line { fill: none; stroke: var(--color-accent); stroke-width: 3; }
.detail-chart .point { fill: var(--color-accent); stroke: var(--color-surface); stroke-width: 2; }
.detail-chart .line-common { stroke: var(--color-warning); stroke-dasharray: 6 4; }
.detail-chart .point-common { fill: var(--color-warning); }
.chart-note, .rating-reason { color: var(--color-text-secondary); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); }
.chart-legend { display: flex; gap: var(--space-4); color: var(--color-text-secondary); font-size: var(--type-caption-size); line-height: var(--type-caption-line-height); }
.chart-legend .legend-club { color: var(--color-accent); }
.chart-legend .legend-common { color: var(--color-warning); }
.offer-timeline { display: grid; gap: var(--space-2); margin: 0 0 var(--space-8); }
.timeline-note, .timeline-empty { margin: 0; color: var(--color-text-secondary); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); }
.offer-timeline-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.offer-timeline-item { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-tonal); }
.offer-timeline-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.offer-timeline-title { font-size: var(--type-body-sm-size); font-weight: var(--font-weight-semibold); line-height: var(--type-body-sm-line-height); }
.offer-timeline-date, .offer-timeline-store, .offer-timeline-detail { color: var(--color-text-subtle); font-size: var(--type-caption-size); line-height: var(--type-caption-line-height); }
.site-footer { margin-top: var(--space-12); padding: var(--space-6) 0; border-top: 1px solid var(--color-border); color: var(--color-text-subtle); }
.site-footer p { margin: .25rem 0; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); }

@media (max-width: 64rem) { .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
  :root { --type-display-size: 2rem; --type-h1-size: 1.75rem; --type-h2-size: 1.375rem; --type-h3-size: 1.125rem; --type-h4-size: 1rem; }
  .site-header, main, .site-footer { width: min(100% - 2rem, 720px); }
  .site-header { min-height: 72px; }
  .intro { padding: var(--space-8) 0 var(--space-6); }
  .toolbar { grid-template-columns: 1fr 1fr; padding: var(--space-3); }
  .search-field { grid-column: 1 / -1; }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .price-line { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .discount-label { justify-self: start; }
  .common-price { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .product-dialog { padding: var(--space-4); }
  .detail-offers li { flex-direction: column; gap: var(--space-3); }
  .detail-prices { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .detail-price-option { min-width: 0; align-items: flex-start; }
  .detail-price-option:nth-child(2) { align-items: flex-end; text-align: right; }
  .detail-price { align-self: auto; }
  .offer-timeline-heading { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
}
@media (max-width: 23rem) { .location-label { max-width: 110px; text-align: right; } .offer-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }