/* A compact, responsive layer over the existing storefront design. */
.hero {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  min-height: 0;
  border-radius: 26px;
  box-shadow: 0 22px 52px rgb(28 42 46 / 13%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 68% 16%, rgb(255 193 7 / 10%), transparent 46%);
  pointer-events: none;
}
.hero-copy {
  min-width: 0;
  justify-content: center;
  padding: clamp(28px, 3.5vw, 50px);
}
.hero .eyebrow { margin-bottom: 15px; }
.hero h1,
html[lang=fr] .hero h1 {
  max-width: 100%;
  margin: 0 0 15px;
  font-size: clamp(38px, 3.65vw, 57px);
  line-height: 1.16;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.hero h1 em { display: inline-block; }
.hero p,
html[lang=fr] .hero p {
  max-width: 53ch;
  margin-bottom: 22px;
  font-size: clamp(14px, 1.12vw, 16px);
  line-height: 1.7;
}
.hero .button { min-height: 46px; padding: 11px 22px; }
.hero-stats {
  margin-top: 22px;
  padding-top: 18px;
  gap: 20px;
  border-top: 1px solid rgb(255 255 255 / 18%);
}
.hero-stats > div + div { padding-inline-start: 20px; }
.hero-stats strong { font-size: 22px; }
.hero-visual { display: flex; }
/* The scene fills the whole column, however tall the text beside it is; the SVG
   background extends past the drawing so the extra space stays seamless. */
.hero-visual .hanout-scene {
  flex: 1;
  height: auto;
  min-height: clamp(390px, 34vw, 470px);
}
.hero-visual .store-illustration { position: absolute; inset: 0; width: 100%; }
.hero-visual .store-illustration {
  height: 100%;
  transition: transform .35s ease-out;
  transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0) scale(1.015);
}
.benefits {
  margin-bottom: 2px;
  padding: 19px 0;
}
.benefits > div { font-weight: 600; }
.section { padding-top: 38px; }
.section-heading { margin-bottom: 19px; }
.category-grid { gap: 13px; }
.category-card {
  border-radius: 18px;
  box-shadow: 0 3px 10px rgb(38 50 56 / 3%);
  transition: transform .28s cubic-bezier(.2,.75,.2,1), box-shadow .28s, border-color .28s;
}
.category-card:hover,
.category-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgb(38 50 56 / 12%);
}
.category-image img { transition: transform .35s cubic-bezier(.2,.75,.2,1); }
.category-card:hover .category-image img,
.category-card:focus-visible .category-image img { transform: scale(1.09) rotate(-3deg); }
.product-section { margin-top: 36px; padding: clamp(20px, 3vw, 34px); }
.product-card {
  border-radius: 18px;
  box-shadow: 0 4px 14px rgb(38 50 56 / 4%);
  transition: transform .28s cubic-bezier(.2,.75,.2,1), box-shadow .28s, border-color .28s;
}
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgb(38 50 56 / 14%);
}
.product-photo img { transition: transform .4s cubic-bezier(.2,.75,.2,1); }
.product-card:hover .product-photo img { transform: scale(1.07); }
.add-button { transition: transform .2s, background .2s, box-shadow .2s; }
.add-button:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgb(245 124 0 / 18%); }
.catalog-control { transition: transform .2s, border-color .2s, box-shadow .2s; }
.catalog-control:hover { transform: translateY(-2px); }
.catalog-panel:not([hidden]) { animation: panel-enter .28s cubic-bezier(.2,.75,.2,1) both; }
.nav-main > a,
.nav-main > button { transition: color .2s, transform .2s; }
.nav-main > a:hover,
.nav-main > button:hover { transform: translateY(-2px); }
.mobile-nav-link [data-icon] { transition: transform .25s cubic-bezier(.2,.75,.2,1); }
.mobile-nav-link.active [data-icon] { transform: translateY(-2px) scale(1.08); }
dialog[open] { animation: dialog-enter .3s cubic-bezier(.2,.75,.2,1) both; }
.promo-banner { margin-block: 42px; box-shadow: 0 13px 30px rgb(38 50 56 / 9%); }
.promo-banner img { transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.promo-banner:hover img { transform: scale(1.025); }
@keyframes panel-enter { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Motion appears only after the small enhancement script has started. */
html.motion-ready .hero-copy > *,
html.motion-ready .benefits > div,
html.motion-ready .categories-section .section-heading,
html.motion-ready .product-section .section-heading,
html.motion-ready .promo-banner {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.75,.2,1);
}
html.motion-ready .hero-copy > * { transition-delay: calc(var(--item-index, 0) * 90ms); }
html.motion-ready .benefits > div { transition-delay: calc(var(--item-index, 0) * 100ms); }
html.motion-ready .hero-copy.is-visible > *,
html.motion-ready .benefits.is-visible > div,
html.motion-ready .categories-section.is-visible .section-heading,
html.motion-ready .product-section.is-visible .section-heading,
html.motion-ready .promo-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Keep the filter sheet anchored to the viewport on mobile. */
html.motion-ready .product-section .section-heading,
html.motion-ready .product-section.is-visible .section-heading { transform: none; }
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 3px;
  background: var(--yellow);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
  .hero h1, html[lang=fr] .hero h1 { font-size: clamp(35px, 4vw, 47px); }
  .hero-visual .hanout-scene { height: auto; min-height: 420px; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); margin-top: 16px; border-radius: 20px; }
  .hero-copy { padding: 27px 25px 24px; }
  .hero .eyebrow { margin-bottom: 13px; }
  .hero h1, html[lang=fr] .hero h1 { font-size: clamp(33px, 8.2vw, 46px); line-height: 1.2; margin-bottom: 12px; }
  .hero p, html[lang=fr] .hero p { font-size: 14px; line-height: 1.65; margin-bottom: 18px; }
  .hero-stats { display: none; }
  .hero-visual { height: auto; }
  .hero-visual .hanout-scene { height: 290px; min-height: 0; padding-top: 0; }
  .hero-visual .store-illustration { height: 100%; max-height: 100%; }
  .benefits { padding-block: 15px; }
  .section { padding-top: 30px; }
  .product-section { margin-top: 28px; }
  .promo-banner { margin-block: 32px; }
}
@media (max-width: 430px) {
  .hero-copy { padding: 24px 23px 22px; }
  .hero h1, html[lang=fr] .hero h1 { font-size: clamp(32px, 8.6vw, 38px); }
  .hero-visual .hanout-scene { height: 255px; }
  .product-section { padding: 22px 12px; }
  .product-card { border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual .store-illustration,
  .category-card,
  .category-image img,
  .product-card,
  .product-photo img,
  .add-button,
  .catalog-control,
  .promo-banner img { transition: none; transform: none !important; }
  .catalog-panel:not([hidden]), dialog[open] { animation: none; }
  html.motion-ready .hero-copy > *,
  html.motion-ready .benefits > div,
  html.motion-ready .categories-section .section-heading,
  html.motion-ready .product-section .section-heading,
  html.motion-ready .promo-banner { opacity: 1; transform: none; transition: none; }
  .scroll-progress { display: none; }
}

/* Full-bleed product photos: the picture fills its frame instead of floating in white space. */
.product-photo { height: auto; aspect-ratio: 1 / 1; padding: 0; background: #fff8ec; border-bottom: 1px solid var(--line); }
.product-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-badge { z-index: 1; }
/* Never taller than the screen (e.g. a phone held sideways), so the photo is never cut. */
.detail-image { padding: 0; min-height: min(390px, 88dvh); max-height: 88dvh; overflow: hidden; background: #fff8ec; }
/* The whole photo is always visible (contain), on every screen size. */
.detail-image img { width: 100%; height: 100%; max-height: none; object-fit: contain; mix-blend-mode: normal; }
.detail-description { white-space: pre-line; overflow-wrap: anywhere; }
html[data-theme="dark"] .product-photo, html[data-theme="dark"] .detail-image { background: #fff8ec; }
@media (max-width: 680px) {
  .detail-image { min-height: 0; height: auto; aspect-ratio: 1 / 1; max-height: 50dvh; width: 100%; padding: 0; display: flex; }
  .detail-image img { height: 100%; max-height: none; object-fit: contain; }
}
@media (max-width: 430px) {
  .product-card { grid-template-columns: 132px minmax(0, 1fr); }
  .product-photo { aspect-ratio: auto; height: 100%; min-height: 184px; padding: 0; border-bottom: 0; border-inline-end: 1px solid var(--line); }
}
@media (max-width: 350px) {
  .product-card { grid-template-columns: 112px minmax(0, 1fr); }
}

/* Phone layout switcher: 1, 2 or 3 products per row */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.grid-switch { display: none; }
@media (max-width: 680px) {
  .results-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .grid-switch { display: inline-flex; gap: 2px; margin-inline-start: auto; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); }
  .grid-switch button { display: grid; place-items: center; width: 38px; height: 34px; border-radius: 9px; color: var(--muted); }
  .grid-switch svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
  .grid-switch button[aria-pressed="true"] { background: var(--brand); color: var(--deep, #263238); }

  /* 1 per row: wide card, photo beside the details */
  .product-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .product-grid[data-cols="1"] .product-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 184px; }
  .product-grid[data-cols="1"] .product-photo { aspect-ratio: auto; height: 100%; min-height: 184px; padding: 0; border-bottom: 0; border-inline-end: 1px solid var(--line); }
  .product-grid[data-cols="1"] .product-info { padding: 11px 12px; border-top: 0; }

  /* 2 and 3 per row: photo on top, compact details below */
  .product-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .product-grid:is([data-cols="2"], [data-cols="3"]) .product-card { display: flex; flex-direction: column; min-height: 0; border-radius: 14px; }
  .product-grid:is([data-cols="2"], [data-cols="3"]) .product-photo { aspect-ratio: 1 / 1; height: auto; min-height: 0; padding: 0; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .product-grid:is([data-cols="2"], [data-cols="3"]) .product-info { flex: 1; display: flex; flex-direction: column; padding: 9px 10px 10px; border-inline-start: 0; border-top: 0; }
  .product-grid:is([data-cols="2"], [data-cols="3"]) .product-name { min-height: 0; margin: 2px 0 0; font-size: 13px; line-height: 1.45; -webkit-line-clamp: 2; }
  .product-grid:is([data-cols="2"], [data-cols="3"]) .product-unit:empty { display: none; }
  .product-grid:is([data-cols="2"], [data-cols="3"]) .product-bottom { margin-top: auto; padding-top: 8px; gap: 8px; }
  .product-grid:is([data-cols="2"], [data-cols="3"]) .product-bottom > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; min-height: 0; }
  .product-grid[data-cols="2"] .price { font-size: 18px; }
  .product-grid[data-cols="2"] .product-brand { font-size: 11px; }
  .product-grid[data-cols="2"] .add-button { min-height: 40px; font-size: 13px; gap: 6px; }
  .product-grid[data-cols="2"] .card-quantity { width: 100%; grid-template-columns: 38px minmax(0, 1fr) 38px; min-height: 40px; }
  .product-grid[data-cols="2"] .card-quantity button { width: 38px; height: 40px; }
  .product-grid:is([data-cols="2"], [data-cols="3"]) .stock-label { font-size: 11px; line-height: 1.4; }
  .product-grid:is([data-cols="2"], [data-cols="3"]) .product-badge { font-size: 10px; padding: 2px 6px; top: 6px; inset-inline-start: 6px; }

  /* 3 per row: the densest view, round "+" button */
  .product-grid[data-cols="3"] .product-card { border-radius: 12px; }
  .product-grid[data-cols="3"] .product-info { padding: 7px 7px 8px; }
  .product-grid[data-cols="3"] .product-brand { display: none; }
  .product-grid[data-cols="3"] .product-name { font-size: 11.5px; line-height: 1.4; }
  .product-grid[data-cols="3"] .price { font-size: 14px; }
  .product-grid[data-cols="3"] .price small { font-size: 9px; }
  .product-grid[data-cols="3"] .old-price { font-size: 10px; }
  .product-grid[data-cols="3"] .add-button { min-height: 34px; padding: 0; border-radius: 10px; font-size: 20px; }
  .product-grid[data-cols="3"] .add-button span:not(.add-plus) { display: none; }
  .product-grid[data-cols="3"] .card-quantity { width: 100%; grid-template-columns: 28px minmax(0, 1fr) 28px; min-height: 34px; }
  .product-grid[data-cols="3"] .card-quantity button { width: 28px; height: 34px; font-size: 18px; }
  .product-grid[data-cols="3"] .card-quantity span { font-size: 13px; }
}

/* Larger square category photos, kept smaller than catalog product photos. */
.categories-section .category-image { width: 128px; height: 128px; aspect-ratio: 1 / 1; border-radius: 14px; }
.categories-section .category-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .categories-section .category-image { width: 88px; height: 88px; } }
@media (max-width: 680px) { .categories-section .category-image { width: 84px; height: 84px; margin: 0 auto 13px; } }

/* Category tiles: full-bleed photo, name and count below, arrow that slides on hover. */
.categories-section .category-grid { gap: 14px; }
.categories-section .category-grid .category-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; text-align: start; border-radius: 20px; background: var(--surface); }
.categories-section .category-grid .category-image { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0; border-radius: 0; background: #fff8ec; overflow: hidden; }
.categories-section .category-grid .category-image img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; transition: transform .45s cubic-bezier(.2,.75,.2,1); }
.categories-section .category-grid .category-image > svg { width: 42%; height: 42%; margin: 29%; color: var(--brand); }
.categories-section .category-grid .category-card:hover .category-image img,
.categories-section .category-grid .category-card:focus-visible .category-image img { transform: scale(1.07); }
.categories-section .category-grid .category-info { flex: 1; display: flex; align-items: center; gap: 10px; padding: 13px 14px 14px; border-top: 1px solid var(--line); }
.categories-section .category-grid .category-text { flex: 1; min-width: 0; }
.categories-section .category-grid .category-card strong { display: block; min-height: 0; font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.categories-section .category-grid .category-card small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.categories-section .category-grid .category-go { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); transition: background .25s, color .25s, transform .25s; }
.categories-section .category-grid .category-go svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .categories-section .category-grid .category-go svg { transform: scaleX(-1); }
.categories-section .category-grid .category-card:hover .category-go,
.categories-section .category-grid .category-card:focus-visible .category-go { background: var(--brand); color: #fff; transform: translateX(3px); }
html[dir="rtl"] .categories-section .category-grid .category-card:hover .category-go { transform: translateX(-3px); }
.categories-section .category-grid .category-card.selected { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); background: var(--surface); }
.categories-section .category-grid .category-card.selected .category-go { background: var(--brand); color: #fff; }
.categories-section .category-grid .category-card.selected::after { content: "✓"; position: absolute; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 4px 12px rgb(0 0 0 / 18%); }
html[data-theme="dark"] .categories-section .category-grid .category-card,
html[data-theme="dark"] .categories-section .category-grid .category-card.selected { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .categories-section .category-grid .category-image { background: #fff8ec; }
@media (max-width: 900px) {
  .categories-section .category-grid .category-card strong { font-size: 14px; }
}
@media (max-width: 680px) {
  .categories-section .category-grid:not(.expanded) { grid-auto-columns: 150px; gap: 10px; }
  .categories-section .category-grid .category-card { display: flex; text-align: start; border-radius: 16px; }
  .categories-section .category-grid .category-image { width: 100%; height: auto; margin: 0; }
  .categories-section .category-grid .category-info { padding: 10px 11px 11px; gap: 6px; }
  .categories-section .category-grid .category-card strong { font-size: 13.5px; min-height: 0; justify-content: flex-start; }
  .categories-section .category-grid .category-go { width: 28px; height: 28px; }
  .categories-section .category-grid .category-go svg { width: 14px; height: 14px; }
  .categories-section .category-grid.expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 300px) { .categories-section .category-grid.expanded { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .categories-section .category-grid .category-image img, .categories-section .category-grid .category-go { transition: none; transform: none !important; } }