/*
 * Payism V3 website: Homepage 8 (layout "nearby"), owner-approved prototype v2 (31 Oct 2026).
 * Markup: resources/views/frontend/v3/home/index.blade.php (nearby order) and the h8_*.blade.php partials;
 * behaviour: public/assets/js/v3/nearby.js. Payism blue is the brand; ONE saffron (#FF9933, dark text) for buy
 * actions and deal urgency only. Text 14 px and up, 48 px targets on the phone, visible focus rings.
 */
:root {
    --h8-navy: #0A2E6E; --h8-blue: #1366D6; --h8-blue-d: #0F56B8; --h8-sky: #E7F0FD; --h8-page: #F3F6FB; --h8-card: #fff;
    --h8-ink: #0E1726; --h8-ink-2: #44546C; --h8-line: #DCE4F0; --h8-tile: #EEF2F8;
    --h8-saffron: #FF9933; --h8-saffron-h: #F5881A; --h8-on-saffron: #1B1200;
    --h8-green: #0B7A3B; --h8-green-bg: #E3F6EA; --h8-star: #9A6B00; --h8-red: #B42318;
    --h8-gutter: max(28px, calc((100vw - 1384px) / 2));
}
body.v3.v3-home--nearby, body.v3.v3-home--nearby .payism-main-wrapper { background: var(--h8-page) !important; }
.v3-h8 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding-bottom: 44px; color: var(--h8-ink); font-family: "Plus Jakarta Sans", "Noto Sans Devanagari", "Segoe UI", system-ui, sans-serif; }
.v3-h8 > :not(.h8-band-x) { width: 100%; max-width: calc(1384px + 56px); margin-inline: auto; padding-inline: 28px; box-sizing: border-box; }
.v3-h8 > .h8-slot[hidden], .v3-h8 > [hidden] { display: none; }
.v3-h8 > .h8-quads, .v3-h8 > .h8-band-x + * { margin-top: -8px; }
body.v3 .v3-h8 :focus-visible { outline: 3px solid var(--h8-blue); outline-offset: 2px; border-radius: 8px; }
.v3-h8 a { text-decoration: none; }
.v3-h8 h2, .v3-h8 h3, .v3-h8 p { margin: 0; }

/* ---------- the band under Header 8: hero slider ---------- */
.h8-band-x { position: relative; color: #fff; padding: 16px var(--h8-gutter) 26px; border-radius: 0 0 44px 44px;
    background: radial-gradient(120% 90% at 85% 0%, rgba(30, 120, 232, .9) 0%, transparent 55%), linear-gradient(180deg, var(--h8-band, #0B4FB3) 0%, var(--h8-band-2, #1366D6) 100%); }
.h8-band-x::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: var(--h8-pattern, .09); pointer-events: none;
    background-image: radial-gradient(circle at 20px 20px, transparent 17px, #fff 18px, transparent 19px); background-size: 40px 40px; }
.h8-band-x > * { position: relative; }
body.v3 .v3-h8 .h8-band-x :focus-visible { outline-color: #fff; }
.h8-car { position: relative; }
.h8-car__track { display: flex; gap: 14px; overflow-x: hidden; scroll-snap-type: x mandatory; border-radius: 26px; }
/* Owner 7 Nov 2026 (approved Diwali design B): one banner across the full width, no next slide peeking in, in the
   1760 x 616 (20:7) shape of the banner pictures, so a picture shows whole on a desktop. */
.h8-slide { flex: 0 0 100%; aspect-ratio: 20 / 7; min-height: 320px; scroll-snap-align: start; border-radius: 26px; position: relative; overflow: hidden; background: linear-gradient(120deg, #0B3A86 0%, #1366D6 100%); border: 1px solid rgba(255, 255, 255, .25); }
.h8-slide--copy { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
.h8-slide__copy { padding: 30px 8px 78px 34px; display: grid; gap: 10px; align-content: center; z-index: 1; }
.h8-slide__eyebrow { font-weight: 700; font-size: 16px; color: #D5E3F8; }
body.v3 .v3-h8 .h8-slide__hook, body.v3 .v3-h8 .h8-finder__h, body.v3 .v3-h8 .h8-h1 { color: #fff; }
.h8-slide__hook { font-weight: 800; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.12; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
/* H8 round 15: an offer banner's short headline at the prototype's size (58 px; the visitor slide stays smaller). */
@media (min-width: 981px) { .h8-slide--big .h8-slide__hook { font-size: clamp(36px, 4vw, 58px); line-height: 1.05; } }
.h8-slide__sub { font-size: 17px; color: #E3ECFA; max-width: 40ch; }
.h8-slide__proofs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 2px 0 4px; }
.h8-slide__proofs li { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); font-weight: 700; font-size: 14px; }
.h8-slide__art { align-self: stretch; position: relative; min-height: 100%; }
.h8-slide__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h8-slide__art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0E47A6 0%, rgba(14, 71, 166, 0) 32%); z-index: 1; }
.h8-slide--pic img { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
/* H8 round 8: one slide (no banners yet) fills the band; a text slide without its picture uses the full width. */
.h8-slide:only-child { flex-basis: 100%; }
/* Preserve Business-home sizing; the new picture ratio belongs to the shopping banner. */
.h8bz-hero .h8-slide { aspect-ratio: auto; }
.h8-slide--copy.h8-slide--noart { grid-template-columns: minmax(0, 1fr); }
.h8-slide--noart .h8-slide__copy { padding-inline-end: 34px; }
.h8-slide--noart .h8-slide__sub { max-width: 60ch; }
.h8-slide--pic, .h8-slide__link { display: flex; }
.h8-slide__link { display: block; height: 100%; }
/* Owner 7 Nov 2026: the picture link fills the full-width slide (as a flex item it shrank to the picture and left a
   blue edge on the right). */
.h8-slide--pic > .h8-slide__link { flex: 1 1 100%; min-width: 0; }
.h8-buy, .h8-add { border: 0; border-radius: 999px; background: var(--h8-cta, var(--h8-saffron)); color: var(--h8-on-saffron) !important; font-weight: 700; min-height: 52px; padding: 0 24px; font-size: 17px; justify-self: start; box-shadow: 0 8px 18px rgba(255, 153, 51, .3); display: inline-flex; gap: 8px; align-items: center; justify-content: center; cursor: pointer; }
.h8-buy:hover, .h8-add:hover { background: var(--h8-saffron-h); }
/* Owner 7 Nov 2026: the payment strip sits under the banner (it covered the banner's own words), centred. */
.h8-pay { position: static; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 12px auto 0; padding: 10px 16px; list-style: none; border-radius: 16px; background: rgba(4, 20, 60, .35); border: 1px solid rgba(255, 255, 255, .28); font-size: 14px; font-weight: 700; z-index: 2; }
.h8-pay li, .h8-pay a { display: inline-flex; gap: 6px; align-items: center; color: #fff !important; }
/* H8 round 21: the strip names only the ways offered (one or two at times), so it is as wide as its items. */
.h8-pay { width: max-content; max-width: 100%; }
.h8-car__next { position: absolute; top: 50%; inset-inline-end: 18px; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: var(--h8-blue); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(4, 20, 60, .25); z-index: 3; cursor: pointer; }
.h8-car__dots { display: flex; gap: 2px; justify-content: center; align-items: center; margin-top: 8px; }
.h8-car__dots [data-v3-dot] { width: 36px; height: 36px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.h8-car__dots [data-v3-dot]::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .5); transition: width .25s; }
.h8-car__dots [data-v3-dot][aria-current="true"]::before { width: 26px; background: #fff; }
.h8-car__pp { border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; width: 40px; height: 36px; border-radius: 999px; display: grid; place-items: center; margin-inline-start: 8px; cursor: pointer; }

/* ---------- section heads, buttons ---------- */
.h8-sec-head { display: flex; align-items: center; gap: 8px 14px; margin-bottom: 14px; flex-wrap: wrap; }
.h8-h2, .v3-home--nearby .v3-h8 .v3-h2 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--h8-ink); }
.h8-sec-head__sub { color: var(--h8-ink-2); font-size: 15px; flex-basis: 100%; }
.h8-sec-head__more { margin-inline-start: auto; color: var(--h8-blue) !important; font-weight: 700; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.h8-btn { border: 0; border-radius: 12px; min-height: 48px; padding: 0 18px; font-weight: 700; font-size: 16px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; cursor: pointer; }
.h8-btn--blue { background: var(--h8-blue); color: #fff !important; }
.h8-btn--blue:hover { background: var(--h8-blue-d); }
.h8-btn--line { background: #fff; color: var(--h8-blue) !important; border: 1.5px solid var(--h8-blue); }
.h8-btn--wa { background: #fff; color: var(--h8-green) !important; border: 1.5px solid #9AD3B0; }
.h8-timer { display: inline-flex; gap: 4px; align-items: center; background: var(--h8-saffron); color: var(--h8-on-saffron); font-weight: 700; padding: 4px 12px; border-radius: 999px; font-size: 15px; font-variant-numeric: tabular-nums; }

/* ---------- 4-card row ---------- */
.h8-quads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; z-index: 2; }
.h8-quad--keep { order: -1; }
.h8-quads.has-keep > .h8-quad:not(.h8-quad--keep):nth-of-type(4) { display: none; }
.h8-quad { background: var(--h8-card); border-radius: 20px; padding: 16px; box-shadow: 0 8px 24px rgba(16, 42, 90, .08); display: grid; gap: 10px; align-content: start; }
.h8-quad[hidden] { display: none; }
/* H8 round 11: "Keep shopping for" held open while the private POST answers (a card's shape, grey bars). */
.h8-skel { display: block; background: var(--h8-tile); border-radius: 6px; color: transparent; }
.h8-quad__title.h8-skel { height: 22px; width: 60%; }
.h8-quad.is-wait .h8-quad__grid li { display: grid; gap: 4px; align-content: start; }
.h8-quad__name.h8-skel { height: 18px; width: 80%; margin: 2px auto 0; }
.h8-quad__grid small.h8-skel { height: 16px; width: 60%; margin: 0 auto; }
.h8-quad__more.h8-skel { height: 20px; width: 35%; margin: 12px 0; }
.h8-quad__title { font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--h8-ink); }
.h8-quad__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; padding: 0; margin: 0; }
.h8-quad__grid a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; text-align: center; color: var(--h8-ink) !important; font-size: 14px; font-weight: 700; }
.h8-quad__img { display: grid; place-items: center; position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--h8-tile); }
.h8-quad__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h8-quad__name { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } /* a long one-word name ("Dishwashers" on a 74 px phone tile) wraps instead of widening its tile */
.h8-quad__mark { width: 32px; height: 32px; color: var(--h8-blue); opacity: .55; }
.h8-quad__grid small { display: block; color: var(--h8-ink-2); font-weight: 500; font-size: 14px; }
.h8-more { color: var(--h8-blue) !important; font-weight: 700; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.h8-line-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 12px; border: 1.5px solid var(--h8-blue); color: var(--h8-blue) !important; font-weight: 700; font-size: 15px; background: #fff; }

/* ---------- Homepage 8 product cards (component x-v3.product-card, cta on this home) ---------- */
.v3-h8 .v3-card--h8 { background: var(--h8-card); border: 0; border-radius: 18px; box-shadow: 0 6px 20px rgba(16, 42, 90, .07); }
.v3-h8 .v3-card--h8 .v3-card__media { margin: 10px 10px 0; border-radius: 14px; overflow: hidden; background: var(--h8-tile); aspect-ratio: 4 / 3; }
.v3-h8 .v3-card--h8 .v3-card__media img { width: 100%; height: 100%; object-fit: cover; }
.v3-h8 .v3-card--h8 .v3-card__bar, .v3-h8 .v3-card--h8 .v3-card__add { display: none !important; }
.v3-h8 .v3-card--h8 .v3-card__body { gap: 6px; padding: 8px 12px 12px; }
.v3-h8 .v3-card--h8 .v3-card__brand { display: none; }
.v3-h8 .v3-card--h8 .v3-card__name { font-size: 16px; font-weight: 700; line-height: 1.3; min-height: 2.6em; }
.v3-h8 .v3-card--h8 .v3-card__name a { color: var(--h8-ink) !important; }
.v3-h8 .v3-card--h8 .v3-rating { font-size: 14px; color: var(--h8-ink-2); }
.v3-h8 .v3-card--h8 .v3-rating .v3i { color: var(--h8-star); fill: var(--h8-star); }
.v3-card--h8 .v3-rating--none { min-height: 24px; } /* the height of a star line: rails stay level (H8 round 1) */
.v3-h8 .v3-card--h8 .v3-price { font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--h8-ink); }
.v3-h8 .v3-card--h8 .v3-mrp { font-size: 14px; color: var(--h8-ink-2); }
.v3-h8 .v3-card--h8 .v3-off { font-size: 14px; color: var(--h8-green); font-weight: 700; }
.v3-h8 .v3-card--h8 .v3-card__delivery { font-size: 15px; font-weight: 700; color: var(--h8-ink); margin-top: 0; }
.v3-h8 .v3-card--h8 .v3-card__shop { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--h8-ink-2); min-height: 32px; min-width: 0; }
.v3-h8 .v3-card--h8 .v3-card__shop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-h8 .v3-card--h8 .v3-card__shop b { color: var(--h8-ink); }
.v3-h8 .v3-card--h8 .v3-card__shop .v3-card__km { flex-shrink: 0; overflow: visible; } /* the distance never hides behind a long shop name (H8 round 7) */
.v3-h8 .v3-card--h8 .v3-card__cta { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: var(--h8-cta, var(--h8-saffron)); color: var(--h8-on-saffron) !important; font-size: 16px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; justify-content: center; box-shadow: none; }
.v3-h8 .v3-card--h8 .v3-card__cta:hover { background: var(--h8-saffron-h); }
.v3-h8 .v3-card--h8 .v3-card__cta--quiet { background: #fff; color: var(--h8-blue) !important; border: 1.5px solid var(--h8-blue); }
.v3-h8 .v3-card--h8 .v3-badge { border-radius: 999px; }
.v3-h8 .v3-card--h8 .v3-card__claimed, .v3-h8 .v3-card--h8 .v3-card__claimed-text { display: none; }
/* H8 decisions #9: the stars as a white chip on the picture (prototype .rpill); #5: "Only N left" in the urgency red. */
.v3-card--h8 .v3-card__media { position: relative; }
.v3-card--h8 .v3-card__rpill { position: absolute; inset-inline-start: 8px; bottom: 8px; z-index: 1; background: #fff; border-radius: 8px; padding: 1px 8px; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--h8-ink); box-shadow: 0 2px 6px rgba(16, 42, 90, .15); }
.v3-card--h8 .v3-card__rpill i { font-style: normal; color: var(--h8-star); }
.v3-card--h8 .v3-card__rpill span { color: var(--h8-ink-2); font-weight: 500; }
.v3-card--h8 .v3-card__few { font-size: 14px; font-weight: 700; color: var(--h8-red); }
.v3-h8 .v3-card--h8 .v3-price--ask { font-size: 17px; }

/* deals band, rails and grids (the shared AJAX sections) */
.v3-home--nearby .v3-h8 .v3-deals { background: none; padding: 0; border: 0; margin-inline: 0; }
.v3-home--nearby .v3-h8 .v3-deals .v3-sec-head { padding-inline: 0; }
.v3-home--nearby .v3-h8 .v3-timer { background: var(--h8-saffron); color: var(--h8-on-saffron); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 15px; gap: 4px; }
.v3-home--nearby .v3-h8 .v3-timer b, .v3-home--nearby .v3-h8 .v3-timer i { background: none; color: inherit; padding: 0; min-width: 0; font-style: normal; }
.v3-home--nearby .v3-h8 .v3-sec-head__link { color: var(--h8-blue) !important; font-weight: 700; font-size: 15px; }
.v3-home--nearby .v3-h8 .v3-rail { gap: 14px; }
.v3-home--nearby .v3-h8 .v3-rail > .v3-card { flex: 0 0 calc((100% - 70px) / 6); }
.v3-home--nearby .v3-h8 .v3-pgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.h8-row6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.h8-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.h8-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* ---------- signed-in extras ---------- */
.h8-mine { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.h8-mine--solo { grid-template-columns: minmax(0, 1fr); }
.h8-minis { display: grid; gap: 12px; }
.h8-mini-card { background: var(--h8-card); border-radius: 18px; padding: 12px; box-shadow: 0 6px 20px rgba(16, 42, 90, .06); display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.h8-mini-card img { width: 76px; height: 60px; object-fit: cover; border-radius: 10px; background: var(--h8-tile); }
.h8-mini-card__k { display: block; font-size: 14px; font-weight: 700; color: var(--h8-ink-2); }
.h8-mini-card__n { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--h8-ink) !important; }
.h8-mini-card__pr b { font-size: 17px; }
.h8-mini-card__pr s { color: var(--h8-ink-2); font-size: 14px; margin-inline-start: 4px; }
.h8-add--sm { min-height: 44px; padding: 0 14px; font-size: 15px; border-radius: 12px; box-shadow: none; }
/* E2E round 6: how much a wishlist price fell, and "In cart" once the product is in the cart. */
.h8-mini-card__drop { display: block; font-size: 14px; font-weight: 700; color: var(--h8-green); }
.h8-incart { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--h8-green) !important; background: var(--h8-green-bg); text-decoration: none; }
.h8-incart:hover, .h8-incart:focus-visible { text-decoration: underline; }
/* H8 round 19: a product card's Add to cart turns into "In cart" in place; it stays above the card's stretched link. */
.v3-card .h8-incart { position: relative; z-index: 2; width: 100%; min-height: 48px; margin-top: 6px; }

/* ---------- near you ---------- */
.h8-pinbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; background: #fff; border: 1.5px solid #BFD6F6; border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; }
.h8-pinbar > span { font-weight: 700; display: inline-flex; gap: 8px; align-items: center; margin-inline-end: auto; }
.h8-pinbar > span .v3i { color: var(--h8-blue); }
.h8-pinbar.is-set { border-color: #A6DDBA; background: #F4FBF6; }
.h8-pinbar.is-set > span { color: var(--h8-green); }

/* ---------- shop by price ---------- */
.h8-prices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.h8-pz { display: flex; gap: 12px; align-items: center; background: var(--h8-card); border-radius: 18px; padding: 12px; color: var(--h8-ink) !important; box-shadow: 0 8px 24px rgba(16, 42, 90, .07); min-height: 84px; }
.h8-pz img { width: 76px; height: 60px; object-fit: cover; border-radius: 12px; flex: none; background: var(--h8-tile); }
.h8-pz small { display: block; color: var(--h8-ink-2); font-size: 14px; font-weight: 700; }
.h8-pz b { font-size: 22px; font-weight: 700; color: var(--h8-blue); display: block; }
.h8-pz b small { display: inline; white-space: nowrap; }

/* ---------- AC finder + exchange ---------- */
.v3-h8 > .h8-finder { width: calc(100% - 56px); max-width: 1384px; padding: 22px; }
.h8-finder { background: linear-gradient(120deg, var(--h8-navy), var(--h8-blue)); color: #fff; border-radius: 24px; }
body.v3 .v3-h8 .h8-finder :focus-visible { outline-color: #fff; }
.h8-ftabs { display: inline-flex; gap: 4px; background: rgba(255, 255, 255, .12); border-radius: 14px; padding: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.h8-ftabs button { border: 0; background: transparent; color: #fff; font-weight: 700; font-size: 16px; min-height: 44px; padding: 0 16px; border-radius: 10px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.h8-ftabs button[aria-selected="true"] { background: #fff; color: var(--h8-blue); }
.h8-fgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.h8-fgrid[hidden] { display: none; }
.h8-finder__h { font-size: 26px; font-weight: 700; margin-bottom: 4px; color: #fff; }
.h8-finder__lead { color: #DCE8FA; font-size: 15px; }
.h8-flab { display: block; font-weight: 700; font-size: 15px; margin: 14px 0 8px; color: #D5E3F8; }
.h8-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.h8-fchip { border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); color: #fff; border-radius: 999px; padding: 0 16px; min-height: 44px; font-weight: 700; font-size: 15px; cursor: pointer; }
.h8-fchip[aria-pressed="true"] { background: #fff; color: var(--h8-blue); border-color: #fff; }
.h8-fres { background: #fff; color: var(--h8-ink); border-radius: 20px; padding: 16px; display: grid; gap: 12px; }
.h8-fres__art { width: 100%; max-height: 200px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.h8-fres__why { color: var(--h8-ink-2); font-size: 15px; }
.h8-extable { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 15px; background: rgba(255, 255, 255, .08); border-radius: 12px; overflow: hidden; }
.h8-extable caption { caption-side: bottom; color: #D5E3F8; font-size: 14px; padding-top: 6px; text-align: start; }
.h8-extable th, .h8-extable td { text-align: start; padding: 8px 10px; border-top: 1px solid rgba(255, 255, 255, .2); }
.h8-field { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.h8-field input, .h8-field select { border: 1.5px solid #B9C6D9; border-radius: 12px; padding: 0 14px; min-height: 48px; font-size: 16px; background: #fff; color: var(--h8-ink); font-weight: 500; }
.h8-field input[aria-invalid="true"], .h8-field select[aria-invalid="true"] { border-color: var(--h8-red); box-shadow: 0 0 0 2px rgba(180, 35, 24, .18); }
.h8-msg { font-size: 15px; font-weight: 700; min-height: 1.2em; }
.h8-msg.is-good { color: var(--h8-green); } .h8-msg.is-bad { color: var(--h8-red); }

/* ---------- QC steps + local reviews ---------- */
.h8-why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.h8-why--solo { grid-template-columns: minmax(0, 1fr); }
.h8-why > [hidden] { display: none; }
.h8-why:has(> .h8-panel--reviews[hidden]) { grid-template-columns: minmax(0, 1fr); }
.h8-panel { background: var(--h8-card); border-radius: 22px; padding: 20px; box-shadow: 0 6px 20px rgba(16, 42, 90, .06); }
.h8-panel__h { font-size: 24px; font-weight: 700; margin-bottom: 4px; line-height: 1.2; color: var(--h8-ink); }
.h8-panel__lead { color: var(--h8-ink-2); font-size: 15px; margin-bottom: 14px !important; }
.h8-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: s; }
.h8-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; align-items: start; }
.h8-steps li::before { counter-increment: s; content: counter(s); grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--h8-sky); color: var(--h8-blue); font-weight: 700; font-size: 18px; display: grid; place-items: center; }
.h8-steps b { font-size: 16px; }
.h8-steps span { color: var(--h8-ink-2); font-size: 15px; }
.h8-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin: 10px 0 14px; }
.h8-score__big { font-size: 46px; font-weight: 700; line-height: 1; }
.h8-score__big i { font-style: normal; color: var(--h8-star); font-size: 30px; }
.h8-score small { display: block; color: var(--h8-ink-2); font-size: 14px; margin-top: 4px; }
.h8-dist { display: grid; gap: 3px; }
.h8-dist div { display: grid; grid-template-columns: 30px minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: 14px; color: var(--h8-ink-2); }
.h8-dist i { display: block; height: 8px; border-radius: 999px; background: var(--h8-tile); overflow: hidden; }
.h8-dist i b { display: block; height: 100%; background: var(--h8-star); border-radius: inherit; }
.h8-revs { display: grid; gap: 10px; }
.h8-rev { border: 1px solid var(--h8-line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; }
.h8-rev__who { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--h8-ink-2); }
.h8-rev__who b { color: var(--h8-ink); font-size: 15px; }
.h8-stars { color: var(--h8-star); letter-spacing: 1px; font-size: 15px; }
.h8-rev p { font-size: 15px; line-height: 1.5; }
.h8-rev__prod { font-size: 14px; color: var(--h8-ink-2) !important; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- app band, strips ---------- */
.h8-app { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; border-radius: 24px; align-items: center; background: var(--h8-sky); padding: 24px 28px !important; width: calc(100% - 56px) !important; }
.h8-app__title { font-size: 26px; font-weight: 700; margin-bottom: 8px !important; color: var(--h8-ink); }
.h8-app p { color: var(--h8-ink-2); font-size: 16px; max-width: 46ch; margin-bottom: 14px; }
.h8-stores { display: flex; gap: 10px; flex-wrap: wrap; }
.h8-store { background: #000; border: 1px solid #3A4A68; color: #fff !important; border-radius: 10px; padding: 6px 14px; font-weight: 700; font-size: 16px; display: inline-flex; flex-direction: column; line-height: 1.2; min-height: 48px; justify-content: center; }
.h8-store small { font-size: 13px; font-weight: 500; color: #C9D4E6; }
.h8-app__qr { justify-self: end; background: #fff; border-radius: 18px; padding: 12px; display: grid; justify-items: center; gap: 6px; }
.h8-app__qr svg { width: 112px; height: 112px; }
.h8-app__qr small { color: var(--h8-ink-2); font-size: 14px; font-weight: 700; }
.h8-strips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.h8-strips--one { grid-template-columns: minmax(0, 1fr); }
.h8-strip { display: flex; gap: 14px; align-items: center; background: var(--h8-card); border-radius: 18px; padding: 14px 16px; box-shadow: 0 6px 20px rgba(16, 42, 90, .06); }
.h8-strip__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--h8-sky); color: var(--h8-blue); flex: none; }
.h8-strip__art { width: 96px; height: 48px; object-fit: cover; border-radius: 12px; flex: none; }
.h8-strip--wa .h8-strip__ic { background: var(--h8-green-bg); color: var(--h8-green); }
.h8-strip div { min-width: 0; }
.h8-strip b { display: block; font-size: 16px; }
.h8-strip span { color: var(--h8-ink-2); font-size: 15px; }
.h8-strip .h8-btn { margin-inline-start: auto; flex: none; min-height: 44px; font-size: 15px; }

/* ---------- Business home ---------- */
.h8-band-x--biz { padding-top: 8px; }
.h8-bhero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-top: 8px; }
.h8-bhero--solo { grid-template-columns: minmax(0, 1fr); }
.h8-qr-card { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.h8-eyebrow { font-weight: 700; font-size: 16px; color: #D5E3F8; }
.h8-h1 { font-weight: 800; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.h8-qsearch { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.h8-qsearch__form { flex: 1 1 280px; display: flex; align-items: center; gap: 4px; height: 56px; padding: 4px 4px 4px 18px; background: #fff; border-radius: 999px; color: var(--h8-blue); box-shadow: 0 6px 18px rgba(4, 20, 60, .25); }
.h8-qsearch__form input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 16px; color: var(--h8-ink); padding: 0 8px; background: transparent; }
.h8-qsearch__form button { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--h8-blue); color: #fff; display: grid; place-items: center; cursor: pointer; }
.h8-paste { flex: none; }
.h8-paste summary { list-style: none; min-height: 56px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .5); color: #fff; font-weight: 700; padding: 0 16px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.h8-paste summary::-webkit-details-marker { display: none; }
.h8-paste form { margin-top: 8px; background: #fff; color: var(--h8-ink); border-radius: 16px; padding: 12px; display: grid; gap: 8px; width: min(360px, 80vw); }
.h8-paste textarea { border: 1.5px solid #B9C6D9; border-radius: 12px; padding: 10px; font-size: 16px; }
.h8-paste__help { margin: 0; font-size: 14px; line-height: 20px; color: var(--h8-ink-2); } /* round 19 */
/* Quick add / Paste a list answer (E2E round 3): one row per line, matched product with Add. */
.h8-qo-out { background: #fff; color: var(--h8-ink); border-radius: 18px; padding: 8px 14px 12px; }
.h8-qo { list-style: none; margin: 0; padding: 0; display: grid; }
.h8-qo__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--h8-line); }
.h8-qo__row.is-miss { grid-template-columns: minmax(0, 1fr) auto; }
.h8-qo__row img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: var(--h8-tile); }
.h8-qo__info { display: grid; gap: 2px; min-width: 0; font-size: 15px; color: var(--h8-ink-2); }
.h8-qo__info a { color: var(--h8-ink) !important; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h8-qo__info b { color: var(--h8-ink); }
.h8-qo__q { font-size: 14px; color: var(--h8-ink-2); }
.h8-qo__buy { display: flex; gap: 8px; align-items: center; }
.h8-qo__buy .h8-step { width: 136px; }
.h8-qo__buy .h8-add { min-height: 48px; padding: 0 16px; font-size: 16px; border-radius: 12px; box-shadow: none; }
.h8-qo__out { font-weight: 700; color: var(--h8-ink-2); font-size: 15px; }
.h8-qo__note { margin-top: 8px; font-size: 14px; color: var(--h8-ink-2); }
.h8-qo__all { width: 100%; min-height: 48px; margin-top: 12px; font-size: 16px; border-radius: 12px; box-shadow: none; justify-content: center; } /* round 19 */
.h8-lastorder { background: #fff; color: var(--h8-ink); border-radius: 18px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; }
.h8-lastorder__t { display: block; font-size: 17px; }
.h8-lastorder__s { display: block; color: var(--h8-ink-2); font-size: 15px; }
.h8-lastorder__thumbs { display: flex; gap: 6px; margin-top: 6px; }
.h8-lastorder__thumbs img { width: 46px; height: 36px; object-fit: cover; border-radius: 8px; background: var(--h8-tile); }
.h8-lastorder__thumbs span { width: 46px; height: 36px; border-radius: 8px; background: var(--h8-page); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--h8-ink-2); }
.h8-lastorder__act { display: flex; flex-direction: column; gap: 8px; }
.h8-lastorder__act .h8-add { border-radius: 12px; min-height: 48px; font-size: 16px; box-shadow: none; }
.h8-rates { background: #fff; color: var(--h8-ink); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.h8-rates h2 { font-size: 19px; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--h8-ink); }
.h8-rates h2 small { font-size: 14px; color: var(--h8-ink-2); font-weight: 500; }
.h8-rates table { width: 100%; border-collapse: collapse; font-size: 15px; }
.h8-rates th { text-align: start; font-size: 14px; color: var(--h8-ink-2); font-weight: 500; padding: 0 0 6px; }
.h8-rates th:nth-child(n+2), .h8-rates td:nth-child(n+2) { text-align: end; }
.h8-rates td { padding: 9px 0; border-top: 1px solid var(--h8-line); }
.h8-rates td a { color: var(--h8-ink) !important; display: inline-block; padding: 12px 0; margin: -12px 0; } /* a 44px tap height inside the row */
.h8-cutoff { display: flex; gap: 10px; align-items: center; background: var(--h8-sky); border-radius: 14px; padding: 10px 12px; font-size: 15px; }
.h8-cutoff b { font-variant-numeric: tabular-nums; }
.h8-cutoff .v3i { color: var(--h8-blue); flex: none; }
.h8-bcard .h8-bcard__price { font-size: 15px; color: var(--h8-ink-2); }
.h8-bcard .h8-bcard__price b { font-size: 21px; color: var(--h8-ink); }
.h8-bcard .h8-bcard__slab, .h8-bcard .h8-bcard__last { font-size: 14px; color: var(--h8-ink-2); }
.h8-bcard .h8-bcard__slab b, .h8-bcard .h8-bcard__last b { color: var(--h8-ink); }
/* H8 round 15: the price follows the stepper; the slab it reaches is marked, the one-unit price struck. */
.h8-bcard .h8-bcard__price del { font-size: 14px; color: var(--h8-ink-2); margin-inline-start: 4px; }
.h8-bcard .h8-bcard__slab [data-h8-slab] { border-radius: 6px; padding: 0 4px; margin: 0 -4px; }
.h8-bcard .h8-bcard__slab .is-on { background: var(--h8-green-bg); color: var(--h8-green); font-weight: 700; }
.h8-bcard .h8-bcard__slab .is-on b { color: var(--h8-green); }
.h8-bcard .h8-add { width: 100%; border-radius: 12px; box-shadow: none; min-height: 48px; font-size: 16px; }
/* The card's name link stretches over the whole card (components.css): the stepper and Add sit above it. */
.h8-bcard .h8-step, .h8-bcard .h8-add { position: relative; z-index: 2; }
.h8-bcard .h8-bcard__out { min-height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--h8-line); color: var(--h8-ink-2); font-weight: 700; font-size: 15px; }
.h8-step { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; border: 2px solid var(--h8-saffron); border-radius: 12px; overflow: hidden; min-height: 48px; background: #fff; }
.h8-step button { border: 0; background: #FFF1E0; color: #7A3400; font-size: 22px; font-weight: 700; height: 44px; cursor: pointer; }
.h8-step output { text-align: center; font-weight: 700; font-size: 16px; }
.h8-deals3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.h8-deal { background: var(--h8-card); border-radius: 18px; padding: 14px; box-shadow: 0 6px 20px rgba(16, 42, 90, .07); display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; align-items: center; }
.h8-deal__tag { background: var(--h8-saffron); color: var(--h8-on-saffron); font-size: 14px; font-weight: 700; padding: 2px 10px; border-radius: 999px; display: inline-block; }
.h8-deal h3 { margin: 6px 0 4px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.h8-deal h3 a { color: var(--h8-ink) !important; }
.h8-deal p { color: var(--h8-ink-2); font-size: 15px; }
.h8-deal p b { color: var(--h8-ink); }
.h8-deal img { width: 112px; height: 86px; object-fit: cover; border-radius: 12px; }
.h8-deal .h8-btn { margin-top: 8px; min-height: 44px; font-size: 15px; }
.h8-guar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; background: var(--h8-card); border-radius: 18px; padding: 14px 18px !important; box-shadow: 0 6px 20px rgba(16, 42, 90, .06); width: calc(100% - 56px) !important; }
.h8-guar div { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 15px; }
.h8-guar .v3i { color: var(--h8-blue); flex: none; }

/* ---------- mid widths ---------- */
@media (max-width: 1180px) {
    .h8-quads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h8-prices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .h8-row6, .v3-home--nearby .v3-h8 .v3-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .h8-mine { grid-template-columns: minmax(0, 1fr); }
    .v3-home--nearby .v3-h8 .v3-rail > .v3-card { flex-basis: calc((100% - 28px) / 3); }
}
@media (max-width: 980px) {
    .h8-grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .h8-bhero { grid-template-columns: minmax(0, 1fr); }
    .v3-h8 > :not(.h8-band-x) { padding-inline: 20px; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
    :root { --h8-gutter: 16px; }
    .v3-h8 { gap: 28px; padding-bottom: 28px; }
    .v3-h8 > :not(.h8-band-x) { padding-inline: 16px; }
    .v3-h8 > .h8-finder, .h8-app, .h8-guar { width: calc(100% - 32px) !important; }
    .h8-band-x { padding: 12px 16px 18px; border-radius: 0 0 30px 30px; }
    .h8-slide { height: auto; aspect-ratio: auto; min-height: 180px; border-radius: 20px; }
    .h8-slide--copy { grid-template-columns: minmax(0, 1fr) 34%; }
    .h8-slide--copy.h8-slide--noart { grid-template-columns: minmax(0, 1fr); }
    .h8-slide--noart .h8-slide__copy { padding-inline-end: 16px; }
    .h8-slide__copy { padding: 16px 0 16px 16px; gap: 8px; }
    /* A long word (Tamil, Kannada) or a long admin word never runs under the picture: it wraps inside the copy. */
    .h8-slide__copy > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    .h8-slide__eyebrow { font-size: 14px; }
    .h8-slide__hook { font-size: 23px; }
    .h8-slide__sub, .h8-slide__proofs, .h8-pay, .h8-car__next { display: none; }
    .h8-slide--pic img { height: auto; aspect-ratio: 2 / 1; }
    .h8-slide__art::before { background: linear-gradient(90deg, #0F4AA8 0%, rgba(15, 74, 168, 0) 45%); }
    .h8-buy { min-height: 44px; padding: 0 16px; font-size: 15px; }
    .h8-car__track { border-radius: 20px; }
    .h8-car__dots [data-v3-dot] { width: 44px; height: 44px; }
    .h8-car__pp { width: 48px; height: 44px; }
    .h8-h2, .v3-home--nearby .v3-h8 .v3-h2 { font-size: 22px; }
    .h8-sec-head__more { margin-inline-start: 0; }
    .h8-quads { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .h8-quad { padding: 12px; }
    .h8-quad__title { font-size: 17px; }
    /* H8 round 15: two tiles a row on the phone (as Amazon's phone cards): four 74 px tiles broke real category
       names mid-word ("Microwav-e", "Refrigerat-ors") and stacked "From" over the price. */
    .h8-quad__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
    .h8-quad__img { aspect-ratio: 16 / 10; }
    .h8-quad__name.h8-skel { height: 20px; }
    .h8-quad__grid small.h8-skel { height: 20px; }
    .h8-quads:not(.has-keep) > .h8-quad:not(.h8-quad--keep):nth-of-type(n+3), .h8-quads.has-keep > .h8-quad:not(.h8-quad--keep):nth-of-type(n+2) { display: none; }
    .h8-prices { grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
    .h8-prices::-webkit-scrollbar { display: none; }
    .h8-pz { scroll-snap-align: start; }
    .h8-app { display: none; }
    .h8-row6.h8-swipe, .h8-grid3, .v3-home--nearby .v3-h8 .v3-rail { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 16px; }
    .v3-home--nearby .v3-h8 .v3-rail > .v3-card { flex: none; scroll-snap-align: start; }
    .v3-home--nearby .v3-h8 .v3-pgrid, .h8-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .v3-h8 .v3-card--h8 .v3-card__name { font-size: 15px; line-height: 1.45; min-height: 2.9em; } /* exactly two lines: 2.95em let a long name's third line peek out (H8 round 8) */
    .v3-h8 .v3-card--h8 .v3-price { font-size: 19px; }
    .v3-h8 .v3-card--h8 .v3-card__delivery { font-size: 14px; }
    .v3-h8 .v3-card--h8 .v3-card__shop { min-height: 44px; }
    .h8-pinbar > span { flex-basis: 100%; }
    .h8-pinbar .h8-btn { flex: 1 1 100%; }
    .v3-h8 > .h8-finder { padding: 16px; border-radius: 20px; }
    .h8-finder__h { font-size: 22px; }
    .h8-ftabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .h8-ftabs button { font-size: 15px; padding: 0 8px; }
    .h8-ftabs button .v3i { display: none; }
    .h8-fchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .h8-fchip { font-size: 14px; padding: 4px 6px; line-height: 1.2; border-radius: 12px; }
    .h8-fgrid, .h8-why, .h8-strips, .h8-deals3 { grid-template-columns: minmax(0, 1fr); }
    .h8-panel { padding: 16px; }
    .h8-panel__h { font-size: 21px; }
    .h8-score__big { font-size: 40px; }
    .h8-revs > .h8-rev:nth-child(n+3) { display: none; }
    .h8-mini-card { grid-template-columns: 64px minmax(0, 1fr); }
    .h8-mini-card img { width: 64px; height: 52px; }
    .h8-mini-card .h8-add, .h8-mini-card .h8-incart { grid-column: 1 / -1; min-height: 48px; }
    .h8-strip { flex-wrap: wrap; }
    .h8-strip div { flex: 1 1 60%; }
    .h8-strip .h8-btn { margin-inline-start: 0; flex: 1 1 100%; }
    .h8-guar { grid-template-columns: 1fr 1fr; padding: 12px !important; }
    .h8-qr-card { padding: 16px; }
    .h8-h1 { font-size: 26px; }
    .h8-paste, .h8-paste summary { width: 100%; justify-content: center; min-height: 48px; }
    .h8-lastorder { grid-template-columns: minmax(0, 1fr); }
    .h8-qo__row { grid-template-columns: 48px minmax(0, 1fr); }
    .h8-qo__row > .h8-qo__buy, .h8-qo__row > .h8-btn, .h8-qo__row > .h8-qo__out { grid-column: 1 / -1; }
    .h8-qo__buy .h8-step { flex: 1; width: auto; }
    .h8-rates { padding: 14px; }
    .h8-deal { grid-template-columns: minmax(0, 1fr) 88px; }
    .h8-deal img { width: 88px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    .h8-car__track { scroll-behavior: auto; }
    .h8-car__dots [data-v3-dot]::before { transition: none; }
}

/* ---------- right to left (Arabic; H8 round 9): asymmetric paddings and the picture's fade face the copy ---------- */
[dir="rtl"] .h8-slide__copy { padding: 30px 34px 78px 8px; }
[dir="rtl"] .h8-slide--noart .h8-slide__copy { padding-left: 34px; }
[dir="rtl"] .h8-slide__art::before { background: linear-gradient(270deg, #0E47A6 0%, rgba(14, 71, 166, 0) 32%); }
[dir="rtl"] .h8-qsearch__form { padding: 4px 18px 4px 4px; }
@media (max-width: 760px) {
    [dir="rtl"] .h8-slide__copy { padding: 16px 16px 16px 0; }
    [dir="rtl"] .h8-slide--noart .h8-slide__copy { padding-left: 16px; }
    [dir="rtl"] .h8-slide__art::before { background: linear-gradient(270deg, #0F4AA8 0%, rgba(15, 74, 168, 0) 45%); }
}

/* H8 round 27 (layout shift on a slow phone): the private "From shops near you" slot is held at about its height while
   its POST answers, and the Best sellers placeholder is the rail's height (505 to 521 px at every width), not a
   5-card grid (782 px on a phone, 299 px on a desktop). */
.v3-h8 > #h8-near.is-wait { min-height: 620px; border-radius: 16px; background: #E9EEF4; }
.v3-h8 #section_best_selling > .v3-pgrid[aria-hidden="true"] { height: 510px; overflow: hidden; align-content: start; }
@media (max-width: 767px) { .v3-h8 > #h8-near.is-wait { min-height: 720px; } }
/* Same for Today's deals (475 to 530 px filled) and the local reviews panel beside the QC steps (about 490 px on a
   desktop, 548 px on a phone). */
.v3-h8 #section_todays_deal > .v3-pgrid[aria-hidden="true"] { height: 510px; overflow: hidden; align-content: start; }
.h8-why > .h8-panel--reviews.is-wait { min-height: 490px; }
@media (max-width: 767px) {
    .v3-h8 #section_todays_deal > .v3-pgrid[aria-hidden="true"] { height: 475px; }
    .h8-why > .h8-panel--reviews.is-wait { min-height: 548px; }
}
/* The signed-in "Continue with / price drops / buy again" slot (576 px on a desktop, about 930 on a phone when filled). */
.v3-h8 > .h8-slot[data-h8-part="mine"].is-wait { min-height: 560px; border-radius: 16px; background: #E9EEF4; }
@media (max-width: 767px) { .v3-h8 > .h8-slot[data-h8-part="mine"].is-wait { min-height: 900px; } }

/* H8 round 28 (layout shift): the New arrivals grid is held by the same grid of empty cards while its POST answers
   (the footer was pushed about 3,000 px on a phone when a reader reached the end first). The pictures keep the card's
   4:3 box and the grid its columns; the body is held at the filled card body's usual height, measured per width on
   the demo catalogue (360-390: 334-364, 414: 312-342, 600: 272-302, 768-1024: 283-305, 1280: 329, 1440: 283-305 px). */
.v3-h8 .h8-newest-wait .v3-card { pointer-events: none; box-shadow: none; }
.v3-h8 .h8-newest-wait .v3-card__media { background: #E9EEF4; }
.v3-h8 .h8-newest-wait .v3-card__body { min-height: 293px; }
@media (max-width: 1365px) { .v3-h8 .h8-newest-wait .v3-card__body { min-height: 328px; } }
@media (max-width: 1099px) { .v3-h8 .h8-newest-wait .v3-card__body { min-height: 288px; } }
@media (max-width: 767px) { .v3-h8 .h8-newest-wait .v3-card__body { min-height: 301px; } }
@media (max-width: 559px) { .v3-h8 .h8-newest-wait .v3-card__body { min-height: 331px; } }
@media (max-width: 399px) { .v3-h8 .h8-newest-wait .v3-card__body { min-height: 360px; } }

/* Owner 7 Nov 2026: on a phone the row under the banner (dots + pause) took a tall blue strip. It now sits close
   under the banner with smaller dots and a smaller pause ring; every button keeps a 44 px tall tap area (the
   visible ring is drawn inside it), so nothing gets harder to tap. */
@media (max-width: 760px) {
    .h8-band-x.h8-hero { padding-bottom: 6px; }
    .h8-hero .h8-car__dots { margin-top: 0; gap: 0; }
    .h8-hero .h8-car__dots [data-v3-dot] { width: 28px; height: 44px; }
    .h8-hero .h8-car__dots [data-v3-dot]::before { width: 7px; height: 7px; }
    .h8-hero .h8-car__dots [data-v3-dot][aria-current="true"]::before { width: 20px; }
    .h8-hero .h8-car__pp { position: relative; width: 44px; height: 44px; margin-inline-start: 4px; border: 0; }
    .h8-hero .h8-car__pp::before { content: ""; position: absolute; inset: 9px 7px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; }
}