/*
 * Payism V3 website: tokens, base and the centred container / 12-column grid.
 * Source: HANDOFF/v3/website/WEB_DESIGN_SYSTEM.md sections 2 to 6.
 * Scope: body.v3 (the store layout adds it while config payism.web_v3 is on).
 * Every page layer (header, components, search, listing, home, and the later
 * catalog / buy / account / seller layers) reads only these variables.
 */
:root {
    --v3-brand-900: #062B4F;
    --v3-brand-700: #0563A3;
    --v3-brand-600: #0977C0;
    --v3-brand-500: #0573B9;
    --v3-brand-400: #1C93D6;
    --v3-brand-100: #E6F1FA;
    --v3-brand-50: #F2F8FD;
    --v3-bg: #F3F6FA;
    --v3-surface: #FFFFFF;
    --v3-tile: #F5F7FA;
    --v3-ink: #0F1B2D;
    --v3-ink-2: #3A4656;
    --v3-muted: #5C6778;
    --v3-line: #E3EAF2;
    --v3-line-strong: #D6E2EE;
    --v3-deal: #D9480F;
    --v3-deal-50: #FFF1E8;
    --v3-deal-ink: #A9380B;
    --v3-success: #0F7B4F;
    --v3-success-50: #E7F6EE;
    --v3-warning: #9A5B00;
    --v3-warning-50: #FFF6E0;
    --v3-error: #C62828;
    --v3-error-50: #FDECEC;
    --v3-star: #F2A900;
    --v3-disabled-bg: #E3EAF2;
    --v3-disabled-ink: #6B7686;

    --v3-grad-brand: linear-gradient(135deg, #062B4F 0%, #0573B9 55%, #1C93D6 100%);
    --v3-grad-btn: linear-gradient(180deg, #0977C0, #0563A3);

    --v3-shadow-1: 0 1px 2px rgba(15, 27, 45, .05), 0 4px 16px rgba(15, 27, 45, .06);
    --v3-shadow-2: 0 12px 32px rgba(15, 27, 45, .12);
    --v3-shadow-3: 0 24px 64px rgba(6, 43, 79, .18);
    --v3-shadow-stuck: 0 1px 0 #E3EAF2, 0 8px 24px rgba(15, 27, 45, .06);

    --v3-r-8: 8px;
    --v3-r-12: 12px;
    --v3-r-16: 16px;
    --v3-r-20: 20px;
    --v3-r-24: 24px;
    --v3-r-pill: 999px;

    --v3-container: 1296px;
    --v3-gutter: 24px;
    --v3-side: 72px;
    --v3-section: 64px;
    --v3-section-head: 24px;
    --v3-grid-gap: 24px;

    --v3-font: 'Plus Jakarta Sans', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Kannada', 'Noto Sans Telugu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --v3-focus: 0 0 0 3px rgba(28, 147, 214, .35);
}

@media (max-width: 1439.98px) { :root { --v3-side: 48px; } }
@media (max-width: 1199.98px) { :root { --v3-side: 32px; --v3-gutter: 20px; --v3-grid-gap: 20px; } }
@media (max-width: 767.98px) {
    :root { --v3-side: 16px; --v3-gutter: 12px; --v3-grid-gap: 12px; --v3-section: 32px; --v3-section-head: 16px; }
}

/* ---------- base ---------- */
body.v3 {
    font-family: var(--v3-font) !important;
    font-size: 15px;
    line-height: 24px;
    color: var(--v3-ink);
    -webkit-font-smoothing: antialiased;
}
body.v3 .payism-main-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    overflow-x: clip;
}
body.v3 #v3-main {
    flex: 1 0 auto;
    width: 100%;
}
body.v3.v3-page,
body.v3.v3-page .payism-main-wrapper { background: var(--v3-bg) !important; }
body.v3 h1, body.v3 h2, body.v3 h3, body.v3 h4 { font-family: var(--v3-font); color: var(--v3-ink); }
body.v3 a { color: inherit; }
/* H8 decisions #11 (all layouts): a link drawn as a primary button keeps white text; "body.v3 a { color: inherit }"
   gave checkout "Login to continue" dark text on blue (2.9 : 1). The H8 link blue stays in chrome8.css. */
body.v3 a.btn-primary, body.v3 a.btn-primary:hover, body.v3 a.btn-primary:focus { color: #fff; }
body.v3 :focus-visible { outline: 2px solid var(--v3-brand-600); outline-offset: 2px; box-shadow: var(--v3-focus); }
body.v3 .tnum, body.v3 .v3-price, body.v3 .v3-timer { font-variant-numeric: tabular-nums; }
.v3-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- container + grid (system 2) ---------- */
.v3-container {
    width: 100%;
    max-width: calc(var(--v3-container) + 2 * var(--v3-side));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--v3-side);
    padding-right: var(--v3-side);
}
@media (min-width: 1440px) { .v3-container { max-width: calc(var(--v3-container) + 144px); padding-left: 72px; padding-right: 72px; } }
/* Every legacy store page sits in the same centred container (owner: nothing stretched). */
body.v3 .payism-main-wrapper .container {
    max-width: calc(var(--v3-container) + 2 * var(--v3-side));
    padding-left: var(--v3-side);
    padding-right: var(--v3-side);
}
@media (min-width: 1440px) { body.v3 .payism-main-wrapper .container { max-width: calc(var(--v3-container) + 144px); padding-left: 72px; padding-right: 72px; } }

.v3-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--v3-grid-gap); }
@media (max-width: 1199.98px) { .v3-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .v3-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v3-span-3 { grid-column: span 3; } .v3-span-4 { grid-column: span 4; } .v3-span-5 { grid-column: span 5; }
.v3-span-6 { grid-column: span 6; } .v3-span-7 { grid-column: span 7; } .v3-span-8 { grid-column: span 8; }
.v3-span-9 { grid-column: span 9; } .v3-span-12 { grid-column: 1 / -1; }
@media (max-width: 1199.98px) { .v3-grid > [class*='v3-span-'] { grid-column: 1 / -1; } }

.v3-section { margin-top: var(--v3-section); }
.v3-stack > * + * { margin-top: var(--v3-section); }

/* ---------- type scale (system 4) ---------- */
.v3-display { font-size: 48px; line-height: 56px; font-weight: 800; letter-spacing: -.5px; }
.v3-h1 { font-size: 36px; line-height: 44px; font-weight: 800; margin: 0; }
.v3-h2 { font-size: 28px; line-height: 36px; font-weight: 700; margin: 0; }
.v3-h3 { font-size: 22px; line-height: 30px; font-weight: 700; margin: 0; }
.v3-h4 { font-size: 18px; line-height: 26px; font-weight: 600; margin: 0; }
.v3-body-lg { font-size: 17px; line-height: 28px; }
.v3-small { font-size: 14px; line-height: 20px; font-weight: 500; }
.v3-caption { font-size: 13px; line-height: 18px; font-weight: 500; }
.v3-muted { color: var(--v3-muted); }
@media (max-width: 767.98px) {
    .v3-display { font-size: 30px; line-height: 38px; }
    .v3-h1 { font-size: 26px; line-height: 34px; }
    .v3-h2 { font-size: 20px; line-height: 28px; }
    .v3-h3 { font-size: 18px; line-height: 26px; }
    .v3-h4 { font-size: 16px; line-height: 24px; }
}

/* ---------- icons (Lucide line set, 1.75 stroke) ---------- */
.v3i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.v3i--24 { width: 24px; height: 24px; }
.v3i--16 { width: 16px; height: 16px; }
.v3i--14 { width: 14px; height: 14px; }
.v3i--fill { fill: currentColor; stroke: none; }

@media (prefers-reduced-motion: reduce) {
    body.v3 *, body.v3 *::before, body.v3 *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}