/* Home */
.hero-ink { padding-top: calc(var(--s-4) + var(--safe-t)); padding-bottom: var(--s-14); view-transition-name: appbar; }
.home-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.deliver { margin: 0 0 var(--s-4); color: var(--ink-300); font-size: var(--fs-small); }
.deliver b { color: var(--white); font-weight: 700; }
.home-sheet { margin-top: calc(var(--s-10) * -1); position: relative; overflow-x: clip; }   /* promo cut-outs may break out of their card, never out of the page */
.home-sheet > section .promo-track { padding-top: 0; }
.hscroll { display: flex; gap: var(--s-3); overflow-x: auto; padding: 0 var(--gutter) var(--s-2); scrollbar-width: none; scroll-snap-type: x proximity; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll.prods > .pcard { flex: 0 0 156px; scroll-snap-align: start; }
/* Order again: short, wide row cards (photo left, details right) instead of tall rail cards */
.hscroll.again > .pcard { flex: 0 0 264px; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "img name" "img meta" "img foot";
                          column-gap: var(--s-3); row-gap: var(--s-1); align-items: center; align-content: center; }
.hscroll.again .pcard-link { display: contents; }
.hscroll.again .pcard-img { grid-area: img; width: 88px; }
.hscroll.again .pcard-name { grid-area: name; }
.hscroll.again .pcard-meta { grid-area: meta; }
.hscroll.again .pcard-foot { grid-area: foot; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-2); }
.hscroll.again .add-wrap { width: 128px; height: 36px; }
.hscroll.again .price { white-space: nowrap; }
.hscroll.again .mini output { white-space: nowrap; }
.hscroll.again .pcard-foot { grid-template-columns: 1fr; }   /* narrow card: price above, control below */
.hscroll.again .badge { display: none; }
.hscroll.cats > .cat { scroll-snap-align: start; }
.cat-img b { font-size: var(--fs-title); color: var(--text-2); }
.strip { padding: var(--s-6) var(--gutter) 0; display: flex; }
.section-head h2 { letter-spacing: -.015em; }
@container (min-width: 768px) { .hero-ink { border-radius: 0 0 var(--r-xl) var(--r-xl); } }

/* slot banners (home_strip / home_mid / home_bottom) */
.slot-banner { padding: var(--s-6) var(--gutter) 0; }
.slot-banner > .promo, .slot-banner > .promo-poster { flex: none; width: 100%; display: grid; }
/* several banners in one slot: swipe row on the phone with a peek of the next card */
.slot-banner.is-multi { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.slot-banner.is-multi::-webkit-scrollbar { display: none; }
.slot-banner.is-multi > .promo > .promo-img { right: var(--s-2); }   /* side by side: never poke into the neighbour */
.slot-banner.is-multi > .promo, .slot-banner.is-multi > .promo-poster { flex: 0 0 86%; width: auto; scroll-snap-align: start; }
.slot-banner > .promo { min-height: 160px; }
.slot-banner > .promo-poster { aspect-ratio: 16 / 9; }

/* good-to-know strip: desktop only (phones get the same facts under Account > Help) */

/* services */
.svc-row { gap: var(--s-3); }
.svc-card { flex: 0 0 232px; scroll-snap-align: start; display: grid; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-1); overflow: hidden; }
.svc-img { aspect-ratio: 16 / 10; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); overflow: hidden; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; }
.svc-body { display: grid; gap: var(--s-1); padding: var(--s-4); align-content: start; }
.svc-body b { font-size: var(--fs-body); font-weight: 800; letter-spacing: -.01em; }
.svc-desc { color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-snug); min-height: 2.7em; overflow: hidden;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.svc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-2); }
.svc-go { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--accent-700); font-weight: 800; font-size: var(--fs-small); }