/*
 * Payism V2 web storefront: shared token layer and components (foundation lane, 2026-10-22).
 * Spec: HANDOFF/vnext/web_layouts/STYLE_WEB.md (Retailer direction B "Fresh" on a storefront:
 * Payism Blue on clean white, prices lead, card stacks, one accent, no clutter).
 *
 * 1. Tokens. The values come from the home engine (config/home_layouts.php `themes`, the
 *    Superadmin theme editor, Appearance > base_color) through App\Support\Storefront\WebTheme,
 *    printed as :root custom properties in <style id="pv2-tokens">. The :root block below is
 *    only the fallback (Classic's values) for a page printed without them.
 * 2. Components used by the shared partials in resources/views/frontend/partials/v2/
 *    (button, section_header, product_card, banner_frame, category_chip).
 * 3. The homepage refresh of each layout's existing markup. Every rule there is scoped to
 *    body.pv2-home (set by the six frontend/<layout>/index.blade.php), so the shared non-home
 *    pages only receive the tokens, never a style change.
 */

/* 1. Tokens (fallback; the engine's values override them) ---------------------------------- */
:root {
    --pv2-card: #FFFFFF;
    --pv2-ink: #0F1B2D;
    --pv2-ink-2: #5C6778;
    --pv2-line: #E3E8EF;
    --pv2-tile: #F1F3F6;
    --pv2-deal: #C8312B;
    --pv2-save: #13805A;
    --pv2-page: #F4F6F9;
    --pv2-accent: #0573B9;
    --pv2-accent-deep: #04619B;
    --pv2-accent-tint: #E8F2F9;
    --pv2-accent-on: #FFFFFF;
    --pv2-radius: 12px;
    --pv2-radius-photo: 8px;
    --pv2-radius-btn: 12px;
    --pv2-chip-radius: 50%;
    --pv2-card-border: transparent;
    --pv2-card-shadow: 0 2px 10px rgba(15, 27, 45, 0.06);
    --pv2-card-hover-border: transparent;
    --pv2-card-hover-shadow: 0 8px 24px rgba(15, 27, 45, 0.10);
    --pv2-gap: 16px;
    --pv2-pad: 14px;
    --pv2-section-gap: 40px;
    --pv2-pc-dir: column;
    --pv2-pc-photo-w: 100%;
    --pv2-pc-name-lines: 2;
    --pv2-pc-btn-full: flex;
    --pv2-pc-btn-round: none;
    --pv2-pc-heart: flex;
    --pv2-pc-align: stretch;
}

/* 2. Components ---------------------------------------------------------------------------- */

/* Buttons (STYLE_WEB 4): one primary per section; the card's Add to cart is secondary. */
.pv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1.5px solid transparent;
    border-radius: var(--pv2-radius-btn);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pv2-btn:focus-visible { outline: 2px solid var(--pv2-accent); outline-offset: 2px; }
.pv2-btn .las { font-size: 1.15em; }
.pv2-btn--md { height: 48px; padding: 0 24px; font-size: 16px; }
.pv2-btn--sm { height: 40px; padding: 0 14px; font-size: 14px; }
.pv2-btn--primary { background: var(--pv2-accent); border-color: var(--pv2-accent); color: var(--pv2-accent-on) !important; }
.pv2-btn--primary:hover { background: var(--pv2-accent-deep); border-color: var(--pv2-accent-deep); }
.pv2-btn--secondary { background: var(--pv2-card); border-color: var(--pv2-accent); color: var(--pv2-accent) !important; }
.pv2-btn--secondary:hover { background: var(--pv2-accent-tint); }
.pv2-btn.pv2-btn--link {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--pv2-accent) !important;
    font-size: 15px;
    gap: 2px;
}
.pv2-sec-head .pv2-btn.pv2-btn--link { height: 36px; }
.pv2-btn--link:hover span { text-decoration: underline; }
.pv2-btn.pv2-btn--round {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--pv2-accent);
    border-color: var(--pv2-accent);
    color: var(--pv2-accent-on) !important;
    font-size: 18px;
}
.pv2-btn--round:hover { background: var(--pv2-accent-deep); }
.pv2-btn.pv2-btn--arrow-prev,
.pv2-btn.pv2-btn--arrow-next {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--pv2-line);
    border-radius: 50%;
    background: var(--pv2-card);
    color: var(--pv2-ink) !important;
    font-size: 18px;
}
.pv2-btn--arrow-prev:hover,
.pv2-btn--arrow-next:hover { border-color: var(--pv2-accent); color: var(--pv2-accent) !important; }

/* Section header (STYLE_WEB 6). */
.pv2-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.pv2-sec-head__titles { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.pv2-sec-head__title { margin: 0; color: var(--pv2-ink); font-size: 24px; font-weight: 700; line-height: 1.25; }
.pv2-sec-head__caption { color: var(--pv2-ink-2); font-size: 13px; font-weight: 500; }
.pv2-sec-head__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pv2-sec-head__actions .pv2-btn--link { margin-right: 8px; }

/* Card (STYLE_WEB 3): white, a Line outline OR a soft shadow, the layout's radius. */
.pv2-card {
    background: var(--pv2-card);
    border: 1px solid var(--pv2-card-border);
    border-radius: var(--pv2-radius);
    box-shadow: var(--pv2-card-shadow);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.pv2-card:hover { box-shadow: var(--pv2-card-hover-shadow); border-color: var(--pv2-card-hover-border); }

/* Pills and money. */
.pv2-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--pv2-accent-tint);
    color: var(--pv2-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.pv2-pill--neutral { background: var(--pv2-card); color: var(--pv2-ink-2); box-shadow: inset 0 0 0 1px var(--pv2-line); }
.pv2-price {
    color: var(--pv2-ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pv2-mrp { color: var(--pv2-ink-2); font-size: 14px; font-weight: 400; white-space: nowrap; }
.pv2-save { color: var(--pv2-save); font-size: 13px; font-weight: 600; }

/* Product card (STYLE_WEB 6). tall / square / list come from --pv2-pc-* (the theme token). */
.pv2-pcard {
    position: relative;
    display: flex;
    flex-direction: var(--pv2-pc-dir);
    align-items: var(--pv2-pc-align);
    gap: 12px;
    height: 100%;
    padding: var(--pv2-pad);
    text-align: left;
}
/* Narrow cards (five in a half-width panel, The Core's Best selling) step the money down a size. */
.pv2-pcard { container-type: inline-size; }
/* A size container has no content width, so its box always fills the slot it is given. */
.carousel-box:has(> .pv2-pcard), .carousel-box > .pv2-pcard { width: 100%; }
@container (max-width: 150px) {
    .pv2-pcard .pv2-price { font-size: 16px; }
    .pv2-pcard .pv2-mrp { font-size: 12px; }
    .pv2-pcard .pv2-pcard__name { font-size: 13px; }
}
.pv2-pcard__photo {
    position: relative;
    flex: 0 0 auto;
    width: var(--pv2-pc-photo-w);
    aspect-ratio: 1 / 1;
    border-radius: var(--pv2-radius-photo);
    background: var(--pv2-tile);
    overflow: hidden;
}
.pv2-pcard__photo-link { display: block; width: 100%; height: 100%; }
.pv2-pcard__photo img {
    width: 100%;
    height: 100%;
    padding: 8%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .3s ease;
}
.pv2-pcard:hover .pv2-pcard__photo img { transform: scale(1.04); }
.pv2-pcard__badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
}
.pv2-pcard__heart {
    position: absolute;
    top: 8px;
    right: 8px;
    display: var(--pv2-pc-heart);
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pv2-card);
    box-shadow: 0 1px 4px rgba(15, 27, 45, 0.10);
    color: var(--pv2-ink-2);
    transition: color .15s ease;
}
.pv2-pcard__heart:hover { color: var(--pv2-accent); }
/* addToWishList() sets the path fill: #919199 = not saved (outline), #e62e04 = saved (filled). */
.pv2-pcard__heart path { fill: none; }
.pv2-pcard__heart path[fill="#e62e04"] { fill: var(--pv2-accent); stroke: var(--pv2-accent); }
.pv2-pcard__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 4px; min-width: 0; }
.pv2-pcard__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--pv2-pc-name-lines);
    overflow: hidden;
    min-height: calc(1.4em * var(--pv2-pc-name-lines));
    margin: 0;
    color: var(--pv2-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}
.pv2-pcard__name a { color: inherit; text-decoration: none; }
.pv2-pcard__name a:hover { color: var(--pv2-accent); }
.pv2-pcard__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 2px; }
.pv2-pcard__prices .pv2-pcard__btn-round { display: var(--pv2-pc-btn-round); margin-left: auto; align-self: center; }
.pv2-pcard__actions { margin-top: auto; padding-top: 8px; }
.pv2-pcard__actions:empty { display: none; }
.pv2-pcard__btn { display: var(--pv2-pc-btn-full); width: 100%; }
/* A list card (Re-Classic deals) has no buttons and a slimmer row. */
.pv2-pcard__actions:has(.pv2-pcard__btn) { display: var(--pv2-pc-btn-full); }

/* Banner frame (STYLE_WEB 3, 6): the uploaded art in a calm frame; the hero gets the card stack. */
.pv2-banner {
    position: relative;
    border-radius: var(--pv2-radius);
    background: var(--pv2-tile);
    overflow: hidden;
}
.pv2-banner__img { display: block; width: 100%; }
.pv2-banner--stack { padding-bottom: 16px; background: transparent; border-radius: 0; overflow: visible; }
.pv2-banner--stack .pv2-banner__img {
    position: relative;
    z-index: 2;
    border-radius: var(--pv2-radius);
    background: var(--pv2-tile);
}
.pv2-banner--stack::before,
.pv2-banner--stack::after {
    content: "";
    position: absolute;
    height: 32px;
    background: var(--pv2-card);
    border-radius: 0 0 var(--pv2-radius) var(--pv2-radius);
    box-shadow: 0 2px 10px rgba(15, 27, 45, 0.08);
}
.pv2-banner--stack::before { left: 3%; right: 3%; bottom: 8px; z-index: 1; }
.pv2-banner--stack::after { left: 6%; right: 6%; bottom: 0; z-index: 0; opacity: .85; }

/* Category tile / chip (STYLE_WEB 6). */
.pv2-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--pv2-ink) !important;
    text-align: center;
    text-decoration: none !important;
}
.pv2-chip__well {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--pv2-chip-radius);
    background: var(--pv2-accent-tint);
    overflow: hidden;
    transition: box-shadow .15s ease;
}
.pv2-chip__well img { width: 72%; height: 72%; object-fit: contain; mix-blend-mode: multiply; }
.pv2-chip:hover .pv2-chip__well { box-shadow: 0 0 0 2px var(--pv2-accent); }
.pv2-chip__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}
.pv2-chip:hover .pv2-chip__name { color: var(--pv2-accent); }
.pv2-chip--inline {
    flex-direction: row;
    width: auto;
    gap: 8px;
    padding: 4px 14px 4px 4px;
    border: 1px solid var(--pv2-line);
    border-radius: 999px;
    background: var(--pv2-card);
}
.pv2-chip--inline .pv2-chip__well { width: 32px; height: 32px; border-radius: 50%; }

/* Product rows built from the shared card: even gaps instead of the old bordered grid. */
.pv2-row .carousel-box,
.pv2-row > [class*="col"] {
    padding: 6px calc(var(--pv2-gap) / 2) 12px !important;
    border: 0 !important;
}
.pv2-row .carousel-box > .px-3 { padding: 0 !important; }
.pv2-row .hov-animate-outline::before,
.pv2-row .hov-animate-outline::after { display: none !important; }
.pv2-row.slick-slider .slick-list { margin: 0 calc(var(--pv2-gap) / -2); }
/* Every card in a row is as tall as the tallest (the button lines up whether or not the MRP wraps). */
.pv2-row.slick-slider .slick-track { display: flex; }
.pv2-row.slick-slider .slick-slide { height: auto; }
/* (Single-row carousels only: a data-rows="2" grid keeps its natural row heights.) */
.pv2-row.slick-slider .slick-slide > div:only-child,
.pv2-row.slick-slider .slick-slide > div:only-child > .carousel-box { height: 100%; }

@media (max-width: 575.98px) {
    .pv2-sec-head__title { font-size: 19px; }
    .pv2-sec-head__actions .pv2-btn--arrow-prev,
    .pv2-sec-head__actions .pv2-btn--arrow-next { display: none; }
    .pv2-pcard { gap: 10px; padding: 10px; }
    .pv2-pcard__name { font-size: 14px; }
    .pv2-price { font-size: 18px; }
    .pv2-mrp { font-size: 13px; }
    .pv2-btn--sm { height: 36px; font-size: 13px; padding: 0 10px; }
    .pv2-pcard__heart { width: 28px; height: 28px; }
    .pv2-chip__well { width: 52px; height: 52px; }
    .pv2-chip__name { font-size: 13px; }
    .pv2-row .carousel-box { padding: 2px 6px 8px !important; }
    .pv2-row.slick-slider .slick-list { margin: 0 -6px; }
}

/* 3. Homepage refresh of the layouts' own markup (body.pv2-home only) ---------------------- */

/* One accent: the legacy --primary utilities on the home follow the layout's accent token. */
.pv2-home {
    --primary: var(--pv2-accent);
    --hov-primary: var(--pv2-accent-deep);
    --soft-primary: var(--pv2-accent-tint);
}
.pv2-home .payism-main-wrapper { background-color: var(--pv2-page) !important; color: var(--pv2-ink); }

/* Section titles the layouts print themselves: 24 Bold Ink (19 on a phone). */
.pv2-home section h3.fw-700.fs-16 { color: var(--pv2-ink); font-size: 19px !important; }
@media (min-width: 768px) {
    .pv2-home section h3.fw-700.fs-16 { font-size: 24px !important; }
}

/* Banner rows: every banner image sits in the layout's radius. */
.pv2-home .carousel-box > .pv2-banner { margin: 0; }
.pv2-home .home-slider .pv2-banner--stack .pv2-banner__img { width: 100%; }

/* 4. Promo card and coupon band (partials/v2/promo_card, partials/v2/coupon_band) ---------- */

/* Promo card (STYLE_WEB 6): white or Blue-tint, Ink title, one-line caption, blue link, photo on a Tile. */
.pv2-promo {
    display: flex;
    align-items: stretch;
    gap: 12px;
    height: 100%;
    min-height: 150px;
    padding: 16px;
    border: 1px solid var(--pv2-card-border);
    border-radius: var(--pv2-radius);
    background: var(--pv2-card);
    box-shadow: var(--pv2-card-shadow);
    color: var(--pv2-ink) !important;
    text-decoration: none !important;
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.pv2-promo:hover { box-shadow: var(--pv2-card-hover-shadow); border-color: var(--pv2-card-hover-border); }
.pv2-promo--tint { background: var(--pv2-accent-tint); border-color: transparent; }
.pv2-promo__text { display: flex; flex-direction: column; flex: 1 1 52%; min-width: 0; padding: 4px 0; }
.pv2-promo__title { color: var(--pv2-ink); font-size: 20px; font-weight: 700; line-height: 1.25; }
.pv2-promo__caption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 6px;
    color: var(--pv2-ink-2);
    font-size: 14px;
    line-height: 1.45;
}
.pv2-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: auto;
    padding-top: 12px;
    color: var(--pv2-accent);
    font-size: 15px;
    font-weight: 600;
}
.pv2-promo:hover .pv2-promo__cta { text-decoration: underline; }
.pv2-promo__tile {
    display: flex;
    flex: 0 0 45%;
    align-items: center;
    justify-content: center;
    border-radius: var(--pv2-radius-photo);
    background: var(--pv2-tile);
    overflow: hidden;
}
.pv2-promo__tile img { width: 100%; height: 100%; max-height: 180px; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
.pv2-promo:hover .pv2-promo__tile img { transform: scale(1.04); }

/* Coupon band (STYLE_WEB 6): Blue-tint card, dashed blue coupon chip, Ink copy, one primary button. */
.pv2-coupon {
    display: flex;
    align-items: center;
    gap: 16px 32px;
    padding: 20px 32px;
    border-radius: var(--pv2-radius);
    background: var(--pv2-coupon-fill, var(--pv2-accent-tint));
    color: var(--pv2-ink);
}
.pv2-coupon__chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 240px;
    padding: 12px 24px;
    border: 2px dashed var(--pv2-accent);
    border-radius: var(--pv2-radius-photo);
    background: var(--pv2-card);
    color: var(--pv2-accent) !important;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
    text-decoration: none !important;
}
.pv2-coupon__chip .las { font-size: 22px; color: var(--pv2-ink-2); }
.pv2-coupon__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pv2-card);
    color: var(--pv2-accent);
    font-size: 28px;
}
.pv2-coupon__text { flex: 1 1 auto; min-width: 0; text-align: center; }
.pv2-coupon__title { margin: 0; color: var(--pv2-ink); font-size: 24px; font-weight: 700; line-height: 1.3; }
.pv2-coupon__caption { margin: 4px 0 0; color: var(--pv2-ink-2); font-size: 16px; }
.pv2-coupon__btn { flex: 0 0 auto; }
@media (max-width: 767.98px) {
    .pv2-coupon { flex-direction: column; padding: 20px 16px; text-align: center; }
    .pv2-coupon__chip { min-width: 0; width: 100%; font-size: 20px; }
    .pv2-coupon__title { font-size: 19px; }
    .pv2-coupon__caption { font-size: 14px; }
    .pv2-coupon__btn { width: 100%; }
}
@media (max-width: 575.98px) {
    .pv2-promo { min-height: 132px; padding: 14px; }
    .pv2-promo__title { font-size: 18px; }
    .pv2-promo__caption { font-size: 13px; }
}