/* Payism V3 website: home sections (DESIGN_home-search 1, direction B with the A and C borrowings). */

.v3-home__stack { padding-top: 24px; display: flex; flex-direction: column; gap: var(--v3-section); }
.v3-home__stack > :empty { display: none; }
.v3-home__stack > .d-none { display: none !important; }
.v3-home #section_featured, .v3-home #section_home_categories, .v3-home #section_best_selling,
.v3-home #section_todays_deal, .v3-home #section_newest { background: transparent; padding-top: 0; padding-bottom: 0; }

/* hero row: carousel 8 columns + 2 stacked promo cards 4 columns */
.v3-hero-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--v3-grid-gap); }
.v3-hero-row > :only-child { grid-column: 1 / -1; }
.v3-hero { position: relative; border-radius: var(--v3-r-24); overflow: hidden; background: var(--v3-tile); box-shadow: var(--v3-shadow-1); aspect-ratio: 864 / 440; }
.v3-hero__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.v3-hero__track::-webkit-scrollbar { display: none; }
.v3-hero__slide { flex: 0 0 100%; scroll-snap-align: start; height: 100%; }
.v3-hero__slide a { display: block; height: 100%; }
.v3-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.v3-hero__arrow--prev { left: 16px; } .v3-hero__arrow--next { right: 16px; }
.v3-hero__dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .85); }
.v3-hero__dots [data-v3-dot] { width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.v3-hero__dots [data-v3-dot]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--v3-line-strong); }
.v3-hero__dots [data-v3-dot][aria-current='true']::before { width: 20px; border-radius: 4px; background: var(--v3-brand-600); }
.v3-hero__toggle { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--v3-brand-900); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; }
.v3-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--v3-grid-gap); }
.v3-promo-card { display: block; position: relative; border-radius: var(--v3-r-20); overflow: hidden; background: var(--v3-tile); box-shadow: var(--v3-shadow-1); transition: box-shadow .2s, transform .2s; min-height: 0; }
.v3-promo-card:hover { box-shadow: var(--v3-shadow-2); transform: translateY(-2px); }
.v3-promo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* offer strip */
.v3-offers { list-style: none; margin: calc(var(--v3-section) * -0.625) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v3-grid-gap); }
.v3-offers li { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: #fff; border-radius: var(--v3-r-16); box-shadow: var(--v3-shadow-1); font-size: 15px; font-weight: 600; }
.v3-offers small { display: block; font-size: 13px; font-weight: 500; color: var(--v3-muted); }
.v3-offers__ico { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--v3-brand-100); color: var(--v3-brand-600); display: inline-flex; align-items: center; justify-content: center; }

/* deals band: the page's one accent tint, inside the container */
.v3-deals { background: var(--v3-deal-50); border-radius: var(--v3-r-24); padding: 28px; }
.v3-deals__title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.v3-timer { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--v3-font); color: var(--v3-deal-ink); font-variant-numeric: tabular-nums; }
.v3-timer b { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 32px; padding: 0 6px; border: 1.5px solid var(--v3-deal); border-radius: var(--v3-r-8); background: #fff; color: var(--v3-deal-ink); font-weight: 800; font-size: 16px; }
.v3-timer i { font-style: normal; font-weight: 800; }
.v3-deals .v3-sec-head__link { color: var(--v3-deal-ink) !important; }

/* category tiles: rounded squares with photos (not circles) */
.v3-cat-tiles { display: grid; grid-template-columns: repeat(min(10, var(--v3-cat-n, 10)), minmax(0, 1fr)); gap: 16px; }
.v3-cat-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--v3-ink) !important; }
.v3-cat-tile__img { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--v3-r-16); background: #fff; box-shadow: var(--v3-shadow-1); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--v3-muted); transition: box-shadow .2s, transform .2s; }
.v3-cat-tile:hover .v3-cat-tile__img { box-shadow: var(--v3-shadow-2); transform: translateY(-2px); }
.v3-cat-tile__img img { width: 80%; height: 80%; object-fit: contain; }
.v3-cat-tile__name { font-size: 14px; font-weight: 600; line-height: 18px; }

.v3-promo-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v3-grid-gap); }
/* Report 6 Nov (Diwali banner cut on the left): a fixed 416:240 / 636:420 box with object-fit: cover cut the
   sides off any wider artwork (the live Diwali banner is 640x246). Promo and story banners now keep their own
   ratio, so the whole artwork and its text show; the width/height attributes still reserve space before load. */
.v3-promo-tiles { align-items: start; }
.v3-promo-tiles .v3-promo-card img, .v3-editorial .v3-promo-card img { height: auto; }
.v3-editorial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v3-grid-gap); align-items: start; }
.v3-editorial .v3-promo-card { border-radius: var(--v3-r-24); }

.v3-brand-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
.v3-brand-tile { display: flex; align-items: center; justify-content: center; height: 88px; padding: 12px; background: #fff; border-radius: var(--v3-r-16); box-shadow: var(--v3-shadow-1); color: var(--v3-ink) !important; text-align: center; }
/* E2E 30 r6 (speed #17): width="120" height="40" on the logo reserve its box before it loads; the drawn width stays the logo's own. */
.v3-brand-tile img { width: auto; max-height: 40px; max-width: 100%; object-fit: contain; }

/* earnings band: brand gradient, the page's one full-container accent */
.v3-earn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 48px; border-radius: var(--v3-r-24); background: var(--v3-grad-brand); color: #fff; }
.v3-earn::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; }
.v3-earn__txt { position: relative; z-index: 1; max-width: 640px; }
.v3-earn__title { font: 800 36px/44px var(--v3-font); color: #fff !important; margin: 0 0 8px; }
.v3-earn p { font-size: 17px; line-height: 26px; margin: 0 0 20px; opacity: .95; }
.v3-earn__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.v3-earn__link { color: #fff !important; font-weight: 600; }
.v3-earn__coin { position: relative; z-index: 1; width: 140px; height: 140px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE08A, #E9A400 70%); color: #7A4B00; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.v3-earn__coin .v3i { width: 64px; height: 64px; stroke-width: 2.25; }
.v3-home__more { text-align: center; margin-top: calc(var(--v3-section) * -0.5); }
.v3-home__more[hidden] { display: none; }

@media (max-width: 1199.98px) {
    .v3-cat-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .v3-brand-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .v3-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .v3-home__stack { padding-top: 12px; }
    .v3-hero-row { grid-template-columns: minmax(0, 1fr); }
    .v3-hero { aspect-ratio: 358 / 220; border-radius: var(--v3-r-20); }
    .v3-hero__arrow { display: none; }
    .v3-hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 12px; }
    .v3-offers { margin-top: -16px; display: flex; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--v3-side)); padding-right: var(--v3-side); gap: 10px; }
    .v3-offers li { flex: 0 0 auto; padding: 10px 12px; font-size: 13px; gap: 8px; }
    .v3-offers__ico { width: 32px; height: 32px; }
    .v3-offers__ico .v3i { width: 18px; height: 18px; }
    .v3-cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .v3-cat-tile__name { font-size: 13px; }
    .v3-deals { padding: 16px; margin: 0 calc(-1 * var(--v3-side)); border-radius: 0; }
    .v3-timer b { min-width: 30px; height: 28px; font-size: 14px; }
    .v3-promo-tiles { grid-template-columns: minmax(0, 1fr); }
    .v3-editorial { grid-template-columns: minmax(0, 1fr); }
    .v3-brand-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .v3-brand-tile { height: 56px; padding: 8px; border-radius: var(--v3-r-12); font-size: 12px; }
    .v3-earn { padding: 24px 20px; border-radius: var(--v3-r-20); }
    .v3-earn__title { font-size: 22px; line-height: 30px; }
    .v3-earn p { font-size: 15px; line-height: 22px; }
    .v3-earn__coin { width: 72px; height: 72px; position: absolute; right: 12px; top: 12px; opacity: .9; }
    .v3-earn__coin .v3i { width: 32px; height: 32px; }
    .v3-rail--phone-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin-right: 0; padding-right: 2px; }
    .v3-rail--phone-grid > :nth-child(n+7) { display: none; }
}

/* hero side cards: the images never set the row height, so the two cards split the hero's height */
.v3-hero-side .v3-promo-card img { position: absolute; inset: 0; }
.v3-hero-row > .v3-hero-side:only-child { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
.v3-hero-row > .v3-hero-side:only-child .v3-promo-card { aspect-ratio: 636 / 240; }

/* department rails (from direction C): chips, a photo card (3 cols) and 4 cards (9 cols) */
.v3-home__depts:empty { display: none; }
/* Report 6 Nov (rails cut at the right, tablet page sliding sideways): without a column size this grid's one
   column took the rails' content width (781 px on a 375 px phone), so every rail ran past the screen; the page
   wrapper's overflow-x: clip hid it where supported, older iPad Safari let the page slide. One screen-wide column. */
.v3-home__depts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v3-section); }
.v3-dept__chips { list-style: none; margin: -4px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v3-dept__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--v3-grid-gap); }
.v3-dept__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v3-grid-gap); }
.v3-dept__feature { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--v3-r-16); background: #fff; box-shadow: var(--v3-shadow-1); color: var(--v3-ink) !important; transition: box-shadow .2s; }
.v3-dept__feature:hover { box-shadow: var(--v3-shadow-2); }
.v3-dept__photo { flex: 1 1 auto; min-height: 180px; position: relative; background: var(--v3-tile); }
.v3-dept__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v3-dept__copy { display: grid; gap: 2px; padding: 16px 20px 20px; }
.v3-dept__copy b { font: 800 22px/28px var(--v3-font); }
.v3-dept__copy span { font-size: 15px; color: var(--v3-muted); }
.v3-dept__copy .v3-dept__cta { color: var(--v3-brand-600); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; }
@media (max-width: 1199.98px) {
    .v3-dept__row { grid-template-columns: minmax(0, 1fr); }
    .v3-dept__feature { flex-direction: row; }
    .v3-dept__photo { flex: 0 0 40%; min-height: 140px; }
}
@media (max-width: 767.98px) {
    .v3-hero-side .v3-promo-card { aspect-ratio: 416 / 212; border-radius: var(--v3-r-16); }
    .v3-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-right: 0; padding-right: 0; gap: 8px; overflow: visible; }
    .v3-offers li { padding: 10px; font-size: 13px; line-height: 17px; }
    .v3-offers small { font-size: 12px; line-height: 16px; }
    .v3-dept__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--v3-side)); padding-right: var(--v3-side); }
    .v3-dept__chips li { flex: none; }
    .v3-dept__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .v3-dept__copy { padding: 12px 14px; }
    .v3-dept__copy b { font-size: 18px; line-height: 24px; }
    .v3-dept__photo { flex-basis: 42%; min-height: 112px; }
}
.v3-brand-tile { flex-direction: column; gap: 6px; }
.v3-brand-tile__name { font-size: 13px; font-weight: 600; color: var(--v3-muted); line-height: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-brand-tile:not(:has(img)) .v3-brand-tile__name { font-size: 16px; font-weight: 800; color: var(--v3-ink); }
@media (max-width: 767.98px) { .v3-brand-tile { gap: 2px; } .v3-brand-tile img { max-height: 24px; } .v3-brand-tile__name { font-size: 11px; } }
@media (max-width: 767.98px) {
    .v3-deals .v3-sec-head { flex-wrap: wrap; gap: 4px 12px; }
    .v3-deals__title { flex-wrap: nowrap; justify-content: space-between; width: 100%; gap: 8px; }
    .v3-deals__title .v3-h2 { white-space: nowrap; }
    .v3-deals .v3-timer > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .v3-deals .v3-timer { padding: 4px 8px; border-radius: var(--v3-r-8); background: #fff; gap: 2px; }
    .v3-deals .v3-timer b { border: 0; min-width: 22px; height: 24px; padding: 0 2px; }
    .v3-deals .v3-sec-head__link { margin-left: auto; font-size: 14px; }
    .v3-deals .v3-rail { grid-auto-columns: 42%; }
}

/* wb-account: the drawn tile facts (home_1440_v3): "From ₹X" under a category, "Up to N% off" under a brand mark */
.v3-cat-tile { gap: 6px; }
.v3-cat-tile__img { margin-bottom: 4px; }
.v3-cat-tile__from { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--v3-muted); }
.v3-brand-tile { flex-direction: column; gap: 6px; }
.v3-brand-tile__offer { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--v3-success); white-space: nowrap; }
@media (max-width: 767.98px) {
    .v3-cat-tile__from { font-size: 11px; line-height: 14px; }
    .v3-brand-tile__offer { font-size: 11px; }
}

/* wb-account: phone hero safe crop. Banners are made at 864:440 with text near the edges; at the drawn 358:220
   the sides were cut. Until the CMS has a separate phone banner, the phone keeps the banner's own ratio so the
   whole artwork (and its text) stays visible. Rule for banner artwork: keep text inside the middle 82%. */
@media (max-width: 767.98px) {
    .v3-hero { aspect-ratio: 864 / 440; }
    .v3-hero__slide img { object-position: center; }
    .v3-hero__dots { bottom: 8px; padding: 2px 6px; }
}

/* Review (home-search, 28 Oct). Phone, as drawn in home_390_v3: category tiles carry the name only and
   brand tiles the mark only (their 11 px fact lines were below the 13 px floor and clipped); the offer
   strip's second line keeps 13 px. */
@media (max-width: 767.98px) {
    .v3-cat-tile__from, .v3-brand-tile__offer { display: none; }
    .v3-brand-tile { height: 60px; }
    .v3-brand-tile img { max-height: 30px; }
    .v3-brand-tile__name { font-size: 13px; }
    .v3-brand-tile:not(:has(img)) .v3-brand-tile__name { font-size: 14px; }
    .v3-offers small { font-size: 13px; line-height: 17px; }
}

/* V3 match lane home-catalog (28 Oct): admin-managed offer links, earnings art, alternating department rails. */
.v3-offers__a { display: flex; align-items: center; gap: 14px; width: 100%; color: inherit !important; text-decoration: none; }
.v3-earn__art { position: relative; z-index: 1; flex: none; align-self: stretch; width: 420px; max-width: 42%; height: auto; margin: -40px -48px -40px 0; object-fit: cover; object-position: left center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
@media (min-width: 1200px) {
    .v3-dept--flip .v3-dept__row { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); }
    .v3-dept--flip .v3-dept__feature { order: 2; }
}
@media (max-width: 767.98px) {
    .v3-offers__a { gap: 8px; }
    .v3-earn { padding-right: 20px; }
    .v3-earn__txt { max-width: 72%; }
    .v3-earn__art { z-index: 0; opacity: .95; }
    .v3-earn__art { position: absolute; right: 0; bottom: 0; top: auto; width: 48%; max-width: none; margin: 0; align-self: auto; }
}

/* home_1440_v3: the earnings band reads larger (46 px title, two-line 22 px lead, 52 px white button). */
@media (min-width: 1200px) {
    .v3-earn { padding: 44px 56px; min-height: 248px; }
    .v3-earn__txt { max-width: 780px; }
    .v3-earn__title { font-size: 46px; line-height: 54px; letter-spacing: -.01em; margin-bottom: 10px; }
    .v3-earn p { font-size: 22px; line-height: 30px; max-width: 560px; margin-bottom: 24px; }
    .v3-earn__actions .v3-btn--white { min-height: 52px; padding: 0 28px; font-size: 18px; border-radius: 12px; }
    .v3-earn__link { font-size: 18px; }
    .v3-earn__art { margin: -44px -56px -44px 0; }
}

/* Team issues 6 Nov 2026 (T6): a banner row fits the number of banners the admin set (after the ones the hero
   already shows are left out): one spans the row at a calm height, two split it in halves, three in thirds. */
.v3-promo-tiles--1 { grid-template-columns: minmax(0, 1fr); }
.v3-promo-tiles--1 .v3-promo-card { aspect-ratio: auto; height: clamp(160px, 26vw, 320px); }
.v3-promo-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v3-editorial--1 { grid-template-columns: minmax(0, 1fr); }
.v3-editorial--1 .v3-promo-card { aspect-ratio: auto; height: clamp(180px, 30vw, 380px); }
@media (max-width: 767.98px) {
    .v3-promo-tiles--1 .v3-promo-card, .v3-editorial--1 .v3-promo-card { aspect-ratio: 416 / 240; height: auto; }
    .v3-promo-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .v3-promo-tiles--2 .v3-promo-card { border-radius: var(--v3-r-16); }
}

/* Team issues 6 Nov 2026 (T9): the department rails were one implicit "auto" grid column, so a long row of
   sub-category chips in one department (their scroller's full width) set the column width for all of them: on a
   phone every rail ran about 650 px wide, the photo card ran off the screen and each product card filled it. The
   column is now the container's width; the chips keep their own sideways scroll. */
.v3-home__depts { grid-template-columns: minmax(0, 1fr); }
.v3-dept, .v3-dept__row, .v3-dept__feature, .v3-dept__cards > * { min-width: 0; }
.v3-dept__copy { min-width: 0; }
.v3-dept__copy b, .v3-dept__copy span { overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .v3-dept__row { gap: 12px; }
    .v3-dept__feature { width: 100%; }
}

/* Team issues 6 Nov 2026 (T10): the Today's deals page on a phone left about 100 px of blank under a short list and
   the trust row above the footer started under the bottom bar, cut off. Tighter gaps (no extra min-height: a short
   list is followed straight by the whole trust row, clear of the bottom bar on a 390 x 844 phone). */
.v3-deals-page .v3-deal-grid { margin-bottom: 0; }
@media (max-width: 767.98px) {
    .v3-deals-page { margin-top: 16px !important; margin-bottom: 0 !important; }
    .v3-deals-page .container > .px-3 { padding-left: 0 !important; padding-right: 0 !important; }
    .v3-deals-page .v3-deal-grid > .col { margin-bottom: 12px !important; }
    main:has(.v3-deals-page) + .v3-trust { margin-top: 12px; }
}