/*
 * Payism Homepage 8 product page (HANDOFF/vnext/webhome_new prototype_v2, product page; H8_PLAN.md lane C).
 * A layer over pdp.css, loaded only while Homepage 8 or the Nearby header is live (PdpFacts::h8Look), and
 * scoped to .h8-pdp / body.h8-pdp-page so every other layout keeps today's product page.
 * One colour language: Payism blue for the brand, one saffron (#FF9933, dark text) for buy actions only.
 */
body.h8-pdp-page {
    --h8-blue: #1366D6; --h8-blue-d: #0F56B8; --h8-sky: #E7F0FD; --h8-page: #F3F6FB; --h8-card: #FFFFFF;
    --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-shadow: 0 6px 20px rgba(16, 42, 90, .06);
    background: var(--h8-page);
}
body.h8-pdp-page .payism-main-wrapper, .h8-pdp.v3c--white { background: var(--h8-page) !important; }
.h8-pdp { color: var(--h8-ink); }
.h8-pdp :focus-visible { outline: 3px solid var(--h8-blue); outline-offset: 2px; border-radius: 6px; }
.h8-pdp .v3c-crumbs { padding-top: 16px; }

/* ---------- hero: gallery card + info column ---------- */
.h8-pdp .v3p-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; padding-bottom: 36px; }
.h8-pdp .v3p-left { gap: 16px; }
.h8-pdp .v3p-buybox { position: static; gap: 14px; }
.h8-pdp .v3p-gallery { background: var(--h8-card); border-radius: 22px; padding: 14px; box-shadow: var(--h8-shadow); }
.h8-pdp .payism-retail-gallery-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.h8-pdp .payism-retail-gallery-shell > [class*="col-"]:first-child { order: 2 !important; }
.h8-pdp .payism-retail-gallery-thumbs { height: 66px !important; max-height: 66px; }
.h8-pdp .thumb-slider .swiper-slide { width: 80px !important; height: 62px !important; border-radius: 10px !important; border: 2px solid var(--h8-line) !important; padding: 2px; background: var(--h8-tile) !important; }
.h8-pdp .thumb-slider .swiper-slide img { object-fit: cover; mix-blend-mode: normal; border-radius: 7px; }
.h8-pdp .thumb-slider .swiper-slide-thumb-active { border-color: var(--h8-blue) !important; box-shadow: none; }
.h8-pdp .thumb-slider-btn { display: none !important; }
.h8-pdp .payism-retail-gallery-main { aspect-ratio: 4 / 3; max-height: 440px; border-radius: 16px !important; background: #EEF4FB !important; }
.h8-pdp .v3p-gallery__overlay { top: 26px; inset-inline-start: 26px; inset-inline-end: 26px; }
.h8-pdp .v3p-gallery__overlay .v3c-badge--qc { background: #fff; color: var(--h8-green); box-shadow: 0 2px 6px rgba(16, 42, 90, .12); }
.h8-pdp .v3p-gallery__hint { left: 26px; bottom: 96px; }
.h8-pdp .v3p-highlights, .h8-pdp .v3c-panel { border: 0; border-radius: 18px; box-shadow: var(--h8-shadow); }

/* ---------- title block ---------- */
.h8-pdp .h8p-eyebrow { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--h8-ink-2); }
.h8-pdp .h8p-eyebrow a { color: var(--h8-ink-2) !important; }
.h8-pdp .h8p-eyebrow a:hover { color: var(--h8-blue) !important; text-decoration: underline; }
.h8-pdp .v3p-title { font-size: 28px !important; line-height: 1.25 !important; margin-bottom: 10px !important; }
.h8-pdp .v3p-meta { gap: 8px 12px; font-size: 15px; }
.h8-pdp .v3p-meta__rating { gap: 8px; font-size: 15px; color: var(--h8-ink-2) !important; }
.h8-pdp .v3p-meta__rating .v3c-rating__star, .h8-pdp .v3p-meta__sep { display: none; }
.h8-pdp .v3p-meta__rating strong { background: var(--h8-green); color: #fff; border-radius: 8px; padding: 2px 8px; font-weight: 700; }
.h8-pdp .v3p-meta__rating strong::after { content: " \2605"; }
.h8-pdp .v3p-meta__link { color: var(--h8-ink-2); }
.h8-pdp .h8p-qcok { display: inline-flex; gap: 4px; align-items: center; color: var(--h8-green); font-weight: 700; font-size: 15px; }

/* ---------- price ---------- */
.h8-pdp .v3p-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 2px; }
.h8-pdp .v3p-price__now { font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--h8-ink); }
.h8-pdp .v3p-price__meta { margin: 0 !important; font-size: 17px; gap: 12px; }
.h8-pdp .v3p-price__mrp, .h8-pdp .v3p-price__mrp del { color: var(--h8-ink-2); font-size: 17px; }
.h8-pdp .v3p-price__off { border-left: 0; padding: 0 !important; color: var(--h8-green) !important; font-size: 18px; }
.h8-pdp .v3p-price__tax { flex-basis: 100%; font-size: 14px; color: var(--h8-ink-2); margin: 0 !important; }

/* ---------- boxes (offers, delivery, sold by, exchange, business) ---------- */
.h8-pdp .h8p-boxes { display: grid; gap: 14px; margin: 14px 0 4px; }
.h8-pdp .h8p-box { background: var(--h8-card); border-radius: 18px; padding: 14px 16px; box-shadow: var(--h8-shadow); display: grid; gap: 8px; margin: 0; }
.h8-pdp .h8p-biz { margin: 12px 0 0; }
.h8-pdp .h8p-box__h { font-size: 17px; line-height: 1.3; font-weight: 700; margin: 0; color: var(--h8-ink); }
.h8-pdp .h8p-offers { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.h8-pdp .h8p-offers li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.h8-pdp .h8p-offers li > span { flex: 1; min-width: 0; }
.h8-pdp .h8p-offers .v3-ico { color: var(--h8-green); flex: none; margin-top: 2px; }
.h8-pdp .h8p-lnk { border: 0; background: none; color: var(--h8-blue) !important; font-weight: 700; padding: 0 4px; min-height: 44px; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; }
.h8-pdp .h8p-offers .h8p-lnk { min-height: 24px; margin: -2px 0; }
.h8-pdp .h8p-dl { display: flex; gap: 8px; align-items: center; font-size: 15px; margin: 0; line-height: 1.4; }
.h8-pdp .h8p-dl > .v3-ico { color: var(--h8-blue); flex: none; }
.h8-pdp .h8p-dl .h8p-lnk { margin-inline-start: auto; }
/* H8 round 29 (r28 phone shots): the returns row reads as one sentence. "View policy" was a 44 px inline-flex box that
   dropped to a line of its own with the icon centred between the two lines; now the icon sits on the first line and
   the link wraps with the words, kept whole, its 44 px tap area made by padding that does not move the text. */
.h8-pdp .h8p-dl--ret { align-items: flex-start; }
.h8-pdp .h8p-dl--ret > .v3-ico { margin-top: 2px; }
.h8-pdp .h8p-dl--ret .h8p-lnk { display: inline; min-height: 0; padding: 12px 0; margin: -12px 0; white-space: nowrap; }
.h8-pdp .h8p-dline { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 15px; font-weight: 700; color: var(--h8-ink); }
.h8-pdp .h8p-dline .v3-ico { flex: none; margin-top: 2px; }
.h8-pdp .h8p-dline small { display: block; font-size: 14px; font-weight: 500; color: var(--h8-ink-2); }
.h8-pdp .h8p-dline.is-today { color: var(--h8-green); }
.h8-pdp .h8p-sold__shop { display: flex; gap: 12px; align-items: center; }
.h8-pdp .h8p-sold__ic { width: 48px; height: 48px; border-radius: 14px; background: var(--h8-sky); color: var(--h8-blue); display: grid; place-items: center; flex: none; }
.h8-pdp .h8p-sold__name { display: block; font-size: 17px; font-weight: 700; color: var(--h8-ink) !important; }
.h8-pdp .h8p-sold__name:hover { color: var(--h8-blue) !important; text-decoration: underline; }
.h8-pdp .h8p-sold__meta { display: block; color: var(--h8-ink-2); font-size: 14px; }
.h8-pdp .h8p-sold__ok { display: block; color: var(--h8-green); font-weight: 700; font-size: 14px; }
.h8-pdp .h8p-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.h8-pdp .h8p-note { margin: 0; font-size: 14px; color: var(--h8-ink-2); display: flex; gap: 4px; align-items: center; line-height: 1.4; }
.h8-pdp .h8p-near { border-top: 1px solid var(--h8-line); padding-top: 8px; font-size: 15px; }
.h8-pdp .h8p-near__h { margin: 0 0 4px; font-weight: 700; }
.h8-pdp .h8p-near ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.h8-pdp .h8p-near li { display: flex; gap: 8px; justify-content: space-between; min-height: 32px; align-items: center; }
.h8-pdp .h8p-near li span { color: var(--h8-ink-2); font-size: 14px; }
.h8-pdp .h8p-exin summary { list-style: none; cursor: pointer; display: grid; gap: 2px; min-height: 44px; }
.h8-pdp .h8p-exin summary::-webkit-details-marker { display: none; }
.h8-pdp .h8p-exin summary .h8p-box__h::after { content: " \25BE"; color: var(--h8-blue); }
.h8-pdp .h8p-exin[open] summary .h8p-box__h::after { content: " \25B4"; }
.h8-pdp .h8p-exin > .h8p-btn { margin-top: 4px; }

/* buttons */
.h8-pdp .h8p-btn, .h8p-dialog .h8p-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; text-decoration: none !important; cursor: pointer; width: 100%;
}
.h8-pdp .h8p-btn--line { background: #fff; color: var(--h8-blue) !important; border: 1.5px solid var(--h8-blue); }
.h8-pdp .h8p-btn--line:hover { background: var(--h8-sky); }
.h8-pdp .h8p-btn--wa { background: #fff; color: var(--h8-green) !important; border: 1.5px solid #9AD3B0; }
.h8p-dialog .h8p-btn--blue { background: var(--h8-blue, #1366D6); color: #fff; }
.h8p-dialog .h8p-btn--blue:hover { background: var(--h8-blue-d, #0F56B8); }

/* Business slabs */
.h8-pdp .h8p-slabt { width: 100%; border-collapse: collapse; font-size: 15px; }
.h8-pdp .h8p-slabt th, .h8-pdp .h8p-slabt td { text-align: start; padding: 8px 0; border-top: 1px solid var(--h8-line); vertical-align: baseline; }
.h8-pdp .h8p-slabt tr:first-child th, .h8-pdp .h8p-slabt tr:first-child td { border-top: 0; }
.h8-pdp .h8p-slabt th { color: var(--h8-ink-2); font-weight: 500; }
.h8-pdp .h8p-slabt b { font-size: 19px; }
.h8-pdp .h8p-margin { margin: 0; font-size: 14px; background: var(--h8-green-bg); color: var(--h8-green); border-radius: 10px; padding: 6px 10px; font-weight: 700; line-height: 1.35; }
.h8-pdp .h8p-margin span { display: block; font-weight: 500; }

/* ---------- today's deal bar: the one saffron with dark text for deal urgency (pdp.css paints it #D9480F with
   white text, a second orange; H8 round 1) ---------- */
body.h8-pdp-page .h8-pdp .v3p-details .bg-dark.rounded-corner-8px { background: var(--h8-saffron) !important; }
body.h8-pdp-page .h8-pdp .v3p-details .bg-dark.rounded-corner-8px .text-orange { color: var(--h8-on-saffron) !important; }

/* ---------- quantity and buy buttons ---------- */
.h8-pdp .v3p-cta { gap: 10px; margin-top: 14px; }
.h8-pdp .v3p-cta .v3c-btn { min-height: 54px; height: auto; font-size: 17px; border-radius: 12px; font-weight: 700; }
.h8-pdp .v3p-cta .add-to-cart, .h8p-bar .h8p-bar__add {
    background: var(--h8-saffron) !important; color: var(--h8-on-saffron) !important; box-shadow: none !important; border: 0 !important;
}
.h8-pdp .v3p-cta .add-to-cart:hover, .h8p-bar .h8p-bar__add:hover { background: var(--h8-saffron-h) !important; }
.h8-pdp .v3p-cta .buy-now, .h8p-bar .v3c-btn--primary { background: var(--h8-blue) !important; color: #fff !important; }
.h8-pdp .v3p-cta .buy-now:hover, .h8p-bar .v3c-btn--primary:hover { background: var(--h8-blue-d) !important; }
.h8-pdp .v3p-qtybox { margin-top: 6px; }

/* ---------- sections below ---------- */
.h8-pdp .v3p-sections { gap: 28px; }
.h8-pdp .h8p-sec { margin: 0; }
.h8-pdp .h8p-sec__h, .h8-pdp .v3p-sections .v3c-h2 { font-size: 24px; line-height: 1.3; font-weight: 700; margin: 0 0 12px; color: var(--h8-ink); }
.h8-pdp .h8p-kspecs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.h8-pdp .h8p-kspecs div { background: var(--h8-card); border-radius: 14px; padding: 12px 14px; box-shadow: var(--h8-shadow); min-width: 0; }
.h8-pdp .h8p-kspecs small { display: block; color: var(--h8-ink-2); font-size: 14px; }
.h8-pdp .h8p-kspecs b { font-size: 18px; overflow-wrap: anywhere; }
.h8-pdp .h8p-stable { width: 100%; border-collapse: collapse; background: var(--h8-card); border-radius: 18px; overflow: hidden; box-shadow: var(--h8-shadow); }
.h8-pdp .h8p-stable th, .h8-pdp .h8p-stable td { text-align: start; padding: 12px 16px !important; border-top: 1px solid var(--h8-line) !important; font-size: 15px; background: none !important; border-radius: 0 !important; }
.h8-pdp .h8p-stable th { width: 38%; color: var(--h8-ink-2); font-weight: 500; }
.h8-pdp .h8p-stable tr:first-child th, .h8-pdp .h8p-stable tr:first-child td { border-top: 0 !important; }
.h8-pdp .h8p-cmp { overflow-x: auto; border-radius: 18px; box-shadow: var(--h8-shadow); background: var(--h8-card); }
.h8-pdp .h8p-cmp table { min-width: 560px; width: 100%; border-collapse: collapse; }
.h8-pdp .h8p-cmp th, .h8-pdp .h8p-cmp td { padding: 10px 12px; border-top: 1px solid var(--h8-line); text-align: start; font-size: 15px; vertical-align: top; }
.h8-pdp .h8p-cmp thead td { border-top: 0; }
.h8-pdp .h8p-cmp th { color: var(--h8-ink-2); font-weight: 500; width: 150px; }
.h8-pdp .h8p-cmp thead th { border-top: 0; color: var(--h8-ink); font-weight: 400; width: auto; }
.h8-pdp .h8p-cmp img { width: 100%; max-width: 150px; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 10px; background: var(--h8-tile); margin-bottom: 6px; display: block; }
.h8-pdp .h8p-cmp__n { display: block; font-size: 15px; line-height: 1.3; margin-bottom: 2px; }
.h8-pdp .h8p-cmp .is-this { background: #F5F9FF; }
.h8-pdp .h8p-cmp .h8p-lnk { padding: 0; min-height: 32px; }
/* H8 round 15: a long model name stops at three lines; on the phone the row names are a narrow column that stays put
   while the products scroll (an empty 150 px first column squeezed each product to a word a line). */
.h8-pdp .h8p-cmp__n { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767.98px) {
    .h8-pdp .h8p-cmp table { min-width: 0; width: max-content; }
    .h8-pdp .h8p-cmp th[scope="row"], .h8-pdp .h8p-cmp thead td { width: 96px; min-width: 96px; max-width: 96px; position: sticky; inset-inline-start: 0; z-index: 1; background: var(--h8-card); box-shadow: 1px 0 0 var(--h8-line); }
    .h8-pdp .h8p-cmp thead th, .h8-pdp .h8p-cmp tbody td { width: 156px; min-width: 156px; }
    .h8-pdp .h8p-cmp th, .h8-pdp .h8p-cmp td { padding: 10px; }
}
.h8-pdp .v3p-desc { grid-template-columns: 1fr; }
.h8-pdp .v3p-hist__bar span { background: #B07A00; }
.h8-pdp .h8p-rphotos { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 20px; padding-bottom: 4px; }
.h8-pdp .h8p-rphotos a { flex: none; }
.h8-pdp .h8p-rphotos img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--h8-tile); display: block; }

/* ---------- lead dialog ---------- */
.h8p-dialog { border: 0; border-radius: 20px; padding: 0; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 0 24px 60px rgba(8, 20, 45, .3); color: #0E1726; font-family: var(--v3-font, inherit); }
.h8p-dialog::backdrop { background: rgba(14, 23, 38, .5); }
.h8p-dialog form { display: grid; gap: 10px; padding: 18px; }
.h8p-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.h8p-dialog h2 { margin: 0; font-size: 20px; font-weight: 700; }
.h8p-dialog .h8p-iconbtn { width: 48px; height: 48px; border: 0; background: #F3F6FB; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.h8p-dialog .h8p-note { margin: 0; font-size: 14px; color: #44546C; }
.h8p-dialog__shop { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 700; color: #1366D6; }
.h8p-field { display: grid; gap: 4px; font-size: 14px; font-weight: 700; margin: 0; }
.h8p-field input, .h8p-field select, .h8p-field textarea { min-height: 48px; border: 1px solid #DCE4F0; border-radius: 12px; padding: 8px 12px; font-size: 16px; font-weight: 500; width: 100%; background: #fff; }
.h8p-field input:focus-visible, .h8p-field select:focus-visible, .h8p-field textarea:focus-visible { outline: 3px solid #1366D6; outline-offset: 1px; }
.h8p-field input[aria-invalid="true"], .h8p-field select[aria-invalid="true"], .h8p-field textarea[aria-invalid="true"] { border-color: #B42318; box-shadow: 0 0 0 2px rgba(180, 35, 24, .18); }
.h8p-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.h8p-msg { margin: 0; border-radius: 10px; padding: 8px 10px; font-size: 14px; font-weight: 700; }
.h8p-msg.is-ok { background: #E3F6EA; color: #0B7A3B; }
.h8p-msg.is-err { background: #FDECEC; color: #B42318; }

/* ---------- phone sticky bar: price + Add to cart + Buy now ---------- */
@media (max-width: 767.98px) {
    .v3p-phonebar.h8p-bar:not([hidden]) { display: flex; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
    .h8p-bar .h8p-bar__price { flex: 1; min-width: 0; line-height: 1.2; }
    .h8p-bar .h8p-bar__price b { display: block; font-size: 19px; color: #0E1726; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .h8p-bar .h8p-bar__price span { font-size: 14px; color: #0B7A3B; font-weight: 700; }
    .h8p-bar .v3c-btn { width: auto; flex: none; height: auto; min-height: 48px; padding: 0 12px; font-size: 15px; border-radius: 12px; }
    /* While the bar is docked the in-page pair is not drawn a second time (prototype v2 hides it on phones).
       It stays in the layout, invisible, because the bar presses those buttons. */
    body:has(.h8p-bar:not([hidden])) .h8-pdp .v3p-cta { visibility: hidden; height: 0; min-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }
    /* H8 round 29: .psf-cta-pair's own "margin-top: 16px !important" kept a 16 px strip above the folded pair (the gap
       under the quantity row). */
    body:has(.h8p-bar:not([hidden])) .h8-pdp .v3p-cta.psf-cta-pair { margin: 0 !important; }
}
/* H8 round 29: "In stock" sat at the top of the quantity row (the row's inline style pins align-items to the top),
   level with the stepper's top edge; it is centred on the stepper now. */
.h8-pdp .v3p-qtybox .h8p-stockrow { align-self: center; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1199px) {
    .h8-pdp .v3p-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
    .h8-pdp .v3p-gallery__overlay { inset-inline-start: 26px; }
    .h8-pdp .v3p-gallery__hint { left: 26px; }
}
@media (max-width: 767px) {
    .h8-pdp .v3p-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
    .h8-pdp .v3p-gallery { padding: 10px; border-radius: 18px; }
    .h8-pdp .payism-retail-gallery-main { aspect-ratio: 4 / 3; }
    .h8-pdp .v3p-gallery__overlay { top: 18px; inset-inline-start: 18px; inset-inline-end: 18px; }
    .h8-pdp .v3p-title { font-size: 22px !important; }
    .h8-pdp .v3p-price__now { font-size: 28px; }
    .h8-pdp .h8p-kspecs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h8-pdp .h8p-sec__h, .h8-pdp .v3p-sections .v3c-h2 { font-size: 20px; }
    .h8-pdp .h8p-stable th, .h8-pdp .h8p-stable td { padding: 10px 12px !important; }
}

/* ---------- frequently bought together (catalog_v3/pdp_fbt, full width in the H8 look) ---------- */
.h8-pdp .v3p-fbt .v3p-fbt__row { gap: 12px; align-items: stretch; flex-wrap: wrap; }
.h8-pdp .v3p-fbt__items { gap: 12px; flex-wrap: wrap; }
.h8-pdp .v3p-fbt__item {
    flex: 1 1 230px; display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; align-items: center;
    border: 1px solid var(--h8-line); border-radius: 14px; padding: 10px; min-height: 76px;
}
.h8-pdp .v3p-fbt__item + .v3p-fbt__item::before { content: none; }
.h8-pdp .v3p-fbt__img { grid-row: 1 / span 2; width: 72px; height: 56px; aspect-ratio: auto; border-radius: 8px; background: var(--h8-tile); }
.h8-pdp .v3p-fbt__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; border-radius: 8px; }
.h8-pdp .v3p-fbt__name { font-size: 15px; font-weight: 700; color: var(--h8-ink) !important; align-self: end; }
.h8-pdp .v3p-fbt__price { font-size: 15px; font-weight: 500; align-self: start; }
.h8-pdp .v3p-fbt__total { flex: 1 1 200px; border-inline-start: 0; padding-inline-start: 0; min-width: 0; }
.h8-pdp .v3p-fbt__total > strong { font-size: 24px; line-height: 1.3; }
.h8-pdp .v3p-fbt__total .v3c-btn { background: var(--h8-saffron) !important; color: var(--h8-on-saffron) !important; box-shadow: none !important; min-height: 48px; border-radius: 12px; font-weight: 700; }
.h8-pdp .v3p-fbt__total .v3c-btn:hover { background: var(--h8-saffron-h) !important; }
.h8-pdp .v3p-qa .v3c-panel, .h8-pdp .product-queries { border-radius: 18px !important; }

/* H8 round 8: out of stock (the whole item, or the picked variant). "Out of stock" reads as the state of the item,
   not a footnote, and the quantity box, the "0 Available" line and the delivery date step aside until it can be bought. */
.h8-pdp .v3p-oos { margin: 16px 0 10px; font-size: 18px; line-height: 1.3; color: #B42318; }
.h8-pdp:has(.notify-me-wrapper:not(.d-none)) :is(.h8p-qtyrow, .h8p-stockrow, [data-h8-fill="delivery"]) { display: none !important; }

/* E2E round 10 (accessibility): the SKU label and the struck-out MRP were 4.3 and 4.46 : 1 on the page grey. */
.h8-pdp .v3p-sku .text-gray, .h8-pdp .psf-mrp { color: var(--h8-ink-2) !important; }
/* Phone taps (owner rule 48 px): the copy-SKU and price-breakup icons (26 px) and the rail cards' cart icon (32 px)
   keep their look and get a larger invisible hit area; the quantity buttons grow to 48 px. */
@media (max-width: 767.98px) {
    .h8-pdp .sku-copy-btn, .h8-pdp .v3p-price__info, .h8-pdp .v3-card__bar .v3-btn { position: relative; }
    .h8-pdp .sku-copy-btn::after, .h8-pdp .v3p-price__info::after { content: ""; position: absolute; inset: -11px; }
    .h8-pdp .v3-card__bar .v3-btn::after { content: ""; position: absolute; inset: -8px; }
    .h8-pdp .h8p-qtyrow .payism-plus-minus button { width: 48px !important; height: 48px !important; }
    /* H8 round 18: the review tools and the "ask the seller" link at 48 px, review dates at 14 px. */
    .h8-pdp .v3p-reviews .review-sort-by-images, .h8-pdp .v3p-reviews .dropdown-toggle { min-height: 48px; display: inline-flex; align-items: center; }
    .h8-pdp .v3p-reviews .fs-12 { font-size: 14px !important; }
    .h8-pdp .v3p-qa__guest a { display: inline-flex; align-items: center; min-height: 48px; }
    /* One picture: no strip with a single thumbnail under it (the name and price come up by its height). */
    .h8-pdp .payism-retail-gallery-thumbs:not(:has(.swiper-slide + .swiper-slide)) { display: none; }
}
/* H8 round 18: the details card no longer clips (its V2 frame is gone in this look), so the first letter of the
   category line ("Fan") is not cut at the card edge. */
.h8-pdp .payism-retail-product-details-shell { overflow: visible; }

/* ---------- right to left (Arabic; H8 round 9): the zoom hint sits at the picture's start corner, as in English ---------- */
[dir="rtl"] .h8-pdp .v3p-gallery__hint { left: auto; right: 26px; }
/* H8 round 15: a reviewer without a photo shows their initials (the product placeholder box read as a product). */
.h8p-ravatar { width: 48px; height: 48px; flex: none; border-radius: 50%; background: #E8F1FF; color: #0B4FB3; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; letter-spacing: .02em; }
/* H8 round 15: a long brand ("Kaveri Brothers Consumer Durables and Electrical A...") stays on one line, so the
   names, prices and dates of a rail stay level. */
.h8-pdp-page .v3-card__brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* H8 round 15 (owner, prototype v2): "Product information" - one card with tabs for every piece of product data. */
.h8-pdp .h8p-info__card { background: var(--h8-card); border-radius: 18px; box-shadow: var(--h8-shadow); overflow: hidden; }
.h8-pdp .h8p-info__tabs { display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-bottom: 1px solid var(--h8-line); padding: 6px 8px 0; }
.h8-pdp .h8p-info__tabs::-webkit-scrollbar { display: none; }
.h8-pdp .h8p-info__tabs [role="tab"] { flex: none; scroll-snap-align: start; border: 0; background: transparent; min-height: 48px; padding: 0 16px; font-weight: 700; font-size: 15px; color: var(--h8-ink-2); border-bottom: 3px solid transparent; border-radius: 0; }
.h8-pdp .h8p-info__tabs [role="tab"][aria-selected="true"] { color: #0B4FB3; border-bottom-color: #0B4FB3; }
.h8-pdp .h8p-info__tabs [role="tab"]:focus-visible { outline: 3px solid #0B4FB3; outline-offset: -3px; }
.h8-pdp .h8p-info__pane { padding: 18px 20px 20px; }
.h8-pdp .h8p-info__pane[hidden] { display: none; }
.h8-pdp .h8p-info__pane .h8p-stable { box-shadow: none; border-radius: 12px; border: 1px solid var(--h8-line); }
.h8-pdp .h8p-info__pane .v3p-about { background: none; box-shadow: none; padding: 0; border: 0; margin: 0; }
.h8-pdp .h8p-info__h { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--h8-ink); }
.h8-pdp .h8p-boxl { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.h8-pdp .h8p-boxl li { display: flex; gap: 10px; align-items: center; background: var(--h8-tile, #F1F5FB); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.h8-pdp .h8p-boxl li svg { color: #0B4FB3; flex: none; }
.h8-pdp .h8p-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.h8-pdp .h8p-doc { display: flex; gap: 12px; align-items: center; border: 1px solid var(--h8-line); background: var(--h8-card); border-radius: 14px; padding: 12px 14px; min-height: 64px; color: var(--h8-ink) !important; text-decoration: none; }
.h8-pdp .h8p-doc svg { color: #0B4FB3; flex: none; }
.h8-pdp .h8p-doc b { display: block; font-size: 15px; }
.h8-pdp .h8p-doc small { display: block; color: var(--h8-ink-2); font-size: 14px; }
.h8-pdp .h8p-info__ret { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; margin: 0 0 8px; color: var(--h8-ink); }
.h8-pdp .h8p-info__ret svg { color: var(--h8-green); flex: none; margin-top: 2px; }
.h8-pdp .h8p-info .h8p-note { font-size: 14px; margin: 8px 0 0; }
@media (max-width: 767.98px) {
    .h8-pdp .h8p-info__pane { padding: 14px; }
    .h8-pdp .h8p-boxl, .h8-pdp .h8p-docs { grid-template-columns: minmax(0, 1fr); }
}

/* H8 round 20: "In stock" (decision #5) read in the warning amber that once marked a low count; it is a good state, so
   it reads green. "Only N left" keeps the amber. */
.h8-pdp .h8p-stock:not(.is-low) { color: var(--h8-green, #0F7B4F); }

/* H8 round 28 (decision #15): the refund row prints "Refunds as per the Payism refund policy" (link) in place of the
   admin's sticker; the icon sits beside the words, a long translation wraps, and the touch area is 44 px. */
.h8-pdp .h8-refund-row { gap: 8px 16px; }
.h8-pdp a.h8-refund-pol { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding-block: 10px; margin-block: -10px; }
.h8-pdp a.h8-refund-pol .v3c-ico, .h8-pdp a.h8-refund-pol svg { flex: none; }