/*
 * Payism V3 website: Header 8 (the "Nearby" header type), owner-approved prototype v2 (31 Oct 2026).
 * Markup: resources/views/frontend/v3/header/header8.blade.php. Loaded only while Header 8 is the picked header.
 * Colours come from the type's element_styles (nearby_header_*), printed as custom properties on .h8-head.
 * One saffron (#FF9933, dark text) for buy actions and deal urgency only. Text 14 px and up, 48 px targets.
 */
:root {
    --h8-navy: #0A2E6E; --h8-blue: #1366D6; --h8-blue-d: #0F56B8; --h8-sky: #E7F0FD; --h8-page: #F3F6FB;
    --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;
}
body.v3.v3-page, body.v3.v3-page .payism-main-wrapper { background: var(--h8-page) !important; }
/* E2E round 10 (accessibility): under Header 8 the V3 link blue is the darker Payism blue, so links, badges and
   "View all" on the light blue tints and the grey page pass AA (the V3 #0977C0 measured 4.15 to 4.39 : 1). */
html:root { --v3-brand-600: #0F56B8; --v3-brand-700: #0B4697; } /* html:root outranks the :root copies in the later buy and catalog layers */

.h8-head { position: relative; z-index: 1030; color: var(--h8-on-band, #fff); font-family: "Plus Jakarta Sans", "Noto Sans Devanagari", "Segoe UI", system-ui, sans-serif; }
/* E2E 30 wave C (a11y): chrome.css's saffron ring (body.v3 :focus-visible, #FFB54D: 1.75:1 on white) out-ranked these,
   so Header 8 pages showed it on white cards, menus and the PIN popover. Under Header 8 the ring is blue on white and
   white on the blue band (both 3:1 or better); body.v3 gives these rules the weight to win. */
body.v3 :focus-visible { outline: 3px solid var(--h8-blue); outline-offset: 2px; }
body.v3 .v3-footer :focus-visible { outline-color: #fff; }
body.v3 .h8-head :focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 8px; }
body.v3 .h8-head .v3-search :focus-visible, body.v3 .h8-head .v3-acct__menu :focus-visible, body.v3 .h8-head .v3-menu :focus-visible, body.v3 .h8-head .h8-mega :focus-visible, body.v3 .h8-head .h8-mini__search :focus-visible { outline-color: var(--h8-blue); }

/* 1. top bar */
.h8-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 8px max(28px, calc((100vw - 1384px) / 2)); background: var(--h8-top, #082F6B); color: var(--h8-on-top, #fff); font-size: 14px; }
.h8-top__promo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: #E3ECFA; }
.h8-top__tag { background: var(--h8-cta, var(--h8-saffron)); color: var(--h8-on-saffron); border-radius: 999px; padding: 1px 10px; font-weight: 700; }
.h8-top__links { margin-inline-start: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.h8-top__links a { color: #fff !important; font-weight: 700; text-decoration: none; }
.h8-top__links a:hover { text-decoration: underline; }

/* 2. the band */
.h8-band { position: relative; padding: 18px max(28px, calc((100vw - 1384px) / 2)) 10px;
    background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--h8-band-2, #1366D6) 85%, #fff) 0%, transparent 55%), linear-gradient(160deg, var(--h8-navy) 0%, var(--h8-band, #0B4FB3) 60%, var(--h8-band-2, #1366D6) 100%);
    border-radius: 0 0 28px 28px; }
.h8-band::before, .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 > * { position: relative; }
/* The Homepage 8 home carries the band on under the header (frontend/v3/home/h8_hero.blade.php). */
body.v3-home--nearby .h8-band { border-radius: 0; background: radial-gradient(90% 120% at 85% 0%, color-mix(in srgb, var(--h8-band-2, #1366D6) 70%, #fff 0%) 0%, transparent 60%), linear-gradient(180deg, var(--h8-navy) 0%, var(--h8-band, #0B4FB3) 100%); }
body.v3-home--nearby:not(:has(.h8-band-x)) .h8-band { border-radius: 0 0 28px 28px; }

.h8-row { display: flex; align-items: center; gap: 12px 14px; flex-wrap: nowrap; }
.h8-logo { flex: none; display: inline-flex; }
.h8-logo img { height: 44px; width: auto; max-width: 180px; object-fit: contain; }
/* The admin logo drawn white on the band: a transparent logo turns white, a logo on a white box loses the box. */
.h8-logo img, .h8-mini__logo img { filter: grayscale(1) invert(1) contrast(4); mix-blend-mode: screen; }
.h8-biztag { flex: none; font-weight: 700; font-size: 18px; padding-inline-start: 12px; border-inline-start: 1px solid rgba(255, 255, 255, .35); }
.h8-row__menu { display: none !important; }

/* the big pill search (frontend/v3/search/box.blade.php) */
.h8-head .v3-search { flex: 1 1 300px; max-width: none; margin: 0; }
.h8-head .v3-search__bar { height: 56px; padding: 4px 4px 4px 14px; gap: 4px; border: 2px solid transparent; border-radius: 999px; background: var(--h8-search, #fff); box-shadow: 0 6px 18px rgba(4, 20, 60, .25); }
.h8-head .v3-search.is-open .v3-search__bar, .h8-head .v3-search__bar:focus-within { border-color: #8CC0FF; box-shadow: 0 0 0 4px rgba(140, 192, 255, .35), 0 6px 18px rgba(4, 20, 60, .25); }
.h8-head .v3-search__scope { display: none; }
.h8-head .v3-search__lens { display: inline-flex; color: var(--h8-blue); padding: 0 2px 0 4px; }
.h8-head .v3-search__input { font-size: 16px; color: var(--h8-ink); }
.h8-head .v3-search__input::placeholder { color: #5B6B82; }
.h8-head .v3-search__mic, .h8-head .v3-search__go { flex: none; width: 46px; height: 46px; margin: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.h8-head .v3-search__mic { background: var(--h8-sky); color: var(--h8-blue); }
.h8-head .v3-search__mic.is-on { background: #FFE7CC; color: #8A3B00; }
.h8-head .v3-search__go { background: var(--h8-blue); color: #fff; }
.h8-head .v3-search__go:hover { background: var(--h8-blue-d); }
.h8-head .v3-suggest { color: var(--h8-ink); }

/* chips and round buttons */
.h8-chip { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff !important; font-weight: 700; font-size: 14px; white-space: nowrap; flex: none; text-decoration: none; cursor: pointer; }
.h8-chip:hover { background: rgba(255, 255, 255, .22); }
.h8-chip__two { display: block; min-width: 0; line-height: 1.2; text-align: start; }
.h8-chip__two small { display: block; font-weight: 500; font-size: 13px; color: #D5E3F8; }
.h8-chip__two b, .h8-chip__two small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h8-pin { max-width: 200px; background: #fff; color: var(--h8-blue) !important; border-color: #fff; }
.h8-pin .h8-chip__two small { color: var(--h8-ink-2); }
.h8-ibtn, .h8-head .v3-cart__btn, .h8-wish a { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); display: inline-flex; align-items: center; justify-content: center; position: relative; color: #fff !important; flex: none; font-weight: 700; font-size: 14px; text-decoration: none; }
.h8-ibtn:hover, .h8-wish a:hover { background: rgba(255, 255, 255, .22); }
.h8-lang__btn::after { display: none; }
.h8-lang .v3-menu .dropdown-item { font-size: 16px; color: var(--h8-ink) !important; }
/* The current language: Bootstrap's white .active text sat on the menu's pale hover tint (unreadable). */
.h8-lang .v3-menu .dropdown-item.active { color: var(--h8-blue) !important; background: var(--h8-sky); font-weight: 700; }
.h8-badge, .h8-head .v3-dot { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--h8-cta, var(--h8-saffron)); color: var(--h8-on-saffron) !important; font-size: 14px; font-weight: 700; display: grid; place-items: center; border: 2px solid #0F4FB0; line-height: 1; }
.h8-head .v3-cart__ico { position: static; display: inline-flex; }
.h8-head .v3-cart__ico .v3-dot[data-count="0"] { display: none; }
.h8-head .v3-cart__total { display: none; }
.h8-wish { flex: none; }
.h8-wish a span.fs-13 { display: none !important; }
.h8-wish svg { stroke: #fff; }
.h8-wish .badge { background: var(--h8-cta, var(--h8-saffron)) !important; color: var(--h8-on-saffron) !important; }
.h8-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--h8-blue); border: 2px solid rgba(255, 255, 255, .75); display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 16px; cursor: pointer; padding: 0; }
.h8-acct { flex: none; position: relative; }
.h8-acct__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--h8-page); border-radius: 12px; padding: 4px; margin: 4px 0 8px; }
.h8-acct__modes button { border: 0; background: transparent; min-height: 44px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--h8-ink-2); cursor: pointer; }
.h8-acct__modes button[aria-pressed="true"] { background: #fff; color: var(--h8-blue); box-shadow: 0 2px 6px rgba(16, 42, 90, .12); }
.h8-mode { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); flex: none; }
.h8-mode > * { border: 0; background: transparent; color: #fff !important; min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; cursor: pointer; }
.h8-mode [aria-pressed="true"], .h8-mode .h8-mode__on { background: #fff; color: var(--h8-blue) !important; }

/* 3. the order nudge */
.h8-nudge-slot { margin-top: 14px; }
.h8-nudge { display: flex; align-items: center; gap: 12px; background: #fff; color: var(--h8-ink); border-radius: 18px; padding: 10px 12px 10px 14px; box-shadow: 0 8px 22px rgba(4, 20, 60, .22); }
.h8-nudge__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--h8-green-bg); color: var(--h8-green); display: grid; place-items: center; flex: none; }
.h8-nudge__ic--cart { background: var(--h8-sky); color: var(--h8-blue); }
.h8-nudge__txt { min-width: 0; margin: 0; }
.h8-nudge__txt b { display: block; font-size: 16px; }
.h8-nudge__txt small { color: var(--h8-ink-2); font-size: 14px; }
.h8-nudge__track { display: flex; gap: 4px; margin: 0 0 0 auto; list-style: none; padding: 0; }
/* E2E round 6: the steps follow the order (Ordered, Shipped, Out for delivery, Delivered). */
.h8-nudge__track li { width: 28px; height: 6px; border-radius: 999px; background: var(--h8-line); }
.h8-nudge__track li.done { background: var(--h8-green); }
.h8-nudge__track li.now { background: linear-gradient(90deg, var(--h8-green) 50%, var(--h8-line) 50%); }
.h8-nudge__link { color: inherit !important; text-decoration: none; }
.h8-nudge__link:hover, .h8-nudge__link:focus-visible { text-decoration: underline; }
.h8-nudge__buy--extra { gap: 6px; }
.h8-nudge__btn { border: 1.5px solid var(--h8-blue); background: #fff; color: var(--h8-blue) !important; border-radius: 12px; min-height: 44px; padding: 0 14px; font-weight: 700; flex: none; display: inline-flex; align-items: center; text-decoration: none; }
.h8-nudge__txt + .h8-nudge__btn, .h8-nudge__txt + .h8-nudge__buy { margin-inline-start: auto; }
.h8-nudge__buy { border: 0; background: var(--h8-cta, var(--h8-saffron)); color: var(--h8-on-saffron) !important; border-radius: 12px; min-height: 44px; padding: 0 14px; font-weight: 700; display: inline-flex; align-items: center; flex: none; text-decoration: none; }
/* H8 round 11: the nudge's placeholder while the private POST answers (same box, grey bars, no motion needed). */
.h8-nudge--skel .h8-nudge__ic, .h8-nudge--skel .h8-nudge__txt b, .h8-nudge--skel .h8-nudge__txt small, .h8-nudge--skel .h8-nudge__btn, .h8-nudge--skel .h8-nudge__buy { background: var(--h8-tile); border-color: transparent; color: transparent; }
.h8-nudge--skel { min-height: 68px; }
.h8-nudge--skel .h8-nudge__txt { flex: 1 1 auto; }
.h8-nudge--skel .h8-nudge__txt b { height: 18px; width: min(320px, 70%); border-radius: 6px; margin: 3px 0 6px; }
.h8-nudge--skel .h8-nudge__txt small { display: block; height: 15px; width: min(420px, 90%); border-radius: 6px; margin-bottom: 3px; }
.h8-nudge--skel .h8-nudge__txt small + small { display: none; }
.h8-nudge--skel .h8-nudge__btn, .h8-nudge--skel .h8-nudge__buy { width: 150px; }
.h8-nudge__x { border: 0; background: transparent; color: var(--h8-ink-2); font-size: 24px; width: 44px; height: 44px; border-radius: 50%; flex: none; cursor: pointer; }

/* 4. category icon row */
.h8-cats { display: flex; align-items: stretch; gap: 6px; margin-top: 16px; }
.h8-cats__list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; list-style: none; padding: 0; margin: 0; flex: 1 1 auto; }
.h8-cats__list::-webkit-scrollbar { display: none; }
.h8-cats__list li { flex: 1 0 auto; }
.h8-cat { width: 100%; min-width: 92px; border: 0; background: transparent; color: #fff !important; display: grid; justify-items: center; gap: 6px; padding: 8px 6px 10px; border-radius: 14px; font-weight: 700; font-size: 14px; min-height: 64px; text-decoration: none; cursor: pointer; }
.h8-cat:hover { background: rgba(255, 255, 255, .1); }
.h8-cat.is-on { box-shadow: inset 0 -3px 0 #fff; }
/* T3 (6 Nov 2026): every icon sits on one white rounded tile: the admin's line icon (categories.icon_key) in the band
   colour, or the uploaded icon as it is. The old whitening filter (grayscale + invert + screen) made photos blurry
   silhouettes and, inside the phone row's mask, black squares; it is gone. */
.h8-cat__ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #fff; color: var(--h8-band, #0B4FB3); box-shadow: 0 1px 3px rgba(4, 22, 60, .18); overflow: hidden; transition: transform .15s ease; }
.h8-cat__ico .pcat-ico { width: 24px; height: 24px; }
.h8-cat__ico img { width: 30px; height: 30px; object-fit: contain; filter: none; mix-blend-mode: normal; }
.h8-cat:hover .h8-cat__ico { transform: translateY(-1px); }
.h8-cat.is-on .h8-cat__ico { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.h8-cat--all { flex: none; width: auto; }
.h8-mega { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: calc(100% + 4px); z-index: 1031; color: var(--h8-ink); }
.h8-mega__panel { display: grid; grid-template-columns: 280px minmax(0, 1fr); background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(8, 20, 45, .3); overflow: hidden; min-height: 360px; }
.h8-mega .v3-mega__pane { padding: 20px 24px; }
/* T4 (team issues 6 Nov 2026): the right pane is a grid of sub-category tiles with "View all <category>", and up to four
   best sellers when there are few sub-categories (MegaMenu). header.css's 2-column pane grid (Header 1-6, promo column)
   put the lone "View all" at the far right; the Header 8 pane is one column. Pictures sit on a tile that already shows
   the category's line icon, so a slow or missing picture never leaves a blank or a spinner. */
.h8-mega .h8-mega__pane { grid-column: 2; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.h8-mega .h8-mega__pane[hidden] { display: none; }
.h8-mega__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.h8-mega__title { font-size: 18px; line-height: 26px; font-weight: 800; color: var(--h8-ink); }
.h8-mega .h8-mega__viewall { display: inline-flex; align-items: center; gap: 2px; margin: 0; min-height: 32px; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--h8-blue) !important; }
.h8-mega .h8-mega__viewall:hover { text-decoration: underline !important; }
.h8-mega__tiles, .h8-mega__picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.h8-mega__tiles { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.h8-mega__tile { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 12px 8px; border: 1px solid transparent; border-radius: 16px; background: var(--h8-page); color: var(--h8-ink) !important; text-align: center; text-decoration: none !important; transition: border-color .15s, background .15s; }
.h8-mega__tile:hover { border-color: var(--h8-line); background: var(--h8-sky); }
.h8-mega__tile-img, .h8-mega__pick-img { position: relative; display: grid; place-items: center; overflow: hidden; color: var(--h8-blue); }
.h8-mega__tile-img { width: 64px; height: 64px; border-radius: 14px; background: #fff; }
.h8-mega__tile-img > svg { width: 32px; height: 32px; } /* line icon fills the tile (owner, 6 Nov) */
.h8-mega .h8-mega__tile-img img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.h8-mega__tile-img img, .h8-mega__pick-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.h8-mega__tile-name { font-size: 14px; line-height: 20px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.h8-mega__sub { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--h8-ink-2); }
.h8-mega__picks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.h8-mega__pick { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 10px; border: 1px solid var(--h8-line); border-radius: 16px; background: #fff; color: var(--h8-ink) !important; text-decoration: none !important; transition: box-shadow .15s, border-color .15s; }
.h8-mega__pick:hover { border-color: var(--h8-blue); box-shadow: 0 6px 18px rgba(8, 20, 45, .1); }
.h8-mega__pick-img { width: 100%; aspect-ratio: 1 / 1; max-height: 132px; border-radius: 12px; background: var(--h8-tile); }
.h8-mega__pick-name { font-size: 14px; line-height: 20px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h8-mega__pick-price { margin-top: auto; font-size: 16px; font-weight: 800; color: var(--h8-ink); }
/* Skeleton picks while the full panes load (MegaMenu::light()); same box as a pick, so nothing moves when they arrive. */
.h8-mega__pick--skel { pointer-events: none; }
.h8-mega__pick--skel .h8-mega__pick-img, .h8-mega__skel-line { background: linear-gradient(90deg, var(--h8-tile) 25%, var(--h8-page) 50%, var(--h8-tile) 75%); background-size: 200% 100%; animation: h8-mega-skel 1.2s ease-in-out infinite; }
.h8-mega__skel-line { display: block; height: 12px; border-radius: 6px; }
.h8-mega__skel-line--short { width: 55%; height: 14px; margin-top: 4px; }
@keyframes h8-mega-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .h8-mega__pick--skel .h8-mega__pick-img, .h8-mega__skel-line { animation: none; } }

/* 5. the compact sticky search */
.h8-mini { position: fixed; inset-inline-start: 0; inset-inline-end: 0; top: 0; z-index: 1035; display: flex; gap: 12px; align-items: center; padding: 8px max(28px, calc((100vw - 1384px) / 2));
    background: linear-gradient(90deg, var(--h8-navy), #0F4FB0); color: #fff; box-shadow: 0 8px 20px rgba(4, 20, 60, .25); transform: translateY(-120%); visibility: hidden; transition: transform .18s ease, visibility .18s; }
.h8-head.is-stuck .h8-mini { transform: none; visibility: visible; }
.h8-mini__logo img { height: 32px; width: auto; }
.h8-mini__search { flex: 1 1 auto; max-width: 820px; display: flex; align-items: center; gap: 4px; height: 50px; padding: 4px 4px 4px 16px; background: #fff; border-radius: 999px; color: var(--h8-blue); }
.h8-mini__search input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 16px; color: var(--h8-ink); background: transparent; padding: 0 8px; }
.h8-mini__go { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--h8-blue); color: #fff; display: grid; place-items: center; }
.h8-mini__cart { margin-inline-start: auto; }
/* the white ring of the band would vanish on the white search pill */
.h8-head .h8-mini__search :focus-visible { outline-color: var(--h8-blue); }

/* laptop width: one row */
@media (max-width: 1400px) {
    .h8-pin { max-width: 180px; }
    .h8-mode > * { padding: 0 10px; }
}
@media (max-width: 1180px) {
    .h8-row { flex-wrap: wrap; }
    .h8-head .v3-search { order: 9; flex-basis: 100%; }
    .h8-row .h8-acct { margin-inline-start: auto; }
}
/* E2E 30 round 31: tablets (761-1023 px). The icon line did not fit beside the logo, PIN, language and Shopping/
   Business pill, so the cart and account (and a retailer's bell and wishlist) wrapped to a second line under the logo,
   and the mini-cart opened from there 248 px off the left edge at 768. As on phones, the "Business" tag (the pill
   says it) goes, and below 900 px the bell and wishlist move to the account menu, which lists both. */
@media (min-width: 761px) and (max-width: 1023.98px) {
    .h8-row .h8-biztag { display: none !important; }
}
/* E2E 30 round 32: laptops (1181-1439 px). With the Shopping/Business pill, bell and wishlist on the line, a retailer's
   search box shrank to 52 px at 1280 (24 px at 1200), so the typed words could not be read. The "Business" tag goes
   here too (the pill says it), which gives the box back about 100 px. */
@media (min-width: 1181px) and (max-width: 1439.98px) {
    .h8-row:has(.h8-mode) .h8-biztag { display: none !important; }
}
/* Owner 3 Nov ("finish it"): at 1181-1279 px a retailer's search box was still only 76 px wide (at 1200), so on a
   retailer's row it takes its own full-width line there, as it does below 1181 px for everyone. */
@media (min-width: 1181px) and (max-width: 1279.98px) {
    .h8-row:has(.h8-mode) { flex-wrap: wrap; }
    .h8-head .h8-row:has(.h8-mode) .v3-search { order: 9; flex-basis: 100%; }
    .h8-row:has(.h8-mode) .h8-acct { margin-inline-start: auto; }
}
@media (min-width: 761px) and (max-width: 899.98px) {
    .h8-row:has(.h8-mode) .h8-bell, .h8-row:has(.h8-mode) .h8-wish { display: none !important; }
}
/* phone */
@media (max-width: 760px) {
    .h8-top { padding: 7px 16px; }
    .h8-top__links { display: none; }
    .h8-band { padding: 12px 16px 6px; }
    body:not(.v3-home--nearby) .h8-band { border-radius: 0 0 24px 24px; }
    .h8-row { gap: 8px; }
    .h8-row__menu { display: inline-flex !important; }
    .h8-logo img { height: 34px; }
    /* The language button stays on phones (prototype v2 "अ/A"): the drawer list is far down. */
    .h8-biztag, .h8-mode, .h8-bell, .h8-wish, .h8-login__lbl { display: none !important; }
    .h8-lang .v3-menu { position: absolute; inset-inline-end: 0; inset-inline-start: auto; top: calc(100% + 6px); min-width: 180px; max-height: 70vh; overflow-y: auto; }
    .h8-lang .v3-menu .dropdown-item { min-height: 48px; display: flex; align-items: center; }
    /* E2E 30 round 2: the mini-cart (320 px) hung from the cart button, the third of four, and ran off the left edge
       (26 px at 375, 34 at 360). It now hangs from the end of the header row, under its icon line. */
    .h8-row .h8-cart { position: static; }
    .h8-row .h8-cart > .dropdown-menu { top: 56px; inset-inline-end: 0; inset-inline-start: auto; width: min(360px, 100%); }
    /* Phone top bar: the saffron tag only (prototype "no-phone" sale line), unless there is no tag. */
    .h8-top__tag ~ span { display: none; }
    .h8-head .v3-search { order: 5; flex-basis: 100%; }
    .h8-head .v3-search__bar { height: 52px; }
    .h8-head .v3-search__go { display: none; }
    .h8-pin { order: 6; flex: 1 1 100%; max-width: none; height: 44px; justify-content: flex-start; }
    .h8-row .h8-cart { margin-inline-start: auto; }
    .h8-row .h8-lang ~ .h8-cart { margin-inline-start: 0; }
    .h8-row .h8-lang { margin-inline-start: auto; }
    /* Menu, language, cart and account (4 x 48 px) plus gaps share the row with the logo at 360 px. */
    .h8-logo img { max-width: min(160px, calc(100vw - 256px)); }
    .h8-login { width: 48px; padding: 0; justify-content: center; }
    .h8-nudge { flex-wrap: wrap; gap: 8px 10px; position: relative; padding-inline-end: 44px; }
    .h8-nudge__txt { flex: 1 1 60%; }
    /* The order's cart shortcut stays with the bottom bar's cart; the cart nudge keeps its Checkout (round 6). */
    .h8-nudge__track, .h8-nudge__buy--extra { display: none; }
    .h8-nudge__btn, .h8-nudge__buy { flex: 1 1 100%; justify-content: center; min-height: 48px; }
    .h8-nudge__x { width: 48px; height: 48px; }
    .h8-nudge__x { position: absolute; inset-inline-end: 2px; top: 2px; }
    /* Phone: the real order nudge wraps to two bold lines and two or three small ones; the cart one to one and two. */
    .h8-nudge--skel .h8-nudge__txt b { height: 44px; }
    .h8-nudge--skel .h8-nudge__txt small + small { display: block; width: 60%; }
    /* H8 round 27: measured at 390 px the order nudge is one bold block (48 px) and one small block (42 px); the two
       small skeleton lines made the placeholder 23 px taller, so the band shrank and the page moved up when it filled. */
    .h8-nudge--skel.h8-nudge--order .h8-nudge__txt small { height: 40px; }
    .h8-nudge--skel.h8-nudge--order .h8-nudge__txt small + small { display: none; }
    .h8-nudge--skel.h8-nudge--cart .h8-nudge__txt b { height: 22px; }
    .h8-nudge--skel.h8-nudge--cart .h8-nudge__txt small + small { display: none; }
    .h8-nudge--skel .h8-nudge__btn, .h8-nudge--skel .h8-nudge__buy { width: auto; }
    .h8-cats { margin: 12px -16px 0; padding: 0 10px; }
    .h8-cat { min-width: 76px; padding: 6px 4px 8px; }
    .h8-cat__ico { width: 36px; height: 36px; border-radius: 11px; }
    .h8-cat__ico .pcat-ico { width: 22px; height: 22px; }
    .h8-cat__ico img { width: 26px; height: 26px; }
    .h8-cat--all { display: none; }
    .h8-mini { padding: 8px 12px; gap: 8px; }
    .h8-mini__logo, .h8-mini__go { display: none; }
    .h8-mega__panel { grid-template-columns: 1fr; }
    /* Product cards: the delivery line wraps instead of cutting off the date ("मुफ़्त डिलीवरी द्वा…" in hi). */
    body.v3 .v3-card__delivery { align-items: flex-start; }
    body.v3 .v3-card__delivery span { white-space: normal; overflow: visible; text-overflow: clip; }
    body.v3 .v3-card__delivery .v3i { margin-top: 3px; }
    /* Card and section taps: the heart 44 px, "See all" links a full row high. */
    body.v3 .v3-card__icon { width: 44px; height: 44px; }
    body.v3 .v3-sec-head__link { display: inline-flex; align-items: center; min-height: 48px; }
    /* The whole compact pill takes the tap, not a 24 px strip of it. */
    .h8-mini__search input { align-self: stretch; }
    /* Toasts sit above the docked bars (bottom nav, the product page buy bar, the cart bar). */
    body.v3 .payism-notify { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
    /* Footer taps: 48 px (popular searches were 18 px text links, social 40 px). */
    body.v3 .v3-footer .v3-footer__popular a { display: inline-block; padding: 10px 2px; }
    body.v3 .v3-footer__social a { width: 48px; height: 48px; }
}

/* ---------- H8 round 18 (phone web deep pass, 360 / 375 / 414 and landscape) ---------- */
/* The page runs under the notch and the home bar (viewport-fit=cover under Header 8, layouts/app.blade.php), so the
   env(safe-area-inset-*) paddings of the docked bars take effect; side insets keep content out of the notch in
   landscape (iOS gives both sides the same inset there, so the logical sides hold in right to left too), the top inset
   keeps it out of the status bar in an installed web app. */
body.v3 { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.h8-head { padding-top: env(safe-area-inset-top); }
.h8-mini { padding-top: calc(8px + env(safe-area-inset-top)); }
body.v3 .v3-drawer { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left); }
@media (max-width: 760px) {
    /* The bottom nav labels stay at 13 px (header.css): an accepted exception to the 14 px floor, decided in round 20.
       Five labels of up to 15 characters ("Washing machine" class words in hi / mr) must fit one line in 72 px at 360. */
    body.v3 .v3-bnav { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
    .h8-mini { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
    body.v3 .v3p-phonebar.h8p-bar { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
    body.v3 .v3b-bar { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
    /* The product page band is the prototype's slim one (no category row): the picture, name and price come up. */
    body.h8-pdp-page .h8-cats { display: none; }
    body.h8-pdp-page .h8-band { padding-bottom: 14px; }
    /* Header taps at 48 px (the bazaar layer sets the cart to 44 on phones), and the PIN chip. */
    body.v3 .h8-head .h8-row .v3-cart__btn { width: 48px; min-width: 48px; height: 48px; }
    .h8-pin { height: 48px; }
    /* Text 14 px and up: the PIN chip, the drawer's group titles, the account menu, the trust strip. */
    .h8-chip__two small, body.v3 .v3-drawer__title, body.v3 .v3-drawer__copy, body.v3 .v3-acct__profile small, body.v3 .v3-trust__row b { font-size: 14px; }
    body.v3 .h8-head .v3-acct__item { min-height: 48px; font-size: 15px; }
    /* Product cards outside the home (search, category, product page rails, cart): the same 14 px floor as the home
       cards, and a 48 px hit area round the 32 px cart button. */
    body.v3 .v3-card__brand, body.v3 .v3-card .v3-mrp, body.v3 .v3-card .v3-off, body.v3 .v3-card__delivery, body.v3 .v3-card .v3-badge { font-size: 14px; }
    body.v3 .v3-card__name { font-size: 14px; line-height: 20px; min-height: 40px; }
    body.v3 .v3-card__add::after { content: ""; position: absolute; inset: -8px; }
    /* Account dashboard cards (pv2): 14 px text, a 44 px heart hit area, 44 px buttons. */
    body.v3 .pv2-pcard__name, body.v3 .pv2-pill, body.v3 .pv2-mrp, body.v3 .pv2-save, body.v3 .v3b-pill { font-size: 14px; }
    body.v3 .pv2-pcard__heart::after { content: ""; position: absolute; inset: -8px; }
    body.v3 .pv2-pcard .pv2-btn { min-height: 44px; font-size: 14px; }
    /* Search and category: the sort line, the filter counts and the page numbers. */
    body.v3 .v3-ls__bar small, body.v3 .v3-check__count { font-size: 14px; }
    body.v3 #pagination .page-link { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
    /* Cart and checkout: a 16 px coupon field (iOS zooms into anything smaller), 48 px steppers and links,
       14 px actions, and no empty strip where a shipment head has nothing to say. */
    body.v3 .v3b-input, body.v3 #v3b-coupon-code { font-size: 16px; }
    body.v3 .v3b .v3b-qty__btn { width: 48px; height: 48px; }
    body.v3 .v3b .v3b-qty__input { height: 48px; }
    body.v3 .v3b-line__acts .v3b-act, body.v3 .v3b-seller__head, body.v3 .v3b-bar__sub, body.v3 .v3co-items__qty, body.v3 .v3b-caption { font-size: 14px; }
    body.v3 .v3b-bar__sub, body.v3 .v3b-link, body.v3 .v3co-change { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }
    body.v3 .v3b-co-back { width: 48px; height: 48px; }
    body.v3 .v3b-crumb { font-size: 14px; }
    body.v3 .v3b-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
    body.v3 .v3b-seller__head:not(:has(.v3b-seller__name)) { display: none; }
    body.v3 .v3b-checkout #delivery_info .v3co-ship__by, body.v3 .v3b-checkout #delivery_info .v3co-ship .v3b-pill { font-size: 14px; }
    /* Business quick order: the whole pill takes the tap, not a 24 px strip of it. */
    .h8-qsearch__form input { align-self: stretch; }
    /* Footer taps: one-word popular searches ("AC") at least 48 px wide, the address toggle a full row high. */
    body.v3 .v3-footer .v3-footer__popular a { min-width: 48px; text-align: center; }
    body.v3 .v3-footer__addr summary { display: flex; align-items: center; min-height: 48px; }
    body.v3 .v3-footer__care small { font-size: 13px; }
    /* Admin alerts (cookie notice and the like) sit inside the screen and above the docked bars, not on them. */
    body.v3 .payism-custom-alert { left: 12px !important; right: 12px !important; width: auto; max-width: none; }
    body.v3 .payism-custom-alert.bottom-left, body.v3 .payism-custom-alert.bottom-right { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* H8 round 20: on phones up to 400 px the category page's sub-category tiles were 84 px wide and broke names mid-word
   ("Dishwasher / s"). There they go two per row (about 160 px each, a 64 px picture over the name), so a name
   wraps only between words. */
@media (max-width: 400px) {
    body.v3 .v3-cat__tiles { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 2px 0; gap: 8px; }
    body.v3 .v3-cat__tile { gap: 6px; padding: 8px 8px 10px; }
    body.v3 .v3-cat__tile-img { width: 64px; height: 64px; }
    body.v3 .v3-cat__tile-name { font-size: 14px; line-height: 18px; overflow-wrap: break-word; word-break: normal; } /* E2E 30 wave C: words still wrap whole; only a word wider than the tile breaks */
}

/* A phone on its side (740 x 360): the compact search, the sort bar and the bottom nav took half the screen on search
   and category pages; the sort bar scrolls with the page there. */
@media (max-width: 760px) and (max-height: 480px) and (orientation: landscape) {
    body.v3 .v3-ls__bar { position: static; }
}

/* Devanagari and the other Indic scripts carry marks above and below the line: multi-line headings need more
   leading than Latin, or the marks of two lines touch (hi/mr home hero, panels, product names). */
html:is([lang="hi"], [lang="mr"], [lang="kn"], [lang="te"], [lang="ta"], [lang="gu"], [lang="bn"]) :is(.h8-head, .v3-h8, .h8-pdp, .v3-footer) :is(h1, h2, h3, .h8-slide__hook, .h8-panel__h) { line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .h8-mini { transition: none; } }

/* E2E round 10 (accessibility), the V3 cart and checkout under Header 8:
   - "body.v3 a { color: inherit }" gave link buttons (checkout "Login to continue") dark text on blue (2.9 : 1);
   - the legacy form fields drew typed text and placeholders in #898B92 (3.4 : 1). */
body.v3 a.btn-primary, body.v3 a.btn-primary:hover, body.v3 a.btn-primary:focus { color: #fff; }
body.v3 .form-control { color: var(--v3-ink, #0F1B2D); }
body.v3 .form-control::placeholder { color: #5C6778; opacity: 1; }

/* ---------- right to left (Arabic; H8 round 9) ----------
   The layout uses logical sides (margin-inline-start, inset-inline-end, ...), so rows mirror on their own. These rules
   cover what does not: icons that point along the reading direction, asymmetric paddings, gradients and numbers.
   `scale` composes after any `transform`, so a rotated chevron keeps its up / down direction. */
[dir="rtl"] :is(.v3x-ico--dir, .v3-ico--dir),
[dir="rtl"] svg:has(> use:is([href="#v3i-chevron-right"], [href="#v3i-chevron-left"], [href="#v3i-back"], [href="#v3i-logout"])) { scale: -1 1; }
/* The count badges sit on the icon's top start corner (the shared styles place them with a physical right). */
[dir="rtl"] .h8-badge { right: auto; left: -6px; }
[dir="rtl"] body.v3 .h8-head .v3-dot { right: auto; left: -14px; }
[dir="rtl"] .h8-head .v3-search__bar { padding: 4px 14px 4px 4px; }
[dir="rtl"] .h8-head .v3-search__lens { padding: 0 4px 0 2px; }
[dir="rtl"] .h8-nudge { padding: 10px 14px 10px 12px; }
[dir="rtl"] .h8-nudge__track { margin: 0 auto 0 0; }
[dir="rtl"] .h8-nudge__track li.now { background: linear-gradient(270deg, var(--h8-green) 50%, var(--h8-line) 50%); }
[dir="rtl"] .h8-mini { background: linear-gradient(270deg, var(--h8-navy), #0F4FB0); }
[dir="rtl"] .h8-mini__search { padding: 4px 16px 4px 4px; }
/* Hours, minutes, seconds read left to right in Arabic too ("14:01:16", not "16:01:14"); the label stays first. */
[dir="rtl"] .v3-timer { direction: ltr; }
[dir="rtl"] .v3-timer > span { order: 9; }
/* A price after Arabic words turned "₹2,490" into "2,490₹" (the digits join the Arabic run): each price is its own
   isolate, so the rupee sign stays in front of the amount. */
[dir="rtl"] :is(.v3-price, .v3-mrp, .psf-mrp, .tnum, del, s, [id$="_price"], .h8p-slabt b, .h8-pz b, .h8-quad__from b) { unicode-bidi: isolate; }

/* H8 round 15: the Homepage 8 home and product page already end on their own bottom space; the trust row's own 64 px
   on top of it left an empty band of about 110 px before the footer. */
main:has(.v3-h8, .h8-pdp) + .v3-trust { margin-top: 8px; }
/* ...and on the home its card lines up with the Homepage 8 sections (28 px gutter, 1384 px wide), not the 72 px
   container the older layouts use. */
main:has(.v3-h8) + .v3-trust { max-width: calc(1384px + 56px); padding-inline: 28px; }
@media (max-width: 980px) { main:has(.v3-h8) + .v3-trust { padding-inline: 20px; } }
@media (max-width: 760px) { main:has(.v3-h8) + .v3-trust { padding-inline: 16px; } }

/* H8 round 21 (owner direction: the one saffron with dark text for buy actions): under Header 8 the cart's "Proceed
   to checkout" (and the phone cart bar's Checkout) and the checkout's forward steps ("Continue to ...", "Place order")
   are saffron; other headers keep the V3 blue. #1B1200 on #FF9933 is 8.7:1 and on the hover #F5881A 7.4:1 (WCAG AA
   asks 4.5:1). A disabled or blocked button keeps its grey. */
body.v3 .v3b-summary__cta.v3b-btn--primary:not(:disabled),
body.v3 .v3b-bar .v3b-btn--primary,
body.v3 .v3co-next [data-v3co-next].v3b-btn--primary,
body.v3 .v3b-checkout #submitOrderBtn:not(:disabled) { background: var(--h8-saffron) !important; color: var(--h8-on-saffron) !important; box-shadow: none !important; border: 0 !important; filter: none !important; }
body.v3 .v3b-summary__cta.v3b-btn--primary:not(:disabled):hover,
body.v3 .v3b-bar .v3b-btn--primary:hover,
body.v3 .v3co-next [data-v3co-next].v3b-btn--primary:hover,
body.v3 .v3b-checkout #submitOrderBtn:not(:disabled):hover { background: var(--h8-saffron-h) !important; color: var(--h8-on-saffron) !important; }
body.v3 .v3b-summary__cta.v3b-btn--primary:focus-visible,
body.v3 .v3b-bar .v3b-btn--primary:focus-visible,
body.v3 .v3co-next [data-v3co-next].v3b-btn--primary:focus-visible,
body.v3 .v3b-checkout #submitOrderBtn:focus-visible { outline: 3px solid var(--h8-navy) !important; outline-offset: 2px; }
body.v3 .v3b-checkout :has(> .v3co-next):has([data-eco="no-payment-option"]) > .v3co-next .v3b-btn { background: var(--v3-line-strong) !important; color: var(--v3-muted) !important; }
/* Until a payment way is picked and the terms are ticked, "Place order" is disabled: a plain grey button with readable
   text (the review step's blue gradient behind the disabled grey text read as a live but faded button). */
body.v3 .v3b-checkout #submitOrderBtn:disabled { background: #E3EAF2 !important; color: #4A5568 !important; box-shadow: none !important; border: 0 !important; cursor: not-allowed; }

/* H8 round 27 (speed): the phone-number fields of the closed sign-in and address dialogs drew their country flag from
   one 71 KB sprite (174 KB on a 2x phone), downloaded on every Header 8 page although the dialog was never opened.
   The flag is drawn once the dialog opens (Bootstrap adds .show). The phone field also measures its flag on a hidden
   copy appended to <body> for a moment (intl-tel-input), which fetched the sprite too. */
body.v3 .modal:not(.show) .iti__flag, body.v3 > .iti .iti__flag { background-image: none !important; }

/* H8 round 27 (accessibility): the account initial was white on #2B7DE9 (4.0:1); the brand blue #1366D6 reads 5.4:1. Above.
   Phone tap targets under 44 px grow their touch area with padding and an equal negative margin, so nothing moves:
   the logo (34 px), the Business rates category links (24), the product page's seller name (24), rating link (28),
   offer "Copy" (24), View notes / policy (24), the mini cards' names (20), the checkout footer links (22) and the
   Business quick-search button (40). */
@media (max-width: 767px) {
    body.v3 .h8-logo { padding-block: 5px; margin-block: -5px; }
    body.v3 .h8bz-rates__cat, body.v3 .h8-pdp .h8p-sold__name { padding-block: 10px; margin-block: -10px; }
    body.v3 .h8-pdp .v3p-meta__rating { padding-block: 8px; margin-block: -8px; }
    body.v3 .h8-pdp .h8p-offers .h8p-lnk { min-height: 44px; margin-block: -10px; }
    body.v3 .h8-pdp a.animate-underline-blue.flex-shrink-0 { display: inline-block; padding-block: 10px; margin-block: -10px; }
    body.v3 .h8-mini-card__n { padding-block: 12px; margin-block: -12px; }
    body.v3 .v3b-co-foot nav a, body.v3 .v3b-co-foot__help a { display: inline-block; padding-block: 11px; margin-block: -11px; }
    body.v3 .h8bz-qsearch .h8-qsearch__form button { position: relative; }
    body.v3 .h8bz-qsearch .h8-qsearch__form button::after { content: ""; position: absolute; inset: -2px; }
    body.v3 .h8bz-trust__txt a { display: inline-block; padding-block: 10px; margin-block: -10px; }
    body.v3 #pagination .page-link { min-width: 44px !important; height: 44px; line-height: 44px !important; }
}
/* H8 round 27 (a11y): on a phone the checkout's "Checkout" heading was display:none (the top bar's title is aria-hidden),
   so the page had no h1 for screen readers. It stays off screen but readable. */
@media (max-width: 767.98px) {
    body.v3 .v3b-checkout .v3b-co-title { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* H8 round 27 (layout shift): until the checkout's pre-paint script runs (it removes .v3co-pre), the steps it will fold
   are already folded: payment and review always, the address when a saved one is chosen, else delivery. */
body.v3 #checkout-form.v3co-pre:has(input[name="address_id"]:checked) [data-v3co="address"] > .collapse,
body.v3 #checkout-form.v3co-pre:not(:has(input[name="address_id"]:checked)) [data-v3co="delivery"] > .collapse,
body.v3 #checkout-form.v3co-pre [data-v3co="payment"] > .collapse,
body.v3 #checkout-form.v3co-pre [data-v3co="review"] > .collapse { display: none; }

/* H8 round 28 (phone E2E): the review step's agreement is one sentence beside its box (it was a wrapped row of flex
   items with the box above the words). The box is 22 px with the brand blue tick; "I agree to the" is its label. */
body.v3 .v3b-checkout .v3co-agree { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 22px; color: var(--v3-ink-2, #44546C); }
body.v3 .v3b-checkout .v3co-agree > input { width: 22px; height: 22px; margin: 0; accent-color: #1366D6; cursor: pointer; }
body.v3 .v3b-checkout .v3co-agree label { display: block; margin: 0; cursor: pointer; }
/* H8 round 28 (Hindi phone E2E): "Place order · Pay ₹1,843" broke inside each part in Hindi ("ऑर्डर / करें" beside
   "· भुगतान करें / ₹1,843"). Each part stays whole and the amount moves under the words when the row is full. */
body.v3 .v3b-checkout [data-v3co="review"] #submitOrderBtn .btn-text { flex-wrap: wrap; justify-content: center; white-space: nowrap; row-gap: 0; }

/* H8 round 29 (decision #18): the address form asks Pincode -> State -> City (State and City fill in from the PIN,
   address_modal.blade.php), then the house and the person; same fields, names and route. Phone and desktop. */
.modal[data-h8-addr] form .p-3 { display: flex; flex-direction: column; }
.modal[data-h8-addr] form .p-3 > :is(.payism-retail-eyebrow, p.text-muted) { order: -2; }
.modal[data-h8-addr] form .p-3 > .row:has([name="country_id"]) { order: 0; }
.modal[data-h8-addr] form .p-3 > .row:has([name="postal_code"]) { order: 1; }
.modal[data-h8-addr] form .p-3 > .row:has([name="state_id"]) { order: 2; }
.modal[data-h8-addr] form .p-3 > .row:has([name="city_id"]) { order: 3; }
.modal[data-h8-addr] form .p-3 > .row:has([name="area_id"]) { order: 4; }
.modal[data-h8-addr] form .p-3 > .row:has([name="address"]) { order: 5; }
.modal[data-h8-addr] form .p-3 > .row:has([name="name"]) { order: 6; }
.modal[data-h8-addr] form .p-3 > .row:has([name="phone"]) { order: 7; }
.modal[data-h8-addr] form .p-3 > .row:has([name="email"]) { order: 8; }
.modal[data-h8-addr] form .p-3 > .row:has([name="gst_number"]) { order: 9; }
.modal[data-h8-addr] form .p-3 > .row:has(#map, [name="latitude"], [name="longitude"]) { order: 10; }
.modal[data-h8-addr] form .p-3 > .form-group { order: 20; }/* The picked State and City sat at the top of their 50 px boxes; centred like the text fields. */
.modal[data-h8-addr] .bootstrap-select > .dropdown-toggle .filter-option { display: flex; align-items: center; }
/* The phone field's country button (intl-tel-input) drew over the docked Save button while scrolling under it. */
.modal[data-h8-addr] .v3as-save { z-index: 5; }

/* ---------- H8 round 31 (owner, 1 Nov 2026: the full header took 45% of a phone on the order page) ----------
   Below 768 px the header follows the page type (App\Support\V3\NearbyHeaderMode, data-h8-page on .h8-head):
   the home keeps everything; listings (.h8-head--list) keep the logo row, search and Deliver to; the product page
   (.h8-head--pdp) its compact band; account and inner pages (.h8-head--slim) get one 56 px sticky bar: back, the
   title, search (opens the full-screen search) and the cart. From 768 px up nothing changes. */
.h8-slim { display: none; }
@media (max-width: 767.98px) {
    .h8-head:is(.h8-head--list, .h8-head--pdp, .h8-head--slim) .h8-top { display: none; }
    .h8-head--list .h8-cats { display: none; }
    .h8-head--list .h8-band { padding-bottom: 12px; }

    .h8-head--slim { position: sticky; top: 0; box-shadow: 0 4px 14px rgba(4, 20, 60, .18); }
    .h8-head--slim .h8-band { padding: 0; background: none; border-radius: 0; }
    .h8-head--slim .h8-band::before { display: none; }
    .h8-head--slim .h8-row > :not(.v3-search), .h8-head--slim .h8-cats, .h8-head--slim .h8-mini { display: none !important; }
    /* The header's search box stays in the page out of sight: the bar's search button focuses it, and search.js opens
       it full screen (.is-full, position: fixed) with recent searches and suggestions. */
    .h8-head--slim .h8-row > .v3-search:not(.is-full) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
    .h8-slim { display: flex; align-items: center; gap: 4px; height: 56px; padding: 4px max(4px, env(safe-area-inset-right)) 4px max(4px, env(safe-area-inset-left));
        background: linear-gradient(90deg, var(--h8-navy), var(--h8-band, #0B4FB3)); color: var(--h8-on-band, #fff); }
    .h8-slim__title { flex: 1 1 auto; min-width: 0; margin: 0; padding-inline: 4px; font-size: 18px; font-weight: 700; line-height: 1.3; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .h8-slim__btn { flex: none; position: relative; width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: inherit !important; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; padding: 0; }
    .h8-slim__btn:hover, .h8-slim__btn:active { background: rgba(255, 255, 255, .14); }
    .h8-head .h8-slim .v3-dot { top: 2px; right: 0; min-width: 22px; height: 22px; font-size: 13px; }
    .h8-head .h8-slim .v3-dot[data-count="0"] { display: none; }
    [dir="rtl"] .h8-head .h8-slim .v3-dot { right: auto; left: 0; }

    /* The home's category icon row: a soft fade at the end edge says it scrolls, so the last name is never read cut
       mid-word ("Microwav"); it goes once the row is scrolled to its end (nearby.js sets .is-end). */
    .h8-cats__list { scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
    [dir="rtl"] .h8-cats__list { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent); }
    .h8-cats__list.is-end { -webkit-mask-image: none; mask-image: none; }
    .h8-cats__list li { scroll-snap-align: start; }
}

/* E2E 30 wave C (edge values): a 200-character name with no spaces (a product, a shop, a cart line, the product page
   title) breaks inside the box instead of running past it or widening its column. Normal names are unchanged:
   break-word only splits a word that cannot fit on a line of its own. */
body.v3 .v3-card__name, body.v3 .v3-card__name a, body.v3 .v3b-name, body.v3 .v3b-seller__name strong,
body.v3 .h8-pdp .v3p-title, body.v3 .h8bz-name, body.v3 .h8bz-name__t, body.v3 .h8-quad__title,
body.v3 .v3-acct__profile b { overflow-wrap: break-word; word-break: break-word; min-width: 0; }

/* Team issues 6 Nov 2026 (T7): the top bar stays one line. Desktop keeps every message on the line (the links never
   wrap under it); a phone shows the first message only (.h8-top__more is hidden), cut with an ellipsis if long. */
.h8-top { flex-wrap: nowrap; }
.h8-top__promo { flex-wrap: nowrap; min-width: 0; overflow: hidden; white-space: nowrap; }
.h8-top__msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h8-top__links { flex: none; flex-wrap: nowrap; white-space: nowrap; }
.h8-top__tag { flex: none; }
@media (max-width: 760px) {
    .h8-top__promo { width: 100%; }
    .h8-top__more { display: none; }
    .h8-top__msg { display: block; }
}

/* Owner 6 Nov 2026: the phone home header keeps the delivery PIN in the slim top line (a one-line "Deliver to"
   link, like Amazon and Flipkart) and drops the full-width white PIN pill under the search: about 56 px more of the
   categories and banner in the first screen. Owner 7 Nov 2026: one PIN everywhere, so the listing and product pages show
   the same slim line (and no pill) instead of hiding it; only the slim inner pages, which have their own bar, leave both out. */
.h8-top__pin { display: none; }
@media (max-width: 760px) {
    .h8-head:is(.h8-head--list, .h8-head--pdp) .h8-top { display: flex; }
    .h8-head:not(.h8-head--slim) .h8-top__promo { width: auto; flex: 1 1 auto; }
    .h8-head:not(.h8-head--slim) .h8-top__pin {
        display: inline-flex; align-items: center; gap: 4px; flex: none; max-width: 52%;
        min-height: 44px; margin-block: -7px; margin-inline-start: auto; padding: 0 2px; border: 0; background: none;
        color: var(--h8-on-top, #fff); font-size: 14px; font-weight: 600; cursor: pointer; }
    .h8-top__pin-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .h8-top__pin-pre { font-weight: 500; opacity: .85; }
    .h8-top__pin b { font-weight: 800; }
    .h8-head:not(.h8-head--slim) .h8-row .h8-pin { display: none; }
}
@media (max-width: 760px) {
    /* The sale tag shares the line with the PIN link: it shortens with an ellipsis instead of being cut mid-word. */
    .h8-head:not(.h8-head--slim) .h8-top__tag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 430px) {
    /* Most phones: "Deliver to" is dropped so the PIN (or "Enter your PIN") shows in full next to the pin icon. */
    .h8-top__pin-pre { display: none; }
}