/* Shop page layouts: home, product, checkout, thank-you, order status, content pages.
   Ships as app/static/css/shop.css. Components live in components.css. */

/* ---------- Home ---------- */
.hero { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-7); align-items: center; }
.hero__text { display: grid; gap: var(--space-4); align-content: center; }
.hero__text h1 { font-size: var(--step-4); line-height: 1.02; }
.hero__text p { color: var(--ink-2); font-size: var(--step-1); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.hero__art { position: relative; aspect-ratio: 5 / 4; max-width: 100%; border-radius: var(--radius-tile); background: var(--tile-honey); display: flex; align-items: flex-end; justify-content: center; gap: 3%; padding: 0 8% 9%; overflow: hidden; }
.hero__art svg { filter: var(--shadow-jar); }
.hero__art .jar-a { width: 26%; height: auto; aspect-ratio: 120 / 150; }
.hero__art .jar-b { width: 33%; height: auto; aspect-ratio: 120 / 150; }
.hero__art .jar-c { width: 22%; height: auto; aspect-ratio: 120 / 150; }
.hero__art .badge { position: absolute; top: var(--space-4); left: var(--space-4); }
@container page (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-8); padding-block: var(--space-8); }
}

.pickup { display: grid; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-tile); background: var(--tile-sage); }
.pickup h2 { font-size: var(--step-2); }
.pickup p { color: var(--ink-2); max-width: 46ch; }
.pickup .facts { font-size: var(--step-0); }
.pickup .facts dt { color: var(--ink-2); }
@container page (min-width: 900px) { .pickup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: var(--space-7); } }

/* ---------- Product page ---------- */
.product { display: grid; gap: var(--space-6); padding-block: var(--space-4) var(--space-7); }
@container page (min-width: 900px) { .product { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); padding-block: var(--space-5) var(--space-8); } }
.gallery { display: grid; gap: var(--space-3); align-content: start; }
@container page (min-width: 900px) { .gallery { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); } }
.gallery__main { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: var(--radius-tile); background: var(--tile); display: grid; place-items: center; overflow: hidden; }
.gallery__main > svg, .gallery__main > img { width: 54%; height: 66%; object-fit: contain; filter: var(--shadow-jar); }
.gallery__main .badge { position: absolute; top: var(--space-4); left: var(--space-4); }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.gallery__thumbs button { width: 100%; aspect-ratio: 1; border-radius: var(--radius-card); border: 2px solid transparent; background: var(--tile); display: grid; place-items: center; cursor: pointer; padding: 0; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--ink); }
.gallery__thumbs svg { width: 52%; height: 64%; }

.buybox { display: grid; gap: var(--space-5); align-content: start; }
.buybox__head { display: grid; gap: var(--space-2); }
.buybox__head h1 { font-size: var(--step-3); }
.buybox__meta { color: var(--ink-2); }
.buybox__price { display: grid; gap: var(--space-1); }
.buybox__actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); }
.buybox__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: var(--step--1); color: var(--ink-2); }
.buybox__notes li { display: flex; gap: var(--space-3); align-items: flex-start; }
.buybox__notes svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.buybox__desc { color: var(--ink-2); display: grid; gap: var(--space-3); max-width: 60ch; }

/* ---------- Checkout ---------- */
.checkout { display: grid; gap: var(--space-6); padding-block: var(--space-5) var(--space-8); }
@container page (min-width: 960px) { .checkout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); padding-block: var(--space-6) var(--space-9); } }
.checkout__main { display: grid; gap: var(--space-6); align-content: start; }
.checkout__main > h1 { font-size: var(--step-3); }
.step { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.step__title { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--step-1); }
.step__num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: var(--step--1); font-weight: 600; flex: none; transform: translateY(-1px); }
.order-box { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-tile); background: var(--paper-2); align-content: start; }
@container page (min-width: 960px) { .order-box { position: sticky; top: calc(var(--space-5) + env(safe-area-inset-top, 0px)); padding: var(--space-6); } }
.order-box h2 { font-size: var(--step-1); }
.order-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.order-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; font-size: var(--step--1); }
.order-line .thumb { position: relative; background: var(--tile); }
.order-line__qty { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: var(--radius-pill); background: var(--ink-2); color: var(--on-ink); font-size: 11px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.order-line__name { font-weight: 600; font-size: var(--step-0); }
.order-line__price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.legal-note { font-size: 12px; color: var(--ink-3); }
.legal-note a { color: var(--ink-2); }
.pay-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); font-size: 12px; color: var(--ink-3); }
.pay-note svg { width: 14px; height: 14px; }

/* ---------- Thank you + order status ---------- */
.confirm { display: grid; gap: var(--space-6); padding-block: var(--space-7) var(--space-8); }
.confirm__head { display: grid; gap: var(--space-3); justify-items: start; }
.confirm__mark { width: 64px; height: 64px; border-radius: 50%; background: var(--tile-honey); display: grid; place-items: center; }
.confirm__mark svg { width: 28px; height: 28px; color: var(--ink); }
.confirm__head p { color: var(--ink-2); max-width: 56ch; }
.confirm__grid { display: grid; gap: var(--space-5); }
@container page (min-width: 900px) { .confirm__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: start; } }
.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; }
.next-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); counter-increment: step; }
.next-steps li::before { content: counter(step); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: var(--step--1); font-weight: 600; }
.next-steps li.is-done::before { content: "✓"; background: var(--ok); border-color: var(--ok); color: #fff; }
.next-steps strong { font-weight: 600; }
.next-steps span { font-size: var(--step--1); color: var(--ink-2); }
.panel { border: 1px solid var(--line); border-radius: var(--radius-tile); padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start; }
.panel h2 { font-size: var(--step-1); }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline li { position: relative; display: grid; gap: 2px; padding: 0 0 var(--space-5) var(--space-6); }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); }
.timeline li::after { content: ""; position: absolute; left: 11px; top: 22px; bottom: 2px; width: 2px; background: var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline li.is-done::before { background: var(--ok); border-color: var(--ok); }
.timeline li.is-current::before { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px var(--tile-pollen); }
.timeline strong { font-weight: 600; }
.timeline time, .timeline span { font-size: var(--step--1); color: var(--ink-2); }

/* ---------- Content pages (legal, Über uns) ---------- */
.prose { display: grid; gap: var(--space-4); max-width: 68ch; padding-block: var(--space-2) var(--space-8); color: var(--ink); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-5); }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-3); }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2); }
.prose a { color: var(--accent); }
.prose .table-wrap { margin-block: var(--space-2); }
.prose__updated { font-size: var(--step--1); color: var(--ink-3); }

/* ---------- Not found ---------- */
.notfound { display: grid; justify-items: center; text-align: center; gap: var(--space-4); padding-block: var(--space-8) var(--space-6); }
.notfound__code { font-size: clamp(4rem, 3rem + 6vw, 7rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--tile-pollen); -webkit-text-stroke: 2px var(--ink); }
.notfound p { color: var(--ink-2); max-width: 44ch; }

/* Real product photos in the gallery fill the frame (see components.css "Real product photos"). */
.gallery__main.is-photo > img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.gallery__thumbs button.is-photo { overflow: hidden; }
.gallery__thumbs button.is-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Subscription choice on the product page */
.buy-mode { display: grid; gap: var(--space-3); }
.buy-mode .option__aside small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); text-align: right; }
.abo-panel { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--paper-2); }
.abo-panel__label { font-size: var(--step--1); font-weight: 600; }