:root {
    color-scheme: light;
    --background: oklch(0.975 0.014 75);
    --foreground: oklch(0.28 0.045 268);
    --card: oklch(0.995 0.006 75);
    --primary: oklch(0.52 0.15 291);
    --primary-hover: oklch(0.46 0.16 291);
    --primary-foreground: oklch(0.99 0.005 75);
    --secondary: oklch(0.93 0.03 288);
    --muted: oklch(0.955 0.014 75);
    --muted-foreground: oklch(0.48 0.03 265);
    --border: oklch(0.9 0.015 80);
    --radius: 1.25rem;
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) * 1.4);
    --radius-2xl: calc(var(--radius) * 1.8);
    --lavender: oklch(0.88 0.06 291);
    --lavender-foreground: oklch(0.32 0.08 291);
    --mint: oklch(0.86 0.08 166);
    --mint-foreground: oklch(0.3 0.07 166);
    --peach: oklch(0.87 0.08 45);
    --peach-foreground: oklch(0.35 0.09 40);
    --sunshine: oklch(0.88 0.1 92);
    --sunshine-foreground: oklch(0.38 0.08 80);
    --sky: oklch(0.86 0.06 232);
    --sky-foreground: oklch(0.3 0.07 232);
    --navy: oklch(0.24 0.06 275);
    --navy-foreground: oklch(0.96 0.02 80);
    --success: oklch(0.65 0.15 155);
    --rose: oklch(0.72 0.14 15);
    --font-sans: "Plus Jakarta Sans", "Noto Sans", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Fredoka", ui-rounded, sans-serif;
    --font-hindi: "Noto Sans Devanagari", "Noto Sans", sans-serif;
    --font-gujarati: "Noto Sans Gujarati", "Noto Sans", sans-serif;
    --container-max: 1240px;

    /* My Account Order tab */

}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

svg {
    display: block;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--primary) 55%, transparent);
    outline-offset: 3px;
    border-radius: 6px;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .container {
        padding: 0 2rem;
    }
}

/* =========================================================
       OFFER BAR
       ========================================================= */
.offer-bar {
    min-height: 34px;
    padding: 0.4rem 1rem;
    background: var(--navy);
    color: var(--navy-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
}

.offer-bar strong {
    color: var(--sunshine);
}

.offer-bar s {
    opacity: 0.65;
}

.offer-bar a {
    color: var(--sunshine);
    font-weight: 800;
    white-space: nowrap;
    padding-left: 5px;
}

.offer-bar a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .offer-bar {
        font-size: 0.66rem;
        gap: 0.35rem;
        padding: 0.4rem 0.75rem;
    }

    .offer-bar a {
        display: none;
    }
}

/* =========================================================
       HEADER
       ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    padding: 0.75rem 0;
    transition: padding 0.3s ease;
}

.site-header__pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 66px;
    padding: 0 0.55rem 0 1.1rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--background) 78%, transparent);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    box-shadow: 0 4px 20px -8px rgba(31, 45, 77, 0.08);
    transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header.is-scrolled {
    padding: 0.5rem 0;
}

.site-header.is-scrolled .site-header__pill {
    height: 60px;
    background: color-mix(in oklab, var(--background) 92%, transparent);
    box-shadow: 0 8px 28px -10px rgba(31, 45, 77, 0.16);
    border-color: color-mix(in oklab, var(--border) 90%, transparent);
}

/* =========================================================
       BRAND LOGO — Redesigned
       A moon cradling a sleeping newborn star, wrapped in a
       soft swaddle curve. Warm, original, memorable.
       ========================================================= */
.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.brand__mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--sunshine) 70%, transparent) 0%, transparent 55%),
        linear-gradient(145deg, var(--lavender) 0%, color-mix(in oklab, var(--lavender) 60%, var(--primary)) 100%);
    color: var(--primary-foreground);
    flex-shrink: 0;
    box-shadow:
        0 4px 12px -4px color-mix(in oklab, var(--primary) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand:hover .brand__mark {
    transform: rotate(-6deg) scale(1.04);
}

.brand__mark svg {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    z-index: 1;
}

/* Tiny sparkle accent on the mark */
.brand__spark {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: var(--sunshine);
    box-shadow: 0 0 0 2px var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sunshine-foreground);
}

.brand__spark svg {
    width: 0.4rem;
    height: 0.4rem;
}

.brand__word {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--foreground);
}

.brand__word em {
    font-style: normal;
    position: relative;
    color: var(--primary);
}

/* Underline swoosh under "Born" */
.brand__word em::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sunshine) 0%, color-mix(in oklab, var(--sunshine) 40%, transparent) 100%);
    opacity: 0.85;
}

@media (max-width: 380px) {
    .brand__word {
        font-size: 1rem;
    }

    .brand__mark {
        width: 2.25rem;
        height: 2.25rem;
    }

    .brand__mark svg {
        width: 1.35rem;
        height: 1.35rem;
    }
}

/* =========================================================
       DESKTOP NAV — with icons & animated pill
       ========================================================= */
.site-nav {
    display: none;
    position: relative;
    align-items: center;
    gap: 0.15rem;
    padding: 0.3rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--muted) 55%, transparent);
    border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

@media (min-width: 960px) {
    .site-nav {
        display: flex;
    }
}

.site-nav a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--foreground) 78%, transparent);
    transition: color 0.22s ease;
    white-space: nowrap;
    min-height: 40px;
}

.site-nav .menu li a:hover {
    color: var(--foreground);
}

.site-nav a i {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    color: color-mix(in oklab, var(--primary) 75%, transparent);
    transition: color 0.22s ease, transform 0.22s ease;
}

.site-nav a:hover i {
    color: var(--primary);
    transform: translateY(-1px);
}

.site-nav__pill {
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    height: calc(100% - 0.6rem);
    border-radius: 999px;
    background: var(--card);
    box-shadow: 0 2px 10px -3px rgba(31, 45, 77, 0.14);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}

.site-nav__pill.is-active {
    opacity: 1;
}

/* =========================================================
       HEADER CTA
       ========================================================= */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.header-cta {
    display: none;
    align-items: center;
    gap: 0.45rem;
    height: 2.75rem;
    padding: 0 1.15rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

@media (min-width: 640px) {
    .header-cta {
        display: inline-flex;
    }
}

.header-cta:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px color-mix(in oklab, var(--primary) 55%, transparent);
}

.header-cta__price {
    font-weight: 800;
}

.header-cta svg {
    width: 0.9rem;
    height: 0.9rem;
    transition: transform 0.2s ease;
}

.header-cta:hover svg {
    transform: translateX(2px);
}

.header-cta__offer {
    display: inline-flex;
    align-items: center;
    height: 1.15rem;
    padding: 0 0.4rem;
    margin-left: 0.1rem;
    border-radius: 999px;
    background: var(--sunshine);
    color: var(--sunshine-foreground);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Hamburger */
.menu-toggle {
    display: inline-flex;
    width: 2.875rem;
    height: 2.875rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid color-mix(in oklab, var(--border) 80%, transparent);
    color: var(--foreground);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.menu-toggle:hover {
    background: var(--muted);
    border-color: color-mix(in oklab, var(--foreground) 18%, var(--border));
}

.menu-toggle svg {
    width: 1.3rem;
    height: 1.3rem;
}

@media (min-width: 960px) {
    .menu-toggle {
        display: none;
    }
}

/* =========================================================
       MOBILE MENU
       ========================================================= */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
}

.mobile-menu.is-open {
    display: block;
}

.mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 20, 40, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.mobile-menu.is-open .mobile-menu__backdrop {
    opacity: 1;
}

.mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 420px;
    background: var(--background);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -24px 0 60px -20px rgba(24, 20, 40, 0.32);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobile-menu.is-open .mobile-menu__panel {
    transform: translateX(0);
}

@media (max-width: 420px) {
    .mobile-menu__panel {
        max-width: 100%;
    }
}

.mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem 0.9rem;
    position: sticky;
    top: 0;
    background: color-mix(in oklab, var(--background) 96%, transparent);
    backdrop-filter: blur(8px);
    z-index: 2;
}

.mobile-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--muted);
    border: none;
    color: var(--foreground);
    transition: background 0.2s ease;
}

.mobile-menu__close:hover {
    background: var(--border);
}

.mobile-menu__close svg {
    width: 1.15rem;
    height: 1.15rem;
}

.mobile-menu__body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 0.25rem 1.25rem 1.75rem;
}

/* Launch offer card */
.launch-card {
    padding: 1.1rem 1.15rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(140deg, color-mix(in oklab, var(--sunshine) 55%, var(--card)) 0%, color-mix(in oklab, var(--peach) 45%, var(--card)) 100%);
    border: 1px solid color-mix(in oklab, var(--sunshine-foreground) 12%, var(--border));
    position: relative;
    overflow: hidden;
}

/* Tiny decorative sparkles in the launch card */
.launch-card::before,
.launch-card::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    background: color-mix(in oklab, var(--sunshine-foreground) 20%, transparent);
    pointer-events: none;
}

.launch-card::before {
    top: 0.6rem;
    right: 0.9rem;
    width: 0.35rem;
    height: 0.35rem;
}

.launch-card::after {
    top: 1.5rem;
    right: 1.6rem;
    width: 0.25rem;
    height: 0.25rem;
}

.launch-card__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sunshine-foreground);
    margin-bottom: 0.4rem;
}

.launch-card__label svg {
    width: 0.7rem;
    height: 0.7rem;
}

.launch-card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.7rem;
}

.launch-card__prices {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.launch-card__now {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1;
}

.launch-card__was {
    font-size: 0.9375rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--foreground) 55%, transparent);
    text-decoration: line-through;
}

.launch-card__save {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sunshine-foreground);
}

/* Mobile nav with icons */
.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mobile-nav a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 54px;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--foreground);
    transition: background 0.18s ease, color 0.18s ease;
    position: relative;
}

.mobile-nav a:hover,
.mobile-nav a:active {
    background: var(--secondary);
    color: var(--primary);
}

.mobile-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
    flex-shrink: 0;
    transition: background 0.18s ease, transform 0.18s ease;
}

.mobile-nav__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.mobile-nav a:hover .mobile-nav__icon {
    background: color-mix(in oklab, var(--primary) 18%, var(--card));
    transform: scale(1.05);
}

/* Color-code each nav icon */
.mobile-nav a:nth-child(1) .mobile-nav__icon {
    background: color-mix(in oklab, var(--lavender) 60%, var(--card));
    color: var(--lavender-foreground);
}

.mobile-nav a:nth-child(2) .mobile-nav__icon {
    background: color-mix(in oklab, var(--sky) 60%, var(--card));
    color: var(--sky-foreground);
}

.mobile-nav a:nth-child(3) .mobile-nav__icon {
    background: color-mix(in oklab, var(--mint) 60%, var(--card));
    color: var(--mint-foreground);
}

.mobile-nav a:nth-child(4) .mobile-nav__icon {
    background: color-mix(in oklab, var(--peach) 60%, var(--card));
    color: var(--peach-foreground);
}

.mobile-nav__label {
    flex: 1;
}

.mobile-nav__arrow {
    width: 1rem;
    height: 1rem;
    color: color-mix(in oklab, var(--foreground) 40%, transparent);
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.18s ease;
}

.mobile-nav a:hover .mobile-nav__arrow {
    transform: translateX(3px);
    color: var(--primary);
}

.mobile-divider {
    height: 1px;
    background: var(--border);
    margin: 0.15rem 0.5rem;
}

/* Purchase block */
.mobile-purchase {
    padding: 1.15rem 1.15rem 1.25rem;
    border-radius: var(--radius-xl);
    background: var(--card);
    border: 1px solid var(--border);
}

.mobile-purchase__prices {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.mobile-purchase__now {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1;
}

.mobile-purchase__was {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted-foreground);
    text-decoration: line-through;
}

.mobile-purchase__save {
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--success);
    background: color-mix(in oklab, var(--success) 12%, var(--card));
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}

.mobile-purchase__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 700;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mobile-purchase__cta:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.mobile-purchase__cta svg {
    width: 1rem;
    height: 1rem;
}

.mobile-purchase__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
}

.mobile-purchase__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

.mobile-purchase__list svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--success);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Payment row */
.mobile-payments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.mobile-payments__label {
    width: 100%;
    text-align: center;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--muted-foreground) 85%, transparent);
    margin-bottom: 0.35rem;
}

.pay-chip {
    display: inline-flex;
    /* align-items: center; */
    /* justify-content: center; */
    height: 1.35rem;
    padding: 0 0.5rem;
    border-radius: 0.35rem;
    background: var(--card);
    border: 1px solid var(--border);
    font-size: 0.525rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--muted-foreground);
}

body.no-scroll {
    overflow: hidden;
}

/* Demo content */
.demo-section {
    padding: 4rem 0;
    min-height: 60vh;
}

.demo-section h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.demo-section p {
    color: var(--muted-foreground);
    max-width: 38rem;
    line-height: 1.65;
}

/* =========================================================
       LOGO SHOWCASE (for preview only — remove in production)
       ========================================================= */
.logo-showcase {
    padding: 2rem 1rem;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.logo-showcase h3 {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 1.25rem;
}

.logo-showcase__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.logo-showcase__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.logo-showcase__label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
       FOOTER
       ========================================================= */
.site-footer {
    position: relative;
    margin-top: 15px;
    padding: 1rem 0 1.5rem;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 60% at 15% 0%, color-mix(in oklab, var(--primary) 8%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 85% 15%, color-mix(in oklab, var(--sunshine) 10%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse 40% 50% at 50% 100%, color-mix(in oklab, var(--peach) 5%, transparent) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.site-footer__inner {
    position: relative;
    z-index: 1;
    border-radius: 1.75rem;
    background: color-mix(in oklab, var(--card) 78%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid color-mix(in oklab, var(--border) 65%, transparent);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 12px 40px -20px rgba(0, 0, 0, 0.12);
    padding: 1.75rem 1.25rem 1.25rem;
    overflow: hidden;
}

@media (min-width: 480px) {
    .site-footer__inner {
        padding: 2rem 1.5rem 1.5rem;
        border-radius: 2rem;
    }
}

@media (min-width: 768px) {
    .site-footer__inner {
        padding: 2.5rem 2rem 1.75rem;
        border-radius: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .site-footer__inner {
        padding: 3rem 2.5rem 2rem;
        border-radius: 2.5rem;
    }
}

.footer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

@media (min-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (min-width: 900px) {
    .footer-grid {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: 2.5rem;
    }
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* =========================================================
       BRAND
       ========================================================= */
.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--foreground);
    width: fit-content;
    transition: transform 0.2s ease;
}

.brand:hover {
    transform: scale(1.02);
}

.brand__mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--sunshine) 70%, transparent) 0%, transparent 55%),
        linear-gradient(145deg, var(--lavender) 0%, color-mix(in oklab, var(--lavender) 60%, var(--primary)) 100%);
    color: var(--primary-foreground);
    flex-shrink: 0;
    box-shadow:
        0 4px 12px -4px color-mix(in oklab, var(--primary) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.brand__mark svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    position: relative;
    z-index: 1;
}

.brand__spark {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--sunshine);
    box-shadow: 0 0 0 2px var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sunshine-foreground);
}

.brand__spark svg {
    width: 0.35rem !important;
    height: 0.35rem !important;
}

.brand__word {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--foreground);
}

.brand__word em {
    font-style: normal;
    position: relative;
    color: var(--primary);
}

.brand__word em::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sunshine) 0%, color-mix(in oklab, var(--sunshine) 40%, transparent) 100%);
    opacity: 0.85;
}

.footer-tagline {
    max-width: 22rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0;
}

/* =========================================================
       Social row
       ========================================================= */
.footer-social {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.footer-social a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    border-radius: 0.85rem;
    background: var(--social-tint-bg, color-mix(in oklab, var(--muted) 75%, transparent));
    border: 1px solid var(--social-tint-border, color-mix(in oklab, var(--border) 70%, transparent));
    color: var(--social-color, var(--foreground));
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
}

.footer-social a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--social-bg, var(--primary));
    opacity: 0;
    transition: opacity 0.28s ease;
    z-index: -1;
    border-radius: inherit;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 22px -8px var(--social-shadow, color-mix(in oklab, var(--primary) 55%, transparent));
    outline: none;
}

.footer-social a:hover::before,
.footer-social a:focus-visible::before {
    opacity: 1;
}

.footer-social a>svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
    flex: 0 0 auto;
    display: block;
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.footer-social a:hover>svg {
    transform: scale(1.1) rotate(-4deg);
}

.footer-social a[aria-label="Instagram"] {
    --social-color: #C13584;
    --social-tint-bg: color-mix(in oklab, #C13584 12%, var(--card));
    --social-tint-border: color-mix(in oklab, #C13584 25%, transparent);
    --social-bg: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    --social-shadow: rgba(220, 39, 67, 0.45);
}

.footer-social a[aria-label="WhatsApp"] {
    --social-color: #128C7E;
    --social-tint-bg: color-mix(in oklab, #25D366 14%, var(--card));
    --social-tint-border: color-mix(in oklab, #25D366 28%, transparent);
    --social-bg: #25D366;
    --social-shadow: rgba(37, 211, 102, 0.45);
}

.footer-social a[aria-label="Email"] {
    --social-color: var(--primary);
    --social-tint-bg: color-mix(in oklab, var(--primary) 10%, var(--card));
    --social-tint-border: color-mix(in oklab, var(--primary) 22%, transparent);
    --social-bg: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 60%, oklch(0.62 0.18 320)) 100%);
    --social-shadow: color-mix(in oklab, var(--primary) 50%, transparent);
}

.footer-social a[aria-label="YouTube"] {
    --social-color: #FF0000;
    --social-tint-bg: color-mix(in oklab, #FF0000 10%, var(--card));
    --social-tint-border: color-mix(in oklab, #FF0000 22%, transparent);
    --social-bg: #FF0000;
    --social-shadow: rgba(255, 0, 0, 0.4);
}

/* ---------- Column headings + links ---------- */
.footer-col h3 {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--foreground);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.footer-col h3::before {
    content: '';
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
    flex-shrink: 0;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.footer-col a,
.footer-col span.muted-static {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    transition: color 0.2s ease, transform 0.2s ease;
    width: fit-content;
    padding: 0.15rem 0;
    min-height: 32px;
}

.footer-col a:hover {
    color: var(--foreground);
    transform: translateX(3px);
}

.footer-col span.muted-static {
    color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    cursor: default;
}

/* =========================================================
       Mini CTA strip — single product (cleaned)
       ========================================================= */
.footer-cta-strip {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 1.5rem;
    background:
        radial-gradient(ellipse 60% 120% at 10% 0%, color-mix(in oklab, var(--lavender) 50%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 50% 100% at 95% 100%, color-mix(in oklab, var(--sunshine) 40%, transparent) 0%, transparent 60%),
        linear-gradient(135deg,
            color-mix(in oklab, var(--primary) 8%, var(--card)) 0%,
            color-mix(in oklab, var(--sunshine) 10%, var(--card)) 100%);
    border: 1px solid color-mix(in oklab, var(--primary) 15%, transparent);
    overflow: hidden;
}

@media (min-width: 720px) {
    .footer-cta-strip {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.35rem 1.6rem;
        gap: 1.5rem;
    }
}

.footer-cta-strip__text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.footer-cta-strip__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: -0.01em;
}

.footer-cta-strip__head svg {
    width: 1rem !important;
    height: 1rem !important;
    color: var(--sunshine-foreground);
    flex-shrink: 0;
}

/* Price block */
.footer-cta-strip__price-block {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.footer-cta-strip__prices {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.footer-cta-strip__now {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1;
    letter-spacing: -0.02em;
}

.footer-cta-strip__was {
    font-size: 0.875rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--foreground) 55%, transparent);
    text-decoration: line-through;
}

.footer-cta-strip__save {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--sunshine);
    color: var(--sunshine-foreground);
}

.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 999px;
    border: none;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 0 1.25rem;
    height: 2.625rem;
    background: var(--primary);
    color: var(--primary-foreground);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    flex-shrink: 0;
    width: fit-content;
    min-height: 44px;
    box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--primary) 45%, transparent);
}

@media (max-width: 719px) {
    .footer-cta-btn {
        width: 100%;
    }
}

.footer-cta-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -10px color-mix(in oklab, var(--primary) 60%, transparent);
}

.footer-cta-btn svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
    flex-shrink: 0;
}

/* =========================================================
       Payment strip
       ========================================================= */
.footer-payments {
    position: relative;
    z-index: 1;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed color-mix(in oklab, var(--border) 90%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .footer-payments {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1.25rem;
    }
}

.footer-payments__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.footer-payments__label svg {
    width: 0.8rem !important;
    height: 0.8rem !important;
    color: var(--success);
    flex-shrink: 0;
}

.footer-payments__row {
    display: flex;
    align-items: center;
    gap: 0.85rem 1.1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.35rem;
    padding: 0;
    opacity: 0.85;
    line-height: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.payment-icon:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.payment-icon svg {
    height: 100%;
    width: auto;
    display: block;
}

/* =========================================================
       Bottom bar
       ========================================================= */
.footer-divider {
    position: relative;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in oklab, var(--border) 90%, transparent) 20%,
            color-mix(in oklab, var(--border) 90%, transparent) 80%,
            transparent 100%);
    margin: 1.5rem 0 1.15rem;
}

.footer-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

@media (min-width: 640px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-bottom__copy {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
}

.footer-bottom__copy .brand-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--lavender) 0%, var(--primary) 100%);
    color: var(--primary-foreground);
    flex-shrink: 0;
}

.footer-bottom__copy .brand-mini svg {
    width: 0.7rem !important;
    height: 0.7rem !important;
}

.footer-bottom__secure {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.footer-bottom__secure svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
    color: var(--success);
    flex-shrink: 0;
}

/* End Footer CSS */

/* FAQs Page CSS */
/* FAQ hero */
.faq-hero {
    position: relative;
    padding: 2rem 0 1.25rem;
    overflow: hidden;
}

.faq-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 70% at 15% 0%, color-mix(in oklab, var(--lavender) 45%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 45% 60% at 90% 20%, color-mix(in oklab, var(--sunshine) 30%, transparent) 0%, transparent 55%);
    pointer-events: none;
}

.faq-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 44rem;
    margin: 0 auto;
}

.faq-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
    border: 1px solid color-mix(in oklab, var(--primary) 18%, transparent);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.faq-hero__eyebrow svg {
    width: 0.85rem;
    height: 0.85rem;
}

.faq-hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--foreground);
}

@media (min-width: 640px) {
    .faq-hero h1 {
        font-size: 2.75rem;
    }
}

@media (min-width: 1024px) {
    .faq-hero h1 {
        font-size: 3.125rem;
    }
}

.faq-hero p {
    margin-top: 0.75rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--muted-foreground);
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--foreground);
    box-shadow: 0 4px 12px -6px rgba(31, 45, 77, 0.08);
}

.hero-chip svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--primary);
    flex-shrink: 0;
}

.hero-decor {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.hero-decor__art {
    position: relative;
    width: 6rem;
    height: 6rem;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--lavender) 0%, color-mix(in oklab, var(--sky) 50%, var(--lavender)) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px -20px color-mix(in oklab, var(--primary) 40%, transparent);
}

.hero-decor__art svg {
    width: 3rem;
    height: 3rem;
    color: var(--primary-foreground);
}

.hero-decor__dot {
    position: absolute;
    border-radius: 999px;
    background: var(--sunshine);
    opacity: 0.75;
}

.hero-decor__dot--1 {
    width: 0.5rem;
    height: 0.5rem;
    top: 0.25rem;
    right: 1rem;
}

.hero-decor__dot--2 {
    width: 0.35rem;
    height: 0.35rem;
    bottom: 0.5rem;
    left: 0.5rem;
    background: var(--peach);
}

.hero-decor__dot--3 {
    width: 0.4rem;
    height: 0.4rem;
    bottom: 0.25rem;
    right: 0.75rem;
    background: var(--mint);
}

/* Search + filter */
.faq-tools {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .faq-tools {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
}

.faq-search {
    position: relative;
    flex: 1;
    max-width: 22rem;
    width: 100%;
}

.faq-search svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
    pointer-events: none;
}

.faq-search input {
    width: 100%;
    height: 2.875rem;
    padding: 0 1rem 0 2.5rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--card);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--foreground);
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 44px;
}

.faq-search input::placeholder {
    color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}

.faq-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent);
}

.faq-cats {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.faq-cats::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .faq-cats {
        flex-wrap: wrap;
        justify-content: flex-end;
        overflow-x: visible;
        padding-bottom: 0;
    }
}

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: var(--card);
    border: 1.5px solid var(--border);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted-foreground);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    min-height: 2.25rem;
}

.cat-chip:hover {
    border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
    color: var(--foreground);
}

.cat-chip.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.cat-chip svg {
    width: 0.8rem;
    height: 0.8rem;
}

/* FAQ sections */
.faq-main {
    padding: 1.5rem 0 2.5rem;
    position: relative;
    z-index: 1;
}

.faq-group {
    margin-bottom: 2rem;
    scroll-margin-top: 6rem;
}

.faq-group:last-child {
    margin-bottom: 0;
}

.faq-group__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.faq-group__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--lavender);
    color: var(--lavender-foreground);
    flex-shrink: 0;
}

.faq-group__icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.faq-group:nth-of-type(2) .faq-group__icon {
    background: var(--sky);
    color: var(--sky-foreground);
}

.faq-group:nth-of-type(3) .faq-group__icon {
    background: var(--peach);
    color: var(--peach-foreground);
}

.faq-group:nth-of-type(4) .faq-group__icon {
    background: var(--mint);
    color: var(--mint-foreground);
}

.faq-group:nth-of-type(5) .faq-group__icon {
    background: var(--sunshine);
    color: var(--sunshine-foreground);
}

.faq-group:nth-of-type(6) .faq-group__icon {
    background: var(--secondary);
    color: var(--primary);
}

.faq-group:nth-of-type(7) .faq-group__icon {
    background: color-mix(in oklab, var(--rose) 15%, var(--card));
    color: var(--rose);
}

.faq-group__head h2 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

@media (min-width: 640px) {
    .faq-group__head h2 {
        font-size: 1.375rem;
    }
}

/* Accordion */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
    border-color: color-mix(in oklab, var(--primary) 25%, var(--border));
}

.faq-item.is-open {
    border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
    box-shadow: 0 8px 24px -12px color-mix(in oklab, var(--primary) 25%, transparent);
}

.faq-trigger {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: none;
    border: none;
    text-align: left;
    color: var(--foreground);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    min-height: 52px;
    transition: color 0.2s ease;
}

@media (min-width: 640px) {
    .faq-trigger {
        font-size: 1rem;
        padding: 1.1rem 1.25rem;
    }
}

.faq-trigger:hover {
    color: var(--primary);
}

.faq-trigger__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
    transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
    margin-top: 0.1rem;
}

.faq-trigger__icon svg {
    width: 0.85rem;
    height: 0.85rem;
    transition: transform 0.3s ease;
}

.faq-item.is-open .faq-trigger__icon {
    background: var(--primary);
    color: var(--primary-foreground);
}

.faq-item.is-open .faq-trigger__icon svg {
    transform: rotate(180deg);
}

.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.is-open .faq-panel {
    grid-template-rows: 1fr;
}

.faq-panel__inner {
    overflow: hidden;
    min-height: 0;
}

.faq-panel__content {
    padding: 0 1.1rem 1.1rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--muted-foreground);
}

@media (min-width: 640px) {
    .faq-panel__content {
        padding: 0 1.25rem 1.25rem;
    }
}

.faq-panel__content p+p {
    margin-top: 0.6rem;
}

.faq-panel__content ul {
    margin: 0.4rem 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.faq-panel__content ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 0;
}

.faq-panel__content ul li::before {
    content: '';
    flex-shrink: 0;
    width: 0.4rem;
    height: 0.4rem;
    margin-top: 0.55rem;
    border-radius: 999px;
    background: var(--primary);
}

.faq-panel__content strong {
    color: var(--foreground);
    font-weight: 700;
}

.faq-panel__content .lang-chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0.4rem;
    background: color-mix(in oklab, var(--primary) 8%, var(--card));
    border: 1px solid color-mix(in oklab, var(--primary) 18%, transparent);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0.1rem 0.1rem;
}

.faq-panel__content .lang-chip--hi {
    font-family: var(--font-hindi);
}

.faq-panel__content .lang-chip--gu {
    font-family: var(--font-gujarati);
}

.faq-group.is-hidden,
.faq-item.is-hidden {
    display: none;
}

.faq-empty {
    display: none;
    text-align: center;
    padding: 2.5rem 1.25rem;
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-2xl);
}

.faq-empty.is-visible {
    display: block;
}

.faq-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
    margin-bottom: 0.85rem;
}

.faq-empty__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.faq-empty h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.faq-empty p {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    max-width: 22rem;
    margin: 0 auto 0.85rem;
}

/* Support card */
.support-card {
    position: relative;
    margin-top: 0.85rem;
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius-3xl);
    background:
        radial-gradient(ellipse 60% 90% at 10% 0%, color-mix(in oklab, var(--lavender) 55%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 50% 80% at 95% 100%, color-mix(in oklab, var(--sunshine) 40%, transparent) 0%, transparent 60%),
        linear-gradient(135deg,
            color-mix(in oklab, var(--primary) 8%, var(--card)) 0%,
            color-mix(in oklab, var(--mint) 10%, var(--card)) 100%);
    border: 1px solid color-mix(in oklab, var(--primary) 15%, transparent);
    text-align: center;
    overflow: hidden;
}

@media (min-width: 640px) {
    .support-card {
        padding: 2.25rem 1.75rem;
    }
}

.support-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: var(--card);
    color: var(--rose);
    box-shadow: 0 12px 28px -12px rgba(31, 45, 77, 0.2);
    margin-bottom: 0.85rem;
}

.support-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.support-card h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}

@media (min-width: 640px) {
    .support-card h2 {
        font-size: 1.875rem;
    }
}

.support-card>p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--muted-foreground);
    max-width: 34rem;
    margin: 0 auto 1.25rem;
}

.support-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.support-note {
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--muted-foreground);
    max-width: 34rem;
    margin: 0 auto;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--card) 70%, transparent);
    border: 1px dashed color-mix(in oklab, var(--border) 90%, transparent);
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    text-align: left;
}

.support-note svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Buttons */

.woocommerce button.button {
    border-radius: 999px !important;
    border: none !important;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    border: none;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0 1.5rem;
    height: 2.875rem;
    background: var(--primary);
    color: var(--primary-foreground);
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    line-height: 1;
    min-height: 44px;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--primary) 50%, transparent);
}

.btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

.btn-outline {
    background: transparent;
    color: var(--foreground);
    border: 1.5px solid var(--border);
}

.btn-outline:hover {
    background: var(--card);
    border-color: color-mix(in oklab, var(--foreground) 20%, transparent);
}

.btn-lg {
    height: 3.25rem;
    padding: 0 2rem;
    font-size: 1rem;
}

.btn-lg svg {
    width: 1rem;
    height: 1rem;
}

.btn-sunshine {
    background: var(--sunshine);
    color: var(--sunshine-foreground);
}

.btn-sunshine:hover {
    background: color-mix(in oklab, var(--sunshine) 92%, black 8%);
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn-shine:hover::after {
    left: 100%;
}

/* Purchase CTA */
.purchase-cta {
    margin-top: 1.5rem;
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius-3xl);
    background:
        radial-gradient(ellipse 60% 90% at 90% 0%, color-mix(in oklab, var(--sunshine) 45%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 50% 80% at 10% 100%, color-mix(in oklab, var(--lavender) 55%, transparent) 0%, transparent 60%),
        linear-gradient(135deg,
            color-mix(in oklab, var(--secondary) 60%, var(--card)) 0%,
            var(--card) 100%);
    border: 1px solid color-mix(in oklab, var(--primary) 15%, transparent);
    text-align: center;
}

@media (min-width: 640px) {
    .purchase-cta {
        padding: 2.25rem 1.75rem;
    }
}

.purchase-cta h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.3rem;
}

@media (min-width: 640px) {
    .purchase-cta h2 {
        font-size: 1.875rem;
    }
}

.purchase-cta>p {
    font-size: 0.9375rem;
    color: var(--muted-foreground);
    max-width: 32rem;
    margin: 0 auto 1.25rem;
}

.purchase-cta__product {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.4rem;
}

.purchase-cta__prices {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.purchase-cta__now {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.purchase-cta__was {
    font-size: 1rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--foreground) 55%, transparent);
    text-decoration: line-through;
}

.purchase-cta__save {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--sunshine);
    color: var(--sunshine-foreground);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.purchase-cta__langs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-bottom: 1.25rem;
}

.purchase-cta__langs b {
    color: var(--foreground);
    font-weight: 700;
}

.purchase-cta__langs .dot {
    opacity: 0.5;
}

.purchase-cta__langs .hindi {
    font-family: var(--font-hindi);
}

.purchase-cta__langs .gujarati {
    font-family: var(--font-gujarati);
}

.purchase-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.purchase-cta__microcopy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.purchase-cta__microcopy span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.purchase-cta__microcopy svg {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--success);
}

/* End FAQs Page CSS */

/* Homepage CSS */

.homejustab-section {
    padding: 36px 0;
}

@media (min-width: 768px) {
    .homejustab-section {
        padding: 56px 0;
    }
}

.homejustab-section-heading {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.625rem;
    color: var(--foreground);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

@media (min-width: 640px) {
    .homejustab-section-heading {
        font-size: 2.125rem;
    }
}

.homejustab-section-subhead {
    margin-top: 0.4rem;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    text-align: center;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}

.homejustab-section-intro {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.homejustab-font-sans-fallback {
    font-family: "Noto Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Buttons */
.homejustab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    border: none;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0 1.5rem;
    height: 2.875rem;
    background: var(--primary);
    color: var(--primary-foreground);
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

.homejustab-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--primary) 50%, transparent);
}

.homejustab-btn:active {
    transform: translateY(0);
}

.homejustab-btn svg {
    width: 1rem;
    height: 1rem;
}

.homejustab-btn-lg {
    height: 3.25rem;
    padding: 0 2rem;
    font-size: 1rem;
}

.homejustab-btn-sm {
    height: 2.25rem;
    padding: 0 1rem;
    font-size: 0.8125rem;
}

.homejustab-btn-outline {
    background: transparent;
    color: var(--foreground);
    border: 1.5px solid var(--border);
}

.homejustab-btn-outline:hover {
    background: var(--card);
    border-color: color-mix(in oklab, var(--foreground) 20%, transparent);
}

.homejustab-btn-ghost {
    background: transparent;
    color: var(--foreground);
}

.homejustab-btn-ghost:hover {
    background: var(--muted);
    box-shadow: none;
    transform: none;
}

.homejustab-btn-sunshine {
    background: var(--sunshine);
    color: var(--sunshine-foreground);
}

.homejustab-btn-sunshine:hover {
    background: color-mix(in oklab, var(--sunshine) 92%, black 8%);
}

.homejustab-btn-block {
    width: 100%;
}

.homejustab-btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.homejustab-btn-shine:hover::after {
    left: 100%;
}

/* Badges / Eyebrow */
.homejustab-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.7rem;
    text-transform: uppercase;
}

.homejustab-badge-card {
    background: var(--card);
    color: var(--foreground);
}

.homejustab-badge-sunshine {
    background: var(--sunshine);
    color: var(--sunshine-foreground);
}

.homejustab-badge-soft {
    background: color-mix(in oklab, var(--primary) 12%, var(--card));
    color: var(--primary);
}

.homejustab-badge-rose {
    background: color-mix(in oklab, var(--rose) 15%, var(--card));
    color: color-mix(in oklab, var(--rose) 85%, black);
}

.homejustab-badge-success {
    background: color-mix(in oklab, var(--success) 15%, var(--card));
    color: color-mix(in oklab, var(--success) 80%, black);
}

.homejustab-eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
    border: 1px solid color-mix(in oklab, var(--primary) 18%, transparent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.9rem;
    text-transform: uppercase;
}

.homejustab-eyebrow svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* Hero */
.homejustab-hero {
    position: relative;
    overflow: hidden;
    padding: 24px 0 36px;
    background:
        radial-gradient(ellipse 60% 50% at 15% 10%, color-mix(in oklab, var(--lavender) 45%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 90% 30%, color-mix(in oklab, var(--sunshine) 35%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 50% 100%, color-mix(in oklab, var(--mint) 30%, transparent) 0%, transparent 60%);
}

@media (min-width: 768px) {
    .homejustab-hero {
        padding: 36px 0 56px;
    }
}

.homejustab-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: center;
}

@media (min-width: 768px) {
    .homejustab-hero__grid {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 2.5rem;
    }
}

.homejustab-hero__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.homejustab-hero__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .homejustab-hero__title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .homejustab-hero__title {
        font-size: 3.75rem;
    }
}

.homejustab-hero__underline {
    position: relative;
    display: inline-block;
}

.homejustab-hero__underline svg {
    position: absolute;
    bottom: -0.3rem;
    left: 0;
    z-index: 0;
    height: 0.85rem;
    width: calc(100% + 0.5rem);
    color: var(--accent);
}

.homejustab-hero__underline span {
    position: relative;
    z-index: 1;
}

.homejustab-hero__lede {
    max-width: 30rem;
    color: var(--muted-foreground);
    line-height: 1.6;
    font-size: 1rem;
}

.homejustab-hero__ctas {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

@media (min-width: 480px) {
    .homejustab-hero__ctas {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* Payment trust bar — tight logos */
.homejustab-payment-trust {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.4rem;
}

.homejustab-payment-trust__label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: color-mix(in oklab, var(--foreground) 55%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 0.1rem;
}

.homejustab-payment-icons {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.homejustab-payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.375rem;
    padding: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
    opacity: 0.85;
    line-height: 0;
}

.homejustab-payment-icon:hover {
    transform: translateY(-1px);
    opacity: 1;
}

.homejustab-payment-icon svg {
    height: 100%;
    width: auto;
    display: block;
}

/* Hero art */
.homejustab-hero__art {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 34rem;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .homejustab-hero__art {
        max-width: none;
    }
}

.homejustab-hero__art-glow {
    position: absolute;
    inset: 5% 10%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--lavender) 70%, transparent), transparent 70%);
    filter: blur(50px);
    z-index: 0;
}

.homejustab-hero__art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.2));
    position: relative;
    z-index: 1;
}

.homejustab-floating-badge {
    position: absolute;
    background: var(--card);
    border-radius: 1rem;
    padding: 0.5rem 0.8rem;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    z-index: 3;
    animation: homejustab-float 4s ease-in-out infinite;
}

.homejustab-floating-badge svg {
    width: 1rem;
    height: 1rem;
    color: var(--success);
}

.homejustab-floating-badge--top {
    top: 6%;
    left: -2%;
}

.homejustab-floating-badge--bottom {
    bottom: 10%;
    right: -2%;
    animation-delay: -2s;
}

@keyframes homejustab-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@media (max-width: 640px) {
    .homejustab-floating-badge--top {
        left: 0;
    }

    .homejustab-floating-badge--bottom {
        right: 0;
    }

    .homejustab-floating-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.65rem;
    }
}

/* Trust strip */
.homejustab-trust-strip {
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
}

.homejustab-trust-strip__inner {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: center;
}

@media (min-width: 768px) {
    .homejustab-trust-strip__inner {
        flex-direction: row;
        justify-content: space-between;
        gap: 1.75rem;
    }
}

.homejustab-trust-strip__label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}

.homejustab-trust-strip__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--foreground) 80%, transparent);
}

.homejustab-trust-strip__stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.homejustab-trust-strip__stat svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
}

/* Product finder */
.homejustab-finder {
    border-radius: var(--radius-3xl);
    background: linear-gradient(135deg, color-mix(in oklab, var(--lavender) 40%, var(--card)) 0%, color-mix(in oklab, var(--sky) 30%, var(--card)) 100%);
    padding: 1.5rem 1.1rem;
    border: 1px solid color-mix(in oklab, var(--primary) 15%, transparent);
}

@media (min-width: 768px) {
    .homejustab-finder {
        padding: 2.25rem;
    }
}

.homejustab-finder__header {
    text-align: center;
    max-width: 34rem;
    margin: 0 auto 1.25rem;
}

.homejustab-finder__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.375rem;
    letter-spacing: -0.01em;
}

@media (min-width: 640px) {
    .homejustab-finder__title {
        font-size: 1.625rem;
    }
}

.homejustab-finder__sub {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.homejustab-finder__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

@media (min-width: 768px) {
    .homejustab-finder__steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.85rem;
    }
}

.homejustab-finder-step {
    background: var(--card);
    border-radius: var(--radius-2xl);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.homejustab-finder-step:hover {
    border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px color-mix(in oklab, var(--primary) 25%, transparent);
}

.homejustab-finder-step__tag {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.homejustab-finder-step__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.homejustab-finder-step__desc {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    line-height: 1.5;
}

.homejustab-finder-step__arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-top: 0.2rem;
}

/* Product cards */
.homejustab-products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin-top: 1.75rem;
}

@media (min-width: 768px) {
    .homejustab-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.homejustab-product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-3xl);
    border: 2px solid var(--border);
    background: var(--card);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.homejustab-product-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.2);
}

.homejustab-product-card--featured {
    border-color: var(--primary);
    box-shadow: 0 20px 50px -20px color-mix(in oklab, var(--primary) 40%, transparent);
}

.homejustab-product-card__ribbon {
    position: absolute;
    top: 1rem;
    right: -2.5rem;
    transform: rotate(38deg);
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.3rem 3rem;
    text-transform: uppercase;
    z-index: 4;
}

.homejustab-product-card__media {
    position: relative;
    display: flex;
    aspect-ratio: 4 / 3;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--muted);
}

.homejustab-product-card__media.homejustab-theme-lavender {
    background: var(--lavender);
}

.homejustab-product-card__media.homejustab-theme-mint {
    background: var(--mint);
}

.homejustab-product-card__media.homejustab-theme-sky {
    background: var(--sky);
}

.homejustab-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.homejustab-product-card:hover .homejustab-product-card__media img {
    transform: scale(1.06);
}

.homejustab-product-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.06) 100%);
    pointer-events: none;
    z-index: 1;
}

.homejustab-product-card__media-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    z-index: 2;
}

.homejustab-product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.1rem;
}

.homejustab-product-card__body h3 {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.homejustab-product-card__body>p {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.homejustab-best-for {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.65rem;
    background: color-mix(in oklab, var(--primary) 8%, var(--card));
    font-size: 0.75rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--primary) 90%, black);
}

.homejustab-best-for svg {
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
}

.homejustab-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.homejustab-tag {
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
}

.homejustab-product-card__footer {
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.homejustab-price-block {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.homejustab-price-group {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.homejustab-price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.homejustab-price-was {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: line-through;
}

.homejustab-save-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in oklab, var(--success) 15%, transparent);
    color: color-mix(in oklab, var(--success) 80%, black);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
}

.homejustab-price-per-day {
    font-size: 0.75rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--success) 80%, black);
}

/* Bundle hero */
.homejustab-bundle-hero {
    border-radius: var(--radius-3xl);
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy) 0%, oklch(0.28 0.08 275) 100%);
    color: var(--navy-foreground);
    position: relative;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.3);
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .homejustab-bundle-hero {
        padding: 1.75rem;
    }
}

.homejustab-bundle-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, color-mix(in oklab, var(--primary) 25%, transparent), transparent 50%),
        radial-gradient(circle at 20% 80%, color-mix(in oklab, var(--sunshine) 15%, transparent), transparent 50%);
    pointer-events: none;
}

.homejustab-bundle-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .homejustab-bundle-hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

.homejustab-bundle-hero__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .homejustab-bundle-hero__media {
        order: 1;
    }
}

.homejustab-bundle-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.homejustab-bundle-hero__media:hover img {
    transform: scale(1.04);
}

.homejustab-bundle-hero__media::before {
    content: '';
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--sunshine) 30%, transparent), transparent 70%);
    filter: blur(30px);
    z-index: 0;
}

.homejustab-bundle-hero__content {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

@media (min-width: 768px) {
    .homejustab-bundle-hero__content {
        order: 2;
    }
}

.homejustab-bundle-hero__content h2 {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

@media (min-width: 640px) {
    .homejustab-bundle-hero__content h2 {
        font-size: 2rem;
    }
}

.homejustab-bundle-hero__content>p {
    color: color-mix(in oklab, var(--navy-foreground) 80%, transparent);
    font-size: 0.9375rem;
}

.homejustab-bundle-hero__features {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.homejustab-bundle-hero__features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: color-mix(in oklab, var(--navy-foreground) 90%, transparent);
    font-weight: 500;
}

.single-product .homejustab-bundle-hero__features li {
    color: #000000;
}

.homejustab-bundle-hero__features li {
    position: relative;
    list-style: none;
    padding-left: 1.6rem;
}

.homejustab-bundle-hero__features li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 0;
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    color: rgb(255, 212, 59);
    font-size: 1rem;
}

.homejustab-bundle-hero__features li svg[data-lucide="check"],
.homejustab-bundle-hero__features li i[data-lucide="check"] {
    display: none;
}

.homejustab-bundle-hero__price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.4rem;
}

.homejustab-bundle-hero__price {
    font-family: var(--font-display);
    font-size: 2.125rem;
    font-weight: 600;
    color: var(--sunshine);
    letter-spacing: -0.02em;
    line-height: 1;
}

@media (min-width: 640px) {
    .homejustab-bundle-hero__price {
        font-size: 2.5rem;
    }
}

.homejustab-bundle-hero__was {
    font-size: 0.9375rem;
    text-decoration: line-through;
    color: color-mix(in oklab, var(--navy-foreground) 55%, transparent);
}

.homejustab-bundle-hero__save {
    background: var(--sunshine);
    color: var(--sunshine-foreground);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.homejustab-bundle-hero__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: color-mix(in oklab, var(--navy-foreground) 65%, transparent);
}

.homejustab-bundle-hero__meta svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* Value stack */
.homejustab-value-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: 1.75rem;
}

@media (min-width: 640px) {
    .homejustab-value-stack {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .homejustab-value-stack {
        grid-template-columns: repeat(3, 1fr);
    }
}

.homejustab-value-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 0.9rem 1rem;
    transition: all 0.2s ease;
}

.homejustab-value-item:hover {
    border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
    transform: translateY(-2px);
}

.homejustab-value-item__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
}

.homejustab-value-item__icon svg {
    width: 1rem;
    height: 1rem;
}

.homejustab-value-item__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.homejustab-value-item__text strong {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--foreground);
}

.homejustab-value-item__text span {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    line-height: 1.45;
}

/* Activity preview */
.homejustab-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    margin-top: 1.75rem;
}

@media (min-width: 640px) {
    .homejustab-preview-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.85rem;
    }
}

@media (min-width: 1024px) {
    .homejustab-preview-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.85rem;
    }
}

.homejustab-preview-item {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--card);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.08);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    aspect-ratio: 4 / 5;
}

.homejustab-preview-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

.homejustab-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.homejustab-preview-item:hover img {
    transform: scale(1.08);
}

.homejustab-preview-item__label {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--background) 92%, transparent);
    backdrop-filter: blur(6px);
    padding: 0.25rem 0.4rem;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--foreground);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 2;
}

/* How it works */
.homejustab-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.75rem;
}

@media (min-width: 640px) {
    .homejustab-steps-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.85rem;
    }
}

.homejustab-step {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 0.9rem;
    border-radius: var(--radius-2xl);
    background: var(--card);
    border: 1px solid var(--border);
    position: relative;
    transition: all 0.2s ease;
}

.homejustab-step:hover {
    border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
    transform: translateY(-3px);
}

.homejustab-step__number {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
}

.homejustab-step__icon {
    position: absolute;
    top: 1.1rem;
    right: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 12%, var(--card));
    color: var(--primary);
}

.homejustab-step__icon svg {
    width: 1rem;
    height: 1rem;
}

.homejustab-step h3 {
    margin-top: 0.4rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.homejustab-step p {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--muted-foreground);
}

/* Bento */
.homejustab-bento {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
    margin-top: 1.75rem;
}

@media (min-width: 640px) {
    .homejustab-bento {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 1fr;
    }

    .homejustab-bento__item--large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .homejustab-bento__item--wide {
        grid-column: span 2;
    }
}

.homejustab-bento__item {
    border-radius: var(--radius-2xl);
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--card);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.homejustab-bento__item:hover {
    border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
    transform: translateY(-2px);
}

.homejustab-bento__item--large {
    background: linear-gradient(135deg, color-mix(in oklab, var(--lavender) 50%, var(--card)) 0%, color-mix(in oklab, var(--mint) 35%, var(--card)) 100%);
    justify-content: space-between;
}

.homejustab-bento__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: color-mix(in oklab, var(--primary) 12%, var(--card));
    color: var(--primary);
}

.homejustab-bento__icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.homejustab-bento__item h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.homejustab-bento__item p {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    line-height: 1.5;
}

.homejustab-bento__item--large h3 {
    font-size: 1.375rem;
}

.homejustab-bento__item--large p {
    font-size: 0.9375rem;
}

.homejustab-bento__stat {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
    margin-top: 0.4rem;
}

/* Compare */
.homejustab-compare-wrap {
    margin-top: 1.75rem;
    overflow-x: auto;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    -webkit-overflow-scrolling: touch;
}

.homejustab-compare {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.homejustab-compare th,
.homejustab-compare td {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.homejustab-compare thead th {
    background: color-mix(in oklab, var(--muted) 60%, transparent);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--foreground);
}

.homejustab-compare tbody tr:last-child td {
    border-bottom: none;
}

.homejustab-compare td:first-child {
    color: var(--muted-foreground);
    font-weight: 500;
}

.homejustab-compare .homejustab-col-highlight {
    background: color-mix(in oklab, var(--primary) 6%, transparent);
}

.homejustab-compare thead th.homejustab-col-highlight {
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    color: var(--primary);
}

.homejustab-compare .homejustab-icon-yes {
    color: var(--success);
    width: 1rem;
    height: 1rem;
}

.homejustab-compare .homejustab-icon-no {
    color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
    width: 1rem;
    height: 1rem;
}

/* Reviews */
.homejustab-reviews-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1.75rem;
}

@media (min-width: 900px) {
    .homejustab-reviews-layout {
        grid-template-columns: 300px 1fr;
        gap: 1.75rem;
        align-items: start;
    }
}

.homejustab-rating-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
    position: sticky;
    top: 5rem;
}

.homejustab-rating-card__score {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.homejustab-rating-card__num {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.homejustab-rating-card__out {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.homejustab-rating-card__stars {
    display: flex;
    gap: 0.15rem;
    color: var(--sunshine-foreground);
    margin-top: 0.4rem;
}

.homejustab-rating-card__stars svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

.homejustab-rating-card__count {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.homejustab-rating-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.homejustab-rating-bar__label {
    width: 2.25rem;
    font-weight: 600;
}

.homejustab-rating-bar__track {
    flex: 1;
    height: 0.4rem;
    background: var(--muted);
    border-radius: 999px;
    overflow: hidden;
}

.homejustab-rating-bar__fill {
    height: 100%;
    background: var(--sunshine-foreground);
    border-radius: 999px;
}

.homejustab-rating-bar__pct {
    width: 2.5rem;
    text-align: right;
    font-weight: 600;
}

.homejustab-reviews-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

@media (min-width: 640px) {
    .homejustab-reviews-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.homejustab-review-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1rem;
    transition: all 0.2s ease;
}

.homejustab-review-card:hover {
    border-color: color-mix(in oklab, var(--primary) 25%, var(--border));
    transform: translateY(-2px);
}

.homejustab-review-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.homejustab-review-card__stars {
    display: flex;
    gap: 0.1rem;
    color: var(--sunshine-foreground);
}

.homejustab-review-card__stars svg {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}

.homejustab-review-card__verified {
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--success);
}

.homejustab-review-card__verified svg {
    width: 0.75rem;
    height: 0.75rem;
}

.homejustab-review-card__quote {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--foreground);
}

.homejustab-review-card__author {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.homejustab-review-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--lavender);
    color: var(--lavender-foreground);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.75rem;
}

.homejustab-review-card__meta {
    display: flex;
    flex-direction: column;
}

.homejustab-review-card__name {
    font-size: 0.75rem;
    font-weight: 700;
}

.homejustab-review-card__city {
    font-size: 0.625rem;
    color: var(--muted-foreground);
}

/* Final CTA */
.homejustab-final-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    border-radius: var(--radius-3xl);
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in oklab, var(--lavender) 60%, transparent), transparent 60%),
        var(--secondary);
    padding: 2rem 1.25rem;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .homejustab-final-cta {
        padding: 2.5rem;
    }
}

.homejustab-final-cta__media {
    position: relative;
    width: 100%;
    max-width: 20rem;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-2xl);
    padding: 0.85rem;
    z-index: 1;
}

.homejustab-final-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.25));
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.homejustab-final-cta__media:hover img {
    transform: scale(1.04);
}

.homejustab-final-cta__media::before {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--primary) 25%, transparent), transparent 70%);
    filter: blur(30px);
    z-index: -1;
}

.homejustab-final-cta h2 {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

@media (min-width: 640px) {
    .homejustab-final-cta h2 {
        font-size: 2.125rem;
    }
}

.homejustab-final-cta>p {
    max-width: 30rem;
    color: var(--muted-foreground);
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.homejustab-final-cta__price {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1;
    position: relative;
    z-index: 1;
}

/* Accordion */
.homejustab-accordion {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.homejustab-accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    overflow: hidden;
    transition: all 0.2s ease;
}

.homejustab-accordion-item:hover {
    border-color: color-mix(in oklab, var(--primary) 25%, var(--border));
}

.homejustab-accordion-item.homejustab-is-open {
    border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
    box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--primary) 20%, transparent);
}

.homejustab-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: none;
    text-align: left;
    padding: 0.9rem 1rem;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
}

.homejustab-accordion-trigger svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.homejustab-accordion-item.homejustab-is-open .homejustab-accordion-trigger svg {
    transform: rotate(180deg);
}

.homejustab-accordion-content {
    display: none;
    padding: 0 1rem 1rem;
    color: var(--muted-foreground);
    line-height: 1.6;
    font-size: 0.875rem;
}

.homejustab-accordion-item.homejustab-is-open .homejustab-accordion-content {
    display: block;
    animation: homejustab-fadeIn 0.25s ease;
}

@keyframes homejustab-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer */
.homejustab-site-footer {
    border-top: 1px solid var(--border);
    background: var(--card);
}

.homejustab-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 0;
}

@media (min-width: 640px) {
    .homejustab-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .homejustab-footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.homejustab-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.homejustab-footer-col p {
    max-width: 18rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.homejustab-footer-social {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--muted-foreground);
}

.homejustab-footer-social svg {
    width: 1.05rem;
    height: 1.05rem;
}

.homejustab-footer-social a:hover {
    color: var(--foreground);
}

.homejustab-footer-col h3 {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
}

.homejustab-footer-col a,
.homejustab-footer-col span {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    transition: color 0.15s;
}

.homejustab-footer-col a:hover {
    color: var(--foreground);
}

.homejustab-footer-col .homejustab-muted-static {
    color: color-mix(in oklab, var(--muted-foreground) 65%, transparent);
}

.homejustab-footer-divider {
    height: 1px;
    background: var(--border);
    margin: 1.25rem 0;
}

.homejustab-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
    text-align: center;
}

@media (min-width: 640px) {
    .homejustab-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.homejustab-footer-bottom p {
    font-size: 0.6875rem;
    color: var(--muted-foreground);
}

.homejustab-footer-secure {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    font-weight: 500;
}

.homejustab-footer-secure svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--success);
}

/* Sticky CTA */
.homejustab-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 0.55rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.homejustab-sticky-cta.homejustab-is-visible {
    transform: translateY(0);
}

.homejustab-sticky-cta__info {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1;
    min-width: 0;
}

.homejustab-sticky-cta__title {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.homejustab-sticky-cta__price {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
}

@media (min-width: 640px) {
    .homejustab-sticky-cta {
        display: none;
    }
}

/* Toast */
#homejustab-toast-host {
    position: fixed;
    bottom: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

@media (min-width: 640px) {
    #homejustab-toast-host {
        bottom: 1.25rem;
    }
}

.homejustab-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--foreground);
    color: var(--background);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.homejustab-toast svg {
    width: 1rem;
    height: 1rem;
    color: var(--success);
}

.homejustab-toast.homejustab-is-leaving {
    opacity: 0;
    transform: translateY(6px);
}

.homejustab-text-center {
    text-align: center;
}

.homejustab-mt-10 {
    margin-top: 2rem;
}


.homejustab-container-copy {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {

    .homejustab-container,
    .homejustab-container-copy {
        padding: 0 2rem;
    }
}

/* End Homepage CSS */

/* Cart Button Design */
.cart-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--sunshine);
    color: var(--sunshine-foreground);
    font-size: 0.625rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--background);
}

.cart-icon-btn svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* End Cart Button Design */

/* Cart Page CSS */

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    margin-bottom: 0px;
    display: flex;
    font-size: 1rem;
}

.woocommerce-cart .wc-proceed-to-checkout {
    padding: 0px;
}

.woocommerce table.shop_table {
    margin: 0px;
}

.woocommerce-cart table.shop_table.shop_table_responsive.jab-summary-table {
    border: none !important;
}

/* Page head */
.page-head {
    position: relative;
    padding: 1.5rem 0 1rem !important;
}

.page-head__eyebrow {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.3rem;
}

.page-head h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.75rem;
    letter-spacing: -0.015em;
    line-height: 1.15;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .page-head h1 {
        font-size: 2.25rem;
    }
}

.page-head h1 span {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

/* Progress steps */
.checkout-steps {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.625rem;
    font-weight: 800;
}

.step.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.step.is-active .step__num {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.step.is-done .step__num {
    background: var(--success);
    color: #fff;
}

.step__arrow {
    color: var(--muted-foreground);
    opacity: 0.5;
}

.step__arrow svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* Cart layout */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-bottom: 2.5rem;
}

@media (min-width: 900px) {
    .cart-layout {
        grid-template-columns: 1fr 380px;
        gap: 2rem;
        align-items: start;
    }
}

/* Cart items column */
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.cart-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.cart-item {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0.85rem;
    padding: 1rem;
}

@media (min-width: 640px) {
    .cart-item {
        grid-template-columns: 7rem 1fr;
        gap: 1.1rem;
        padding: 1.25rem;
    }
}

.cart-item__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--lavender) 0%, color-mix(in oklab, var(--sky) 50%, var(--lavender)) 100%);
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 20px -10px color-mix(in oklab, var(--primary) 35%, transparent);
}

.cart-item__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}

.cart-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.cart-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.cart-item__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.25;
}

@media (min-width: 640px) {
    .cart-item__title {
        font-size: 1.1875rem;
    }
}

.cart-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--muted);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.meta-chip svg {
    width: 0.7rem;
    height: 0.7rem;
}

.meta-chip--lang {
    font-family: var(--font-sans);
}

/* Remove button */
.cart-item__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    transition: background 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
}

.cart-item__remove:hover {
    background: color-mix(in oklab, var(--rose) 10%, var(--card));
    color: var(--rose);
}

.cart-item__remove svg {
    width: 1rem;
    height: 1rem;
}

/* Item footer: price row */
.cart-item__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.4rem;
}

.cart-item__prices {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cart-item__now {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1;
}

.cart-item__was {
    font-size: 0.8125rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--foreground) 55%, transparent);
    text-decoration: line-through;
}

.cart-item__save {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--success) 14%, var(--card));
    color: color-mix(in oklab, var(--success) 80%, black);
    font-size: 0.625rem;
    font-weight: 800;
}

/* Language selector inside cart item */
.cart-item__lang {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

form.cart-item__lang label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.lang-options-inline {
    display: inline-flex;
    padding: 0.2rem;
    border-radius: 999px;
    background: var(--muted);
    border: 1px solid var(--border);
    gap: 0.1rem;
}

.lang-options-inline button {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--muted-foreground);
    transition: all 0.18s ease;
    min-height: 28px;
}

.lang-options-inline button[data-lang="hi"] {
    font-family: var(--font-hindi);
    font-size: 0.75rem;
}

.lang-options-inline button[data-lang="gu"] {
    font-family: var(--font-gujarati);
    font-size: 0.75rem;
}

.lang-options-inline button:hover {
    color: var(--foreground);
}

.lang-options-inline button.is-active {
    background: var(--card);
    color: var(--primary);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.12);
}

/* Cart toolbar */
.cart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0 0.2rem;
}

.cart-toolbar a,
.cart-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--muted-foreground);
    background: none;
    border: none;
    padding: 0.5rem 0.2rem;
    transition: color 0.18s ease;
}

.cart-toolbar a:hover,
.cart-toolbar button:hover {
    color: var(--primary);
}

.cart-toolbar a svg,
.cart-toolbar button svg {
    width: 0.9rem;
    height: 0.9rem;
}

.cart-toolbar__clear:hover {
    color: var(--rose);
}

/* Order summary */
.order-summary {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
    box-shadow: 0 12px 32px -20px rgba(31, 45, 77, 0.18);
}

@media (min-width: 900px) {
    .order-summary {
        position: sticky;
        top: 6rem;
    }
}

.order-summary h2 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.order-summary h2 svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
}

.summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.summary-line__label {
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.summary-line__label svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--success);
}

.summary-line__value {
    font-weight: 600;
    color: var(--foreground);
}

.summary-line--discount .summary-line__label {
    color: var(--success);
}

.summary-line--discount .summary-line__value {
    color: var(--success);
}

.summary-divider {
    height: 1px;
    background: var(--border);
    margin: 0.75rem 0;
}

.summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.3rem;
}

.summary-total__label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
}

.summary-total__value {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1;
}

.summary-total__old {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted-foreground);
    text-decoration: line-through;
    margin-left: 0.5rem;
}

.summary-save-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--success) 10%, var(--card));
    color: color-mix(in oklab, var(--success) 80%, black);
    font-size: 0.75rem;
    font-weight: 700;
    margin: 0.75rem 0 1rem;
}

.summary-save-note svg {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
}

/* CTA button */
/* .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    border: none;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0 1.5rem;
    height: 2.875rem;
    background: var(--primary);
    color: var(--primary-foreground);
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    line-height: 1;
    min-height: 44px;
    position: relative;
    overflow: hidden;
    width: 100%;
} */

.btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--primary) 50%, transparent);
}

.btn svg {
    width: 1rem;
    height: 1rem;
}

.btn-lg {
    height: 3.25rem;
    padding: 0 2rem;
    font-size: 1rem;
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn-shine:hover::after {
    left: 100%;
}

/* Microcopy under CTA */
.summary-microcopy {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.summary-microcopy span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-weight: 500;
}

.summary-microcopy svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--success);
    flex-shrink: 0;
}

/* Payment icons row */
.summary-payments {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.summary-payments__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.summary-payments__label svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--success);
}

.payment-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.25rem;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.payment-icon:hover {
    opacity: 1;
}

.payment-icon svg {
    height: 100%;
    width: auto;
    display: block;
}

/* Gift note */
.woocommerce-cart .gift-note {
    display: flex;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    margin-top: 0.85rem;
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--sunshine) 22%, var(--card));
    border: 1px solid color-mix(in oklab, var(--sunshine-foreground) 12%, var(--border));
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--sunshine-foreground);
}

.woocommerce-cart .gift-note svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.woocommerce-cart .gift-note strong {
    display: block;
    font-weight: 800;
    margin-bottom: 0.1rem;
}

/* Empty cart */
.cart-empty {
    display: none;
    padding: 2.5rem 1.25rem;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
}

.cart-empty.is-visible {
    display: block;
}

.cart-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
    margin-bottom: 1rem;
}

.cart-empty__icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.cart-empty h2 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.cart-empty p {
    font-size: 0.9375rem;
    color: var(--muted-foreground);
    max-width: 24rem;
    margin: 0 auto 1.25rem;
    line-height: 1.6;
}

.cart-empty .btn {
    width: auto;
}

/* Trust strip below cart */
.cart-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: 0.85rem;
    padding: 1rem;
    border-radius: var(--radius-xl);
    background: color-mix(in oklab, var(--mint) 30%, var(--card));
    border: 1px solid color-mix(in oklab, var(--mint-foreground) 12%, var(--border));
}

@media (min-width: 480px) {
    .cart-trust {
        grid-template-columns: 1fr 1fr;
    }
}

.cart-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mint-foreground);
}

.cart-trust__item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.cart-trust__item strong {
    display: block;
    font-weight: 700;
    font-size: 0.8125rem;
    margin-bottom: 0.1rem;
}

.cart-trust__item span {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* End Cart Page CSS */


/* Checkout Page CSS */
.woocommerce-checkout #payment div.form-row {
    padding: 0px !important;
}

.checkout-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in oklab, var(--background) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

.checkout-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
    gap: 1rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    flex-shrink: 0;
}

.brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
}

.brand__mark svg {
    width: 1.05rem;
    height: 1.05rem;
}

.secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted-foreground);
    padding: 0.4rem 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.secure-badge svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--success);
}

@media (max-width: 500px) {
    .secure-badge span {
        display: none;
    }
}

.checkout-progress {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 0.65rem 0;
}

.checkout-progress__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted-foreground);
    flex-wrap: wrap;
}

.checkout-progress__step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.checkout-progress__step.is-active {
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
}

.checkout-progress__step.is-done {
    color: var(--success);
}

.checkout-progress__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--muted);
    font-size: 0.625rem;
    font-weight: 800;
    color: var(--muted-foreground);
}

.checkout-progress__step.is-active .checkout-progress__num {
    background: var(--primary);
    color: var(--primary-foreground);
}

.checkout-progress__step.is-done .checkout-progress__num {
    background: var(--success);
    color: var(--success-foreground);
}

.checkout-progress__sep {
    width: 1.5rem;
    height: 1px;
    background: var(--border);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .checkout-progress__inner {
        font-size: 0.6875rem;
        gap: 0.25rem;
    }

    .checkout-progress__step {
        padding: 0.3rem 0.55rem;
    }

    .checkout-progress__sep {
        width: 0.75rem;
    }
}

.woocommerce .page-intro {
    padding: 1.5rem 0 1rem;
    /* text-align: center; */
}

.page-intro__eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.page-intro h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.625rem;
    letter-spacing: -0.01em;
    line-height: 1.15;
    max-width: 26rem;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .page-intro h1 {
        font-size: 2.125rem;
    }
}

.page-intro p {
    margin-top: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-bottom: 3rem;
}

@media (min-width: 900px) {
    .checkout-layout {
        grid-template-columns: 1.4fr 1fr;
        gap: 2rem;
        align-items: start;
    }
}

.checkout-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
}

@media (min-width: 640px) {
    .checkout-card {
        padding: 1.5rem;
    }
}

.checkout-card+.checkout-card {
    margin-top: 1rem;
}

.checkout-card__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.checkout-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 12%, var(--card));
    color: var(--primary);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.checkout-card__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.checkout-card__sub {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-top: 0.15rem;
    line-height: 1.45;
}

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.field {
    display: flex;
    flex-direction: column;
    /* gap: 0.35rem; */
}

.field label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--foreground);
}

.field input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
    background: var(--background);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--foreground);
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 48px;
}

.field input::placeholder {
    color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}

.field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent);
}

.field input[aria-invalid="true"] {
    border-color: var(--rose);
}

.field input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--rose) 15%, transparent);
}

.field__helper {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    line-height: 1.45;
}

.field__error {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rose);
    display: none;
    align-items: center;
    gap: 0.3rem;
}

.field__error.is-visible {
    display: flex;
}

.field__error svg {
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
}

.language-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

@media (min-width: 520px) {
    .language-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lang-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1rem 0.75rem;
    border-radius: var(--radius-xl);
    border: 2px solid var(--border);
    background: var(--card);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 90px;
    position: relative;
}

.lang-option:hover {
    border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
}

.lang-option.is-selected {
    border-color: var(--primary);
    background: color-mix(in oklab, var(--lavender) 45%, var(--card));
    box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--primary) 30%, transparent);
}

.lang-option__check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--primary-foreground);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.lang-option.is-selected .lang-option__check {
    opacity: 1;
}

.lang-option__check svg {
    width: 0.75rem;
    height: 0.75rem;
}

.lang-option__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.lang-option[data-lang="hi"] .lang-option__name {
    font-family: var(--font-hindi);
    font-size: 1.0625rem;
}

.lang-option[data-lang="gu"] .lang-option__name {
    font-family: var(--font-gujarati);
    font-size: 1.0625rem;
}

.lang-option__meta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.lang-option[data-lang="hi"] .lang-option__meta {
    font-family: var(--font-hindi);
}

.lang-option[data-lang="gu"] .lang-option__meta {
    font-family: var(--font-gujarati);
}

.lang-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.6rem;
}

.lang-note svg {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--success);
    flex-shrink: 0;
}

/* =========================================================
       COUPON CODE SECTION — NEW
       ========================================================= */
.coupon-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
    margin-top: 1rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (min-width: 640px) {
    .coupon-section {
        padding: 1.5rem;
    }
}

.coupon-section.is-applied {
    border-color: color-mix(in oklab, var(--success) 40%, var(--border));
    background: color-mix(in oklab, var(--mint) 25%, var(--card));
}

.coupon-section__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    min-height: 44px;
}

.coupon-section__toggle-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.coupon-section__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.7rem;
    background: color-mix(in oklab, var(--sunshine) 45%, var(--card));
    color: var(--sunshine-foreground);
    flex-shrink: 0;
}

.coupon-section__icon svg {
    width: 1rem;
    height: 1rem;
}

.coupon-section__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.2;
}

.coupon-section__sub {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.1rem;
}

.coupon-section__chevron {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--muted-foreground);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.coupon-section[data-open="true"] .coupon-section__chevron {
    transform: rotate(180deg);
}

.coupon-section__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0;
}

.coupon-section[data-open="true"] .coupon-section__body {
    grid-template-rows: 1fr;
    margin-top: 1rem;
}

.coupon-section__body-inner {
    overflow: hidden;
    min-height: 0;
}

/* Coupon input row */
.coupon-input-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.coupon-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.coupon-input-wrap svg.coupon-input-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
    pointer-events: none;
}

.coupon-input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem 0 2.4rem;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
    background: var(--background);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--foreground);
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 48px;
}

.coupon-input::placeholder {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}

.coupon-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent);
}

.coupon-input[aria-invalid="true"] {
    border-color: var(--rose);
}

.coupon-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 3rem;
    padding: 0 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
    min-height: 48px;
    flex-shrink: 0;
}

.coupon-apply-btn:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.coupon-apply-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.coupon-apply-btn svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* Coupon messages */
.coupon-message {
    display: none;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 600;
}

.coupon-message.is-visible {
    display: flex;
}

.coupon-message svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.coupon-message--error {
    color: var(--rose);
}

.coupon-message--success {
    color: var(--success);
}

/* Applied coupon state */
.coupon-applied {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1.5px dashed color-mix(in oklab, var(--success) 45%, var(--border));
    flex-wrap: wrap;
}

.coupon-applied.is-visible {
    display: flex;
}

.coupon-applied__left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.coupon-applied__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--success);
    color: #fff;
    flex-shrink: 0;
}

.coupon-applied__check svg {
    width: 0.9rem;
    height: 0.9rem;
}

.coupon-applied__info {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.coupon-applied__code {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--foreground);
}

.coupon-applied__desc {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.coupon-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: transparent;
    border: 1px solid color-mix(in oklab, var(--rose) 35%, var(--border));
    color: var(--rose);
    font-size: 0.6875rem;
    font-weight: 700;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.coupon-remove-btn:hover {
    background: color-mix(in oklab, var(--rose) 10%, var(--card));
    border-color: var(--rose);
}

.coupon-remove-btn svg {
    width: 0.8rem;
    height: 0.8rem;
}

/* Suggested coupons (optional helper) */
.coupon-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.coupon-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: var(--muted);
    border: 1px dashed var(--border);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    text-transform: uppercase;
    transition: all 0.18s ease;
    min-height: 26px;
}

.coupon-suggestion:hover {
    background: color-mix(in oklab, var(--primary) 8%, var(--card));
    border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
    color: var(--primary);
}

.coupon-suggestion svg {
    width: 0.7rem;
    height: 0.7rem;
}

/* Discount row in order summary */
.order-price-row--coupon span:last-child {
    color: var(--success);
    font-weight: 700;
}

.order-price-row--coupon {
    display: none;
}

.order-price-row--coupon.is-visible {
    display: flex;
}

.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.payment-method {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: var(--muted);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.payment-method svg {
    width: 0.85rem;
    height: 0.85rem;
}

.refund-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.85rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.refund-check input {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--primary);
    cursor: pointer;
}

.refund-check label {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted-foreground);
    cursor: pointer;
}

.refund-check label a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.digital-notice {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-xl);
    background: color-mix(in oklab, var(--peach) 40%, var(--card));
    border: 1px solid color-mix(in oklab, var(--peach-foreground) 15%, var(--border));
    margin-top: 1rem;
}

.digital-notice__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--card);
    color: var(--peach-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
}

.digital-notice__icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.digital-notice h4 {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--peach-foreground);
    margin-bottom: 0.2rem;
}

.digital-notice p {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--peach-foreground);
}

.trust-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    /* margin-top: 1rem; */
}

@media (min-width: 520px) {
    .trust-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.trust-item svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--primary);
    flex-shrink: 0;
}

.trust-item__text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.trust-item__title {
    font-size: 0.75rem;
    font-weight: 700;
}

.trust-item__sub {
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    line-height: 1.35;
}

.order-summary {
    position: sticky;
    top: 5.5rem;
}

@media (max-width: 899px) {
    .order-summary {
        position: static;
    }
}

.order-summary__card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.12);
}

.order-product {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.order-product__thumb {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-lg);
    background: var(--lavender);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-product__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.3rem;
}

.order-product__info {
    display: flex;
    flex-direction: column;
    /* gap: 0.15rem; */
    min-width: 0;
}

.order-product__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.order-product__sub {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    line-height: 1.4;
}

.order-product__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    /* margin-top: 0.3rem; */
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: capitalize;
}

.order-product__lang svg {
    width: 0.8rem;
    height: 0.8rem;
}

.order-divider {
    height: 1px;
    background: var(--border);
    margin: 1rem 0;
}

.order-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.875rem;
    margin-bottom: 0.4rem;
}

.order-price-row span:first-child {
    color: var(--muted-foreground);
}

.order-price-row--discount span:last-child {
    color: var(--success);
    font-weight: 700;
}

.order-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.order-total__label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.order-total__value {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.order-total__price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
}

.order-total__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--success) 15%, var(--card));
    color: color-mix(in oklab, var(--success) 80%, black);
    font-size: 0.6875rem;
    font-weight: 800;
}

.order-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
}

.order-checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--foreground);
}

.order-checklist li svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--success);
    flex-shrink: 0;
}

.order-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.order-meta svg {
    width: 0.8rem;
    height: 0.8rem;
}

.order-meta span+span::before {
    content: '·';
    margin: 0 0.35rem;
    opacity: 0.5;
}

.mobile-order-summary {
    display: block;
    margin-bottom: 0.85rem;
}

@media (min-width: 900px) {
    .mobile-order-summary {
        display: none;
    }
}

.mobile-order-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    text-align: left;
    min-height: 56px;
}

.mobile-order-trigger__left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.mobile-order-trigger__name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
}

.mobile-order-trigger__price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--primary);
}

.mobile-order-trigger__price s {
    font-weight: 500;
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.mobile-order-trigger__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.mobile-order-trigger__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--success) 15%, var(--card));
    color: color-mix(in oklab, var(--success) 80%, black);
    font-size: 0.6875rem;
    font-weight: 800;
}

.mobile-order-trigger svg {
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
    transition: transform 0.2s;
}

.mobile-order-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.mobile-order-details {
    display: none;
    margin-top: 0.5rem;
    padding: 1rem;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
}

.mobile-order-details.is-open {
    display: block;
}

.sticky-pay-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 0.6rem 1rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0));
    display: none;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.sticky-pay-bar.is-visible {
    transform: translateY(0);
}

.sticky-pay-bar__info {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1;
    min-width: 0;
}

.sticky-pay-bar__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
}

.sticky-pay-bar__price {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.sticky-pay-bar__price s {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
}

@media (max-width: 899px) {
    .sticky-pay-bar {
        display: flex;
    }
}

@media (min-width: 900px) {
    .sticky-pay-bar {
        display: none !important;
    }
}

.checkout-help {
    text-align: center;
    padding: 1rem 0 1.5rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.checkout-help a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.modal-overlay.is-open {
    display: flex;
}

.modal-box {
    background: var(--card);
    border-radius: var(--radius-2xl);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.25s ease;
    text-align: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 999px;
}

.modal-icon--processing {
    background: color-mix(in oklab, var(--sky) 40%, var(--card));
    color: var(--sky-foreground);
}

.modal-icon--error {
    background: color-mix(in oklab, var(--rose) 12%, var(--card));
    color: var(--rose);
}

.modal-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.modal-box h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.modal-box p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.modal-actions .btn {
    width: 100%;
}

.spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid color-mix(in oklab, var(--sky-foreground) 20%, transparent);
    border-top-color: var(--sky-foreground);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--card);
    padding: 1.25rem 0;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 640px) {
    .footer-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-inner p {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.footer-inner nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    justify-content: center;
}

.footer-inner nav a {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-weight: 600;
}

.footer-inner nav a:hover {
    color: var(--foreground);
}

#toast-host {
    position: fixed;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

@media (min-width: 900px) {
    #toast-host {
        bottom: 1.25rem;
    }
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--foreground);
    color: var(--background);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: 90vw;
}

.toast svg {
    width: 1rem;
    height: 1rem;
    color: var(--success);
    flex-shrink: 0;
}

.toast.is-leaving {
    opacity: 0;
    transform: translateY(6px);
}

.payment-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.payment-trust-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    padding: 0 0.55rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    font-size: 0.625rem;
    font-weight: 800;
    color: var(--muted-foreground);
    letter-spacing: 0.03em;
}

/* End Checkout Page CSS */



/* Load AFTER your original checkout design CSS. This bridges WooCommerce markup. */
.jab-checkout form.checkout.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5rem 2rem;
    align-items: start;
    width: 100%;
}

.jab-checkout .checkout-main {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.jab-checkout #order_review {
    display: contents;
    float: none;
    width: auto;
}

.jab-checkout .order-summary {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 3;
    width: auto;
    min-width: 0;
    position: sticky;
    top: 5.5rem;
}

.jab-checkout #payment {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    margin: 0;
    border-radius: var(--radius-2xl, 2.25rem);
    background: var(--card, #fff);
    padding: 1.5rem;
}

.jab-checkout .jab-checkout-footer {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
}

.jab-checkout .checkout-card {
    margin-bottom: 1.25rem;
}

.jab-checkout #customer_details {
    width: 100%;
    float: none;
}

.jab-checkout .woocommerce-billing-fields>h3 {
    display: none;
}

.jab-checkout .woocommerce-billing-fields__field-wrapper,
.jab-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.jab-checkout .form-row {
    float: none;
    clear: none;
    width: auto;
    margin: 0 0 1rem;
    padding: 0;
}

.jab-checkout .form-row-wide {
    grid-column: 1 / -1;
}

.jab-checkout .form-row label {
    display: block;
}

.jab-checkout .form-row input.input-text,
.jab-checkout .form-row select,
.jab-checkout .form-row textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: .75rem;
    border: 1.5px solid var(--border, #ddd);
    border-radius: var(--radius-lg, 1.25rem);
    background: var(--background, #fbf6ee);
    color: var(--foreground, #252535);
    font: inherit;
}

.jab-checkout .form-row.woocommerce-invalid input.input-text,
.jab-checkout .form-row.woocommerce-invalid .select2-selection {
    border-color: #b42318;
}

.jab-checkout .select2-container {
    width: 100% !important;
}

.jab-checkout .woocommerce-shipping-fields,
.jab-checkout .woocommerce-additional-fields,
.jab-checkout .woocommerce-account-fields {
    margin-top: 1rem;
}

.jab-checkout .mobile-order-trigger {
    display: none;
}

.jab-checkout .jab-order-heading {
    margin: 0 0 1rem;
    font-family: var(--font-display, inherit);
    font-size: 1.125rem;
}

.jab-checkout .jab-cart-items,
.jab-checkout .jab-checkout-adjustments {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    margin: 0;
}

.jab-checkout .jab-cart-items td {
    padding: .5rem 0;
    border: 0;
}

.jab-checkout .order-product__thumb {
    flex-shrink: 0;
}

.jab-checkout .order-product__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jab-checkout .order-product__info {
    min-width: 0;
    overflow-wrap: anywhere;
}

.jab-checkout .order-product__name,
.jab-checkout .order-product__sub {
    display: block;
}

.jab-checkout .order-product__lang:empty {
    display: none;
}

.jab-checkout .order-product__lang dl {
    margin: .25rem 0;
}

.jab-checkout .order-product__lang dt,
.jab-checkout .order-product__lang dd {
    display: inline;
    margin: 0 .25rem 0 0;
}

.jab-checkout .order-product__lang dd p {
    display: inline;
    margin: 0;
}

.jab-checkout .jab-checkout-adjustments th,
.jab-checkout .jab-checkout-adjustments td {
    padding: .5rem 0;
    text-align: left;
    border: 0;
    vertical-align: top;
}

.jab-checkout .jab-checkout-adjustments td {
    text-align: right;
}

.jab-checkout .order-price-row {
    gap: 1rem;
}

.jab-checkout .order-price-row>span:last-child {
    text-align: right;
}

.jab-checkout .woocommerce-remove-coupon {
    display: inline-block;
    font-size: .75rem;
}

.jab-checkout #payment ul.payment_methods {
    padding: 0;
    margin: 0 0 1rem;
    border: 0;
    list-style: none;
}

.jab-checkout #payment .payment_box {
    width: auto;
    padding: 1rem;
    background: var(--muted, #f5f5f8);
}

.jab-checkout #payment .place-order {
    padding: 0;
    margin: 1rem 0 0;
}

.jab-checkout #payment .place-order .button {
    float: none;
    width: 100%;
    margin: 1rem 0 0;
}

.jab-checkout .refund-check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 1rem 0;
}

.jab-checkout .refund-check input {
    flex-shrink: 0;
    margin-top: .3rem;
}

.jab-checkout .refund-check label {
    font-size: .8125rem;
}

.jab-checkout .jab-payment-note {
    font-size: .75rem;
    text-align: center;
    margin-top: .75rem;
}

.jab-checkout .coupon-section__body:not([hidden]) {
    max-height: none;
    height: auto;
    opacity: 1;
    visibility: visible;
}

.jab-checkout [hidden] {
    display: none !important;
}

.jab-checkout #jabCouponNotices:not(:empty) {
    margin-top: .75rem;
}

.jab-checkout .coupon-input-row {
    display: flex;
    gap: .75rem;
}

.jab-checkout .coupon-input-wrap {
    flex: 1;
    min-width: 0;
}

.jab-checkout .coupon-input {
    width: 100%;
    box-sizing: border-box;
}

.jab-checkout .coupon-section__title,
.jab-checkout .coupon-section__sub {
    display: block;
}

.jab-checkout .jab-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 899px) {
    .jab-checkout form.checkout.checkout-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .jab-checkout .order-summary {
        grid-column: 1;
        grid-row: 1;
        position: static;
    }

    .jab-checkout .checkout-main {
        grid-row: 2;
    }

    .jab-checkout #payment {
        grid-row: 3;
    }

    .jab-checkout .jab-checkout-footer {
        grid-row: 4;
    }

    .jab-checkout .mobile-order-trigger {
        display: flex;
        width: 100%;
    }

    .jab-checkout .mobile-order-details {
        margin-top: .75rem;
    }
}

@media (max-width: 600px) {

    .jab-checkout .woocommerce-billing-fields__field-wrapper,
    .jab-checkout .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    .jab-checkout #payment {
        padding: 1rem;
    }
}

/* Match the original hidden/open classes for the shared desktop/mobile card. */
.jab-checkout #mobileOrderDetails:not([hidden]) {
    display: block;
}

.jab-checkout .order-price-row--coupon.is-visible {
    display: flex;
}

.jab-checkout .coupon-input-wrap i.coupon-input-icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--muted-foreground);
    pointer-events: none;
}

.jab-checkout .coupon-section__icon i {
    font-size: 1rem;
}

.jab-checkout .coupon-section__chevron {
    font-size: 1rem;
}

.jab-checkout .mobile-order-trigger__right i {
    font-size: 1rem;
    transition: transform .2s;
}

.jab-checkout .mobile-order-trigger[aria-expanded="true"] .mobile-order-trigger__right i {
    transform: rotate(180deg);
}

.jab-checkout .order-checklist li i {
    font-size: .9rem;
    color: var(--success);
}

.jab-checkout .field input[type="checkbox"],
.jab-checkout .field input[type="radio"] {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
}

.jab-checkout #jabAddCoupon {
    margin-top: .75rem;
}

@media (min-width: 900px) {
    .jab-checkout #mobileOrderDetails {
        padding: 1.25rem;
        margin-top: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius-2xl);
    }
}

/* Load AFTER your original checkout design CSS. This bridges WooCommerce markup. */
.jab-checkout form.checkout.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5rem 2rem;
    align-items: start;
    width: 100%;
}

.jab-checkout .checkout-main {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.jab-checkout #order_review {
    display: contents;
    float: none;
    width: auto;
}

.jab-checkout .order-summary {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 3;
    width: auto;
    min-width: 0;
    position: sticky;
    top: 5.5rem;
}

.jab-checkout #payment {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    margin: 0;
    border-radius: var(--radius-2xl, 2.25rem);
    background: var(--card, #fff);
    padding: 1.5rem;
}

.jab-checkout .jab-checkout-footer {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
}

.jab-checkout .checkout-card {
    margin-bottom: 1.25rem;
}

.jab-checkout #customer_details {
    width: 100%;
    float: none;
}

.jab-checkout .woocommerce-billing-fields>h3 {
    display: none;
}

.jab-checkout .woocommerce-billing-fields__field-wrapper,
.jab-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.jab-checkout .form-row {
    float: none;
    clear: none;
    width: auto;
    margin: 0 0 1rem;
    padding: 0;
}

.jab-checkout .form-row-wide {
    grid-column: 1 / -1;
}

.jab-checkout .form-row label {
    display: block;
}

.jab-checkout .form-row input.input-text,
.jab-checkout .form-row select,
.jab-checkout .form-row textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: .75rem;
    border: 1.5px solid var(--border, #ddd);
    border-radius: var(--radius-lg, 1.25rem);
    background: var(--background, #fbf6ee);
    color: var(--foreground, #252535);
    font: inherit;
}

.jab-checkout .form-row.woocommerce-invalid input.input-text,
.jab-checkout .form-row.woocommerce-invalid .select2-selection {
    border-color: #b42318;
}

.jab-checkout .select2-container {
    width: 100% !important;
}

.jab-checkout .woocommerce-shipping-fields,
.jab-checkout .woocommerce-additional-fields,
.jab-checkout .woocommerce-account-fields {
    margin-top: 1rem;
}

.jab-checkout .mobile-order-trigger {
    display: none;
}

.jab-checkout .jab-order-heading {
    margin: 0 0 1rem;
    font-family: var(--font-display, inherit);
    font-size: 1.125rem;
}

.jab-checkout .jab-cart-items,
.jab-checkout .jab-checkout-adjustments {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    margin: 0;
}

.jab-checkout .jab-cart-items td {
    padding: .5rem 0;
    border: 0;
}

.jab-checkout .order-product__thumb {
    flex-shrink: 0;
}

.jab-checkout .order-product__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jab-checkout .order-product__info {
    min-width: 0;
    overflow-wrap: anywhere;
}

.jab-checkout .order-product__name,
.jab-checkout .order-product__sub {
    display: block;
}

.jab-checkout .order-product__lang:empty {
    display: none;
}

.jab-checkout .order-product__lang dl {
    margin: .25rem 0;
}

.jab-checkout .order-product__lang dt,
.jab-checkout .order-product__lang dd {
    display: inline;
    margin: 0 .25rem 0 0;
}

.jab-checkout .order-product__lang dd p {
    display: inline;
    margin: 0;
}

.jab-checkout .jab-checkout-adjustments th,
.jab-checkout .jab-checkout-adjustments td {
    padding: .5rem 0;
    text-align: left;
    border: 0;
    vertical-align: top;
}

.jab-checkout .jab-checkout-adjustments td {
    text-align: right;
}

.jab-checkout .order-price-row {
    gap: 1rem;
}

.jab-checkout .order-price-row>span:last-child {
    text-align: right;
}

.jab-checkout .woocommerce-remove-coupon {
    display: inline-block;
    font-size: .75rem;
}

.jab-checkout #payment ul.payment_methods {
    padding: 0;
    margin: 0 0 1rem;
    border: 0;
    list-style: none;
}

.jab-checkout #payment .payment_box {
    width: auto;
    padding: 1rem;
    background: var(--muted, #f5f5f8);
}

.jab-checkout #payment .place-order {
    padding: 0;
    margin: 1rem 0 0;
}

.jab-checkout #payment .place-order .button {
    float: none;
    width: 100%;
    margin: 1rem 0 0;
}

.jab-checkout .refund-check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 1rem 0;
}

.jab-checkout .refund-check input {
    flex-shrink: 0;
    margin-top: .3rem;
}

.jab-checkout .refund-check label {
    font-size: .8125rem;
}

.jab-checkout .jab-payment-note {
    font-size: .75rem;
    text-align: center;
    margin-top: .75rem;
}

.jab-checkout .coupon-section__body:not([hidden]) {
    max-height: none;
    height: auto;
    opacity: 1;
    visibility: visible;
}

.jab-checkout [hidden] {
    display: none !important;
}

.jab-checkout #jabCouponNotices:not(:empty) {
    margin-top: .75rem;
}

.jab-checkout .coupon-input-row {
    display: flex;
    gap: .75rem;
}

.jab-checkout .coupon-input-wrap {
    flex: 1;
    min-width: 0;
}

.jab-checkout .coupon-input {
    width: 100%;
    box-sizing: border-box;
}

.jab-checkout .coupon-section__title,
.jab-checkout .coupon-section__sub {
    display: block;
}

.jab-checkout .jab-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 899px) {
    .jab-checkout form.checkout.checkout-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .jab-checkout .order-summary {
        grid-column: 1;
        grid-row: 1;
        position: static;
    }

    .jab-checkout .checkout-main {
        grid-row: 2;
    }

    .jab-checkout #payment {
        grid-row: 3;
    }

    .jab-checkout .jab-checkout-footer {
        grid-row: 4;
    }

    .jab-checkout .mobile-order-trigger {
        display: flex;
        width: 100%;
    }

    .jab-checkout .mobile-order-details {
        margin-top: .75rem;
    }
}

@media (max-width: 600px) {

    .jab-checkout .woocommerce-billing-fields__field-wrapper,
    .jab-checkout .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    .jab-checkout #payment {
        padding: 1rem;
    }
}

/* Match the original hidden/open classes for the shared desktop/mobile card. */
.jab-checkout #mobileOrderDetails:not([hidden]) {
    display: block;
}

.jab-checkout .order-price-row--coupon.is-visible {
    display: flex;
}

.jab-checkout .coupon-input-wrap i.coupon-input-icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--muted-foreground);
    pointer-events: none;
}

.jab-checkout .coupon-section__icon i {
    font-size: 1rem;
}

.jab-checkout .coupon-section__chevron {
    font-size: 1rem;
}

.jab-checkout .mobile-order-trigger__right i {
    font-size: 1rem;
    transition: transform .2s;
}

.jab-checkout .mobile-order-trigger[aria-expanded="true"] .mobile-order-trigger__right i {
    transform: rotate(180deg);
}

.jab-checkout .order-checklist li i {
    font-size: .9rem;
    color: var(--success);
}

.jab-checkout .field input[type="checkbox"],
.jab-checkout .field input[type="radio"] {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
}

.jab-checkout #jabAddCoupon {
    margin-top: .75rem;
}

@media (min-width: 900px) {
    .jab-checkout #mobileOrderDetails {
        padding: 1.25rem;
        margin-top: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius-2xl);
    }
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    width: 100% !important;
}


/* Thank you page css */
.jab-thankyou {
    padding-bottom: 4rem;
}

.jab-thankyou i[class*="fa-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.jab-thankyou .success-icon i {
    font-size: 1.875rem;
}

.jab-thankyou .success-sparkle i {
    font-size: 1rem;
}

.jab-thankyou .download-card__language ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jab-thankyou .download-card__language li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem;
}

.jab-thankyou .download-card__language li p {
    margin: 0;
}

.jab-thankyou .download-btn {
    padding: .85rem 1.5rem;
    height: auto;
    text-align: center;
    white-space: normal;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.jab-thankyou .download-card+.download-card {
    margin-top: 1.5rem;
}

.jab-thankyou .jab-email-content {
    flex: 1;
    min-width: 0;
}

.jab-thankyou .jab-receipt-table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
}

.jab-thankyou .jab-receipt-table th,
.jab-thankyou .jab-receipt-table td {
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: .6rem 0;
    vertical-align: top;
    font-size: .8125rem;
}

.jab-thankyou .jab-receipt-table th {
    text-align: left;
}

.jab-thankyou .jab-receipt-table td:last-child {
    text-align: right;
}

.jab-thankyou .jab-receipt-table ul.wc-item-meta {
    font-weight: 400;
    font-size: .75rem;
    margin-top: .25rem;
}

.jab-thankyou .jab-thankyou-integrations> :not(.jab-order-receipt) {
    max-width: var(--container-max);
    margin: 1rem auto;
}

.jab-thankyou [hidden] {
    display: none !important;
}

.jab-thankyou .accordion-trigger i {
    transition: transform .25s;
    font-size: 1rem;
}

.jab-thankyou .accordion[aria-expanded="true"] .accordion-trigger i {
    transform: rotate(180deg);
}

.jab-thankyou .woocommerce-thankyou-order-failed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.jab-thankyou .woocommerce-customer-details {
    margin-top: 1rem;
}

@media (min-width: 720px) {
    .jab-thankyou {
        padding-bottom: 1rem;
    }
}

.jab-thankyou {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

    min-height: 100vh;
}

.jab-thankyou img {
    max-width: 100%;
    display: block;
}

.jab-thankyou a {
    color: inherit;
    text-decoration: none;
}

.jab-thankyou button {
    font-family: inherit;
    cursor: pointer;
}

.jab-thankyou ul,
.jab-thankyou ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jab-thankyou h1,
.jab-thankyou h2,
.jab-thankyou h3,
.jab-thankyou h4,
.jab-thankyou p {
    margin: 0;
}

.jab-thankyou svg {
    display: block;
}

.jab-thankyou a:focus-visible,
.jab-thankyou button:focus-visible,
.jab-thankyou input:focus-visible,
.jab-thankyou [tabindex]:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--primary) 55%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}

.jab-thankyou .container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .jab-thankyou .container {
        padding: 0 2rem;
    }
}

.jab-thankyou .section {
    padding: 1.5rem 0;
}

@media (min-width: 768px) {
    .jab-thankyou .section {
        padding: 2rem 0;
    }
}

.jab-thankyou .section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.2;
    text-align: center;
    letter-spacing: -0.01em;
}

@media (min-width: 640px) {
    .jab-thankyou .section-title {
        font-size: 1.75rem;
    }
}

.jab-thankyou .section-sub {
    text-align: center;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    line-height: 1.55;
    max-width: 34rem;
    margin: 0.25rem auto 0;
}

.jab-thankyou .thanks-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--background) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
}

.jab-thankyou .thanks-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
}

.jab-thankyou .brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
}

.jab-thankyou .brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
}

.jab-thankyou .brand__mark svg {
    width: 0.95rem;
    height: 0.95rem;
}

.jab-thankyou .brand__mark i {
    width: 0.95rem;
    height: 0.95rem;
    font-size: 0.95rem;
    line-height: 1;
}

.jab-thankyou .order-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: color-mix(in oklab, var(--success) 85%, black);
    background: color-mix(in oklab, var(--success) 12%, var(--card));
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
}

.jab-thankyou .order-badge svg {
    width: 0.85rem;
    height: 0.85rem;
}

.jab-thankyou .order-badge i {
    width: 0.85rem;
    height: 0.85rem;
    font-size: 0.85rem;
    line-height: 1;
}

@media (max-width: 480px) {
    .jab-thankyou .order-badge span {
        display: none;
    }
}

.jab-thankyou .success-hero {
    text-align: center;
    padding: 1.5rem 1rem 1rem;
    position: relative;
    overflow: hidden;
}

.jab-thankyou .success-icon-wrap {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jab-thankyou .success-icon {
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 999px;
    background: var(--mint);
    color: var(--mint-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 32px -10px color-mix(in oklab, var(--mint-foreground) 30%, transparent);
    z-index: 2;
}

.jab-thankyou .success-icon svg {
    width: 1.875rem;
    height: 1.875rem;
    stroke-width: 2.5;
}

.jab-thankyou .success-icon i {
    width: 1.875rem;
    height: 1.875rem;
    stroke-width: 2.5;
    font-size: 1.875rem;
    line-height: 1;
}

.jab-thankyou .success-sparkle {
    position: absolute;
    color: color-mix(in oklab, var(--sunshine-foreground) 55%, transparent);
}

.jab-thankyou .success-sparkle svg {
    width: 100%;
    height: 100%;
}

.jab-thankyou .success-sparkle i {
    width: 100%;
    height: 100%;
    line-height: 1;
}

.jab-thankyou .success-sparkle--1 {
    width: 0.875rem;
    height: 0.875rem;
    top: -0.25rem;
    left: -0.5rem;
}

.jab-thankyou .success-sparkle--2 {
    width: 0.625rem;
    height: 0.625rem;
    top: 0.5rem;
    right: -0.75rem;
}

.jab-thankyou .success-sparkle--3 {
    width: 0.75rem;
    height: 0.75rem;
    bottom: -0.25rem;
    left: -0.75rem;
}

.jab-thankyou .success-sparkle--4 {
    width: 0.5rem;
    height: 0.5rem;
    bottom: 0.75rem;
    right: -0.5rem;
}

.jab-thankyou .success-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--success) 12%, var(--card));
    color: color-mix(in oklab, var(--success) 85%, black);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.75rem;
    text-transform: uppercase;
}

.jab-thankyou .success-eyebrow svg {
    width: 0.8rem;
    height: 0.8rem;
}

.jab-thankyou .success-eyebrow i {
    width: 0.8rem;
    height: 0.8rem;
    font-size: 0.8rem;
    line-height: 1;
}

.jab-thankyou .success-hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-top: 0.75rem;
}

@media (min-width: 640px) {
    .jab-thankyou .success-hero h1 {
        font-size: 2.25rem;
    }
}

.jab-thankyou .success-hero p {
    color: var(--muted-foreground);
    font-size: 1rem;
    line-height: 1.55;
    margin-top: 0.5rem;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

.jab-thankyou .success-hero p strong {
    color: var(--foreground);
    font-weight: 700;
}

.jab-thankyou .confirm-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.65rem;
    padding: 0.75rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    max-width: 40rem;
    margin: 1rem auto 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.jab-thankyou .confirm-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted-foreground);
}

.jab-thankyou .confirm-item svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--success);
}

.jab-thankyou .confirm-item i {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--success);
    font-size: 0.85rem;
    line-height: 1;
}

.jab-thankyou .confirm-item strong {
    color: var(--foreground);
    font-weight: 700;
}

.jab-thankyou .confirm-sep {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: var(--border);
}

@media (max-width: 560px) {
    .jab-thankyou .confirm-sep {
        display: none;
    }

    .jab-thankyou .confirm-strip {
        gap: 0.35rem 0.55rem;
        font-size: 0.6875rem;
        padding: 0.65rem 0.85rem;
    }
}

.jab-thankyou .confirm-email {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    text-align: center;
    margin-top: 0.6rem;
}

.jab-thankyou .confirm-email strong {
    color: var(--foreground);
}

.jab-thankyou .download-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-3xl);
    padding: 1.25rem;
    margin-top: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--primary) 25%, transparent);
}

@media (min-width: 720px) {
    .jab-thankyou .download-card {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 2rem;
        padding: 2rem;
        align-items: center;
    }
}

.jab-thankyou .download-card::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle, color-mix(in oklab, var(--lavender) 40%, transparent), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.jab-thankyou .download-card__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-2xl);
    background: linear-gradient(135deg, var(--lavender) 0%, color-mix(in oklab, var(--sky) 40%, var(--lavender)) 100%);
    padding: 1.5rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.jab-thankyou .download-card__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
}

.jab-thankyou .download-float-label {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--card);
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.18);
    z-index: 3;
}

.jab-thankyou .download-float-label svg {
    width: 0.7rem;
    height: 0.7rem;
}

.jab-thankyou .download-float-label i {
    width: 0.7rem;
    height: 0.7rem;
    font-size: 0.7rem;
    line-height: 1;
}

.jab-thankyou .download-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.jab-thankyou .download-card__eyebrow {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
}

.jab-thankyou .download-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

@media (min-width: 640px) {
    .jab-thankyou .download-card__title {
        font-size: 1.75rem;
    }
}

.jab-thankyou .download-card__subtitle {
    font-size: 0.9375rem;
    color: var(--muted-foreground);
    line-height: 1.55;
}

.jab-thankyou .download-card__language {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--primary) 8%, var(--card));
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
}

.jab-thankyou .download-card__language svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--primary);
}

.jab-thankyou .download-card__language i {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--primary);
    font-size: 0.85rem;
    line-height: 1;
}

.jab-thankyou .download-card__language strong {
    font-weight: 800;
    color: var(--foreground);
}

.jab-thankyou .download-card__language span[data-lang-display][data-lang="hi"] {
    font-family: var(--font-hindi);
}

.jab-thankyou .download-card__language span[data-lang-display][data-lang="gu"] {
    font-family: var(--font-gujarati);
}

.jab-thankyou .download-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.jab-thankyou .download-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--muted);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--muted-foreground);
}

.jab-thankyou .download-card__meta svg {
    width: 0.75rem;
    height: 0.75rem;
}

.jab-thankyou .download-card__meta i {
    width: 0.75rem;
    height: 0.75rem;
    font-size: 0.75rem;
    line-height: 1;
}

.jab-thankyou .download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0 1.5rem;
    border-radius: 999px;
    border: none;
    background: var(--primary);
    color: var(--primary-foreground);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    margin-top: 0.25rem;
}

.jab-thankyou .download-btn:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 16px 34px -12px color-mix(in oklab, var(--primary) 55%, transparent);
}

.jab-thankyou .download-btn:active:not(:disabled) {
    transform: translateY(0);
}

.jab-thankyou .download-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.jab-thankyou .download-btn svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jab-thankyou .download-btn i {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 1.15rem;
    line-height: 1;
}

.jab-thankyou .download-btn__spinner {
    width: 1.15rem;
    height: 1.15rem;
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 999px;
    animation: jab-thankyou-spin 0.7s linear infinite;
    display: none;
}

.jab-thankyou .download-btn.is-loading .download-btn__spinner {
    display: block;
}

.jab-thankyou .download-btn.is-loading .download-btn__icon {
    display: none;
}

.jab-thankyou .download-btn.is-done {
    background: var(--success);
}

@keyframes jab-thankyou-spin {
    to {
        transform: rotate(360deg);
    }
}

.jab-thankyou .download-btn-helper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
    text-align: center;
}

.jab-thankyou .download-btn-helper svg {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--primary);
}

.jab-thankyou .download-btn-helper i {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--primary);
    font-size: 0.8rem;
    line-height: 1;
}

.jab-thankyou .download-card__footnote {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    line-height: 1.5;
    text-align: center;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border);
}

.jab-thankyou .download-status {
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    min-height: 1.25rem;
}

.jab-thankyou .download-status.is-error {
    color: color-mix(in oklab, var(--rose) 85%, black);
}

.jab-thankyou .download-status.is-success {
    color: color-mix(in oklab, var(--success) 85%, black);
}

.jab-thankyou .start-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

@media (min-width: 640px) {
    .jab-thankyou .start-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

.jab-thankyou .start-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.25s ease;
}

.jab-thankyou .start-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.12);
}

.jab-thankyou .start-card__num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
}

.jab-thankyou .start-card h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
}

.jab-thankyou .start-card p {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    line-height: 1.55;
}

.jab-thankyou .start-footnote {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-top: 1rem;
    font-style: italic;
}

.jab-thankyou .age-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin-top: 1.5rem;
}

@media (min-width: 640px) {
    .jab-thankyou .age-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .jab-thankyou .age-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.6rem;
    }
}

.jab-thankyou .age-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.75rem;
    border-radius: var(--radius-xl);
    background: var(--card);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.jab-thankyou .age-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--age-color, var(--primary));
    opacity: 0.6;
}

.jab-thankyou .age-card:nth-child(1) {
    --age-color: var(--lavender-foreground);
}

.jab-thankyou .age-card:nth-child(2) {
    --age-color: var(--sky-foreground);
}

.jab-thankyou .age-card:nth-child(3) {
    --age-color: var(--mint-foreground);
}

.jab-thankyou .age-card:nth-child(4) {
    --age-color: var(--peach-foreground);
}

.jab-thankyou .age-card:nth-child(5) {
    --age-color: var(--sunshine-foreground);
}

.jab-thankyou .age-card:nth-child(6) {
    --age-color: var(--primary);
}

.jab-thankyou .age-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--age-color) 40%, var(--border));
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.12);
}

.jab-thankyou .age-card__age {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--age-color);
}

.jab-thankyou .age-card__name {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--foreground);
}

.jab-thankyou .age-card__focus {
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}

.jab-thankyou .reminder-safety {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

@media (min-width: 720px) {
    .jab-thankyou .reminder-safety {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

.jab-thankyou .reminder-card {
    background: linear-gradient(135deg, color-mix(in oklab, var(--lavender) 45%, var(--card)) 0%, var(--card) 100%);
    border: 1px solid color-mix(in oklab, var(--lavender-foreground) 15%, transparent);
    border-radius: var(--radius-2xl);
    padding: 1.25rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.jab-thankyou .reminder-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: var(--lavender);
    color: var(--lavender-foreground);
}

.jab-thankyou .reminder-card__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jab-thankyou .reminder-card__icon i {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 1.15rem;
    line-height: 1;
}

.jab-thankyou .reminder-card h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.jab-thankyou .reminder-card p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: color-mix(in oklab, var(--foreground) 85%, transparent);
}

.jab-thankyou .safety-mini {
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--peach) 40%, var(--border));
    border-radius: var(--radius-2xl);
    padding: 1.25rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.jab-thankyou .safety-mini__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: var(--peach);
    color: var(--peach-foreground);
}

.jab-thankyou .safety-mini__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jab-thankyou .safety-mini__icon i {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 1.15rem;
    line-height: 1;
}

.jab-thankyou .safety-mini h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.jab-thankyou .safety-mini ul {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.jab-thankyou .safety-mini li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.jab-thankyou .safety-mini li svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--peach-foreground);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.jab-thankyou .safety-mini li i {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--peach-foreground);
    flex-shrink: 0;
    margin-top: 0.15rem;
    font-size: 0.9rem;
    line-height: 1;
}

.jab-thankyou .safety-mini__footer {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-style: italic;
    line-height: 1.5;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.jab-thankyou .email-card {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1.15rem 1rem;
    /* margin-top: 1.5rem; */
}

.jab-thankyou .email-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: color-mix(in oklab, var(--sky) 60%, var(--card));
    color: var(--sky-foreground);
    flex-shrink: 0;
}

.jab-thankyou .email-card__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jab-thankyou .email-card__icon i {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 1.15rem;
    line-height: 1;
}

.jab-thankyou .email-card h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.jab-thankyou .email-card p {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.55;
}

.jab-thankyou .email-card p strong {
    color: var(--foreground);
    font-weight: 700;
}

.jab-thankyou .email-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.jab-thankyou .email-card__actions button,
.jab-thankyou .email-card__actions a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--foreground);
    transition: all 0.2s;
    min-height: 2.25rem;
}

.jab-thankyou .email-card__actions button:hover:not(:disabled),
.jab-thankyou .email-card__actions a:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in oklab, var(--primary) 6%, transparent);
}

.jab-thankyou .email-card__actions button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.jab-thankyou .email-card__actions svg {
    width: 0.85rem;
    height: 0.85rem;
}

.jab-thankyou .email-card__actions i {
    width: 0.85rem;
    height: 0.85rem;
    font-size: 0.85rem;
    line-height: 1;
}

.jab-thankyou .email-card__hint {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.4rem;
}

.jab-thankyou .five-minutes {
    background: linear-gradient(135deg, color-mix(in oklab, var(--sunshine) 40%, var(--card)) 0%, var(--card) 100%);
    border: 1px solid color-mix(in oklab, var(--sunshine-foreground) 15%, transparent);
    border-radius: var(--radius-3xl);
    padding: 1.5rem 1.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 640px) {
    .jab-thankyou .five-minutes {
        padding: 1.75rem 2rem;
    }
}

.jab-thankyou .five-minutes h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .jab-thankyou .five-minutes h3 {
        font-size: 1.5rem;
    }
}

.jab-thankyou .five-minutes ol {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 32rem;
    margin: 0 auto;
}

.jab-thankyou .five-minutes li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.jab-thankyou .five-minutes li .five-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--card);
    color: var(--sunshine-foreground);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.jab-thankyou .five-minutes__footer {
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sunshine-foreground);
    margin-top: 1rem;
}

.jab-thankyou .use-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

@media (min-width: 640px) {
    .jab-thankyou .use-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

.jab-thankyou .use-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1.25rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.jab-thankyou .use-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: color-mix(in oklab, var(--primary) 12%, var(--card));
    color: var(--primary);
}

.jab-thankyou .use-card__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jab-thankyou .use-card__icon i {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 1.15rem;
    line-height: 1;
}

.jab-thankyou .use-card h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
}

.jab-thankyou .use-card p {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.55;
}

.jab-thankyou .use-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 1rem;
    font-style: italic;
}

.jab-thankyou .accordion {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    margin-top: 1.5rem;
    overflow: hidden;
}

.jab-thankyou .accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: none;
    text-align: left;
    padding: 0.85rem 1.15rem;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
    min-height: 3rem;
}

.jab-thankyou .accordion-trigger svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.jab-thankyou .accordion-trigger i {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform 0.25s ease;
    font-size: 1.05rem;
    line-height: 1;
}

.jab-thankyou .accordion[aria-expanded="true"] .accordion-trigger svg {
    transform: rotate(180deg);
}

.jab-thankyou .accordion[aria-expanded="true"] .accordion-trigger i {
    transform: rotate(180deg);
    line-height: 1;
}

.jab-thankyou .accordion-panel {
    display: none;
    padding: 0 1.15rem 1.15rem;
    border-top: 1px solid var(--border);
}

.jab-thankyou .accordion[aria-expanded="true"] .accordion-panel {
    display: block;
}

.jab-thankyou .order-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
    font-size: 0.8125rem;
}

.jab-thankyou .order-detail-row:last-child {
    border-bottom: none;
}

.jab-thankyou .order-detail-row dt {
    color: var(--muted-foreground);
    font-weight: 600;
    flex-shrink: 0;
}

.jab-thankyou .order-detail-row dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
    color: var(--foreground);
    word-break: break-word;
}

.jab-thankyou .order-detail-row dd .paid-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: color-mix(in oklab, var(--success) 85%, black);
}

.jab-thankyou .order-detail-row dd .paid-status svg {
    width: 0.85rem;
    height: 0.85rem;
}

.jab-thankyou .order-detail-row dd .paid-status i {
    width: 0.85rem;
    height: 0.85rem;
    font-size: 0.85rem;
    line-height: 1;
}

.jab-thankyou .order-detail-row dd[data-lang-display][data-lang="hi"] {
    font-family: var(--font-hindi);
}

.jab-thankyou .order-detail-row dd[data-lang-display][data-lang="gu"] {
    font-family: var(--font-gujarati);
}

.jab-thankyou .support-block {
    text-align: center;
    padding: 1.5rem 1rem;
    margin-top: 0.5rem;
}

.jab-thankyou .support-block h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.jab-thankyou .support-block p {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-top: 0.3rem;
    line-height: 1.55;
}

.jab-thankyou .support-block__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.85rem;
}

.jab-thankyou .support-block__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    min-height: 2.75rem;
    border: none;
    transition: all 0.2s ease;
}

.jab-thankyou .btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.jab-thankyou .btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--primary) 50%, transparent);
}

.jab-thankyou .btn-outline {
    background: transparent;
    color: var(--foreground);
    border: 1.5px solid var(--border);
}

.jab-thankyou .btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.jab-thankyou .support-block__actions svg {
    width: 1rem;
    height: 1rem;
}

.jab-thankyou .support-block__actions i {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    line-height: 1;
}

.jab-thankyou .mobile-download-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 0.65rem;
    box-shadow: 0 -8px 24px -10px rgba(0, 0, 0, 0.12);
    transform: translateY(110%);
    transition: transform 0.3s ease;
}

.jab-thankyou .mobile-download-bar.is-visible {
    transform: translateY(0);
}

.jab-thankyou .mobile-download-bar__info {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1;
    min-width: 0;
}

.jab-thankyou .mobile-download-bar__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
}

.jab-thankyou .mobile-download-bar__name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jab-thankyou .mobile-download-bar .btn {
    flex-shrink: 0;
    height: 2.5rem;
    padding: 0 1.15rem;
    font-size: 0.875rem;
}

@media (min-width: 720px) {
    .jab-thankyou .mobile-download-bar {
        display: none;
    }
}

.jab-thankyou .site-footer {
    border-top: 1px solid var(--border);
    background: var(--card);
    margin-top: 1.5rem;
}

.jab-thankyou .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem 5rem;
    text-align: center;
}

@media (min-width: 640px) {
    .jab-thankyou .footer-inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 1.5rem;
        text-align: left;
    }
}

.jab-thankyou .footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
}

.jab-thankyou .footer-brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
}

.jab-thankyou .footer-brand__mark svg {
    width: 0.85rem;
    height: 0.85rem;
}

.jab-thankyou .footer-brand__mark i {
    width: 0.85rem;
    height: 0.85rem;
    font-size: 0.85rem;
    line-height: 1;
}

.jab-thankyou .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    justify-content: center;
}

.jab-thankyou .footer-links a {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
    transition: color 0.15s;
}

.jab-thankyou .footer-links a:hover {
    color: var(--foreground);
}

.jab-thankyou .footer-copy {
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    line-height: 1.5;
}

.jab-thankyou .footer-copy strong {
    font-weight: 700;
    color: color-mix(in oklab, var(--foreground) 80%, transparent);
}

.jab-thankyou .confirming-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: color-mix(in oklab, var(--background) 96%, transparent);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
}

.jab-thankyou .confirming-overlay.is-visible {
    display: flex;
}

.jab-thankyou .confirming-box {
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.jab-thankyou .confirming-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3.5px solid color-mix(in oklab, var(--primary) 22%, transparent);
    border-top-color: var(--primary);
    border-radius: 999px;
    animation: jab-thankyou-spin 0.85s linear infinite;
}

.jab-thankyou .confirming-box h2 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
}

.jab-thankyou .confirming-box p {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.6;
}

/* End Thank you page CSS */
.select2 .select2-selection,
.input-text {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.75rem;
    background-position: right 1rem center;
    background-size: 0.9rem;
    cursor: pointer;
}

.select2 .select2-selection,
.field .woocommerce-input-wrapper textarea {
    width: 100%;
    height: 3.125rem;
    padding: 0.5rem 1rem 1rem 1rem;
    border-radius: var(--radius-lg) !important;
    border: 1.5px solid var(--border) !important;
    background: var(--background) !important;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--foreground);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-height: 50px;
}

.field .woocommerce-input-wrapper textarea {
    height: auto;
    min-height: 6.5rem;
    padding: 0.9rem 1rem;
    resize: vertical;
    line-height: 1.55;
    font-family: var(--font-sans);
}


/* Mini Cart CSS */
/* Only the header mini-cart and its popup. */
/* Only the header mini-cart. */
.header-actions .jab-mini-cart__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid #e5dfd5;
    border-radius: 50%;
    background: #fffdf9;
    color: #6f50bc;
    cursor: pointer
}

.jab-mini-cart__toggle svg {
    width: 22px;
    height: 22px
}

.jab-mini-cart__count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 99px;
    background: #6f50bc;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center
}

.jab-mini-cart__popup[hidden] {
    display: none !important
}

.jab-mini-cart__popup {
    position: fixed;
    z-index: 10000;
    box-sizing: border-box;
    width: min(390px, calc(100vw - 24px));
    padding: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fffdf9;
    color: #222b41;
    border: 1.5px solid #e5dfd5;
    border-radius: 36px;
    box-shadow: 0 18px 50px rgba(30, 20, 40, .13);
    font-family: var(--font-body, inherit);
    font-size: 14px
}

.jab-mini-cart__popup * {
    box-sizing: border-box
}

.jab-mini-cart__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px
}

.jab-mini-cart__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 0 0;
    font-family: var(--font-display, inherit);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3
}

.jab-mini-cart__title svg {
    width: 22px;
    height: 22px;
    color: #6f50bc;
    flex-shrink: 0
}

.jab-mini-cart__items {
    flex-shrink: 0;
    padding: 5px 9px;
    border-radius: 30px;
    background: #f5efe5;
    color: #5a6278;
    font-size: 12px;
    font-weight: 600
}

.jab-mini-cart__close {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5a6278;
    font-size: 22px;
    cursor: pointer
}

.jab-mini-cart__popup .jab-mini-cart__products {
    list-style: none;
    padding: 0;
    margin: 0
}

.jab-mini-cart__popup .jab-mini-cart__product {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    padding: 0 22px 18px 0;
    margin: 0 0 16px;
    border-bottom: 1.5px dashed #e5dfd5
}

.jab-mini-cart__thumb {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(135deg, #ded4fc, #c2d8f7)
}

.jab-mini-cart__popup .jab-mini-cart__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    float: none;
    object-fit: cover
}

.jab-mini-cart__info {
    flex: 1;
    min-width: 0
}

.jab-mini-cart__popup .jab-mini-cart__name {
    display: block;
    font-family: var(--font-display, inherit);
    font-size: 15px;
    font-weight: 700;
    color: #222b41;
    text-decoration: none;
    line-height: 1.4
}

.jab-mini-cart__description {
    margin-top: 4px;
    color: #5a6278;
    font-size: 12px;
    line-height: 1.5
}

.jab-mini-cart__variation {
    color: #6f50bc;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5
}

.jab-mini-cart__variation:empty {
    display: none
}

.jab-mini-cart__variation dl.variation {
    margin: 5px 0 0;
    padding: 0;
    border: 0
}

.jab-mini-cart__variation dt {
    float: left;
    margin-right: 4px;
    font-weight: 600
}

.jab-mini-cart__variation dd {
    margin: 0 0 3px
}

.jab-mini-cart__variation dd p {
    margin: 0
}

.jab-mini-cart__quantity {
    display: block;
    margin-top: 4px;
    color: #5a6278;
    font-size: 12px
}

.jab-mini-cart__popup a.jab-mini-cart__remove {
    position: absolute;
    top: 2px;
    right: 0;
    width: 20px;
    height: 24px;
    color: #5a6278 !important;
    background: transparent !important;
    font-size: 24px;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none
}

.jab-mini-cart__prices {
    display: grid;
    gap: 10px;
    padding: 2px 0 16px;
    border-bottom: 1px solid #e5dfd5
}

.jab-mini-cart__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: #5a6278
}

.jab-mini-cart__row>span:last-child {
    white-space: nowrap;
    color: #222b41
}

.jab-mini-cart__row--discount>span:last-child {
    color: #20ae64;
    font-weight: 600
}

.jab-mini-cart__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 24px;
    font-family: var(--font-display, inherit);
    font-size: 17px
}

.jab-mini-cart__total-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    color: #6f50bc;
    font-size: 23px;
    font-weight: 700
}

.jab-mini-cart__total-value s {
    color: #5a6278;
    font-size: 12px;
    font-family: var(--font-body, inherit);
    font-weight: 600
}

.jab-mini-cart__actions {
    display: grid;
    gap: 8px
}

.jab-mini-cart__popup .jab-mini-cart__checkout,
.jab-mini-cart__popup .jab-mini-cart__continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    border: 1.5px solid #e5dfd5;
    border-radius: 99px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    color: #222b41;
    line-height: 1.4;
    background: transparent
}

.jab-mini-cart__popup .jab-mini-cart__checkout {
    background: #6f50bc;
    border-color: #6f50bc;
    color: #fff
}

.jab-mini-cart__checkout svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0
}

.jab-mini-cart__empty {
    padding: 16px 0;
    text-align: center;
    color: #5a6278
}

.jab-mini-cart__toggle:focus-visible,
.jab-mini-cart__popup a:focus-visible,
.jab-mini-cart__close:focus-visible {
    outline: 2px solid #6f50bc;
    outline-offset: 3px
}

@media(max-width:380px) {
    .header-actions .jab-mini-cart__toggle {
        width: 38px;
        height: 38px;
        padding: 8px
    }

    .jab-mini-cart__popup {
        padding: 16px;
        border-radius: 26px
    }

    .jab-mini-cart__title {
        font-size: 17px
    }

    .jab-mini-cart__thumb {
        flex-basis: 48px;
        width: 48px;
        height: 48px
    }
}

#jabMiniCartPopup[hidden] {
    display: none !important;
}

/* End Mini Cart CSS */

/* My Account CSS */
.jab-account h1,
.jab-account h2,
.jab-account h3,
.jab-account p {
    margin: 0;
}

.jab-account .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    border: none;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0 1.5rem;
    height: 2.875rem;
    background: var(--primary);
    color: var(--primary-foreground);
    transition: all 0.22s ease;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    overflow: hidden;
    min-height: 44px;
}

.jab-account .btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--primary) 50%, transparent);
}

.jab-account .btn:active {
    transform: translateY(0);
}

.jab-account .btn svg {
    width: 1rem;
    height: 1rem;
}

.jab-account .btn-sm {
    height: 2.5rem;
    padding: 0 1rem;
    font-size: 0.8125rem;
}

.jab-account .btn-outline {
    background: transparent;
    color: var(--foreground);
    border: 1.5px solid var(--border);
}

.jab-account .btn-outline:hover {
    background: var(--card);
    border-color: color-mix(in oklab, var(--foreground) 20%, transparent);
}

.jab-account .btn-danger {
    background: transparent;
    color: var(--rose);
    border: 1.5px solid color-mix(in oklab, var(--rose) 30%, var(--border));
}

.jab-account .btn-danger:hover {
    background: color-mix(in oklab, var(--rose) 8%, var(--card));
    border-color: var(--rose);
}

.jab-account .page-intro {
    padding: 1.5rem 0 1rem;
}

.jab-account .page-intro__eyebrow {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.4rem;
}

.jab-account .page-intro h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.75rem;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

@media (min-width: 640px) {
    .jab-account .page-intro h1 {
        font-size: 2.125rem;
    }
}

.jab-account .page-intro p {
    margin-top: 0.4rem;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    max-width: 36rem;
}

.jab-account .account-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-bottom: 3rem;
}

@media (min-width: 900px) {
    .jab-account .account-layout {
        grid-template-columns: 220px 1fr;
        gap: 2rem;
        align-items: start;
    }
}

.jab-account .account-nav {
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    position: sticky;
    top: 5rem;
    padding: 0.85rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
}

@media (min-width: 900px) {
    .jab-account .account-nav {
        display: flex;
    }
}

.jab-account .account-nav a,
.jab-account .account-nav button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    transition: background 0.15s;
    min-height: 44px;
}

.jab-account .account-nav a:hover,
.jab-account .account-nav button:hover {
    background: var(--secondary);
}

.jab-account .account-nav a.is-active {
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
}

.jab-account .account-nav svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.jab-account .account-nav__divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0.25rem;
}

.jab-account .account-nav__logout {
    color: var(--rose);
}

.jab-account .account-nav__logout:hover {
    background: color-mix(in oklab, var(--rose) 8%, var(--card));
}

.jab-account .mobile-account-menu {
    display: block;
    margin-bottom: 0.5rem;
}

@media (min-width: 900px) {
    .jab-account .mobile-account-menu {
        display: none;
    }
}

.jab-account .mobile-account-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    min-height: 44px;
}

.jab-account .mobile-account-trigger svg {
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
    transition: transform 0.2s;
}

.jab-account .mobile-account-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.jab-account .mobile-account-list {
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.4rem;
    padding: 0.4rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.jab-account .mobile-account-list.is-open {
    display: flex;
}

.jab-account .mobile-account-list a,
.jab-account .mobile-account-list button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    min-height: 44px;
}

.jab-account .mobile-account-list a:hover,
.jab-account .mobile-account-list button:hover {
    background: var(--secondary);
}

.jab-account .mobile-account-list a.is-active {
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
}

.jab-account .mobile-account-list svg {
    width: 1rem;
    height: 1rem;
}

.jab-account .mobile-account-list__divider {
    height: 1px;
    background: var(--border);
    margin: 0.25rem 0.5rem;
}

.jab-account .mobile-account-list__logout {
    color: var(--rose);
}

.jab-account .account-content {
    display: flex;
    flex-direction: column;
    /* gap: 1.25rem; */
    min-width: 0;
}

.jab-account .settings-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
}

@media (min-width: 640px) {
    .jab-account .settings-card {
        padding: 1.5rem;
    }
}

.jab-account .settings-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.jab-account .settings-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: var(--lavender);
    color: var(--lavender-foreground);
    flex-shrink: 0;
}

.jab-account .settings-card__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jab-account .settings-card__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.jab-account .settings-card__sub {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-top: 0.15rem;
    line-height: 1.45;
}

.jab-account .profile-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem;
    margin-bottom: 1.25rem;
    background: var(--muted);
    border-radius: var(--radius-xl);
}

.jab-account .profile-row__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--lavender);
    color: var(--lavender-foreground);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    flex-shrink: 0;
}

.jab-account .profile-row__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.jab-account .profile-row__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.jab-account .profile-row__email {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jab-account .form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.jab-account .field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.jab-account .field label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--foreground);
}

.jab-account .field__input-wrap {
    position: relative;
}

.jab-account .field input {
    width: 100%;
    height: 2.875rem;
    padding: 0 1rem;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
    background: var(--background);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--foreground);
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 44px;
}

.jab-account .field input::placeholder {
    color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}

.jab-account .field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent);
}

.jab-account .field input[aria-invalid="true"] {
    border-color: var(--rose);
}

.jab-account .field input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--rose) 15%, transparent);
}

.jab-account .field__helper {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    line-height: 1.45;
}

.jab-account .field--password input {
    padding-right: 3rem;
}

.jab-account .password-toggle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    transition: color 0.15s, background 0.15s;
}

.jab-account .password-toggle:hover {
    color: var(--foreground);
    background: var(--muted);
}

.jab-account .password-toggle svg {
    width: 1rem;
    height: 1rem;
}

.jab-account .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.jab-account .pref-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--background);
}

.jab-account .pref-row+.pref-row {
    margin-top: 0.65rem;
}

.jab-account .pref-row__check {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--primary);
    cursor: pointer;
}

.jab-account .pref-row__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.jab-account .pref-row__label {
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.jab-account .pref-row__desc {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    line-height: 1.5;
}

.jab-account .pref-lock {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    background: var(--muted);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.jab-account .pref-lock svg {
    width: 0.65rem;
    height: 0.65rem;
}

.jab-account .purchase-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.jab-account .purchase-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-lg);
    background: var(--lavender);
    overflow: hidden;
    flex-shrink: 0;
}

.jab-account .purchase-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.3rem;
}

.jab-account .purchase-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.jab-account .purchase-info__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.jab-account .purchase-info__meta {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.jab-account .security-note {
    display: flex;
    gap: 0.85rem;
    background: color-mix(in oklab, var(--mint) 45%, var(--card));
    border: 1px solid color-mix(in oklab, var(--mint-foreground) 15%, var(--border));
    border-radius: var(--radius-2xl);
    padding: 1.15rem;
}

.jab-account .security-note__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: var(--card);
    color: var(--mint-foreground);
    flex-shrink: 0;
}

.jab-account .security-note__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jab-account .security-note h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mint-foreground);
    margin-bottom: 0.3rem;
}

.jab-account .security-note p {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--mint-foreground);
}

.jab-account .account-mgmt {
    margin-top: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.jab-account .account-mgmt h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted-foreground);
    margin-bottom: 0.35rem;
}

.jab-account .account-mgmt p {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    max-width: 42rem;
    margin-bottom: 1rem;
}

/* WooCommerce layout and form compatibility. */
.jab-account *,
.jab-account *::before,
.jab-account *::after {
    box-sizing: border-box;
}

.jab-account a {
    text-decoration: none;
}

.jab-account button,
.jab-account input {
    font-family: inherit;
}

.jab-account svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.jab-account .container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1rem;
}

.jab-account .page-intro {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

.woocommerce-account .woocommerce .jab-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce .jab-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    min-width: 0;
}

.jab-account .account-nav {
    margin: 0;
}

.jab-account .jab-account__endpoint {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.jab-account .jab-account-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
}

.jab-account .jab-account-name-grid {
    display: grid;
    gap: 1rem;
}

.jab-account .jab-account-password-fields {
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 0;
}

.jab-account .password-input {
    width: 100%;
}

.jab-account .show-password-input {
    display: none !important;
}

.jab-account .jab-account-icon--sky {
    background: var(--sky);
    color: var(--sky-foreground);
}

.jab-account .jab-account-icon--peach {
    background: var(--peach);
    color: var(--peach-foreground);
}

.jab-account .jab-account-icon--mint {
    background: var(--mint);
    color: var(--mint-foreground);
}

.jab-account .purchase-row+.purchase-row {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border);
}

.jab-account .purchase-info__name {
    overflow-wrap: anywhere;
}

.jab-account .required {
    color: #b72c3d;
}

.jab-account #mobileAccountList[hidden] {
    display: none !important;
}

.jab-account .mobile-account-list.is-open {
    display: flex;
}

.jab-account :is(a, button, input):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

@media(min-width:640px) {
    .jab-account .jab-account-name-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(min-width:900px) {
    .jab-account .container {
        padding-inline: 2rem;
    }
}

@media(max-width:639px) {
    .jab-account .purchase-row .btn {
        width: 100%;
    }
}

@media(prefers-reduced-motion:reduce) {
    .jab-account * {
        transition: none !important;
    }
}

/* Native orders, downloads, addresses and payment methods. */
.jab-account .jab-account__endpoint> :is(.woocommerce-orders-table, .woocommerce-table, .woocommerce-Addresses, .woocommerce-MyAccount-downloads, .woocommerce-MyAccount-paymentMethods) {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.jab-account table.shop_table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.jab-account table.shop_table th,
.jab-account table.shop_table td {
    padding: .85rem;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--border);
}

.jab-account table.shop_table a {
    color: var(--primary);
}

.jab-account .woocommerce-Addresses .woocommerce-Address {
    float: none;
    width: auto;
    padding: 1.25rem;
}

.jab-account .woocommerce-Addresses {
    display: grid;
    gap: 1rem;
}

.jab-account .woocommerce-Address address {
    font-style: normal;
    line-height: 1.7;
}

.jab-account .jab-account__endpoint>form:not(.jab-account-form) {
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.jab-account .form-row input.input-text,
.jab-account .form-row select,
.jab-account .form-row textarea {
    width: 100%;
    padding: .75rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--background);
    font: inherit;
}

.jab-account .form-row {
    margin-bottom: 1rem;
}

.jab-account .form-row label {
    display: block;
    margin-bottom: .4rem;
    font-weight: 600;
}

.woocommerce-account .woocommerce .jab-account .button {
    background: var(--primary);
    color: var(--primary-foreground);
    border-radius: 99px;
    padding: .8rem 1.2rem;
    border: 0;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.woocommerce-account .woocommerce .jab-account .button:hover {
    background: var(--primary-hover);
}

@media(min-width:640px) {
    .jab-account .woocommerce-Addresses {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:899px) {
    .jab-account table.shop_table {
        display: block;
        overflow-x: auto;
    }
}

/* Logged-out forms remain native; style only the account page. */
.woocommerce-account .woocommerce form:is(.login, .register, .woocommerce-ResetPassword) {
    padding: 1.5rem;
    border: 1px solid #e5dfd5;
    border-radius: 28px;
    background: #fffdf9;
}

.woocommerce-account .woocommerce form:is(.login, .register, .woocommerce-ResetPassword) input.input-text {
    width: 100%;
    min-height: 46px;
    padding: .75rem 1rem;
    border: 1.5px solid #e5dfd5;
    border-radius: 16px;
    font: inherit;
}

.woocommerce-account .woocommerce form:is(.login, .register, .woocommerce-ResetPassword) .button {
    background: #7050b8;
    color: #fff;
    padding: .8rem 1.25rem;
    border: 0;
    border-radius: 99px;
}

.woocommerce-account .woocommerce form:is(.login, .register, .woocommerce-ResetPassword) .form-row {
    margin-bottom: 1rem;
}

.woocommerce-account .woocommerce form:is(.login, .register, .woocommerce-ResetPassword) label {
    display: block;
    margin-bottom: .4rem;
}

/* End  My Account CSS */

/* My Account Library CSS */
.jab-library *,
.jab-library *::before,
.jab-library *::after {
    box-sizing: border-box;
}

.jab-library h2,
.jab-library p {
    margin: 0;
}

.jab-library a {
    text-decoration: none;
}

.jab-library svg {
    display: block;
    flex-shrink: 0;
}

.jab-library :is(a, button):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.jab-library .library-summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.8rem;
    background: color-mix(in oklab, var(--mint) 30%, var(--card));
    border: 1px solid color-mix(in oklab, var(--mint-foreground) 12%, var(--border));
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    color: var(--mint-foreground);
    margin-bottom: 10px;
}

.jab-library .library-summary svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}

.jab-library .library-summary strong {
    font-weight: 700;
}

.jab-library .library-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.jab-library .library-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 0.18s ease;
    min-height: 64px;
}

.jab-library .library-row:hover {
    border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
    box-shadow: 0 6px 18px -8px rgba(31, 45, 77, 0.1);
    transform: translateY(-1px);
}

.jab-library .library-row__thumb {
    position: relative;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.65rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--sunshine) 55%, transparent) 0%, transparent 55%), linear-gradient(145deg, var(--lavender) 0%, color-mix(in oklab, var(--sky) 40%, var(--lavender)) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.jab-library .library-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.25rem;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15));
}

.jab-library .library-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.jab-library .library-row__title-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.jab-library .library-row__title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .jab-library .library-row__title {
        font-size: 1rem;
    }
}

.jab-library .library-row__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--success) 14%, var(--card));
    color: color-mix(in oklab, var(--success) 80%, black);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    height: 1rem;
}

.jab-library .library-row__badge svg {
    width: 0.6rem;
    height: 0.6rem;
}

.jab-library .library-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.jab-library .library-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--muted);
    border: 1px solid var(--border);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--muted-foreground);
    line-height: 1;
    height: 1.1rem;
    white-space: nowrap;
}

.jab-library .library-chip svg {
    width: 0.65rem;
    height: 0.65rem;
}

.jab-library .library-chip--lang {
    background: color-mix(in oklab, var(--lavender) 45%, var(--card));
    border-color: color-mix(in oklab, var(--lavender-foreground) 15%, var(--border));
    color: var(--lavender-foreground);
}

.jab-library .library-chip--lang svg {
    color: var(--lavender-foreground);
}

.jab-library .library-row__file {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    min-width: 0;
}

.jab-library .library-row__file svg {
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
    color: var(--primary);
}

.jab-library .library-row__file-name {
    font-weight: 600;
    color: color-mix(in oklab, var(--foreground) 70%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jab-library .library-row__file-sep {
    opacity: 0.5;
}

.jab-library .library-row__file-size {
    white-space: nowrap;
}

.jab-library .btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 2.25rem;
    padding: 0 0.9rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.jab-library .btn-download:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--primary) 55%, transparent);
}

.jab-library .btn-download svg {
    width: 0.85rem;
    height: 0.85rem;
}

@media (max-width: 560px) {
    .jab-library .library-row {
        grid-template-columns: auto 1fr;
        grid-template-areas: "thumb main" "actions actions";
        gap: 0.6rem;
        padding: 0.7rem;
    }

    .jab-library .library-row__thumb {
        grid-area: thumb;
    }

    .jab-library .library-row__main {
        grid-area: main;
    }

    .jab-library .library-row__actions {
        grid-area: actions;
    }

    .jab-library .btn-download {
        width: 100%;
    }
}

.jab-library .library-row__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.jab-library .help-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-top: 10px;
}

.jab-library .help-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    background: color-mix(in oklab, var(--sky) 45%, var(--card));
    color: var(--sky-foreground);
}

.jab-library .help-card__icon svg {
    width: 1rem;
    height: 1rem;
}

.jab-library .help-card__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.jab-library .help-card__title {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.jab-library .help-card__desc {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--muted-foreground);
}

.jab-library .help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: var(--muted);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--foreground);
    transition: all 0.18s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.jab-library .help-link:hover {
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
    color: var(--primary);
}

.jab-library .help-link svg {
    width: 0.8rem;
    height: 0.8rem;
}

.jab-library .library-empty {
    display: none;
    padding: 2.5rem 1.25rem;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
}

.jab-library .library-empty.is-visible {
    display: block;
}

.jab-library .library-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
    margin-bottom: 1rem;
}

.jab-library .library-empty__icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.jab-library .library-empty h2 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.jab-library .library-empty p {
    font-size: 0.9375rem;
    color: var(--muted-foreground);
    max-width: 26rem;
    margin: 0 auto 1.25rem;
    line-height: 1.6;
}

.jab-library .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    border: none;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0 1.5rem;
    height: 2.875rem;
    background: var(--primary);
    color: var(--primary-foreground);
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    line-height: 1;
    min-height: 44px;
}

.jab-library .btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--primary) 50%, transparent);
}

.jab-library .btn svg {
    width: 1rem;
    height: 1rem;
}

/* Fit compact rows inside the account content column. */
.jab-library .library-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
}

.jab-library .library-row__file {
    flex-wrap: wrap;
}

.jab-library .library-row__file-name {
    max-width: 100%;
}

.jab-library .library-row__title {
    max-width: 100%;
}

.jab-library .library-chip {
    height: auto;
    min-height: 1.1rem;
    white-space: normal;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.jab-library .library-row__thumb img {
    display: block;
    float: none;
    margin: 0;
}

.jab-library .jab-library__unavailable {
    color: var(--muted-foreground);
    font-size: .75rem;
}

@media(max-width:560px) {
    .jab-library .library-row {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .jab-library .library-row__actions {
        width: 100%;
    }

    .jab-library .help-card {
        flex-wrap: wrap;
    }

    .jab-library .help-card__text {
        flex: 1;
        min-width: 120px;
    }

    .jab-library .help-link {
        margin-left: auto;
    }
}

@media(prefers-reduced-motion:reduce) {
    .jab-library * {
        transition: none !important;
        transform: none !important;
    }
}

/* End My Account Library CSS */

/* My Account Order CSS */


/* =========================================================
       ORDER CARD — overflow fixed so 3-dots menu can escape
       ========================================================= */
.orders-heading {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.85rem !important;
}

.order-summary-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.order-summary-line strong {
    color: var(--foreground);
    font-weight: 700;
}

.order-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    /* IMPORTANT: no overflow: hidden — lets the dropdown escape */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow-xs);
    position: relative;
    z-index: 1;
}

.order-card+.order-card {
    margin-top: 0.6rem;
}

@media (min-width: 640px) {
    .order-card:hover {
        border-color: color-mix(in oklab, var(--primary) 25%, var(--border));
        box-shadow: var(--shadow-sm);
    }
}

/* Elevate the card when its own dropdown is open so the menu
       renders above neighboring cards. */
.order-card.is-menu-open {
    z-index: 40;
    box-shadow: var(--shadow-md);
}

/* Meta strip — rounded top corners since the card no longer clips */
.order-card__meta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    background: color-mix(in oklab, var(--muted) 45%, transparent);
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
}

.order-card__ids {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.order-card__num {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--foreground);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.order-card__num-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.order-card__num-copy:hover {
    background: var(--card);
    color: var(--primary);
}

.order-card__num-copy svg {
    width: 0.65rem;
    height: 0.65rem;
}

.order-card__date {
    font-size: 0.71875rem;
    color: var(--muted-foreground);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.order-card__date svg {
    width: 0.7rem;
    height: 0.7rem;
}

/* Body — rounded bottom corners since the card no longer clips */
.order-card__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.9rem;
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
}

@media (min-width: 640px) {
    .order-card__body {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.1rem;
    }
}

/* Product */
.order-card__product {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
}

.order-card__thumb {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, var(--lavender) 0%, color-mix(in oklab, var(--sky) 40%, var(--lavender)) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px -4px color-mix(in oklab, var(--primary) 35%, transparent);
}

.order-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.25rem;
}

.order-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.order-card__name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.order-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.order-card__meta>span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.order-card__meta>span+span::before {
    content: '·';
    margin: 0 0.35rem;
    opacity: 0.5;
}

.order-card__meta svg {
    width: 0.7rem;
    height: 0.7rem;
    color: var(--primary);
}

.order-card__total {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 0.1rem;
}

.order-card__total-label {
    font-size: 0.65625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
}

.order-card__total-value {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* Actions */
.order-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 639px) {
    .order-card__actions {
        width: 100%;
    }

    .order-card__actions .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (min-width: 640px) {
    .order-card__actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
}

/* =========================================================
       MORE DROPDOWN — 3-dots menu, now escapes the card
       ========================================================= */
.order-more {
    position: relative;
    flex-shrink: 0;
    z-index: 2;
    /* keeps the trigger above the card content */
}

.order-more__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--muted-foreground);
    transition: all 0.2s;
}

.order-more__trigger:hover,
.order-more__trigger[aria-expanded="true"] {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in oklab, var(--primary) 6%, var(--card));
}

.order-more__trigger svg {
    width: 1rem;
    height: 1rem;
}

.order-more__menu {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    min-width: 12.5rem;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 0.3rem;
    box-shadow: var(--shadow-md);
    display: none;
    flex-direction: column;
    gap: 0.05rem;
    z-index: 50;
    /* above card content and neighboring cards */
    animation: fadeDown 0.16s ease;
}

.order-more__menu.is-open {
    display: flex;
}

.order-more__menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--foreground);
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    transition: background 0.15s;
}

.order-more__menu button:hover {
    background: var(--secondary);
}

.order-more__menu svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* ========= STATUS BADGES ========= */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.65625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
}

.status-badge svg {
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
}

.status-badge--paid {
    background: color-mix(in oklab, var(--mint) 55%, var(--card));
    color: var(--mint-foreground);
}

.status-badge--pending {
    background: color-mix(in oklab, var(--sunshine) 60%, var(--card));
    color: var(--sunshine-foreground);
}

.status-badge--failed {
    background: color-mix(in oklab, var(--peach) 55%, var(--card));
    color: var(--peach-foreground);
}

.status-badge--refunded {
    background: color-mix(in oklab, var(--lavender) 60%, var(--card));
    color: var(--lavender-foreground);
}

.status-badge--cancelled {
    background: var(--muted);
    color: var(--muted-foreground);
}

/* ========= EMPTY STATE ========= */
.empty-state {
    text-align: center;
    padding: 2.5rem 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
}

.empty-state__illustration {
    width: 6rem;
    height: 6rem;
    margin: 0 auto 1rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.empty-state__illustration svg {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--foreground);
    opacity: 0.5;
}

.empty-state h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.empty-state p {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    max-width: 24rem;
    margin: 0 auto 1rem;
    line-height: 1.55;
}

/* ========= SUPPORT SHORTCUT ========= */
.support-shortcut {
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    margin-top: 1rem;
}

.support-shortcut__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    background: color-mix(in oklab, var(--sky) 45%, var(--card));
    color: var(--sky-foreground);
    margin: 0 auto 0.6rem;
}

.support-shortcut__icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.support-shortcut h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.support-shortcut p {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    max-width: 28rem;
    margin: 0 auto 0.85rem;
    line-height: 1.5;
}

/* ========= DOWNLOAD STATES ========= */
.download-state {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.download-state--loading {
    background: color-mix(in oklab, var(--sky) 40%, var(--card));
    color: var(--sky-foreground);
}

.download-state--success {
    background: color-mix(in oklab, var(--mint) 45%, var(--card));
    color: var(--mint-foreground);
}

.download-state--error {
    background: color-mix(in oklab, var(--peach) 45%, var(--card));
    color: var(--peach-foreground);
}

.download-state svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}

.download-state__spinner {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========= FOOTER ========= */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--card);
    margin-top: auto;
    padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 640px) {
    .footer-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-inner p {
    font-size: 0.71875rem;
    color: var(--muted-foreground);
}

.footer-inner nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    justify-content: center;
}

.footer-inner nav a {
    font-size: 0.71875rem;
    color: var(--muted-foreground);
    font-weight: 600;
}

.footer-inner nav a:hover {
    color: var(--foreground);
}

/* ========= TOAST ========= */
#toast-host {
    position: fixed;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 2rem);
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--foreground);
    color: var(--background);
    font-size: 0.78125rem;
    font-weight: 600;
    padding: 0.6rem 0.95rem;
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.toast svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--success);
    flex-shrink: 0;
}

.toast.is-leaving {
    opacity: 0;
    transform: translateY(5px);
}

/* =========================================================
       VIEW ORDER MODAL
       ========================================================= */
.view-order-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(24, 20, 40, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.view-order-overlay.is-open {
    display: flex;
    opacity: 1;
}

.view-order {
    position: relative;
    width: 100%;
    max-width: 660px;
    max-height: min(92dvh, 800px);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform: translateY(10px) scale(0.98);
    opacity: 0;
    -webkit-overflow-scrolling: touch;
}

.view-order-overlay.is-open .view-order {
    transform: translateY(0) scale(1);
    opacity: 1;
}

@keyframes modalIn {
    from {
        transform: translateY(12px) scale(0.97);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.view-order__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: color-mix(in oklab, var(--card) 96%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
}

.view-order__heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.view-order__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    background: color-mix(in oklab, var(--lavender) 55%, var(--card));
    color: var(--lavender-foreground);
}

.view-order__icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.view-order__title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.view-order__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.2;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.view-order__title-id {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

.view-order__meta-line {
    font-size: 0.71875rem;
    color: var(--muted-foreground);
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.view-order__meta-line svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--primary);
}

.view-order__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--muted);
    border: none;
    color: var(--foreground);
    transition: background 0.15s, color 0.15s;
}

.view-order__close:hover {
    background: color-mix(in oklab, var(--rose) 12%, var(--card));
    color: var(--rose);
}

.view-order__close svg {
    width: 1rem;
    height: 1rem;
}

.view-order__body {
    padding: 0.9rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.vo-section-title {
    font-size: 0.65625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.vo-section-title svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--primary);
    flex-shrink: 0;
}

/* Status banner */
.vo-status {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--mint) 40%, var(--card));
    border: 1px solid color-mix(in oklab, var(--mint-foreground) 15%, transparent);
}

.vo-status__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--mint);
    color: var(--mint-foreground);
}

.vo-status__icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.vo-status__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vo-status__title {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mint-foreground);
    line-height: 1.25;
}

.vo-status__desc {
    font-size: 0.71875rem;
    color: color-mix(in oklab, var(--mint-foreground) 85%, transparent);
    margin-top: 0.05rem;
    line-height: 1.4;
}

.vo-status--pending {
    background: color-mix(in oklab, var(--sunshine) 42%, var(--card));
    border-color: color-mix(in oklab, var(--sunshine-foreground) 15%, transparent);
}

.vo-status--pending .vo-status__icon {
    background: var(--sunshine);
    color: var(--sunshine-foreground);
}

.vo-status--pending .vo-status__title {
    color: var(--sunshine-foreground);
}

.vo-status--pending .vo-status__desc {
    color: color-mix(in oklab, var(--sunshine-foreground) 85%, transparent);
}

.vo-status--failed {
    background: color-mix(in oklab, var(--peach) 42%, var(--card));
    border-color: color-mix(in oklab, var(--peach-foreground) 15%, transparent);
}

.vo-status--failed .vo-status__icon {
    background: var(--peach);
    color: var(--peach-foreground);
}

.vo-status--failed .vo-status__title {
    color: var(--peach-foreground);
}

.vo-status--failed .vo-status__desc {
    color: color-mix(in oklab, var(--peach-foreground) 85%, transparent);
}

.vo-status--refunded {
    background: color-mix(in oklab, var(--lavender) 42%, var(--card));
    border-color: color-mix(in oklab, var(--lavender-foreground) 15%, transparent);
}

.vo-status--refunded .vo-status__icon {
    background: var(--lavender);
    color: var(--lavender-foreground);
}

.vo-status--refunded .vo-status__title {
    color: var(--lavender-foreground);
}

.vo-status--refunded .vo-status__desc {
    color: color-mix(in oklab, var(--lavender-foreground) 85%, transparent);
}

/* Line items */
.vo-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vo-item {
    display: grid;
    grid-template-columns: 3.25rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-md);
    background: var(--background);
    border: 1px solid var(--border);
}

.vo-item__thumb {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, var(--lavender) 0%, color-mix(in oklab, var(--sky) 40%, var(--lavender)) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vo-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.25rem;
}

.vo-item__info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.vo-item__name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vo-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.vo-item__meta>span {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.vo-item__meta>span+span::before {
    content: '·';
    margin: 0 0.3rem;
    opacity: 0.5;
}

.vo-item__meta svg {
    width: 0.65rem;
    height: 0.65rem;
    color: var(--primary);
}

.vo-item__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    text-align: right;
}

.vo-item__qty {
    font-size: 0.65625rem;
    font-weight: 700;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vo-item__price {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
}

/* Summary */
.vo-summary {
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--muted) 55%, var(--card));
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vo-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.78125rem;
}

.vo-summary__row-label {
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.vo-summary__row-label svg {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--success);
}

.vo-summary__row-value {
    font-weight: 700;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
}

.vo-summary__row--discount .vo-summary__row-label {
    color: var(--success);
}

.vo-summary__row--discount .vo-summary__row-value {
    color: var(--success);
}

.vo-summary__divider {
    height: 1px;
    background: var(--border);
    margin: 0.1rem 0;
}

.vo-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.vo-summary__total-label {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.vo-summary__total-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -0.01em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Info grid */
.vo-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

@media (min-width: 560px) {
    .vo-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.vo-info-card {
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    background: var(--background);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.vo-info-card__label {
    font-size: 0.65625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.vo-info-card__label svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--primary);
    flex-shrink: 0;
}

.vo-info-card__body {
    font-size: 0.78125rem;
    line-height: 1.5;
    color: color-mix(in oklab, var(--foreground) 88%, transparent);
    word-break: break-word;
}

.vo-info-card__body strong {
    display: block;
    font-weight: 700;
    color: var(--foreground);
    font-size: 0.8125rem;
    margin-bottom: 0.1rem;
}

.vo-info-card__body span {
    display: block;
}

.vo-info-card__body .muted {
    color: var(--muted-foreground);
    font-size: 0.71875rem;
}

/* Timeline */
.vo-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 0.1rem;
}

.vo-timeline__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: flex-start;
    position: relative;
}

.vo-timeline__dot {
    position: relative;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    background: var(--muted);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
    z-index: 1;
}

.vo-timeline__item.is-done .vo-timeline__dot {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.vo-timeline__item.is-done .vo-timeline__dot svg {
    width: 0.6rem;
    height: 0.6rem;
}

.vo-timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 0.475rem;
    top: 1.2rem;
    bottom: -0.55rem;
    width: 2px;
    background: var(--border);
}

.vo-timeline__item.is-done:not(:last-child)::before {
    background: var(--success);
}

.vo-timeline__text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding-bottom: 0.1rem;
}

.vo-timeline__title {
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--foreground);
}

.vo-timeline__time {
    font-size: 0.65625rem;
    color: var(--muted-foreground);
}

/* Footer */
.view-order__foot {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.45rem;
    padding: 0.75rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: color-mix(in oklab, var(--card) 96%, transparent);
    position: sticky;
    bottom: 0;
    border-bottom-left-radius: var(--radius-2xl);
    border-bottom-right-radius: var(--radius-2xl);
    z-index: 2;
}

@media (min-width: 560px) {
    .view-order__foot {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.view-order__foot-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.45rem;
    width: 100%;
}

@media (min-width: 560px) {
    .view-order__foot-actions {
        flex-direction: row;
        width: auto;
        align-items: center;
    }
}

.btn-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 2.5rem;
    padding: 0 1.1rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s ease;
    min-height: 40px;
    border: none;
    width: 100%;
}

@media (min-width: 560px) {
    .btn-modal {
        width: auto;
    }
}

.btn-modal svg {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
}

.btn-modal--ghost {
    background: transparent;
    color: var(--foreground);
    border: 1.5px solid var(--border);
}

.btn-modal--ghost:hover {
    background: var(--muted);
    border-color: color-mix(in oklab, var(--foreground) 18%, var(--border));
}

.btn-modal--primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.btn-modal--primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--primary) 55%, transparent);
}

/* ========= MODAL MOBILE (bottom sheet) ========= */
@media (max-width: 640px) {
    .view-order-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .view-order {
        max-width: 100%;
        max-height: 92dvh;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        animation: sheetIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .view-order__head {
        border-top-left-radius: var(--radius-2xl);
        border-top-right-radius: var(--radius-2xl);
    }

    .view-order__head::before {
        content: '';
        position: absolute;
        top: 0.4rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.25rem;
        height: 0.25rem;
        border-radius: 999px;
        background: var(--border);
    }

    .view-order__foot {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

@keyframes sheetIn {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Small screens */
@media (max-width: 400px) {
    .vo-item {
        grid-template-columns: 2.75rem 1fr auto;
        gap: 0.6rem;
        padding: 0.6rem 0.7rem;
    }

    .vo-item__thumb {
        width: 2.75rem;
        height: 2.75rem;
    }

    .vo-item__name {
        font-size: 0.8125rem;
    }

    .vo-item__price {
        font-size: 0.875rem;
    }

    .vo-summary__total-value {
        font-size: 1.125rem;
    }

    .view-order__body {
        padding: 0.8rem 0.9rem 1rem;
    }

    .view-order__head {
        padding: 0.8rem 0.9rem 0.7rem;
    }

    .view-order__foot {
        padding: 0.7rem 0.9rem calc(0.85rem + env(safe-area-inset-bottom));
    }
}

/* POPUP CSS */
#jabOrderModal {
    --background: oklch(0.975 0.014 75);
    --foreground: oklch(0.28 0.045 268);
    --card: oklch(0.995 0.006 75);
    --primary: oklch(0.52 0.15 291);
    --primary-hover: oklch(0.46 0.16 291);
    --primary-foreground: oklch(0.99 0.005 75);
    --secondary: oklch(0.93 0.03 288);
    --muted: oklch(0.955 0.014 75);
    --muted-foreground: oklch(0.48 0.03 265);
    --border: oklch(0.9 0.015 80);
    --border-soft: oklch(0.945 0.012 80);
    --radius: 1.15rem;
    --radius-sm: calc(var(--radius) * 0.6);
    --radius-md: calc(var(--radius) * 0.75);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) * 1.3);
    --radius-2xl: calc(var(--radius) * 1.6);
    --radius-3xl: calc(var(--radius) * 2);
    --lavender: oklch(0.88 0.06 291);
    --lavender-foreground: oklch(0.32 0.08 291);
    --sky: oklch(0.86 0.06 232);
    --sky-foreground: oklch(0.3 0.07 232);
    --mint: oklch(0.86 0.08 166);
    --mint-foreground: oklch(0.3 0.07 166);
    --peach: oklch(0.87 0.08 45);
    --peach-foreground: oklch(0.35 0.09 40);
    --sunshine: oklch(0.88 0.1 92);
    --sunshine-foreground: oklch(0.38 0.08 80);
    --navy: oklch(0.24 0.06 275);
    --success: oklch(0.65 0.15 155);
    --rose: oklch(0.72 0.14 15);
    --font-sans: "Plus Jakarta Sans", "Noto Sans", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Fredoka", ui-rounded, sans-serif;
    --font-hindi: "Noto Sans Devanagari", "Noto Sans", sans-serif;
    --font-gujarati: "Noto Sans Gujarati", "Noto Sans", sans-serif;
    --container-max: 1200px;
    --shadow-xs: 0 1px 2px rgba(31, 45, 77, 0.03);
    --shadow-sm: 0 2px 8px -4px rgba(31, 45, 77, 0.06);
    --shadow-md: 0 10px 24px -12px rgba(31, 45, 77, 0.14);
    --shadow-lg: 0 24px 48px -16px rgba(31, 45, 77, 0.22);
}

#jabOrderModal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(24, 20, 40, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

#jabOrderModal.is-open {
    display: flex;
    opacity: 1;
}

#jabOrderModal .view-order {
    position: relative;
    width: 100%;
    max-width: 660px;
    max-height: min(92dvh, 800px);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    animation: jabOrderModalIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform: translateY(10px) scale(0.98);
    opacity: 0;
    -webkit-overflow-scrolling: touch;
}

#jabOrderModal.is-open .view-order {
    transform: translateY(0) scale(1);
    opacity: 1;
}

@keyframes jabOrderModalIn {
    from {
        transform: translateY(12px) scale(0.97);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

#jabOrderModal .view-order__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: color-mix(in oklab, var(--card) 96%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
}

#jabOrderModal .view-order__heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

#jabOrderModal .view-order__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    background: color-mix(in oklab, var(--lavender) 55%, var(--card));
    color: var(--lavender-foreground);
}

#jabOrderModal .view-order__icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

#jabOrderModal .view-order__title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#jabOrderModal .view-order__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.2;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

#jabOrderModal .view-order__title-id {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

#jabOrderModal .view-order__meta-line {
    font-size: 0.71875rem;
    color: var(--muted-foreground);
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

#jabOrderModal .view-order__meta-line svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--primary);
}

#jabOrderModal .view-order__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--muted);
    border: none;
    color: var(--foreground);
    transition: background 0.15s, color 0.15s;
}

#jabOrderModal .view-order__close:hover {
    background: color-mix(in oklab, var(--rose) 12%, var(--card));
    color: var(--rose);
}

#jabOrderModal .view-order__close svg {
    width: 1rem;
    height: 1rem;
}

#jabOrderModal .view-order__body {
    padding: 0.9rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

#jabOrderModal .vo-section-title {
    font-size: 0.65625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

#jabOrderModal .vo-section-title svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--primary);
    flex-shrink: 0;
}

#jabOrderModal .vo-status {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--mint) 40%, var(--card));
    border: 1px solid color-mix(in oklab, var(--mint-foreground) 15%, transparent);
}

#jabOrderModal .vo-status__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--mint);
    color: var(--mint-foreground);
}

#jabOrderModal .vo-status__icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

#jabOrderModal .vo-status__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#jabOrderModal .vo-status__title {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mint-foreground);
    line-height: 1.25;
}

#jabOrderModal .vo-status__desc {
    font-size: 0.71875rem;
    color: color-mix(in oklab, var(--mint-foreground) 85%, transparent);
    margin-top: 0.05rem;
    line-height: 1.4;
}

#jabOrderModal .vo-status--pending {
    background: color-mix(in oklab, var(--sunshine) 42%, var(--card));
    border-color: color-mix(in oklab, var(--sunshine-foreground) 15%, transparent);
}

#jabOrderModal .vo-status--pending .vo-status__icon {
    background: var(--sunshine);
    color: var(--sunshine-foreground);
}

#jabOrderModal .vo-status--pending .vo-status__title {
    color: var(--sunshine-foreground);
}

#jabOrderModal .vo-status--pending .vo-status__desc {
    color: color-mix(in oklab, var(--sunshine-foreground) 85%, transparent);
}

#jabOrderModal .vo-status--failed {
    background: color-mix(in oklab, var(--peach) 42%, var(--card));
    border-color: color-mix(in oklab, var(--peach-foreground) 15%, transparent);
}

#jabOrderModal .vo-status--failed .vo-status__icon {
    background: var(--peach);
    color: var(--peach-foreground);
}

#jabOrderModal .vo-status--failed .vo-status__title {
    color: var(--peach-foreground);
}

#jabOrderModal .vo-status--failed .vo-status__desc {
    color: color-mix(in oklab, var(--peach-foreground) 85%, transparent);
}

#jabOrderModal .vo-status--refunded {
    background: color-mix(in oklab, var(--lavender) 42%, var(--card));
    border-color: color-mix(in oklab, var(--lavender-foreground) 15%, transparent);
}

#jabOrderModal .vo-status--refunded .vo-status__icon {
    background: var(--lavender);
    color: var(--lavender-foreground);
}

#jabOrderModal .vo-status--refunded .vo-status__title {
    color: var(--lavender-foreground);
}

#jabOrderModal .vo-status--refunded .vo-status__desc {
    color: color-mix(in oklab, var(--lavender-foreground) 85%, transparent);
}

#jabOrderModal .vo-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#jabOrderModal .vo-item {
    display: grid;
    grid-template-columns: 3.25rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-md);
    background: var(--background);
    border: 1px solid var(--border);
}

#jabOrderModal .vo-item__thumb {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, var(--lavender) 0%, color-mix(in oklab, var(--sky) 40%, var(--lavender)) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#jabOrderModal .vo-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.25rem;
}

#jabOrderModal .vo-item__info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

#jabOrderModal .vo-item__name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#jabOrderModal .vo-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

#jabOrderModal .vo-item__meta>span {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

#jabOrderModal .vo-item__meta>span+span::before {
    content: "·";
    margin: 0 0.3rem;
    opacity: 0.5;
}

#jabOrderModal .vo-item__meta svg {
    width: 0.65rem;
    height: 0.65rem;
    color: var(--primary);
}

#jabOrderModal .vo-item__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    text-align: right;
}

#jabOrderModal .vo-item__qty {
    font-size: 0.65625rem;
    font-weight: 700;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#jabOrderModal .vo-item__price {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
}

#jabOrderModal .vo-summary {
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--muted) 55%, var(--card));
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

#jabOrderModal .vo-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.78125rem;
}

#jabOrderModal .vo-summary__row-label {
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

#jabOrderModal .vo-summary__row-label svg {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--success);
}

#jabOrderModal .vo-summary__row-value {
    font-weight: 700;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
}

#jabOrderModal .vo-summary__row--discount .vo-summary__row-label {
    color: var(--success);
}

#jabOrderModal .vo-summary__row--discount .vo-summary__row-value {
    color: var(--success);
}

#jabOrderModal .vo-summary__divider {
    height: 1px;
    background: var(--border);
    margin: 0.1rem 0;
}

#jabOrderModal .vo-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

#jabOrderModal .vo-summary__total-label {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

#jabOrderModal .vo-summary__total-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -0.01em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#jabOrderModal .vo-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

@media (min-width: 560px) {
    #jabOrderModal .vo-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

#jabOrderModal .vo-info-card {
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    background: var(--background);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

#jabOrderModal .vo-info-card__label {
    font-size: 0.65625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

#jabOrderModal .vo-info-card__label svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--primary);
    flex-shrink: 0;
}

#jabOrderModal .vo-info-card__body {
    font-size: 0.78125rem;
    line-height: 1.5;
    color: color-mix(in oklab, var(--foreground) 88%, transparent);
    word-break: break-word;
}

#jabOrderModal .vo-info-card__body strong {
    display: block;
    font-weight: 700;
    color: var(--foreground);
    font-size: 0.8125rem;
    margin-bottom: 0.1rem;
}

#jabOrderModal .vo-info-card__body span {
    display: block;
}

#jabOrderModal .vo-info-card__body .muted {
    color: var(--muted-foreground);
    font-size: 0.71875rem;
}

#jabOrderModal .vo-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 0.1rem;
}

#jabOrderModal .vo-timeline__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: flex-start;
    position: relative;
}

#jabOrderModal .vo-timeline__dot {
    position: relative;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    background: var(--muted);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
    z-index: 1;
}

#jabOrderModal .vo-timeline__item.is-done .vo-timeline__dot {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

#jabOrderModal .vo-timeline__item.is-done .vo-timeline__dot svg {
    width: 0.6rem;
    height: 0.6rem;
}

#jabOrderModal .vo-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.475rem;
    top: 1.2rem;
    bottom: -0.55rem;
    width: 2px;
    background: var(--border);
}

#jabOrderModal .vo-timeline__item.is-done:not(:last-child)::before {
    background: var(--success);
}

#jabOrderModal .vo-timeline__text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding-bottom: 0.1rem;
}

#jabOrderModal .vo-timeline__title {
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--foreground);
}

#jabOrderModal .vo-timeline__time {
    font-size: 0.65625rem;
    color: var(--muted-foreground);
}

#jabOrderModal .view-order__foot {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.45rem;
    padding: 0.75rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: color-mix(in oklab, var(--card) 96%, transparent);
    position: sticky;
    bottom: 0;
    border-bottom-left-radius: var(--radius-2xl);
    border-bottom-right-radius: var(--radius-2xl);
    z-index: 2;
}

@media (min-width: 560px) {
    #jabOrderModal .view-order__foot {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

#jabOrderModal .view-order__foot-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.45rem;
    width: 100%;
}

@media (min-width: 560px) {
    #jabOrderModal .view-order__foot-actions {
        flex-direction: row;
        width: auto;
        align-items: center;
    }
}

#jabOrderModal .btn-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 2.5rem;
    padding: 0 1.1rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s ease;
    min-height: 40px;
    border: none;
    width: 100%;
}

@media (min-width: 560px) {
    #jabOrderModal .btn-modal {
        width: auto;
    }
}

#jabOrderModal .btn-modal svg {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
}

#jabOrderModal .btn-modal--ghost {
    background: transparent;
    color: var(--foreground);
    border: 1.5px solid var(--border);
}

#jabOrderModal .btn-modal--ghost:hover {
    background: var(--muted);
    border-color: color-mix(in oklab, var(--foreground) 18%, var(--border));
}

#jabOrderModal .btn-modal--primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

#jabOrderModal .btn-modal--primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--primary) 55%, transparent);
}

@media (max-width: 640px) {
    #jabOrderModal {
        padding: 0;
        align-items: flex-end;
    }

    #jabOrderModal .view-order {
        max-width: 100%;
        max-height: 92dvh;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        animation: jabOrderSheetIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    #jabOrderModal .view-order__head {
        border-top-left-radius: var(--radius-2xl);
        border-top-right-radius: var(--radius-2xl);
    }

    #jabOrderModal .view-order__head::before {
        content: "";
        position: absolute;
        top: 0.4rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.25rem;
        height: 0.25rem;
        border-radius: 999px;
        background: var(--border);
    }

    #jabOrderModal .view-order__foot {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

@keyframes jabOrderSheetIn {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 400px) {
    #jabOrderModal .vo-item {
        grid-template-columns: 2.75rem 1fr auto;
        gap: 0.6rem;
        padding: 0.6rem 0.7rem;
    }

    #jabOrderModal .vo-item__thumb {
        width: 2.75rem;
        height: 2.75rem;
    }

    #jabOrderModal .vo-item__name {
        font-size: 0.8125rem;
    }

    #jabOrderModal .vo-item__price {
        font-size: 0.875rem;
    }

    #jabOrderModal .vo-summary__total-value {
        font-size: 1.125rem;
    }

    #jabOrderModal .view-order__body {
        padding: 0.8rem 0.9rem 1rem;
    }

    #jabOrderModal .view-order__head {
        padding: 0.8rem 0.9rem 0.7rem;
    }

    #jabOrderModal .view-order__foot {
        padding: 0.7rem 0.9rem calc(0.85rem + env(safe-area-inset-bottom));
    }
}

#jabOrderModal {
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    z-index: 100000;
}

#jabOrderModal[hidden] {
    display: none !important
}

#jabOrderModal *,
#jabOrderModal *::before,
#jabOrderModal *::after {
    box-sizing: border-box
}

#jabOrderModal svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0
}

#jabOrderModal button,
#jabOrderModal summary {
    cursor: pointer
}

#jabOrderModal a {
    text-decoration: none
}

#jabOrderModal .vo-status {
    display: flex;
    gap: 12px;
    align-items: center
}

#jabOrderModal .vo-status p {
    margin: 4px 0 0
}

#jabOrderModal .vo-item__meta p {
    display: inline;
    margin: 0
}

#jabOrderModal .vo-summary__total {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    font-weight: 700
}

#jabOrderModal .vo-info-card__body {
    overflow-wrap: anywhere
}

#jabOrderModal .vo-info-card__body span {
    display: block
}

#jabOrderModal .vo-timeline__text strong,
#jabOrderModal .vo-timeline__text time {
    display: block
}

#jabOrderModal .vo-timeline__text time {
    font-size: 12px;
    color: var(--muted-foreground)
}

#jabOrderModal .vo-downloads {
    position: relative
}

#jabOrderModal .vo-downloads__list {
    position: absolute;
    bottom: 100%;
    right: 0;
    min-width: 220px;
    max-height: 200px;
    overflow: auto;
    padding: 12px;
    background: var(--card);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    border-radius: 12px
}

#jabOrderModal .vo-downloads__list a {
    display: block;
    padding: 8px;
    color: var(--foreground)
}

#jabOrderModal :focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px
}

body.jab-order-modal-open {
    overflow: hidden
}

.jab-orders .order-more {
    position: relative
}

.jab-orders [data-more-menu][hidden] {
    display: none !important
}

.jab-orders [data-more-menu].is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 210px;
    padding: 8px;
    background: #fffdf9;
    border: 1px solid #e5dfeb;
    border-radius: 14px;
    box-shadow: 0 12px 30px #24203426;
    z-index: 30
}

.jab-orders [data-more-menu] a,
.jab-orders [data-more-menu] button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    font: inherit;
    text-align: left;
    cursor: pointer
}

.jab-orders [data-more-menu] svg {
    width: 18px;
    height: 18px
}

.jab-orders .order-card,
.jab-orders .order-card__body {
    overflow: visible
}

.jab-orders .order-card.is-menu-open {
    position: relative;
    z-index: 31
}

.jab-orders .order-card__message {
    padding: 0 16px 12px;
    font-size: 13px;
    overflow-wrap: anywhere
}

.jab-orders .order-card__message.is-error {
    color: #a32525
}

@media(prefers-reduced-motion:reduce) {

    #jabOrderModal *,
    #jabOrderModal *::before,
    #jabOrderModal *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1
    }
}

.account-menu.is-open {
    display: flex;
}

.account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.55rem 0.3rem 0.3rem;
    border-radius: 999px;
    background: var(--card);
    border: 1.5px solid var(--border);
    font-size: 0.78125rem;
    font-weight: 600;
    transition: all 0.2s ease;
    min-height: 40px;
}

.account-trigger:hover {
    border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
}

.account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--lavender);
    color: var(--lavender-foreground);
    font-family: var(--font-display);
    font-size: 0.65625rem;
    font-weight: 700;
    flex-shrink: 0;
}

.account-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    width: 13rem;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 0.35rem;
    box-shadow: var(--shadow-md);
    display: none;
    flex-direction: column;
    gap: 0.05rem;
    z-index: 60;
    animation: fadeDown 0.16s ease;
}

.account-menu a,
.account-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.65rem;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--foreground);
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    transition: background 0.15s;
    min-height: 38px;
}

.account-menu a.is-active {
    background:
        color-mix(in oklab, var(--primary) 10%, var(--card));
    color: var(--primary);
}

/* End POPUP CSS */
/* End My Account Order CSS */

/* My Account Address CSS */
.account-content {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.content-lead {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.55;
    margin-bottom: 10px !important;
}

/* ============ ADDRESSES PANEL ============ */
.addresses-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: 0 4px 16px -8px rgba(31, 45, 77, 0.06);
    overflow: hidden;
}

.addresses-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 640px) {
    .addresses-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
}

.address-block {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

@media (min-width: 640px) {
    .address-block+.address-block {
        border-left: 1px solid var(--border);
    }
}

@media (max-width: 639px) {
    .address-block+.address-block {
        border-top: 1px solid var(--border);
    }
}

.address-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.address-block__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: -0.01em;
}

.address-block__edit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 8%, var(--card));
    border: 1px solid color-mix(in oklab, var(--primary) 18%, transparent);
    transition: all 0.18s ease;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}

.address-block__edit:hover {
    background: color-mix(in oklab, var(--primary) 14%, var(--card));
    border-color: color-mix(in oklab, var(--primary) 35%, transparent);
}

.address-block__edit svg {
    width: 0.8rem;
    height: 0.8rem;
}

.address-lines {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: color-mix(in oklab, var(--foreground) 88%, transparent);
}

.address-lines strong {
    font-weight: 700;
    color: var(--foreground);
    font-size: 0.9375rem;
}

.address-lines span {
    display: block;
}

/* ============ HELP CARD ============ */
.help-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-top: 10px;
}

.help-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    background: color-mix(in oklab, var(--sky) 45%, var(--card));
    color: var(--sky-foreground);
}

.help-card__icon svg {
    width: 1rem;
    height: 1rem;
}

.help-card__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.help-card__title {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.help-card__desc {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--muted-foreground);
}

.help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: var(--muted);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--foreground);
    transition: all 0.18s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.help-link:hover {
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
    color: var(--primary);
}

.help-link svg {
    width: 0.8rem;
    height: 0.8rem;
}

/* ============ FOOTER ============ */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--card);
    margin-top: auto;
    padding: 1.1rem 0;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 640px) {
    .footer-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-inner p {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.footer-inner nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    justify-content: center;
}

.footer-inner nav a {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-weight: 600;
}

.footer-inner nav a:hover {
    color: var(--foreground);
}

/* ============ TOAST ============ */
#toast-host {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--foreground);
    color: var(--background);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: 90vw;
}

.toast svg {
    width: 1rem;
    height: 1rem;
    color: var(--success);
    flex-shrink: 0;
}

.toast.is-leaving {
    opacity: 0;
    transform: translateY(6px);
}

/* =========================================================
       EDIT ADDRESS MODAL
       ========================================================= */
.edit-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(24, 20, 40, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.edit-modal-overlay.is-open {
    display: flex;
    opacity: 1;
}

.edit-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow:
        0 30px 70px -20px rgba(31, 45, 77, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    transform: translateY(8px) scale(0.985);
    opacity: 0;
    animation: modalIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.edit-modal-overlay.is-open .edit-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

@keyframes modalIn {
    from {
        transform: translateY(12px) scale(0.97);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.edit-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: color-mix(in oklab, var(--card) 96%, transparent);
    backdrop-filter: blur(8px);
    z-index: 2;
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
}

.edit-modal__heading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.edit-modal__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    background: color-mix(in oklab, var(--lavender) 55%, var(--card));
    color: var(--lavender-foreground);
}

.edit-modal__icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.edit-modal__title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.edit-modal__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.edit-modal__subtitle {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.1rem;
}

.edit-modal__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--muted);
    border: none;
    color: var(--foreground);
    transition: background 0.15s, color 0.15s;
}

.edit-modal__close:hover {
    background: color-mix(in oklab, var(--rose) 12%, var(--card));
    color: var(--rose);
}

.edit-modal__close svg {
    width: 1rem;
    height: 1rem;
}

.edit-modal__body {
    padding: 1.1rem 1.25rem 0.5rem;
}

.edit-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 520px) {
    .edit-form {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem 0.85rem;
    }

    .edit-form .field--full {
        grid-column: 1 / -1;
    }
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.field label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: 0.01em;
}

.field label .req {
    color: var(--rose);
    margin-left: 0.1rem;
}

.field input,
.field select {
    width: 100%;
    height: 2.75rem;
    padding: 0 0.85rem;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a7a8c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.25rem;
}

.field input::placeholder {
    color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}

.field input:hover,
.field select:hover {
    border-color: color-mix(in oklab, var(--foreground) 18%, var(--border));
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
    background: var(--card);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--rose) 15%, transparent);
}

.field__error {
    display: none;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--rose) 85%, black);
    margin-top: 0.05rem;
}

.field.has-error .field__error {
    display: flex;
}

.field__error svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.edit-modal__toggle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    margin-top: 0.15rem;
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--primary) 6%, var(--card));
    border: 1px solid color-mix(in oklab, var(--primary) 15%, var(--border));
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.edit-modal__toggle:hover {
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    border-color: color-mix(in oklab, var(--primary) 25%, var(--border));
}

.edit-modal__toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-switch {
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.35rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--muted-foreground) 40%, var(--muted));
    transition: background 0.2s ease;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 0.175rem;
    left: 0.175rem;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.edit-modal__toggle input:checked+.toggle-switch {
    background: var(--primary);
}

.edit-modal__toggle input:checked+.toggle-switch::after {
    transform: translateX(0.9rem);
}

.edit-modal__toggle-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.edit-modal__toggle-text strong {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--foreground);
}

.edit-modal__toggle-text span {
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    margin-top: 0.05rem;
}

.edit-modal__foot {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem 1.15rem;
    border-top: 1px solid var(--border);
    background: color-mix(in oklab, var(--card) 96%, transparent);
    position: sticky;
    bottom: 0;
    border-bottom-left-radius: var(--radius-2xl);
    border-bottom-right-radius: var(--radius-2xl);
}

@media (min-width: 480px) {
    .edit-modal__foot {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
}

.btn-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 2.75rem;
    padding: 0 1.35rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s ease;
    min-height: 44px;
    border: none;
    width: 100%;
}

@media (min-width: 480px) {
    .btn-modal {
        width: auto;
    }
}

.btn-modal svg {
    width: 0.9rem;
    height: 0.9rem;
}

.btn-modal--ghost {
    background: transparent;
    color: var(--foreground);
    border: 1.5px solid var(--border);
}

.btn-modal--ghost:hover {
    background: var(--muted);
    border-color: color-mix(in oklab, var(--foreground) 18%, var(--border));
}

.btn-modal--primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.btn-modal--primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px color-mix(in oklab, var(--primary) 55%, transparent);
}

.btn-modal--primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-modal__spinner {
    width: 0.95rem;
    height: 0.95rem;
    border: 2.4px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: modalSpin 0.7s linear infinite;
    display: none;
}

.btn-modal--primary.is-loading .btn-modal__spinner {
    display: block;
}

.btn-modal--primary.is-loading .btn-modal__icon {
    display: none;
}

@keyframes modalSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 420px) {
    .edit-modal {
        border-radius: var(--radius-xl);
        max-height: 94vh;
    }

    .edit-modal__head {
        padding: 0.9rem 1rem 0.75rem;
    }

    .edit-modal__body {
        padding: 0.9rem 1rem 0.4rem;
    }

    .edit-modal__foot {
        padding: 0.8rem 1rem 1rem;
    }

    .edit-modal__title {
        font-size: 1rem;
    }
}

.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
    width: 100% !important;
}

/* End My Account Address CSS */